WordPressテーマの「Simplicity」に、「AMP」ページへの遷移を促す要素を表示してみた

以前、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法や、「Google AdSense」を表示する方法などをご紹介いたしました。

テンプレートの導入などは行ったのですが、「AMP」ページへの遷移を促すような仕掛けをしていないことに気付いたので、少しやってみることにしました。

WordPressテーマの「Simplicity」から「AMP」ページへ遷移させる方法をご紹介いたします。

一覧ページで表示

php

あまり仰々しくならないように、絵文字の「⚡」を表示させることにしました。一覧ページでは年月日やカテゴリのメタの部分に表示させます。

通常の一覧ページで表示させるには「simplicity2」フォルダの「entry-card-content.phpを変更します。

上記の「<p class=”post-meta”>」の終わりに、下記のソースを挿入します。

「<?php the_permalink(); ?>」はWordPressのパーマリンクを取得します。その末尾に「/amp/」と記述することで、各記事の「AMP」ページへ遷移するとができます。

上記のソースを挿入すると、「<p class=”post-meta”>」のソースは下記のような感じになります。

「</p>」の直前に挿入しました。

css

先ほど挿入した要素に対してのスタイルを、下記のように「simplicity2-child」フォルダにある「mobile.css」に記述します。

「.post-meta a.amp」の「 float: right;」で位置を調整し、「.post-meta a.amp .fa-amp:before」の「content: ‘⚡’;」内の「⚡」を疑似要素で表示しています。

「Simplicity2」はPCとモバイルで同じテンプレートを使っているので、念のため「simplicity2-child」にある「style.css」に下記のようなスタイルを記述し、PCでのa要素を非表示しておきます。

モバイルの一覧ページで「⚡」の表示を確認する

上記の手順を行った後、モバイルの一覧ページで「⚡」の表示を確認します。

モバイルの一覧ページで「⚡」の表示を確認
モバイルの一覧ページで「⚡」が表示

一覧ページの年月日、カテゴリが表示されるメタ部分の右端に「⚡」が表示されました。「⚡」をクリック、またはタップを行うと「AMP」ページへ遷移します。

記事ページで表示

次は記事ページで「⚡」を表示させます。下記のような上部で位置が固定されるナビに表示させます。

上部で固定されるナビに表示
赤枠で囲っている当たりに表示させる

赤枠で囲っている当たりに表示させるようにします。

準備

「Simplicity」で上部ナビを表示させるために、WordPressの管理画面で下記の操作を行います。

WordPress管理画面 「外観」か「カスタマイズ」を押下

  1. メニューから「外観」を選択。
  2. 「カスタマイズ」を選択。

次に「レイアウト(全体・リスト)」を押下します。

WordPress管理画面 「レイアウト(全体・リスト)」を押下

「モバイルメニュータイプ」から、「スライドインライト(ボタン上)を選択します。」

WordPress管理画面 「スライドインライト(ボタン上)を選択

「保存して公開」ボタンを押下します。

WordPress管理画面 「保存して公開」ボタンを押下

上記で準備ができました。

php

「Simplicity2」フォルダにある「buttons-footer-mobile.php」を開きます。

上記のソースで「//投稿ページのとき」、とコメント文がある下に、下記の記述を挿入します。

挿入を行ったあと、「フッターモバイルボタンメニュー」の部分は下記のような感じになります。

「is_single」内に記述することによって、記事ページのみに「⚡」を表示させることができます。

css

先ほど挿入した要素に対してのスタイルを、下記のように simplicity2-child < mobile.css に記述します。

「#footer-mobile-buttons a.amp .fa-amp:before」により、「content: ‘⚡’;」内の「⚡」を「:before」疑似要素で表示しています。

「#footer-mobile-buttons a.amp .menu-caption:after」により、「content: ‘すぐ読む’;」内の「すぐ読む」を「:after」疑似要素で表示しています。

モバイルの記事ページで「⚡」の表示を確認する

上記の手順を行った後、モバイルの記事ページで「⚡」の表示を確認します。

上部固定ヘッダーに「⚡」が表示
上部固定ヘッダーに「⚡」が表示

上部固定ヘッダーに「⚡」が表示されました。「⚡」をクリック、またはタップを行うと「AMP」ページへ遷移します。

まとめ

  • 一覧と記事ページに「⚡」をアイコンとして表示。
  • 変更したphpのファイルは「simplicity2」下にある、一覧の「entry-card-content.php」と記事ページ上部固定の「buttons-footer-mobile.php」。
  • 変更したCSSのファイルは「simplicity2-child」下にある、PCの「style.css」とモバイルの「mobile.css」。
  • 上部固定は「外観」>「カスタマイズ」>「モバイルメニュータイプ」の「スライドインライト(ボタン上)」から選択。

「Simplicity」テーマと「AMP」プラグインを利用している方で、AMPページへの遷移を任意にさせてみたいな、といった方の参考になれば幸いです。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressテーマの「Simplicity」に、「AMP」ページへの遷移を促す要素を表示してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!