アフィリエイト

ワードプレスで「YES-NO診断チャート」を作る方法【簡単です】

ワードプレスYES-NO診断チャートを作りたい!何かいい方法はないかなぁ?

当記事では上記のような悩みにスカッと答えます。

どうも!最近やっとアフィリエイト収入6桁超えを果たしたジッキー(@jikky_bongjing)です。

今回は、ワードプレスでYES-NO診断チャートを作る方法です。

アフィリエイター的に、これ知ってると結構便利かなって思ってます。

というのも、「おすすめ(商品名)●選」という感じの記事に超使えるからですね。

以前記事でも書きましたが、検索順位アップのための条件となる場合も・・・。

検索上位の「おすすめ記事」に共通する特徴6つ【研究データ大公開】 サービスや商品のオススメ記事を書いたけどなかなか上位に上がってこない。どうしたもんか・・・。 当記事では、上記のような...

診断チャートから、おすすめサービス紹介にジャンプさせると、読者にとっても非常に便利です。

ちなみにこの記事を読めば、↓のような感じのものができるようになります

Q1
今すぐ働きたい?

作るのは非常に簡単ですから、是非以下ご覧くださいませ!

ワードプレスで「YES-NO診断チャート」を作る方法【簡単です】

ワードプレスで「YES-NO診断チャート」を作る方法【簡単です】

診断チャートをつくるのは、実は非常に簡単。便利なプラグインがあるのです。以下のステップで進めていきます。

  1. まずは絵などでチャートを整理しましょう
  2. プラグインをインストールしましょう
  3. 診断チャートを立ち上げましょう
  4. 設問を作りましょう
  5. 結果画面を作りましょう
  6. 分岐の設定をしましょう
  7. ショートコードを貼り付けましょう

ではステップごとに詳細を解説します。

1:まずは絵などでチャートを整理しましょう

まず絵などでチャートを整理しなければ、頭の中がこんがらがります。

下記のように、一度絵を描いてから始めましょうね。今回は以下の診断チャートをサンプルとして利用します。

サンプルチャート

2:プラグインをインストールしましょう

Yes/No Chart」という名前のプラグインがありますので、検索してみましょう。←プラグイン名はコピペしてください。

以下の赤枠内のものをインストール&有効化します。

Yes/No Chart

3:診断チャートを立ち上げましょう

インストールに成功したら、管理画面のメニューに「Yes/No」のメニューが出ます。

まず設問セットから行います。

メニュー

そして以下のようが画面が出てくるので、セット名のところに「診断チャート名」を書いて、更新をします。

チャート名

チャート立ち上げ

これで、診断チャートの器ができたイメージ。ここからは設問を追加していきます。

4:設問を作りましょう

ここからは、ひたすらに質問を作っていく感じです。今作っている診断チャートのサンプルは以下です。

サンプルの診断チャート

まずは質問から作ります。結果はそのあとで。

というわけで、以下の2つの質問を作っていきます。

  • 今すぐ働きたい?
  • 就活のプロに相談したい?

メニューの「設問」のところから。

メニュー

タブでは新規追加を選びます。

新規
  • 設問セットID→先ほど入力した診断チャート名を選択
  • 設問番号→任意です
  • 設問→質問内容を書く
  • 種別→設問(分岐あり)
  • タイトル→任意です
  • 転送先→空白で

タイトルを書かなければ、設問番号はこのように反映されます。

Q2

僕の場合こんな感じです。

設問設定

それで新規追加を押せば、一覧画面で更新されたのがわかります。

設問生成

そしてまた、↑のタブの新規追加から質問追加へ。

これを質問の数の分だけ繰り返します。今回のサンプルの2問目も足してみました。

設問一覧

これで一旦質問については完成ですね。

次に結果を画面を作っていきます。

5:結果画面を作りましょう

今回のサンプルでは3つの結果画面が必要になります。

サンプルの診断チャート
  • 就職エージェント
  • 就活イベント
  • 就職サイト

これらの結果画面を作っていきましょう。

基本的には、先ほどの質問の作り方とほぼ同じ。

