monograph

【収益化】WordPressで記事の途中(”続きを読む・moreタグ”部分)に広告やAdSenseを挿入する方法。

1
26
17
42

      2014/07/02

wordpress-article-adsense001.png
今日は一日何もしていなかったのでその分これから気合入れて記事量産します!ハイパーブログタイム!PITE.(@infoNumber333)です。

今回はブログの記事の途中に広告などの好きな要素を表示させる方法を紹介いたします。

ブログの広告配置というと大体記事の上下が一般的ですが、稀に記事の中に広告を埋め込んでいるブログを見かけます。見てくれてる方は知っていると思いますが、僕もそのタイプ。結構クリック率が良いので重宝しています。

今までは「Master Post Advert」というプラグインを使って「続きを読む(moreタグ)」の部分に広告を表示していたのですが、これが僕の環境だと最近不具合を起こすようになってきたというのと、モバイルとPCで広告の出し分けをしたかったので記事中に広告を表示させる別の方法を探すことに。

すると、わかったブログのかん吉さんがとてもタメになる記事を書いていたので参考にさせて頂きました。
WordPressスマフォページの「記事中」にアドセンスを表示する方法とメリット

このこの方法で上手く記事中への広告表示とモバイルへの出し分けが可能になったので僕のブログでも紹介させて頂きます。

記事の途中(moreタグ部分)に広告表示


wordpress-article-adsense000.png
PCから当ブログをご覧になっている方は今ちょうど見たところだと思いますが、この画像のように記事の途中へ広告を表示しています。これを今から実践するのです。

functions.phpにコードを追加


今回の方法はテーマファイルの中にある「functions.php」を編集します。「functons.php」は一つ間違うとブログ表示すらされなくなってしまうパンドラの箱なので必ずバックアップを取って失敗しても良い環境で行なって下さい。


<?php 
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {    
 
$adTags = <<< EOF
 
(表示させたい内容を記述)
 
EOF;
 
    $contentData = preg_replace('/<span id="more-&#91;0-9&#93;+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);   
 
    return $contentData;
}

?>




「functions.php」の中に上記のコードを書き込みましょう。このコードを書き込むことによって記事中の<span id=”more-○○○”></span>という部分が任意の要素に変換されて、記事中に表示されます。

コードの中の「EOF」の間、(表示させたい内容を表示)の部分に広告や画像など表示させたい要素を記述すればOK。これで記事の間に要素が挿入されるはずです。

テーマごとに出し分けが可能。


wordpress-article-adsense002.png
今回の方法はテーマの中の「functions.php」を編集するのでテーマごとに別の要素を出し分けることが可能になります。僕はスマホ用に別テーマを用意しているので先ほどのコードをこちらのテーマの「functions.php」に中身だけ変えて記述すれば簡単に広告の出し分けが可能になります。PCとスマホでは広告サイズを変えたい人が多いと思うのでこの方法は覚えておくと便利かも。

PITE.はこう思うよ。


表面には見えない部分ですが、こういうところをコツコツカスタマイズしていきたいですね。優雅な白鳥だって水面下では必死でバタ足してるのだから!

PITE.(@infoNumber333)

 - カスタマイズ

total

86

share!

シェアしてくれるとめっちゃよろこびます。

Monograph goods in bag23 teaparty

  関連記事

Number333 2012-05-07 3.07.12.jpg
WordPressの関連記事表示プラグイン「YARPP」をiPhone・スマホ用にカスタマイズしてサムネイルを表示させるようにしてみた!

先日、@goryugoさんの「関連記事プラグインYARPPをカスタマイズしてLi …

fixedsidebar1.jpg
超簡単にサイドバーをスクロールに合わせて画面に固定してくれるWordPressプラグイン

なんとなく久々にブロガー向けの記事を書く気が。 本日も“monogr …

写真 12-04-06 15 42 57.jpg
超簡単にブログをiPhoneなどのスマートフォンに対応させるWordPressプラグイン『WPtouch』を導入してみました!

こんにちは!PITEです! あったかくなってきましたねー(●´∀`●) 僕は寒が …

WordPressメモ:続きを読む(Read more)を設定/表示する方法

現在WordPress(このブログのソフト)のデザインを試行錯誤しながら作ってる …

facebook likebox000.jpg
Facebookページヘのいいね!を促す「Facebook like box」の設置方法。

最近、多くのブロガーさんとお話する機会が多く、その中でFacebookの重要性を …

th_Number333 2013-10-03 14.44.03-1.jpg
レスポンシブ対応。ブログにGoogle Mapsで作成した地図(マイプレイス)を埋め込む方法。

Googleマップがないともはやどこにも行けません。 PITE.(@infoNu …

NUMBER333テーマ変更ポイント1.jpg
NUMBER333のPC用WordPressテーマを新しく作成しました。今回覚えたテクニック7つをメモを兼ねてご紹介するので参考にどうぞ!

何故深夜はこうも作業が捗るのか。 本日も“monograph&#82 …

Lifehacker_201307_130709feedly_url.jpg
5分で完了。ブログにfeedlyのRSS登録用ボタンを設置する方法・手順を解説します。

起きて最初の30分はRSS眺めるのが趣味。PITE.(@infoNumber33 …

bitnami インストール設定004.jpg
超簡単!WordPressのローカル環境をBitNamiを使って構築する方法・手順を解説します。

今日ブロガーフェスティバルに参加してブログ熱が再燃してきました!! PITE.( …

Number333 2012-04-03 17.05.32.jpg
「MAMP」を使ってMacにWordPressをローカル環境にインストールする方法を解説します!

僕は基本的にワードプレスの管理はFirefoxのアドオンFirebugを使って管 …