記事下に定型HTMLを置きたい

WordPressの投稿記事下にはGoogle AdSenseの広告を置いていますが、せっかくなのでAdsense以外にもアフィリエイト広告を置いてみたいと思ったので、利用中のテーマ(Emanon Free)でどうにか記事下にカスタムHTMLを置けないかを調べてみました。

テーマ(Emanon Free)には広告ウィジェットが少ない

有料のEmanon Proだと、記事下エリアに固定HTMLを表示するウィジェットや、Google AdSenseのインフィード広告に対応したウィジェットなど色々な広告機能があるようですが、無料版だとこのあたりの機能が全て削られているようです。

無料テーマのEmanon Freeには広告系のウィジットが少ない
無料版の広告ウィジェットが1種類に対して、有料版は6種類もあるようです。

実際にテーマのカスタマイズで広告の設定部分に出てくるのは、300px×250のバナー広告用ウィジェットしかなく、固定HTMLを差し込むようなウィジェットは一つも存在していませんでした。そこまでやりたければ有料版でどうぞということのようです。

無料テーマのEmanon Freeには記事下広告の設定がありません
300px×250のバナー広告の設定しかありません

記事下追加プラグインを探す

かれこれ4年間はこの無料版のEmanon Freeにお世話になっているので、そろそろ有料版テーマを買ってみてもよいかとは思ったものの、そんな贅沢する余裕もない身ですので、とりあえずはプラグインでどうにか解決できないかと探してみたところ、広告配置用のプラグインがいくつか見つかりました。

プラグイン「Wp-Insert」

広告管理プラグインで人気がある「Wp-Insert」を試してみましたが、これであれば記事下だけでなく、記事上・記事中間・記事下といったブログの様々なところに広告や定型文を表示することができるようでした。記事の先頭から〇番目の文節に固定HTMLを表示といった細かな機能もあるようです。

広告管理用プラグインのWp-Insert
広告管理用のプラグイン「Wp-Insert」

とはいえ、やりたいことは記事下に固定HTMLを表示させるだけですので、こんな大掛かりなプラグインを入れてただでさえ重いWordPressを更に遅くするのも嫌なので、プラグイン無しでできないかを調べてみたところ、やり方を紹介してくれている記事をみつけることができました。

簡単に言うと多くあるウィジェットの追加先(ウィジェットエリア)の中から、記事内上部や記事内下部を選び、そこにテキストやカスタムHTMLを追加する。これでできます。テーマによっては、記事内のウィジットエリアが無いものもあるので、ウィジェットエリアに追加する必要があります。

てくてくテクノロジーさんの記事

プラグインを使わず固定HTMLを追加

下記のような流れでやれば良さそうです。さっそく進めていきます。

1.ウィジェットエリアを新たに作成
2.ウィジェットエリアにカスタムHTMLウィジェットを追加
3.作成したウィジェットエリアを記事下で表示するようにする

記事下に固定カスタムHTMLを追加する方法

※毎度の警告となりますが、テーマphpの直接修正はWordPress破壊の可能性があるのでご注意ください

functions.phpにコードを追加

まずはウィジェットエリアを新たに作成します。てくてくさんを参考に、パラメータはこんな感じで設定すれば良さそうです。idは後でウィジェットエリアを引っ張るときに使うのでしっかり決めて下さい。

add_action('widgets_init', 'register_mywedgets');

function register_mywedgets(){	
  register_sidebar(array(
  //追加するエリアの名前
  'name' => '記事下部ウィジェットエリア',
  //追加するエリアのID(後でPHPで使う名前)
  'id' => 'post_bottom',
  //追加するエリアの説明
  'description' => '記事下部に表示する',
  //追加するエリアを囲うタグ(先頭)
  'before_widget' => "<div>",
  //追加するエリアを囲くタグ(後ろ)
  'after_widget' => "</div>",
  //追加するエリアに付ける見出しタグ(先頭)<h2>でも<h4>でもOK
  'before_title' => '<h3>',
  //追加するエリアに付ける見出しタグ(後ろ)
  'after_title' => '</h3>',
  ));
}

追加をしたウィジェットエリアが登場

functions.phpにコードを追加が成功すると、WordPress→外観→ウィジェットに新たに追加したウィジェットエリアが表示されています。

functions.phpを直接編集してウィジットエリアを新たに追加した
新しいウィジットエリアが追加されました

エリアにカスタムHTMLウィジットを追加

追加したウィジェットエリアに「カスタムHTML」ウィジェットを追加して、アフィリエイトコードなどを追加できるようにします。

新たに追加したウィジットエリアにカスタムHTMLを設定
ウィジェットエリアにカスタムHTMLを追加すればOKです

register_sidebar()関数で指定したタグに従い、カスタムHTMLにタイトルをつけて内容を書いて保存をすると、このウィジェットエリアには下記のようなコードが出力されます。

<DIV>
  <h3>テストタイトル</h3>
  テスト文章
</DIV>

記事下に出力されたときにキレイに表示されるよう、テーマのCSSとDIVのクラス名などをそろえつつ、カスタムHTMLにアフィリエイトコードを入れておきます。

dynamic_sidebar(ウィジェットエリア出力関数)

ここまで下準備ができれば、あとはdynamic_sidebar()関数を使って作成したウィジェットエリアを記事下に表示させればOKです。

dynamic_sidebar()関数で指定している「post_bottom」は、最初に自分でregister_sidebar()関数で設定をしたidになります。

<?php dynamic_sidebar('post_bottom'); ?>

投稿記事の表示用PHPで出力

テーマにより場所が異なるとは思いますが、Emanon Freeの場合は「content.php」が投稿記事の様々な表示を制御しているPHPでした。

新たに追加したウィジットエリアをテーマの記事レイアウト用PHPに設定
投稿記事のレイアウト設定用PHP

content.phpにエリア出力関数を使って表示

emanon_under_ad300()関数が300px×250pxの広告表示用の関数のようですので、その上に新しく追加したウィジェットエリアを追加しておきました。

<section class="article-body">
  <?php emanon_top_sns_share(); ?>
  <?php the_content(); ?>
  <?php wp_link_pages('before=<div class="next-page">&after=</div>&next_or_number=number&pagelink=<span class="page-numbers">%</span>'); ?>
  <?php emanon_bottom_sns_share(); ?>
  //記事下部分に表示したいのでここに追加
  <?php dynamic_sidebar('post_bottom'); ?>
  <?php if( is_emanon_exclude_ad_article() ): ?>
  <?php emanon_under_ad300(); ?>
  <?php endif; ?>
</section>

記事下に追加したウィジェットエリアが表示

content.phpの更新が無事に完了すると、新たに作成したウィジェットエリアが記事下に表示されておりました。テーマのCSSとクラス名を合わせていたので、表示も問題ない感じです。

新たに追加したウィジットエリアが記事下に表示された

おわりに

ウィジェットエリアを上部に追加する場合は、dynamic_sidebar()関数の置き場所を上にするだけで良さそうです。応用すればブログTOPにお知らせエリアを作ったりとか色々できそうです。

もちろん、有料版であればPHPを直接いじることもなく同じことをポンとできるのですが、いつもながら余裕がないので今回も有料版に進むことができませんでした。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォローどうぞ。