「続きを読む」の場所に自動でアドセンス広告を載せる方法—主にJoomla!の場合

2月 16, 2016

≪≪この記事をすべて読むには約 12 分かかります≫≫

Googleのアドセンス広告(AdSense for Content)を使っている方は多いと思います。アドセンス広告に限らず、記事内容に合わせて自動的に表示する内容を変えてくれるコンテンツマッチ広告は便利です。

以前はブログタイトル横、サイドバー、記事下といった場所が「定番」の設置場所だったと思うのですが、最近は記事タイトル下や導入テキストの後(=「続きを読む」の後)、更には最初の<h2>ヘッダータグの前など、記事内部に設置するのが流行っています。

WordPressの場合

タイトルにJoomlaと書いてはありますが、このサイトでも使っている、一番メジャーなCMS(コンテンツマネジメントシステム)のWordPressでは、多くのサイトでやり方が解説されています。

例えば、

http://nelog.jp/widgets-in-body-custom
などに解説されていますが、当サイトではプラグインを使ってコーディングなしで

  1. 最初の<h2>タグの前(=記事メニューの前)
  2. 投稿本文の後
  3. サイドバーの上

の3箇所に置いています。

Joomlaの場合

業界2番手のCMSであるJoomlaでも、幾つかの方法で同じように広告コード(に限らずなんでも好きなコンテンツ)を載せることは出来ます。

WordPressと違って情報が少ないだけです・・・。細かい設定をするのは、最初は苦労しますが慣れればとても簡単です。

WordPressとの大きな違いは、

  1. 最初の<h2>タグ(や<h3>タグ)の前に自動挿入という方法はかなり面倒。
  2. 「続きを読む」の実装方法がWordPressと違うので、WordPressのような「置き換え」はできない。

の2点だと思います。ここで紹介している方法ではJoomlaのコードに変更を加えなくては行けませんので、アップデートすると消えてしまうことがあります。

<h2>タグの前に挿入する方法

出来ないことはないと思いますが、非現実的というか非効率だと思います。(キャッシュをうまく使うと表示速度への影響はないはずですが、サーバー負荷は増えると思います)

WordPressでこの方法をする記事を見ていると、記事内容を走査して最初に現れる「<h2」を捕捉して「入れたいコード<h2」に置換しています。

好みではないので実際に試してはいないのですが、Joomlaでこの方法を取るとしたら、

拡張コンポーネント「DB Replacer」

データベースの内容を置換する手伝いをしてくれる拡張機能「DB Replacer」を使って、記事内の<h2>を置換すれば良さそうです。

再度引っかかることを避けるために、<h2 class="first_h2″>とか適当に置換したら良さそうな気がします。

DB Replacerは無料コンポーネントですが、正規表現を使った置換をするには有料版(年間3000円くらい)が必要なので、全自動にするには投資が必要です。

拡張プラグイン「ReReplacer」

記事が表示される直前に置換してくれる拡張機能「ReReplacer」を使えば、動的に置換出来ます。こちらは、正規表現を使った置換を無料版で実現できます。

上のDB ReplacerもReReplacerも開発者が同じで、他にも有用な拡張機能をたくさん出しています。一生有料版を使えるサブスクリプションが魅力的ですが、8万円近いのでここのような弱小サイトで買う勇気は出せません・・・。

「続きを読む」に自動的に挿入する場合

Joomlaには、WordPressと違って「続きを読む」に実体がありません。お助け掲示板にもよく混乱した質問があって、回答がついていないものもあるので、それだけ読むとより意味がわからなくなってしまう原因にもなっています。

WordPressの「続きを読む」

どういうことかというと、WordPressを使っているこのサイトの場合、データベースを覗いてみると記事の内容は下記のようになっています。

アイコンフォント、Font Awesomeをワードプレスで使うためのプラグインを探して、「Better Font Awesome」にたどり着きました。

<!--more-->
<h2>アイコンフォント Font Awesome</h2>
Font Awesomeというのは、SIL OFL(Open Font Lisense)というライセンスで公開されているオープンソースのアイコンフォント集です。

