AFFINGER5のAMPページにランキングを表示させる方法

AFFINGER5のAMPページでは、通常ページで表示しているランキングは機能しません。ですが、以下の方法でAMPページにもランキングを表示できます。

簡易的なランキングではありますが、ご参考にしてください。

AMPページにランキングを表示させる手順

AFFINGER5のAMPページにランキングを表示させる手順は以下の通り。

AMP用の広告コードを取得

まずは、AMP用のアフィリエイト広告コードを取得します。

「A8.net」のバナー広告を例に取ると、「広告リンク作成」＞表示させたいバナー広告を選ぶ＞「AMP対応リンク」の順に取得できます。

詳しくは、各ASPのAMP広告ガイドを確認してください。

single-amp.phpを表示

次に、AFFINGER5のファイル「single-amp.php」を開きます。

single-amp.phpに先のアフィリエイト広告コードを貼り付けることで、AMPページに広告バナーが表示できます。

single-amp.phpは、サーバーのファイルマネージャーにログインして、対象のドメイン＞「public_html」＞「wp-content」＞「themes」＞「affinger5」＞「single-amp.php」の順にクリック。

ちなみに、WordPress管理画面の外観＞テーマの編集からsingle-amp.phpを表示できますが、エックスサーバーなどでは直接編集するとエラーとなります。mixhostなら直接編集ができました。

ランキング風コードを追加

single-amp.phpを表示したら、アフィリエイト広告コードを貼り付ます。

今回は、AMPページ記事末尾にある「SNSボタン」の下に、ランキングを表示させます。

場所

場所は、180行目あたりの

<?php amp_get_template_part( 'sns', 'amp' ); //AMP用ソーシャルボタン読み込み ?>
<?php amp_get_template_part( 'popular-thumbnail', 'amp' ); //任意のエントリ ?>

の直下です。

コード例

コードは以下のような感じになります。

<p class="h2modoki">○○ランキング</p>
<p>ランキングの説明</p>
<p class="rankh4">1位</p>
<p>＜AMP用のコード＞</p>
<p>1位の説明文</p>
<p class="rankh4">2位</p>
<p>＜AMP用のコード＞</p>
<p>2位の説明文</p>
<p class="rankh4">3位</p>
<p>＜AMP用のコード＞</p>
<p>3位の説明文</p>

＜AMP用のコード＞には、先のアフィリエイト広告コードを貼り付けます。

これを元に、ご自身で好きなようにアレンジしてください。ランキングでなくても、CTAに応用もできます。

完成例

問題なければ、AMPページにランキングが表示されています。

念のため、GoogleのAMPテストツールでエラーチェックをしておいてください。

まとめ

AMPページはサイトの表示速度を高速化させてくれるので便利ですが、AFFINGER5のランキング機能は表示できません。

収益のチャンスを失う可能性があるので、上記の方法でランキング表示を試してみてください。