Simplicity2のAMPページでウィジェットが出ない!対策

AMP 対応が設定一つで出来てしまう、果てしなく便利な WordPress 無料テーマ Simplicity2!

でも1つ不便なことに気が付きました。AMPページではウィジェットが表示されない仕様となっているのです。

Simplicityの特徴 › フォーラム › 要望・機能追加など › AMPページではウィジェットを表示させたい このトピックには7件の返信が含まれ、2人の参加者がいます。11 ヶ月前

SimplicityではAMPページでウィジェットを使用できない仕様になっています。(中略)AMPページでウィジェット表示させるには、テンプレートの「single-amp.php」を編集して、ウィジェットを表示できるようにしていただくしか、今のところは手段はありません。

作者わいひら様の配慮はとても良く分かります。とはいえ、いつもウィジェットに出しているような何かしらのメッセージを、AMPページでも出したいな!っていう時はありますよね。

それで、自分なりに対策してみました。

といっても、「ウィジェットの内容を自動で AMP ページに入れ込む」というカスタマイズは、難しいのでやりません。

私がやってみたことはもっと原始的で、「AMPページの記事下の位置に、別途用意した HTML を表示する」というものです。「別途用意した HTML」は(AMP仕様に沿う限り)何でもOK。ウィジェットと同じ内容にすればウィジェットの代わりになりますし、やり方を間違えなければ画像も大丈夫です。

ごく簡単なカスタマイズではあるのですが、PHP ファイルをいじりますので危険です。真似する場合は完全に自己責任でお願いします。

ちなみに、失敗すると AMP ページが全部エラーになったり(←私は1回なりました)、最悪の場合 WordPress にログインできなくなるという事態もありえます(←私はよくそうなっています)ので、、、

では、いってみましょう!

スポンサーリンク

ゴールはこんな感じ

ここでは例として、記事下の位置に「★お読みいただきありがとうございます★」というメッセージを表示するというのをゴールにします。つまりこんな感じ。

赤字部分が全ての AMP ページに出力されるよう、カスタマイズしていきます。

AMPページ記事下にメッセージを表示するカスタマイズ

カスタマイズ対象は、single-amp.php から呼び出されている amp-content.php です。

どうやって見ればよいかというと、WordPress 管理画面にて、「外観」>「テーマの編集」>「Simplicity2」を選択> amp-content.php をクリック、です。

amp-content.php が見当たらない場合は、お使いの Simplicity2 が古いバージョンになっている可能性があります。最新版に更新してみてください。

真ん中より少し下に <footer> というところがあります。

<footer> の後ろに改行を入れて、そこに自分が表示したい HTML を書き込んで保存します。

これでOK。次のように AMP ページの記事下にテキストが出ていれば成功です。

注意点

いくつか注意点があります。

注意1:記述する内容は AMP 仕様にしておく

上記で指定した場所に書き込む HTML は、Simplicity2 側で AMP 仕様へ自動変換してくれません。そのため、予め AMP 仕様に沿ったものを用意する必要があります。

今回の例は単純な p タグだったので、何も変えなくても問題ありませんでした。しかし、例えば画像を配置したいということになると、img タグではなく amp-img タグに切り替えておかないといけません。(そうしないと全てのAMPページに img が出力されて、AMPエラーになってしまいます。)

でも、自分で AMP 仕様の HTML を書くのはちょっと面倒・・・という人は、Simplicity の通常の AMP 変換機能をハック的に利用しましょう。次の例は画像を使いたい場合の手順です。

  1. 記事の新規投稿画面を開き、任意の画像を挿入して、いったん公開する
  2. 公開した記事の AMP ページを開き、有効な AMP ページであることを AMP テストで確認する
  3. ブラウザの「ソースを表示」の機能を使って、AMPページのソースを表示する
  4. 該当の画像部分のソース(← AMP 仕様に変換されている)をコピーする
  5. コピーした内容を amp-content.php に貼り付けて使用する

上記のようにすれば、AMP の仕様をあまり知らなくてもある程度対応できると思います。

注意2:Simplicity2 をアップデートしたら消える

今回のカスタマイズは、Simplicity2 のテーマファイルをいじっています。

なので、Simplicity2 のテーマをアップデートすると、カスタマイズ前の状態に戻ってしまいます。

そうなったときのため、php ファイルに書き込む内容を、別途ローカルに保存しておくと良いと思います。

応用編:表示するページ・しないページを調整する

「ウィジェット代わりの HTML」を表示するページを、細かく指定したい場合を見ていきます。

投稿ページでのみ表示する/固定ページでのみ表示する

先のカスタマイズを実施すると、PHP ファイルに追記した HTML は「投稿ページの AMP ページ」「固定ページの AMP ページ」どちらでも表示されます。

Simplicity2 では、以前は投稿ページのみが AMP ページ生成の対象でしたが、現在は固定ページも AMP ページ生成対象になっています。

ですが、「投稿ページでのみ表示したい(固定ページでは表示したくない)」という場合や、その逆もあると思いますので、そのやり方を紹介します。

投稿ページでのみ表示したい場合は、<footer> 下に挿入する内容を次のようにしましょう。

1行目「<?php if ( is_single() ) : ?>」と3行目「<?php endif; ?>」が追加されました。この2つの行に挟まれた部分は投稿ページでのみ表示されます。

追加された「is_single()」等の部分は、「表示する条件」を WordPress に伝えています。つまり、「投稿ページのときだけ表示してね~」という意味の条件記述なんです。

逆に、固定ページでのみ表示したい場合は次のようにします。

「is_page()」のあたりが、「固定ページのときに表示してね」という意味の条件記述になっています。

特定のカテゴリでのみメッセージを表示する

「特定のカテゴリに属する記事」で記事下 HTML を表示したい場合も、同じように考えます。

WordPress には「in_category(‘xxx’)」という記述で条件を伝えてやります。ここで「xxx」の部分は、カテゴリーのスラッグに置き換えてください。

下記はカテゴリーのスラッグが「news」の場合。

上記のように書くと、スラッグが「news」のカテゴリーに属している記事の AMP ページの記事下に、「★お読みいただきありがとうございます★」が現れます。

その他

その他、「特定の投稿ページでのみ表示したい」「特定カテゴリーに属している場合は表示しない」「複数のカテゴリーを指定したい」等、色々なケースが考えられます。

全ての場合を取り上げるわけにもいかないので、表示されるページをさらに細かく指定したい人は、WordPress の「条件分岐」について調べてみてください。

たとえば次のページが有益です。

WordPressには便利な条件分岐タグが沢山用意されており、これらを用いることで様々なことができるので、先述したように特定の条件で何かをさせたいというカスタマイズをしたい方は参考にしてみてください。

ではこの辺で!

スポンサーリンク
スポンサーリンク