今日は久しぶりにStinger3のカスタマイズエントリーです。※Stinger5でも検証済みです。
僕のStinger3は20130906でして、Googleを駆使して超絶素人なりにカスタムしていました。
ところがStinger3の最新バージョンが20131217になっていたこともあって、この度プチリニューアルを決意。
その目玉カスタムが「moreタグを使って記事内の好きなところにセンターでアドセンスを配置する」ことでした。
これだけならプラグインを使用して完了なんですけど、スマフォでみると300×250の記事内アドセンスがはみ出るんですね。
A型の僕にはどうしてもそれが許せなくて、あらゆる方法を試したんだけど超絶素人なんもんで全っ然ムリ。
Stingerシリーズを使っていない方のmoreタグに関するエントリーはそこそこあったんですが、今回イジる場所がよりによってfunction.phpなので試すのにも限界があって(素人だし)戦々恐々。
もちろん2回真っ白になりました
(対処法は一番下に書いておきます)
ところが丸２日格闘した夕方に、なんと奇跡が起きた。
これは本当に奇跡！できたといっても、Google先生と諸先輩方の知識の結晶なので共有させていただきます。
イジる場所はfunction.php
コピペだけで完了するように書いていますが、今回いじる場所はfunction.phpなので、現在のfunction.phpの状態をコピー→テキストエディタなりに保存してデスクトップに置いててください。
もちろんバックアップも忘れずに！
標準ではこうなってます。
//moreリンク
function custom_content_more_link( $output ) {
$output = preg_replace('/#more-[\d]+/i', '', $output );
return $output;
ここにまるまる以下コードをかぶせる形でそのままコピペしてください。
/*moreタグ下アドセンス*/
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$adTags = <<< EOF
<hr />
<div class="splk">SPONSORED LINK</div>
<div class="acad1">
<div style="margin-left: -10px !important;">
<!----------------ご自分のアドセンス広告コード------------------------>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
<br />
<hr />
EOF;
$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
$contentData = str_replace('<p></p>', '', $contentData);
$contentData = str_replace('<p><br />', '<p>', $contentData);
return $contentData;
}
忘れないように11行目に、ご自分のアドセンスの広告ユニットコードをコピペして保存。これでfunction.php内は完成です。
前後のコードを含んだ完成型はこうなります。(色の変わってるXの箇所は隠してるだけ)
remove_action( 'wp_head', 'wp_generator' );
/*moreタグ下アドセンス*/
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$adTags = <<< EOF
<hr />
<div class="splk">SPONSORED LINK</div>
<div class="acad1">
<div style="margin-left: -10px !important;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- tXXXXXXXXXXji -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="cXXXXXXXXXXXXXXX6"
data-ad-slot="7XXXXXXXXX8"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
<br />
<hr />
EOF;
$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
$contentData = str_replace('<p></p>', '', $contentData);
$contentData = str_replace('<p><br />', '<p>', $contentData);
return $contentData;
}
//セルフピンバック禁止
ちょこっと解説
cssでもスポンサー部分をイジれるようにdivでclassを配当してます。
そして肝心なのが12行目のこれ！スマフォで画面からはみ出したアドセンスをきれいに納めるコードが以下のようです
アドセンスコード
アドセンスがはみ出したら左のマージンを10削るコードだそうですが、これの配置箇所に相当悩みました。
cssにも記載
続いて以下のコードをstyle.cssの一番下にそのままコピペで追加してください。
/*-----------アドセンス、スポンサーリンクの装飾--------------*/
.splk{
font-size:13px;
text-align:center;
margin-top: 20px;
margin-bottom: 10px;
}
/*アドセンス位置*/
.acad1{
text-align: center;
}
スマフォ用も忘れずに！smart.cssの一番下に以下をそのままコピペ。
/*-----------アドセンス、スポンサーリンクの装飾--------------*/
.splk{
font-size:12px;
text-align:center;
margin-top: 20px;
margin-bottom: 20px;
}
これで写真のようになっていると思います！
▼PC観覧時
▼スマフォ観覧時(右がAfter)
以上で終了です、お疲れさまでした！！
記事下にあるアドセンスもセンター合わせ！
せっかく記事内アドセンスをセンター表示にしたのに、PCで観た時一番下のアドセンスが左寄りってのもA型は気持ちが悪いです。
なのでPC観覧時も記事下のアドセンスもセンターにして、ついでにスポンサーリンク名も付けちゃいましょう。
single.phpの下のほうにある以下のコードを
<div style="padding:20px 0px;">
<?php get_template_part('ad');?>
</div>
ガッソリと以下のコードに変更してください。
<div style="text-align:center;">
<div class="splk">SPONSORED LINK</div>
<?php get_template_part('ad');?>
</div>
さっきのアドセンスとclassを同じにしてるので文字は自動で合ってくると思います。
▼こうなってればOK
おまけ
function.phpが真っ白になった時の対処法です。
冒頭にfunction.phpのコピーをデスクトップに保存してもらっていると思います。
テキストエディタ系で保存してる場合は、タイトルがfunction.phpになってるはずなのでFTPアップローダーでfunction.phpにそのまま上書き保存してください。
メモ系のアプリで保存してる場合は、FTPアップローダーを使って壊れたfunction.phpの上からメモったコードをコピペすればOKです。
僕は環境:Macbook Pro/FTPクライアント:Cyberduckではもとに戻りました。
しかし環境やWordpressの状態によってこの限りではないのでご了承ください。
この度お世話になった神サイト
 |
TwentyThirteen簡単カスタマイズ【レスポンシブ・アドセンス設置3/moreタグ後にアドセンス設置】 | futapapa futapapa |
