このブログはWordpressで運営しており、テーマは「New Standard」です。SEOにも強くコードがわからなくても最初からかっこいいデザインなのでカスタマイズもプラグインのインストールも必要ありません。その辺のことはこちらに書いてます。
参考:ブログで集客ならこれ!SEOで1位を取る会社が本気で作ったWordpressテーマ「New Standard」
お世辞を抜きにして、今まで使ってきたテーマの中で1番最高で自分に合っていると思っているんですが、やっぱり自分好みにしてみたくてカスタマイズしてみました。
カスタマイズしたところ
今回カスタマイズしたのは以下の3つです。
- 記事中に広告を表示
- 記事下に関連記事を表示
- プラグインをインストール
サーバーからアクセスできるので特に必須ではありませんが、CyberduckなどのFTPクライアントソフトがあればかなり作業が捗ります。
※テーマファイルをがっつり編集しますのでちゃんとバックアップを取ってから作業しましょう。
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記事本文中に配置できる手軽でスマートな方法
記事下に関連記事を表示
これについては以前記事を書いたのでそちらを参考にしてください。ちなみにこの部分のことです。
ただし注意点があって、プラグイン「Advanced Custom Fields」を有効にするとなぜか全体の表示がおかしくなってしまうので、プラグインは有効化していません。元々の使っていたテーマ(デザイン)のときに設定してたのでそれが残っているのか僕の環境では運良くそのまま使えています。
もしどうしても関連記事を表示したい場合は裏技的ですが、いったんほかのテーマで記事の通り設定し、その後「New Standard」に変更するとうまくいくかもしれません。こちらもバックアップ必須ですよ。
参考:ショートコードでPHPファイルを呼び出し関連記事を好きな位置に表示する方法
インストールしたプラグイン
今回インストールしたプラグインは以下です。
- AddQuicktag
- Akismet Anti-Spam
- All In One SEO Pack
- BackWPup
- Better Delete Revision
- Better Font Awesome
- Broken Link Checker
- Contact Form 7
- Crayon Syntax Highlighter
- EWWW Image Optimizer
- Flamingo
- Google XML Sitemaps
- Jetpack by WordPress.com
- No Self Pings
- PS Auto Sitemap
- Push7
- PuSHPress
- Pz-LinkCard※
- Speech bubble
- Table of Contents Plus
- TablePress
- TinyMCE Advanced
- VA Social Buzz
- W3 Total Cache
- Wordfence Security
- WordPress Popular Posts
- WP Google Analytics Events
- WP Multibyte Patch
SEO機能はテーマファイルでもサポートしていますが、使い慣れた「All In One SEO Pack」にしています。「Pz-LinkCard」は、過去記事修正すれば削除する予定です。
さいごに
今回はまったく頭を使わずコピペしただけなので、PHPを自分で理解できればどれだけいいかと毎回思います。
[kanren]