おみくじやタロット診断、YES/NO占いなど、ランダムに答えが出るツールを自分のサイトに作りたい方は、けっこういらっしゃるかと思います。
実はこの診断機能、プログラミングの深い知識がなくても、WordPressの無料プラグインだけで作ることができるんです。
私のサイトでも、「今の悩み、ズバリ答えが欲しい！」という方のために、「YES/NO診断」を設置しました。
今回は、占い師や個人ブロガーさん向けに、その手順を詳しく解説します！
※先に完成が見たい方はこちらのYES・NO診断からどうぞ
ランダムな「YES/NO占い」を設置したい！
私のサイトには、「タロットの解説」や「誕生日タロット」のページに、多くの人に訪れていただいていますが、やはり「今すぐYESかNOか知りたい！」という切実なご要望も多くいただきます。
そこで、「バースデー守護カード」の計算ツールを作った時と同じプラグインで、皆さまが簡単に遊べる、YES/NO(イエス・ノー)診断ツールを自作しようと思いました。
使用したプラグイン：Calculated Fields Form
今回使用したのは、「Calculated Fields Form」というプラグインです。 計算式を組み込むことで、入力された値から、自動で見積もりなどを作成できるツールです。
プラグインの検索画面から「Calculated Fields Form」を探して、インストールします。
診断ツールの基本的な構造と手順
この診断は、大きく分けて3つのパーツでできています。
- 計算フィールド（非表示）: 数字（0〜21）をランダムに生み出す場所。
- 診断ボタン: 計算のトリガーとなるボタン。
- 結果表示フィールド: 数字を「言葉」に変換して見せる場所。
手順１、新規フォーム作成
まずは、「Calculated Fields Form」の「New Form」にフォームの名前を入力し「Create Form」をクリックしてフォームを新規作成します。
手順２、計算フィールドを作る
まずは、タロットカード22枚（大アルカナ）に対応する「0〜21」の数字をランダムに作るフィールドを作成します。
左上の「Add a Field」から「Calculated Field」をクリックすると、右側にフィールドが新規作成されます。
初期画面にあった右側のフィールドはすべて消してから始めましたのですが、割り当てられた名前は「fieldname2」でした（後で使用します）。
作成したフィールドの計算欄（Set Equation）に以下のコードを入力します。
(function(){
return Math.floor(Math.random() * 22);
})();これは、まず、Math.random() で0から1未満の数字を出し、そこに22を掛けることで「0.00…〜21.99…」という数字を作ります。その後に Math.floor() で小数点以下を切り捨て、「0〜21」の整数を作っています。計算方法は他にありますが、ちょっと「魔術的」にしてみました。
※このフィールドはユーザーに見せる必要はないので、Equationの上にある「Hide Field〜」にチェックを入れて非表示にしておきましょう。
手順３、トリガーボタンの設置
次に、ボタンを設置します。
左上のAddから、Buttonを選択し、右側にボタンフィールドを新規作成します。
名前がボタンに表示されるので「診断する」や「クリック」など、あなたの世界観に合わせた名前をつけましょう。
※重要ポイント
デフォルトで診断結果が勝手に表示されるので、ボタンを押した時だけ計算されるように設定を変えておきます。
Add~の並びにある「Form Settings タブ」を選択し、 「Dynamically evaluate the equations associated with the calculated fields」 のチェックを外してください。
手順４、計算結果フィールドを作る
このフィールドは、手順２で作ったフィールドの数字を受け取って「YES/NO」の判定を表示させる場所にします。
まずは、左上の「Add a Field」から「Calculated Field」をクリックし、右側に計算フィールドを新規作成します。
次に、左側の下の方にあるPredefined Value に、「YES or NO」など、計算前に表示しておきたい文字を入れ、「Use predefined value as placeholder」欄にチェックを入れておきます。
これを設定することで、計算（ボタンクリック）が実行されるまで、入力した文字が表示され続けます。
この設定をしておくと、こんな感じの表示画面になります↓
診断ボタンを押す前にプレースホルダーが表示されるので、見た目がスッキリします。
次に、数字に応じて「文字」を表示するコードを設置します。
作成したフィールドの計算欄（Set Equation）にコードを入力します。
私は、自分自身の判断基準（アルカナごとの意味）に基づいた以下のようなコードを設置しました。
(function(){
var n = fieldname2;
// 0から21までの判定リスト
var judge = [
"YES", // 0.愚者
"YES", // 1.魔術師
"状況による", // 2.女教皇
"YES", // 3.女帝
"状況による", // 4.皇帝
/* ...各数字に対応する判定 */
"YES" // 21.世界
];
return (n !== "" && n !== null) ? judge[n] : "";
})()▶ポイント1：「var n = fieldname2;」の部分には、手順２で作成したフィールドネームの番号を入れてください。
▶ポイント2：「var judge = 」のあとの囲みは、プログラムが「上から何番目か」を自動的に数えてくれるので、フィールド２で出したランダムな数字が、０,１,３の場合は「YES」、２や４の場合は「状況による」と表示してくれます。
これで完成です！
「Save and Preview」を押して確認してみましょう。
保存やプレビューができない時は？
もし「Save（保存）」や「Preview」を押しても反応がない場合、レンタルサーバーのセキュリティ設定（WAF）が干渉している可能性があります。
私が利用している「ロリポップ」などのサーバーでは、一時的にWAF設定を「無効」にすることで解決します。設定変更が終わったら、セキュリティのために必ず「有効」に戻すのを忘れないでくださいね！
ショートコードを記事に貼って完成！
問題なくプレビュー出来たら、投稿記事や固定記事にショートコードを貼るだけです。
ショートコードはこちら。
[CP_CALCULATED_FIELDS id="番号"]「番号」の部分に、ご自身のフォーム一覧に表示されているIDを入力してください。
上記で作成したサンプルはこちらになります↓
※私は手順４を繰り返し、「カード名」と「メッセージ」を表示するフィールドも追加しました。
「診断ボタン」を押すたびにフィールドの文字が変わります。
ボタンや画面サイズなどをCSSで変更したバージョンのリンクも貼っておきます。
よかったら違いを比べてみてください！
●リンクはこちら→タロットでイエスノー占いをやる時に便利な一覧表/あなたの答えはYes・No？
これだけでも「おみくじ」や「簡単な占い」は作れそうです。
ボタンを押さずに結果を表示させることも出来るので、サイドバーに「今日のひと言」をランダムに表示させても面白そうですね！！
ぜひ、あなたのサイトでも試してみてください！