Simplicity の AMP でウィジェットを使う方法

エラーを出さずSimplicityのAMPページでウィジェットを使用

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

Simplicity では、 AMP ページでウィジェットが使えません。

理由は、初心者の方も AMP エラーを出さないようにするため。だからこそ Simplicity ユーザーは、安心して AMP に対応できます。

でも、新着記事や人気記事などのウィジェットを使いたいとお考えの方もいらっしゃるでしょう。

そこで AMP エラーを出さず、 Simplicity の AMP ページでウィジェットを使えるようにするカスタマイズをご紹介します。

ウィジェット領域を作成

AMP でも、 Simplicity デフォルトのウィジェット領域を使えます。

ただ、AMP 専用のウィジェット領域があると便利です。

まずは子テーマの function.php に以下のコードを追加し、 AMP 専用のウィジェット領域を作成します。

register_sidebars( 1, array(
    'name'          => 'AMP専用',
    'id'            => 'amp-only-widget',
    'description'   => 'AMP専用のウイジェットエリア。',
    'before_widget' => '<aside id="%1$s" class="amp-only-widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<div class="amp-only-widget-title main-widget-label">',
    'after_title'   => '</div>',
));

どのウィジェットを使い、何を設置されるのか分からないため、ウィジェット領域全体を <aside> で囲んでいます。

AMP 用にウィジェットを変換

次にするのは、ウィジェットの AMP 対応です。

以下のコードを子テーマの function.php に追加します。

function dynamic_sidebar_convert_to_amp( $name ) {
    ob_start();
    dynamic_sidebar( $name );
    
    $contents = ob_get_clean();
    $contents = convert_content_for_amp( $contents );
    
    return $contents;
}

ウィジェット領域を AMP で呼び出すための dynamic_sidebar_convert_to_amp 関数を作成しています。

これで Simplicity が対応している範囲内で、ウィジェットを AMP に対応できます。

任意の場所にウィジェット領域を設置

作成した関数を使い、ウィジェット領域を呼び出します。

ウィジェットを表示したい場所に、下記のコードを追加します。

<?php if( is_active_sidebar( 'amp-only-widget' ) === true ) {
    echo dynamic_sidebar_convert_to_amp( 'amp-only-widget' );
} ?>

Simplicity が AMP ページを出力している基本的なテンプレートは以下のとおりです。

  • single-amp.php
  • amp-header.php
  • amp-content.php
  • amp-footer.php

任意のテンプレートの任意の場所に、ウィジェット領域を設置します。

サンプル例

1 つサンプル例をご紹介します。

例えば、関連記事の下にウィジェットを表示したい場合には、親テーマの single-amp.php を子テーマにコピペをします。

子テーマに設置した single-amp.php を開き、下記のコードを探します。

<?php endif; //is_related_entry_visible?>

上記コードの下の行に、ウィジェット領域を設置します。前後の行を含めると、下記のように変更します。

  <?php endif; //is_related_entry_visible?>
  
  <?php if( is_active_sidebar( 'amp-only-widget' ) === true ) {
      echo dynamic_sidebar_convert_to_amp( 'amp-only-widget' );
  } ?>
</div>

これで AMP ページの関連記事の下にウィジェットを表示できます。

ウィジェットを使う

あとはウィジェット管理画面より、 AMP 専用ウィジェット領域にお好きなウィジェットを設置します。

AMP専用ウィジェット領域にウィジェットを設置した例

ただし、スタイルは指定されていないため、子テーマの amp.css に CSS の追加が必要です。

また、すべてのウィジェットが AMP に対応するわけではありません。

検索ウィジェットは、絶対に AMP エラーが出ます。

執筆時点で私が確認した限りでは、以下のウィジェットはエラーが出るか、まともに表示されませんでした。

  • [S] Facebook ページ「いいね!」
  • [S] PC 用広告( AMP 対応広告ユニットであれば可・!is_mobile()での呼び出しが必要)
  • [S] PC 用広告ダブルレクタングル( AMP 対応広告ユニットであれば可・!is_mobile()での呼び出しが必要)
  • [S] SNS フォローボタン( Simplicity 同梱の icomoon を読み込めば可)
  • [S] モバイル用広告( AMP 対応広告ユニットであれば可・is_mobile()での呼び出しが必要)
  • アーカイブ(ドロップダウン表示でなければ可)
  • カテゴリー(ドロップダウン表示でなければ可)
  • ギャラリー
  • 動画
  • 検索
  • 音声

AMP エラーが出る場合には、ご自身でウィジェットを AMP 用に変換する必要があります。

ご自身での対応

<style> タグを例に、ご自身での対応をご説明します。

ギャラリーウィジェットを使用すると、 <style> タグが挿入されます。

AMP エラーの原因となるため、まずは以下のコードを子テーマの function.php に追加し <style> タグを削除します。

function delete_style_tag() {
    if( is_amp() === false ) {
        return $the_content;
    }
    // styleタグを削除する
    $pattern     = '/<style.+?<\/style>/is';
    $append      = '';
    $the_content = preg_replace( $pattern, $append, $the_content );
  
    return $the_content;
    
}
add_filter( 'the_content', 'delete_style_tag', 999999999 );

次に、AMP 用にウィジェットを変換で追加したコードを下記のように変更します。

function dynamic_sidebar_convert_to_amp( $name ) {
    ob_start();
    dynamic_sidebar( $name );
    
    $contents = ob_get_clean();
    $contents = convert_content_for_amp( $contents );
    $contents = delete_style_tag( $contents );
    
    return $contents;
}

$contents = delete_style_tag( $contents ); を追加しています。

これで Simplicity の AMP 対応に加えて、 <style> タグを削除する AMP 対応ができます。ギャラリーウィジェットを使用しても、 AMP エラーは出ません。

ただ、 <style> タグが削除されるため、ウィジェットのデザインが崩れます。子テーマの amp.css に、 <style> タグ内にあった CSS を追加する必要があります。

<style> タグ以外であってもご自身で対応することで、ほとんどのウィジェットは AMP で使えます。

尚、検索フォームを設置されたい場合には、「 4 ステップで WordPress の AMP ページに検索フォームを設置」をご参考ください。