(記事:ワードプレス用のアイコンフォントプラグイン、「Better Font Awesome」

<!–more–>の部分が「続きを読む」に対応しています。

Joomlaの「続きを読む」

edit_joomla-com_content

Joomlaでも記事の投稿画面では同じように「続きを読む」(Read more)を挿入できます。インストールしたままの状態で使っていれば、WordPressと同じように、

  1. 記事リストには導入部分(「続きを読む」の前)が表示される
  2. クリックすると、記事全文が表示される

という流れは同じです。

が、データベースの中にWordPressでいう<!–more–>に相当する部分はありません。

代わりに、introtextとfulltextという2つのデータベース項目に分かれていて、それぞれ

  • introtext → 「続きを読む」の前
  • fulltext → 「続きを読む」の後

が格納されています。記事を表示するときに、連結されて一つに表示されているだけです。

そのため、WordPressのように置換することで広告コードを表示させることは出来ません。これをするには、

/components/com_content/views/article/view.html.php

を編集する必要があります。(たぶん、他の方法はありません)

このファイルは、テンプレートによるオーバーライド(管理画面上で行う子テーマ編集のようなもの)では扱えません。また、Joomlaのアップデートに伴って更新されてしまう可能性があるファイルなので、本当は触らないほうが良いのですが・・・

Joomlaで「続きを読む」に広告コードを

(現行バージョンでは)150行目あたりにある

 if ($item->params->get('show_intro', '1') == '1') {
    $item->text = $item->introtext . ' ' . $item->fulltext;
 } elseif ($item->fulltext) {
    $item->text = $item->fulltext;
 } else {
    $item->text = $item->introtext;
 }

(閲覧性のために改変しています)

の$item->introtext . ' '. $item->fulltext;の行を改変すれば、「続きを読む」の場所に任意のコードを入れることが出来ます。

明日の自分のために、私のサイトでの改変内容を晒しておきます。

 $item->text = $item->introtext . '{modulepos after-intro}' . $item->fulltext;

このファイル中で設定したショートコードは有効なので、モジュールを挿入しています。(正確にはモジュール位置を挿入しています。)

これだけのコードで、ページの状態に応じて表示の切り替えをできるようになります。上の例では、モジュールの表示条件などなどの条件分岐で、

  1. ページによっては、表示しない(アドセンスを載せないページを作っています。ページによっては、代替でAdMaxを載せたり、何も載せないページを作っています。)
  2. 条件分岐して、サイドバーか「続きを読む」のどちらかだけにアドセンスを載せています。(スマホの場合は「続きを読む」に)
  3. さらに条件分岐して、PCの場合も特定の場合にはサイドバーではなく「続きを読む」にアドセンスを載せています。

というようなことを出来ます。(面倒ですが)

なぜ<!–more–>がないか

一見、<!–more–>がないせいで面倒なことをしているのですが、この管理方法には確実なメリットがあります。上で出てきたコードを見ると

if ($item->params->get('show_intro', '1') == '1') {
    $item->text = $item->introtext . ' ' . $item->fulltext;
 } elseif ($item->fulltext) {
    $item->text = $item->fulltext;
 } else {
    $item->text = $item->introtext;
 }

となっています。

これは、記事リストの導入部分と、本文を開いた時に見える文章を違うものにできる、ということです。

だから何なの?と言われそうですが、記事リストにも結論の一部を書いたり、疑問形で終わらせて記事を見てくれる意欲を掻き立てたり、といったことが自在に出来るようになります。

記事の外に設置するには

AdSenseのコードを記事外に表示するのは簡単で、管理画面からモジュールを作って配置するだけです。拡張機能に頼らなくても、AdSenseにレスポンシブ広告ユニットがあるおかげでレスポンシブ対応が簡単です。

何も気にせずアドセンスコードをカスタムHTMLモジュールに書くとセキュリティフィルターに引っかかってコードが消えてしまうので、フィルターを停止しておくことが必要です。公式サイトにプラグインなしでアドセンス載せる方法が解説されています。

AdSense用のプラグインもあります。