ショートコードで表示させる方法
今更ですがショートコードでアドセンスの広告表示です。他のサイトさんでも紹介されていると思うのですが、もっと簡単にということで私も書いてみることにしました。
広告の位置をウィジェットで選択できる位置から変えようと思ったのは、WordPressを使い始めて間もない頃だったので、ショートコードって何?という感じでした。[xxxx]という形式で記事中に記述することで、PHPで書いたプログラムの結果をその位置に表示できる、というのが私のざっくりとした理解です。私のブログの場合は[[add]]と記事中に記述するだけで、その位置にアドセンスのダブルレクタングル広告が表示されるようになっています。
PHPのコードを記述するファイルは functions.phpなのですが、子テーマの方のfunctions.phpに書き込むようにします。でないとテーマをアップデートする度に、再度 functions.phpに書き込まなければならなくなります。
functions.php の編集方法
functions.phpを編集する場合は、テーマの編集を表示させます。
そして右側の欄で、子テーマ(Simplicity2の場合は、Simplicity2 child)を選択して、functions.phpをクリックします。後はコードを追記して、下の「ファイルを更新」をクリックすれば完了です。
万が一に備えて、functions.php のバックアップを取っておくことは大切です。サイトが表示されなくなった時は、functions.phpを編集前のものに戻して復旧させます。
[add]
超簡単なショートコードの例
幾つかのサイトを参考にして作った、超簡単なショートコードの作成例です。
|
1 2 3 4 |
function testfunc() { return 'ここに表示させたい内容を記述'; } add_shortcode('test', 'testfunc'); |
- 1行目でtestfuncという名称で関数を定義しています。
- 2行目のreturnの後ろのコンマ（アポストロフィ）の間に表示させたいHTMLタグなどを入れます。
- 4行目のadd_shortcodeで関数のtestfuncをショートコード名testで呼び出せるようにしています。
上のコードをfunctions.phpに追記して、記事の本文中に [test] と記述すると「ここに表示させたい内容を記述」と表示されます。アドセンスの広告を表示させる場合は、2行目のreturnの後ろのコンマの中にアドセンスコードをそのまま貼り付ければOKです。
[ad1]
デスクトップ専用の広告を表示
Simplicityでアドセンス広告を表示させる場合のコードです。8行目にアドセンスコードをそのまま貼り付けます。is_ads_visible()で広告の表示非表示をコントロールしています。is_mobile()でモバイルとデスクトップでの表示の切り替えをしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wbfunc3() { if(is_ads_visible()) { if(is_mobile()) { return ''; } else { return '<div class="ad-space"> <div class="ad-label">スポンサーリンク</div> ここにアドセンスコードを貼り付ける </div>'; } } } add_shortcode('adm', 'wbfunc3'); |
モバイル専用の広告を表示
こちらはモバイルだけで広告を表示させる場合です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function wbfunc3() { if(is_ads_visible()) { if(is_mobile()) { return '<div class="ad-space"> <div class="ad-label">スポンサーリンク</div> ここにアドセンスコードを貼り付ける </div>'; } else { return ''; } } } add_shortcode('adm', 'wbfunc3'); |
ダブルレクタングル広告を表示
デスクトップでダブルレクタングル広告を表示する場合です。11行目に左側に表示させるレクタングルのアドセンスコードを、14行目に右側に表示させるレクタングルのアドセンスコードを貼り付けます。カスタムチャンネルで左右の広告のクリック率などを知りたいので一応分けています。<tbody>を使って整形すると上手く表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function wbfunc4() { if(is_ads_visible()) { if(is_mobile()) { return ''; } else { return '<div class="ad-space"> <div class="ad-label">スポンサーリンク</div> <table style="border-style: none;" border="1"> <tbody> <td style="border-style: none;"> ダブルレクタングル左側 </td> <td style="border-style: none;"> ダブルレクタングル右側 </td> </tr> </tbody> </table> </div>'; } } } add_shortcode('add', 'wbfunc4'); |
下は実際に貼り付けた状態です。(固有の値はxxxxx…に書き換えてあります)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
function wbfunc4() { if(is_ads_visible()) { if(is_mobile()) { return ''; } else { return '<div class="ad-space"> <br><div class="ad-label">スポンサーリンク</div> <table style="border-style: none;" border="1"> <tbody> <tr> <td style="border-style: none;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 336x280 リード文下 ダブルレク左 --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-xxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </td> <td style="border-style: none;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 336x280 リード文下 ダブルレク右 --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </td> </tr> </tbody> </table> <br></div>'; } } } add_shortcode('add', 'wbfunc4'); |
広告の表示に時間がかかる場合がある
特にダブルレクタングルの場合は表示に時間が掛かってしまいます。余り上の位置に設置すると、見てもらう前にスクロールされてしまう可能性があります。なので私は記事上ではなくて、リート文下に置くようにしています。
サーバーはWpXクラウドなのでかなり高速だと思うのですが、重い広告が混じっていると表示にかなりの時間がかかります。私のノートPCの描画処理速度も関係しているのかも知れませんが、ダブルレクタングルの表示でだいたい1秒～5秒ぐらい掛かります。