WordPress単一記事のmoreタグを広告コード（+α）と置き換える

WordPressのmoreの位置に広告を入れてみました。プラグインを使っていないことと、PCレイアウト時にプラスでQRコードが出るようにもしてみたのでメモがてら。

※QRコードは(株)デンソーウェーブの登録商標です

実装結果↑

今まさにこの上に出ていることと思います。スマホ版ならば広告のみ、PCなどそれ以外の方には、現在記事のQRコードが一緒に表示されているはず。

ちなみに、このブログはレスポンシブデザインではなく、ユーザーエージェント切り替えで2つのテーマを使用しています。

実装に至った背景

先日こんな記事を書いたのですが、

• ブログを開設して2年経ちました！4000PV/日へ到達した考察など

世間で言う「このくらいのPVがあればだいたい収入はこのくらい」という基準にぜんっぜん届いておらず、「えッ…、わたしの収入…低すぎ…ッ！？」状態に陥って居たところ、大変親切な足長お兄様たちが「広告の配置や大きさを見なおしてごらん？」とアドバイスをしてくださいました。

いろんなブログを見て回って、やはり、これか…。と思ったのが、文中広告。

そうか、文中広告かー。ブログ開設したばかりのころは「収入が出るほどの規模になるはずないんだから、広告なんか無くてもいいんだ☆」なんて思ってたわたしが、遂に…。成長したものだなぁ(´ω`)

ショートコードで実装するのもアリだと思ったのですが、moreなら過去記事全てに適用できるし、いつもちょうどいい文章区切りの位置にあるのでmoreタグ置換が一番良いかなーと思って、やってみました。

参考

• WordPressの抜粋文下部分に（moreタグ使用時）広告などの別コンテンツを後から挿入する方法 | memocarilog
• add_filter を使って more（続きを見る）のところに広告を表示する　WordPress de SEO をやろう！

プラグインなしでやりたかったので、こちらの記事からお知恵を拝借しました。ありがとうございます！

• アドセンス収益が2倍に！STINGER3でブログ収益アップするためのカスタマイズ #Stinger-WP | love guava!

あと、わたしは自作テーマを使っているんですが、こちらの記事を熟読させて頂いて大変参考になりました！

構想

わたしはいつも記事を書く時テキストモード（HTMLモード？）で書いていますが、その時に

<!--more-->

って出るやつがmoreですね。これを投稿すると

<span id="more-XXXX"></span>

このように出力されます（XXXXには記事ID）。この部分を、まるっと置換してしまうという方法です。

任意の文字列を置換

functions.php

//more位置へ挿入
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$adTags = <<< EOF

広告コード

EOF;

$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
return $contentData;
}

このように書くことで、5～7行目の中に書いたものとmoreタグを置換してくれます！この中に書いたものは、テンプレートタグなどの変数もテキストとして出力されます。（このブログでは、モバイル版で実装している形です。）

変数を含んで置換

functions.php

//more位置へ挿入
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$permalink = esc_url( apply_filters( 'the_permalink', get_permalink($post->ID) ) );
$qr = '<img src="http://api.qrserver.com/v1/create-qr-code/?size=60x60&data='. $permalink . '" alt="" width="60" height="60" />';
$adTags = <<< EOF

広告コード

EOF;

$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $qr . $adTags, $contentData);
return $contentData;
}

4～5行目で変数へ任意の内容（ここでは、QRコードの画像URL）を格納して、12行目で結合して置換しています。（画像の大きさはお好みで変えられます）

パーマリンクの取得（4行目）については、

• WordPressでget_*()を使うときは念のためソースを確認して適切に処理すべし！ | firegoby

こちらのとおり、get_permalink()だけだとフィルターフックやエスケープを通っていないので、このあたりの処理を加えてthe_permalink()と同じ値になるように取得すると安心です。

divや改行も入れたい

レイアウトのためdivで括ったり、htmlへ出力されたときの改行なんかもあったほうが読みやすくなりますよねー。

html

<div id="ad_more">
<div id="mb">この記事をスマホで読む</div>
<div id="qr_sm"><img src="QRコードのURL" alt="" width="60" height="60" /></div>
広告コード
</div><!-- /#ad_more -->

例えばこんな形のhtmlを出力させたければ、

functions.php

//more位置へ挿入
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$permalink = esc_url( apply_filters( 'the_permalink', get_permalink($post->ID) ) );
$qr = '<div id="ad_more">' . "\n" .
	'<div id="mb">この記事をスマホで読む</div>' . "\n" .
	'<div id="qr_sm"><img src="http://api.qrserver.com/v1/create-qr-code/?size=60x60&data='. $permalink . '" alt="" width="60" height="60" /></div>' . "\n";
$adTags = <<< EOF

広告コード
</div><!-- /#ad_more -->

EOF;

$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $qr . $adTags, $contentData);
return $contentData;

こんな感じに書けます。文字列の連結は「.」、改行は「\n」です。

以上です！どなたかの参考になれたら幸いです！なんか、文字ばっかりの記事になってしまいました(´Д｀;)