そのままでも最高なNew Standardを自分好みにカスタマイズしてみた

Wordpress

2017.09.29 2017.07.15

このブログはWordpressで運営しており、テーマは「New Standard」です。SEOにも強くコードがわからなくても最初からかっこいいデザインなのでカスタマイズもプラグインのインストールも必要ありません。その辺のことはこちらに書いてます。

参考：ブログで集客ならこれ！SEOで1位を取る会社が本気で作ったWordpressテーマ「New Standard」

お世辞を抜きにして、今まで使ってきたテーマの中で1番最高で自分に合っていると思っているんですが、やっぱり自分好みにしてみたくてカスタマイズしてみました。

メニュー

カスタマイズしたところ
3回コピペでH2見出しタグの上に広告表示する
記事下に関連記事を表示
インストールしたプラグイン
さいごに

カスタマイズしたところ

今回カスタマイズしたのは以下の3つです。

記事中に広告を表示
記事下に関連記事を表示
プラグインをインストール

サーバーからアクセスできるので特に必須ではありませんが、CyberduckなどのFTPクライアントソフトがあればかなり作業が捗ります。

Cyberduck (2,900円)

David Kocher App Store

(2017.07.12時点)

posted with ポチレバ

※テーマファイルをがっつり編集しますのでちゃんとバックアップを取ってから作業しましょう。

3回コピペでH2見出しタグの上に広告表示する

「New Standard」は、記事本文中に広告を表示するといった設定項目はありません。それをPHPファイルを追加や編集してやってしまおうというわけです。

まずは、広告用のテンプレートファイルをエディタアプリで作成します。私は、Atomを愛用しています。

参考：ノンプログラマがAtomをブログ用に使用するための設定やショートカットキーについて

[広告タグ]の場所には、好きなの広告タグをコピペしましょう。アドセンスでなくても大丈夫です。ファイル名は、「ad-in-body.php」で保存しました。（寝ログさんオマージュ）

<div class="ad-space">
  <div class="ad-pc">
		<p style="font-size:0.8em; color:#666; margin-bottom:0; text-align:center;">sponsored link</p>
		<[広告タグ]>
  <div class="clear"></div>
</div>

完成したファイルは、サーバーのテーマフォルダに保存します。

続いてfunctions.phpに以下のコードを追加します。分かりやすく1番上の段にコピペするのをおすすめします。コードをすこしでも間違えようもんなら真っ白になってしまうので必ずバックアップを取ってから作業しましょう。これゼッタイ！

<?php
include_once( ABSPATH . 'wp-admin/includes/image.php' );

//H2見出しを判別する正規表現を定数にする
define('H2_REG', '/<h2.*?>/i');//H2見出しのパターン
  
//本文中にH2見出しが最初に含まれている箇所を返す（含まれない場合はnullを返す）
//H3-H6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body( $the_content ){
  if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
    return $h2results[0];
  }
}

function add_ads_before_1st_h2($the_content) {
  if ( is_single() ) {//固定ページも表示する場合はis_singular()にする
    //広告（AdSense）タグを記入
    ob_start();//バッファリング
    get_template_part('ad-in-body');//広告貼り付け用に作成したテンプレート
    $ad_template = ob_get_clean();
    $h2result = get_h2_included_in_body( $the_content );//本文にH2タグが含まれていれば取得
    if ( $h2result ) {//H2見出しが本文中にある場合のみ
      //最初のH2の手前に広告を挿入（最初のH2を置換）
      $the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
    }
  }
  return $the_content;
}
add_filter('the_content','add_ads_before_1st_h2');

これでH2見出しがある場合に、広告を挿入するようになりました。ちなみに、コードはまるまる寝ログさんのオマージュなのでくわしい内容はこちらが分かりやすいです。

参考：アドセンスをWordpress記事本文中に配置できる手軽でスマートな方法