2014
2
20

WordPress単一記事のmoreタグを広告コード(+α)と置き換える

WordPressのmoreの位置に広告を入れてみました。プラグインを使っていないことと、PCレイアウト時にプラスでQRコードが出るようにもしてみたのでメモがてら。

※QRコードは(株)デンソーウェーブの登録商標です


実装結果↑

今まさにこの上に出ていることと思います。スマホ版ならば広告のみ、PCなどそれ以外の方には、現在記事のQRコードが一緒に表示されているはず。

ちなみに、このブログはレスポンシブデザインではなく、ユーザーエージェント切り替えで2つのテーマを使用しています。

実装に至った背景

先日こんな記事を書いたのですが、

世間で言う「このくらいのPVがあればだいたい収入はこのくらい」という基準にぜんっぜん届いておらず、「えッ…、わたしの収入…低すぎ…ッ!?」状態に陥って居たところ、大変親切な足長お兄様たちが「広告の配置や大きさを見なおしてごらん?」とアドバイスをしてくださいました。

いろんなブログを見て回って、やはり、これか…。と思ったのが、文中広告。

そうか、文中広告かー。ブログ開設したばかりのころは「収入が出るほどの規模になるはずないんだから、広告なんか無くてもいいんだ☆」なんて思ってたわたしが、遂に…。成長したものだなぁ(´ω`)

ショートコードで実装するのもアリだと思ったのですが、moreなら過去記事全てに適用できるし、いつもちょうどいい文章区切りの位置にあるのでmoreタグ置換が一番良いかなーと思って、やってみました。

参考

プラグインなしでやりたかったので、こちらの記事からお知恵を拝借しました。ありがとうございます!

あと、わたしは自作テーマを使っているんですが、こちらの記事を熟読させて頂いて大変参考になりました!

構想

わたしはいつも記事を書く時テキストモード(HTMLモード?)で書いていますが、その時に

って出るやつがmoreですね。これを投稿すると

このように出力されます(XXXXには記事ID)。この部分を、まるっと置換してしまうという方法です。

任意の文字列を置換

functions.php

このように書くことで、5~7行目の中に書いたものとmoreタグを置換してくれます!この中に書いたものは、テンプレートタグなどの変数もテキストとして出力されます。(このブログでは、モバイル版で実装している形です。)

変数を含んで置換

functions.php

4~5行目で変数へ任意の内容(ここでは、QRコードの画像URL)を格納して、12行目で結合して置換しています。(画像の大きさはお好みで変えられます)

パーマリンクの取得(4行目)については、

こちらのとおり、get_permalink()だけだとフィルターフックやエスケープを通っていないので、このあたりの処理を加えてthe_permalink()と同じ値になるように取得すると安心です。

QRコードについてはこちらの過去記事もどうぞ。

divや改行も入れたい

レイアウトのためdivで括ったり、htmlへ出力されたときの改行なんかもあったほうが読みやすくなりますよねー。

html

例えばこんな形のhtmlを出力させたければ、

functions.php

こんな感じに書けます。文字列の連結は「.」、改行は「\n」です。

以上です!どなたかの参考になれたら幸いです!なんか、文字ばっかりの記事になってしまいました(´Д`;)

追記:条件分けして、記事によって出力するコードを変えるという記事も書いてみました。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/02/20
更新日:2015/03/26


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top