サイドバーのみにブログ村のバナーを置いていたのですが、いかんせんクリックしてもらえません。INポイントが喉から手が出るほど欲しいので、ブログ村のバナーを投稿終わりにも設置することにしました。
悩んだのがバナー上のテキストを何にするか。センスのいいテキストを入れていれば INポイント獲得につながる可能性が上がること間違いなし。
悩んだ挙句、ユーザーのアクセスごとにテキストを変えることを思い立ち、実装しました。
わからない、わかりにくい、うまくいかない等ありましたらコメントください。
実現したこと
- ページへのアクセスごとに用意したテキストをランダムで出力
- あとでごにょごにょできるようにclass、idを付与
- ワードプレス上でショートコードで実装できるようにする
実装の手順
今回の作業は若干難易度が高いです。初心者の方が「ガンガンいこうぜ」で突き進むと危険ですので、内容は少し知っている方向けの説明にしています。
Step1. ランダム出力用のPHPファイルを作成
PHP
ブログ村バナーとその上のテキストを出力するPHPファイルを作成します。
functions.phpに記載してもよいのですが、ごちゃごちゃしてしまうのでテンプレートファイルの1つとして外部ファイルとして作成しました。
<blogmura.php>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?php//表示するメッセージのパターン$msg_pattern = array( '最後までお読みいただきありがとうございます!<br />オラに元気を分けてくれ！', '最後までお読みいただきありがとうございます!<br />清き1クリックをくださいm(._.)m', '最後までお読みいただきありがとうございます!<br />ポチっとな不足解消にご協力くださいm(._.)m');//乱数で表示するメッセージを決定$random = mt_rand(0, count($msg_pattern)-1);//GTMでのバナークリック取得用にバナー固有のid作成$bnr_id = "id =\"blog-mura-bnr{$random}\"";//htmlコードとして整形 id、class付与 ※変数の中に変数は""で囲っても処理できず$msg = "<div id =\"blog-mura-ptn{$random}\" class=\"blog-mura\"><small>" . $msg_pattern[$random] . '</small><br />';//ヒアドキュメントでhtmlコードを記載echo<<<eof{$msg}<!-- ブログ村バナーのコード+idを付与 --><a {$bnr_id} href="https://stock.blogmura.com/salarymantrader/ranking/in?p_cid=11011449" target="_blank" ><img src="https://b.blogmura.com/stock/salarymantrader/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 株ブログ サラリーマン投資家へ" /></a></div><br /><br />eof;?> |
補足説明：
エリアにはclassとid、バナーにはidを付与しています。
divのidでGTMによりクリックされたバナーを取得する予定でしたが技術力が足りず実現できなかったため、バナーにidを付与しました。
（GTMで{{Click ID}}でidが取得できることを確認済み。それぞれのクリック率が見たいですが、表示回数の取得はまだ試していません。）
ヒアドキュメント内では分岐処理できないので変数として結果を渡しています。if文を使う予定でしたが、必要なかったです。
Step2. functions.phpにショートコードの記述を追加
PHP
functions.phpに以下を追記し、ショートコードを利用して簡単に呼び出せるようにします。
<追記コード>
1 2 3 4 5 6 7 | function blogmura(){ ob_start(); //tmp-user/blogmura.phpを実行 get_template_part('tmp-user/blogmura'); return ob_get_clean();}add_shortcode('blogmura', 'blogmura'); |
補足説明：
「get_template_part」単体では表示位置が一番上になってしまうため、「ob_start()」「ob_get_clean()」を利用して表示位置が適切になるようにしています。
Step3. ショートコードを記載
ワードプレス
以下のようにショートコードを記載すれば、実装完了です。
ウィジェット内に記載
Cocoonを使っている場合は、ウィジェットに「投稿本文下」があります。
「テキスト」ウィジェットを追加して[blogmura]と入力すれば魔法のように投稿本文の下にバナーが入ります。
投稿内に記載
段落内にショートコード[blogmura]を入力するとその部分にバナーが入ります。
ドはまりポイント：PHPの変数にハイフンはNG
GTMのクリックイベントでidの取得のでバナーのリンクにidを付与する処理を追加しました。
その変更を反映するとページのレイアウトがめちゃくちゃになりました。サイドバーがボトムバーになりました。
エラー内容は「Parse error: syntax error, unexpected ‘=’ in XXX」です。
嫌な汗をかきながら奮闘した結果、見つけた原因は「変数にハイフンが入っていた」というものでした。アンダーバーとすべきところを無意識にハイフンにしてしまってました。
参考サイト
■PHPで画像をランダム表示させる方法～アフィリエイトバナー
https://webnetamemo.com/coding/php/201608313448
■PHPのヒアドキュメント内で変数を使う・出力する
https://9-bb.com/php-4/
■乱数を生成する(rand, mt_rand)
https://www.javadrive.jp/phpfunc/math/index1.html
■PHPのダブルクォーテーションとシングルクォーテーションの違いを理解する
https://qiita.com/bitcoinjpnnet/items/64458299eaeefbacab44
■WordPressのショートコードで任意のテンプレートを呼び出す
https://blog.mah-lab.com/2014/05/23/wordpress-shortcode-template/
あとがき
上記ドはまりポイント以外にもドはまりしたところがありました。
「ウィジェットに入れた場合は問題なく動作するが、本文中に入れると動かない」次章でしたが、色々やっているうちに直りました。そして再現ができません。
時間だけでなく、ドはまりポイントをブログに書くという特権まで奪われてしまいました。
プログラミングはおもしろいのですが、バグ取りにはまると肉体的、精神的にめちゃくちゃやられます。
ちなみに全ページに共通の内容を表示するようにする場合は、ウィジェットに記載するだけでよいので3分もあれば終わります。
ちなみに…おかげさまで非常に多くのPVポイントをいただきました。。
【悲報】
— 現役曲げ師👁🗨クノウ (@munokuno) September 8, 2019
クノウ氏またPHPでプログラムのエラーにはまって本番環境を落としまくる。
なお本日のブログ村のPVポイント1,140は99.9%が自分の模様。#プログラミング #サイトダウン
コメント