AMPプラグインで記事下にSNSボタンを追加する方法

弊社テーマ「アルバトロス」「ハミングバード」「ストーク」を使っている方でWordPressプラグインの「AMPにてAMP対応されている方向けの記事です。

AMPプラグインはブログに簡単にAMPを導入できる反面、SNSボタンなどのパーツが全くついていないのでちょっと味気ない感じになってしまいます。

そこでテーマファイル内のfunctions.phpを少しカスタマイズしてAMPページの場合にSNSボタンを表示させるというのをやってみたいと思います。

AMPページの場合にSNSボタン用のリンクを表示するコード

AMPページの場合に本文下にSNSボタン用のHTMLを表示させるには、下記コードをテーマのfunctions.php内に記述します。

functions.phpのどこでも構いませんが、わかりやすくすでに書かれているコードの下の方に記載した方がいいでしょう。

上記コードを記載することで本文下にスクリーンショットのようなリンクテキストが表示されます。

↑テキストとリンクが追加された

ただこのままでは装飾がついていないので、「味気ないただのリンク」ですね。

ここに装飾用のCSSを適用していきたいと思います。

SNSボタン用のCSSを追加する

次に装飾用のCSSを追加したいと思います。コードだけ先に紹介。下記コードを同じくfunctions.phpに記載します。(上で紹介したコードの直下に貼り付けたらOK)

▼CSSの適用に関しては下記記事も参照!

プラグイン「AMP」で吹き出しデザイン用CSSを適用する方法

下で詳しく説明します。

AMPの場合はCSSファイルを別ファイルにすることができないので、ページ内に読み込ませる必要があります。

そのページ内に読み込ませるためのコードがこの部分。

add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );

そして、/*CSSここから*/ ~~~ /*CSSここまで*/の中に追加したいCSS記述することでAMPページ内で読み込んでくれるようになります。

適用がうまくいっていれば下のスクリーンショットのようなデザインになるはずです。(実際のページでも確認してみてください)

SNSボタン装飾CSS適用

※もしCSSが適用されない場合はキャッシュが残っている可能性があるので、根気よくリロードなどしてみてください。

まとめ

そんなこんなでAMPページにSNSボタンを適用することができました。

これでシェア関連の部分は最低限クリアできたので、あとは関連記事とかを出せたらいいんですが、そっちはもう少しハードルが高そうなのでもう少し検証したいと思います。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。