設問の欄に結果内容を書き、種別の部分が設問ではなく「結果(分岐なし)」を選ぶイメージですね。ちなみに、タイトルのところを書かないと、実際の画面でも「Q1」などと表現されるので、「結果」などと入力したほうが自然です。

  • 設問セットID→先ほど入力した診断チャート名を選択
  • 設問番号→任意です
  • 設問→結果内容を書く
  • 種別→結果(分岐なし)
  • タイトル→「結果」などと入力
  • 転送先→空白で

タイトルで結果と入れると、下記のように反映されます。

結果

さて、例えば、サンプルの診断チャートの中の「結果1」を出すと以下の感じです。

結果画面

ちなみに、設問の欄はHTMLの入力が可能ですから、結果画面にリンクを貼りたい方はコードを記入することになります。

あとの流れは同じ。サンプルの診断チャートの結果は3つあるので、全て揃えると以下のような感じになります。設問と同列に全て表示されますね、

チャート

あとは、分岐の設定をするだけです。

6:分岐の設定をしましょう

次はこの一覧画面から、↓の赤枠のリンクをクリックしていきます。

リンク

すると、以下のように、質問の後の分岐を入力できる画面へ。

分岐

「質問に対する回答の選択肢」と「次の質問(その回答を選んだら出てくる次の画面)」を設定します。次の質問のところは、先ほど設定した全部の設問と結果の画面を選べます。

サンプルの診断チャートだと、

サンプルのチャート

「今すぐ働きたい?」のあと「はい」なら次の質問へ。「いいえ」なら就職サイトをお勧めする「結果3」の画面へ飛ばしたいので、以下のように設定することになりますね。

分岐

これでおっけー。

種別を「設問」にしたものについては、全て同じように設定していきます。

という感じで完成です。

7:ショートコードを貼り付けましょう

もう一度メニューのところの、設問セットの画面にいきます。

メニュー

すると、以下のように設定した設問数が表示され、赤枠のところにショートコードが出てますから、このショートコードをコピーして挿入したい箇所にペーストすれば完成です。

ショートコード

結果こんな感じです!↓

Q1
今すぐ働きたい?

「YES-NO診断チャート」に関する先読みFAQ

「YES-NO診断チャート」に関する先読みFAQ

多分いくつか質問が出てくると思ったので、先読みでFAQ用意しました。

以下の通りです。

  • 診断結果から記事内の特定の見出しにジャンプさせたい
  • 結果画面から最初の質問に戻りたい
  • ボタンの横に出てくるリストの点を消したい

1つ1つお答えします。

診断結果から記事内の特定の見出しにジャンプさせたい

診断チャートでおすすめの商品がわかる → 記事内リンクが貼ってあってそこに飛ぶ

っていうことをイメージしているかと思います。

それは全然可能ですね。

まず結果を各部分についてはコードを書けるので、リンクを埋め込むことは可能です。

で、目次を生成させる必要がありますのいで、Table of Contents Plusなどのプラグインを入れましょう。

プレビュー画面ではなく、実際記事をアップして、目次を見れば、見出しにジャンプするためのURLがわかります。

↓以下で実際に飛んで見て、ブラウザのURL欄を見るといいですよ。

目次

追加URL

こんな感じでURLの後ろに追加のURLが追加されてるのがわかりますから、このURLを使って、診断チャートから記事内ジャンプさせるイメージです。

結果画面から最初の質問に戻りたい

これも結構やり方探したんですが、見つからず・・・。

というわけで僕は以下の方法で対応しました。

  • 診断チャートのすぐ下にその記事の再度読み込みのリンクを貼る。
  • 記事の一番上から診断チャートにジャンプするリンクを貼る。

善処って感じですが・・・。きっと同じような考え持ってる人たくさんいると思うので、アップデートされるのではないでしょうか。

あるいは、実はできるとか・・・?

下記は僕がこのサイトでも運用報告をしているフリーター向けの特化型ブログの記事ですが、こちらを見ていただければ僕が行った対応がわかると思います。

ボタンの横に出てくるリストの点を消したい

↓の点のことです。

ボタンの隣の点

ボタンの横の点を消す方法も現在模索中。

色々調べたけど、なんかやっぱりテーマによるみたい。JINだと出ちゃいますね。(^^;

消す方法あるんだろうけど、今の僕のスキルでは出来ない。CSSいじる必要ありです。

素人でもわかるように、やり方書いてる記事を見つけたい!

 

というわけで今回は以上です!是非ご参考に!