WordPress Twenty Thirteenに広告を挿入する

Twenty Thirteenで記事の前後に300*250の広告を2つ並べる

スマホで見た場合は縦に2つ並ぶように広告を挿入する

レスポンシブなWordPressのテーマTwenty Thirteenに広告を挿入する方法。

基本的にはテーマのcontent.phpの好きな場所に広告の貼り付けコードを挿入するという方法で問題ないのですが、本記事では、よりWordPressを使いこなし、そしてTwenty Thirteenに特化した広告の挿入方法を紹介する。

レスポンシブ対応のHTML

広告を左右に並べて表示するために、以下のHTMLを組んだ。

<div class="gallery gallery-columns-2">
    <figure class="gallery-item">
	<img src="/images/ad300x250-1.jpg" alt="ad" />
    </figure>
    <figure class="gallery-item">
        <img src="/images/ad300x250-2.jpg" alt="ad" />
    </figure>
</div>

Twenty Thirteenの場合は、上のHTMLで左右横並びで広告をすっきりと表示することが出来る。このHTMLでは、実際の広告コードではなく、ダミーの画像を参照するimgタグを設定しているが、実際にはimgタグを広告コードに置き換えて利用することになる。

Twenty Thirteen純正のcssのスタイルを適用しているため、スマホなどのモバイル端末に対しては、広告が縦並びに変化するレスポンシブ対応のHTMLになる。

記事の前後に広告を挿入

構成したHTMLを好きな場所に挿入すれば広告が表示される。冒頭書いたように、content.phpを直接編集する方法も有効なのだが、今回は、functions.phpとフィルターフックを利用してよりスマートに記事の前後に広告を挿入する。

add_filter('the_content', 'load_advertisement');

function load_advertisement($text)
{
    // パスの取得
    $path = get_stylesheet_directory_uri();

// 記事の前に挿入する広告
$head = <<< EOF
<div class="gallery gallery-columns-2">
    <figure class="gallery-item">
	<img src="{$path}/images/ad300x250-1.jpg" alt="ad" />
    </figure>
    <figure class="gallery-item">
        <img src="{$path}/images/ad300x250-2.jpg" alt="ad" />
    </figure>
</div>
EOF;

// 記事の後に挿入する広告
$foot = <<< EOF
<div class="gallery gallery-columns-2">
    <figure class="gallery-item">
	<img src="{$path}/images/ad300x250-3.jpg" alt="ad" />
    </figure>
    <figure class="gallery-item">
        <img src="{$path}/images/ad300x250-4.jpg" alt="ad" />
    </figure>
</div>
EOF;

    // 記事の前後に広告を挿入し結果を返す
    $text = $head.$text.$foot;
    return $text;
}

the_contentフィルターフックを利用して記事($text)の前後に広告HTMLを追加し、追加後のHTMLをリターンしているのが上のコードになる。

content.phpを直接編集するやり方と違って、the_contentフィルターフックを利用した方法では、

テーマのバージョンアップに影響されることなく

広告の運用が可能というメリットがある。

広告を挿入した様子

記事の下側に挿入した広告が切れてしまっているが、画像のキャプチャを載せてみる。

Twenty Thirteenの場合は、300×250の広告を横並びで表示すると文章の幅とマッチして見栄えよく記事の前後に広告を挿入することができる。