共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

STINGER5 Googleアドセンスをシンプルにカスタマイズ

更新日:

どうも。働かない夫です。

STINGER5のカスタマイズに苦戦しています。

こんな風にカスタマイズしたい!って要望はあるのに基礎知識がないと難しいですね。数学、論理が好きだったので、プログラミングコードを勉強しながら読んでいくのは苦になりません。むしろ楽しい?イラつきますが。。。

今回は、多くの人がやっているWordPressのSTINGER5のカスタマイズとは道の外れた?カスタマイズをメモとして残していきます。

STINGER5の基本的なアドセンスの場所の確認

サンプルサイトからの抜粋になりますが、以下の写真の様な状態になります。

(記事の上部)

 

 

スクリーンショット 2015-01-09 22.17.33

 

(記事の下部)

スクリーンショット 2015-01-09 22.17.52

これらは全て【ウィジェット】から編集が出来ます。

しかし、デフォルトだと下部の338×280のGoogleアドセンスが2つ使われてしまいます。これをどうにかして一つにしたいですね。

シンプルなアドセンス構成にする

今回の目標は以下のような形です。

 

 

 

スクリーンショット 2015-01-09 22.12.39

 

  • 一番目の最初の見出しの上
  • サイドバー上部
  • 記事下

この3点にアドセンスを表示させます。

スマホの表示は以下のようになります。

スマホ表示

変更理由

  1. 記事下に2カ所のアドセンスよりもリード文の下のアドセンスの方が、目につく可能性が高い
  2. 記事のリード文で興味がなくなった場合の離脱先としてスポンサーリンクを配置する。(クリック率の向上)
  3. スマホでのアドセンス表示が記事の下しかない為に見ない場合が多くなる可能性が高くなる。

とまぁ導線を考えればこちらの方が良いかもなー。と考えたからですね。

まぁ、トライ&エラーで変更をかけますよー!

記事下のダブル表示をシングルに

single.phpを表示します。

<div style="padding:20px 0px;">

<?php get_template_part('ad'); //アドセンス読み込み ?>//1つめのアドセンスの読み込み

<?php if(is_mobile()) { //スマホの場合 ?>//2つ目のアドセンスの読み込み?

<?php } else { //PCの場合 ?>

<div class="smanone" style="padding-top:10px;">//スマホに影響はない読み込み

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php } ?>

 

ここからアドセンスの二つ目読み込みを削除します。

以下の部分を削除してください。

<?php if(is_mobile()) { //スマホの場合 ?>

<?php } else { //PCの場合 ?>

<div class="smanone" style="padding-top:10px;">

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php } ?>

これで、記事下のダブルで表示はされなくなります。

補足

削除した部分の命令文は

  • スマホの場合は何も表示しない
  • PCの場合はアドセンスの読み込みをする

と言うものです。

また、このときにわからないものをグーグルさんに聞きました。初歩なので読飛ばしていただければ・・・。

padding-top:10px;に関して

paddingプロパティで、要素の内側の余白を指定することができます。このプロパティもmarginプロパティと同じ方法で指定できます。

やさしいホームページ入門 より引用)

本屋でこちらの本も購入

初心者にはわかりやすいと思います。(わたしが理解できています)

記事内にアドセンスを表示

【外観】>【テーマの編集】>【function.php】を開きます。

一番したの所に以下のコードを追加します。

//アドセンス記事内に追加

function add_ads_before_1st_h2($the_content) {
  if (is_single()) {
    //広告(AdSense)タグを記入
    $ads = <<< EOF
<span style="padding:5px 0; display:block">SPONSORED LINK</span><p>
<!--アドセンスコードスタート-->

<アドセンスコード>

<!--アドセンスコード終了-->
EOF;
    $h2 = '/<h2.*?>/i';//H2見出しのパターン
    if ( preg_match( $h2, $the_content, $h2s )) {//H2見出しが本文中にあるかどうか
      $the_content  = preg_replace($h2, $ads.$h2s[0], $the_content, 1);//最初のH2を置換
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

かなりわかりやすく書いていますので、<アドセンスコード>の部分にアドセンスコードをコピペしてください。

このコードを追加することで、H2タグの前にアドセンスが表示されるようになります。

注意点

  • PC、スマホ共に表示されるので、【300×250】を入れましょう。
  • アドセンス上は<SPONSORED LINK>と表示するようにしてありますので、こちらは各個人で変更をお願いします。 

まとめ

これをやるまでに一個一個確認しながらだったので、結構エラーが出ましたね。初歩的な内容なので、わたしが理解する為にまとめたメモです。

Googleアドセンスをシンプルに表示させたい方は参考にしていただければ幸いです。

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress
-

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved Powered by AFFINGER5.