【WordPress】ウィジェットに「おみくじ」機能を追加してみたよ

ブログ・サイト
ブログ・サイト
この記事は約5分で読めます。

とっちゃん@nyanco! です。

今回はWordPress(ワードプレス)のウィジェットでアクセスする度にランダムで結果が変わる「おみくじ」コンテンツを設置してみたよというお話です。

肉玉にゃんこ

応用で「占い」機能も簡単に実装できそうですにゃ〜

本記事の内容では functions.php を触っていきます。 functions.php は記述を間違えるとホームページが真っ白になったり、最悪管理画面にも入れなくなってしまうので必ず触る前の functions.php ファイルのバックアップ、FTPソフトでのアップロードで行うようにしてください。作業はあくまで自己責任でお願いいたします。

スポンサーリンク

やりたいこと

▼今回やりたいことは、下記のようにブログのサイドバーにウィジェットとしてページを読み込む度に結果が変わる「おみくじ」を設置することです。

ウィジェットは随時カスタムしているので、タイミングによっては「おみくじ」コンテンツはなくなっているかも知れません。ご了承ください。

「おみくじ」を思いついた時は、動的なコンテンツとなるのでこれはJavascriptの出番かな?と思ったけどとってもシンプルなPHP一発でできました。

肉玉にゃんこ

動的コンテンツに強いPHP、使えるようになるととっても便利ですにゃ〜

本記事の環境

参考までに本記事内容の環境は下記となります。

  • WordPressバージョン:5.6.8
  • WordPressテーマ:Cocoon2.4.3

参考にさせていただいた記事

WordPressのウィジェットでPHPコードを実行する方法 – FOXWP
WordPressのウィジェットでPHPコードを実行する方法を解説します。ウィジェットでPHPコードを実行するには、プラグインを使用する方法とfunctions.phpファイルを編集する方法の2種類があります。それぞれについて方法を解説していますので、目的に合わせて方法を選択してください。
アクセスするたびに表示内容が変わるページ | PHP Labo
肉玉にゃんこ

有益なコンテンツ、ありがとうございますにゃ〜

ウィジェットに「おみくじ」を設置する方法

ウィジェットでPHPを使えるようにする

まず、WordPressのデフォルトではウィジェットでPHPは使えないので functions.php に下記コードを追記してPHPを使えるようにしていきます。

//ウィジェットの「テキスト」でphpを使用できるようにする
function widget_text_exec_php( $widget_text ) {
    if( strpos( $widget_text, '<' . '?' ) !== false ) {
        ob_start();
        eval( '?>' . $widget_text );
        $widget_text = ob_get_contents();
        ob_end_clean();
    }
    return $widget_text;
}
add_filter( 'widget_text', 'widget_text_exec_php', 99 );

冒頭でも述べましたが、 functions.php を触る時はくれぐれもバックアップをとっておきましょう。

ウィジェットに「おみくじ」機能を設置

functions.php に追記するとウィジェットでPHPが使えるようになるので、早速「おみくじ」機能を設置していきます。

使うウィジェットは「テキスト」となります。

似たウィジェットに「カスタムHTML」がありますが、こちらでは functions.php に追記してもPHPが使えないので「テキスト」一択です。

「テキスト」ウィジェットはデフォルトで「ビジュアル」モードになっているので「テキスト」モードに切り替えます。

肉玉にゃんこ

「ビジュアル」モードだとhtmlやPHPなどのコーディングができないですにゃ〜

続いて下記コードをコピーペーストします。

<div class="omikuji">
  \今日のあなたの運勢/
  <span>
    <?php
      $fortune = array(
        "大吉","中吉","小吉","吉","末吉"
      );
      $count  = count($fortune);
      $random = rand(0, $count - 1);
      echo $fortune[$random];
    ?>
  </span>
</div>

上記コードのキモとなるのは4〜11行目の<?php 〜 ?>です。

肉玉にゃんこ

それ以外の部分はhtmlの知識があれば自由にできるはずですにゃ〜
上記はあくまでサンプルですにゃ〜

おみくじ結果内容は6行目で定義しているで、「占い」など他のコンテンツにしたい場合は“(ダブルクォーテーション)で囲まれた文字を任意のものに変更したらOKです。

また”omikuji”というclassをつけてますが、これも任意となります。

参考までに、本ブログと同じ装飾を加えたい場合は下記コードを参考にCSSに追記してください。

/* ウィジェット */
/** おみくじ **/
.omikuji{
	text-align:center;
	padding:30px 5px;
	background:url(https://xxx/xxxxx.png) #dce3fc no-repeat -15% 150%;
	background-size:120px;
	border-radius:10px;
}
.omikuji span{
	font-weight:bold;
	font-size:30px;
}

おわりに

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント