こんにちは！
自分メディア構築の千明です。
今日は簡単にYesNoチャートが作れるプラグイン、YesNoチャートを紹介します。
設問に「はい」か「いいえ」で答えると診断ができるYesNoチャートって雑誌などでよく見かけますよね。気楽にクイズ感覚で答えられるので、見かけるとついついやっちゃいます。
遊び感覚で診断ができるYesNoチャートを手軽に作れるプラグイン、Yes/No Chartをご紹介します。
サンプルの動物クイズは、こちらです。
Yes/No Chartプラグイン
Yes/Noチャートプラグインは、簡単に誰にでもYesNoチャートが作れるプラグインです。
事前にYesNoチャートの設計をしておき、その通りに設問と答えを登録してから、シナリオ通りに各設問を結びつけます。
シナリオを作成したら、それを個別ページに表示させるだけのシンプルな構造です。
YesNoチャートプラグインの注意点
お使いのテーマによっては表示が崩れたりうまく動作しないことがあります。
なるべくシンプルなテーマの方が相性がいいようです。高機能のテーマ、例えばCocoon、Giraffe、Luxeritas などでは動作不良になりました。
Twenty Twentyなどのようなシンプルなテーマがお勧めです。
お使いのサイトのテーマでうまく動作しない場合は、サブドメインでサイトを作成するとよいでしょう。
YesNoチャートを作成する
何事にも設計は必要です。事前に設計図を書いておきましょう。これを見ながら作っていきます。
今回は、このようなチャートを作ります。
ではダウンロードから。
ダウンロードから有効化まで
ワードプレスダッシュボード左欄のプラグインから新規追加に入ります。
検索窓にYes/No Chartと入れます。
出てきたら、今すぐインストールをクリックします。
有効化します。
Yes/No Chartプラグインの構造
有効化すると、左欄の下の方に、このような項目が出ます。
Yes/No Chartでは、設問セットと設問があります。先に設問セットを作って、その中に設問を入れていきます。
設問セットページ
こちらは設問セット画面です。
設問ページ
一覧では、各設問セットごとの設問一覧が見られます。また、設問セットの新規追加もこちらです。
見たい設問を選ぶと、
各設問セットに登録されている設問が表示されます。
新規追加ページでは、設問を追加できます。
では、これから実際に設問セットを作っていきましょう。
設問セットを新規追加
まず設問セットに行き、設問セットを登録します。
一番上の欄に追加する設問セット名を入れ、更新すると登録されます。
追加されると、2番目の欄に登録されます。
設問を設問セットに追加する
設問セットに設問を追加するページに行くには、3通りあります。
１．設問セットのページからじかに行く場合
設問を入れる設問セットの脇の設問追加を押すやり方
２．設問ページの一覧タブから行く方法
一覧ページで、動物クイズ、となっているのでこのセットに設問を追加を押すと、追加ページに行きます。
設問セットが表示されているときは、そのまま設問内容を入れます。表示されていない場合は、Ⅴをクリックすると登録されている設問セットを選択できます
3．新規追加から行く方法
新規追加タブだと、直接追加のページに行けます。
設問を追加する
新規追加ページにて、設問セットの選択を確認し、設問を入れます。
- 設問の場合は、設問(分岐あり）を選択。
- 結果の場合は、結果（分岐なし）を選択。
新規追加を忘れずにクリック。
ちなみに、結果を入れるときはこうなります。
転送先にURLを入れると、そのページに飛びます。
一度作成した設問の編集
編集は、設問一覧から、個別の設問に入ります。このように、編集が簡単にできます。
設問内容は、テキストモードで入力できますよ。
設問の分岐を設定する
設問と回答を入れ終わったら、設問一覧ページに行きます。
要らない設問は、チェックをして削除できます。
上から順番に、分岐を設定します。
設問番号の隣の設問（抱っこできますか？）をクリックします。
個別の設問に対する分岐が設定できます。
今回は、「はい」または「いいえ」だけですが、分岐はご覧の通りラベルを設定したら10まで設定できます。
各ラベルに対応する分岐先の設問を選びます。
選択すると、このように表示されます。
結果まで行ったあと、初めからできるようにするには、分岐先を最初の質問にセットします。
固定ページに表示させる
分岐も設定出来たら、設問セットのページに行きます。
ショートコードをコピーします。
固定ページの新規追加から、テキストモードで、コピーしたショートコードをペーストします。
忘れずに、タイトルを記入し、公開するを押してくださいね。
これで出来上がりです！
動作確認してくださいね。
今回作成した動物クイズは、こちらです。
まとめ
簡単にYesNoチャートが作成できます。
やってみてくださいませ！
