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のランキング機能は表示できません。
収益のチャンスを失う可能性があるので、上記の方法でランキング表示を試してみてください。