【PHP】ページへのアクセスのたびにテキストをランダムで出力

サイドバーのみにブログ村のバナーを置いていたのですが、いかんせんクリックしてもらえません。INポイントが喉から手が出るほど欲しいので、ブログ村のバナーを投稿終わりにも設置することにしました。

悩んだのがバナー上のテキストを何にするか。センスのいいテキストを入れていれば INポイント獲得につながる可能性が上がること間違いなし。
悩んだ挙句、ユーザーのアクセスごとにテキストを変えることを思い立ち、実装しました。

わからない、わかりにくい、うまくいかない等ありましたらコメントください。

実現したこと
実装の手順
ドはまりポイント：PHPの変数にハイフンはNG
参考サイト
あとがき

実現したこと

ページへのアクセスごとに用意したテキストをランダムで出力
あとでごにょごにょできるようにclass、idを付与
ワードプレス上でショートコードで実装できるようにする

実装の手順

今回の作業は若干難易度が高いです。初心者の方が「ガンガンいこうぜ」で突き進むと危険ですので、内容は少し知っている方向けの説明にしています。

テーマの基幹となるfunctions.phpに関わる変更を行います。有事の際に元に戻せるように作業前にバックアップを取ってください。

Step1. ランダム出力用のPHPファイルを作成

PHP
ブログ村バナーとその上のテキストを出力するPHPファイルを作成します。
functions.phpに記載してもよいのですが、ごちゃごちゃしてしまうのでテンプレートファイルの1つとして外部ファイルとして作成しました。

<blogmura.php>

<?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に以下を追記し、ショートコードを利用して簡単に呼び出せるようにします。

<追記コード>

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ポイントをいただきました。。

【悲報】
クノウ氏またPHPでプログラムのエラーにはまって本番環境を落としまくる。
なお本日のブログ村のPVポイント1,140は99.9%が自分の模様。#プログラミング #サイトダウン
— 現役曲げ師👁‍🗨クノウ (@munokuno) September 8, 2019