WordPressで診断ツールが作れるプラグイン『診断ジェネレータ作成プラグイン』で遊ぼう

この記事を書いている人
JUNICHI
JUNICHI(松原潤一)
色んな人にブログ運営の事を教えている。得意なのはブログ集客・SNS活用法・SEOライティング。※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。詳しいプロフィールはこちら 
●Facebook ●Twitter ●Instagram ●Youtube
 

JUNICHI
どうも、JUNICHIです。

今日は、便利なプラグインを紹介しまっせ!

 

あなたは、自分のブログ内で『診断』ができるコンテンツを作りたいと思った事はありませんか?

  • 健康度チェック
  • 浮気度チェック
  • 占い

などなど、今回紹介する『診断ジェネレータ作成プラグイン』を使えば、ほんまに楽しい診断コンテンツが作れるようになります。ぜひ、以下の解説を見ながら一緒に作ってみましょう!

 

STEP1)プラグイン『os diagnosis generator』をインストールしよう!

毎年平社員の佐伯さん
ひぃえぇぇぇぇぇ…困りました…。
新人の森永君
どうしたんですか?先輩。
毎年平社員の佐伯さん

社長に、『WordPressサイトに、診断ができるコンテンツを作れ!』って言われたんです。

でもどうやって作ればいいか・・・・。

OLの長野さん
そんなの簡単よ。
毎年平社員の佐伯さん
な、長野さん!お、お久しぶりです!
OLの長野さん
ねぇ、世の中には便利なプラグインが沢山ある、って1万回くらい教えてあげたわよね?

バカなの?

まず、ググればいいじゃない。たいがいは、プラグインで出来る事が多いのよ。

毎年平社員の佐伯さん
そ、そんなプラグインがあるのですか!
新人の森永君
先輩!ありました。「診断ジェネレータ作成プラグイン」っていうのがありました!

 

OLの長野さん

そう。それよ。

今回はそれを使いながら、診断コンテンツの作り方を教えてあげる。お礼は、分かってるわよね。

 

毎年平社員の佐伯さん
は、はい!お金ですね!
OLの長野さん
分かっていればいいの。ビジネス成立ね。

 

という茶番も終わったことで、まずは、いつものごとく、WordPressを運営している人なら分かると思いますが、プラグインをインストールして有効化しましょう。

プラグイン名は「os diagnosis generator」です。

インストール?有効化?何それ!なあなたは、ここから見てね。

↓まずは、ダッシュボードの左のメニューの「プラグイン」から「新規追加」をクリック

診断プラグインの使い方1

 

↓ 右上の検索できる窓の中に、『os diagnosis generator』と入力してENTERをぼちっと!
診断プラグインの使い方2

 

↓「診断ジェネレータ作成プラグイン」っていうのが出てくるので、「今すぐインストール」をクリック
診断プラグインの使い方3

 

↓あとは、インストールが終わったら、必ず『プラグインを有効化』をクリック!忘れないでね。
診断プラグインの使い方4

OLの長野さん
これくらいはできるわよね。
毎年平社員の佐伯さん
は、はい!なんとか!

 

これで、診断ツールが作れる状態にはなりました。じゃあ、さっそく作ってみましょう!

 

STEP2)どんな診断コンテンツにするか考えよう!

OLの長野さん
このプラグインでは、2パターンの診断コンテンツが作れるのよ。

パターン1)名前とか何かを入力したら自動で診断してくれるパターン

パターン1の例
OLの長野さん
↑こんな感じで、名前を入れてもらうだけで、ランダムに診断結果を出せるタイプよ。
新人の森永君
「占い」とかに使えそうですね!
OLの長野さん
遊び用ね。

佐伯さんみたいなウスノロは遊んでないで早く覚えなさいよね!!

 

パターン2)設問式の診断ができるパターン

パターン2の例
OLの長野さん

↑こちらはもう少し実用的なサイトにも使えるわ。

新人の森永君
健康度チェックとかに使えそうですね。

はい、という事で、今からあなたが作りたいのが、パターン1・パターン2のどちらが最適か考えてみて下さい。

 

STEP3)診断コンテンツの作り方!

OLの長野さん
じゃあ、うすのろあんぽんたんの佐伯さんにも分かるように、ゆっくり解説していくわ。
毎年平社員の佐伯さん
う、うすのろあんぽんたん…。

パターン1)のランダム診断ツールを作る場合の作り方

↓まずは、ダッシュボードの左に『診断ジェネレータ作成プラグイン』っていうのがあるので、そこから『新規作成』をクリック!
診断プラグインの使い5

 

↓すると、こんな画面が出てきます。この画面で、診断ツールを作っていきましょう。

自動診断の場合1
  • タイトル:この診断ツールの名前を付けておきましょう。(タイトルは『表示しない』でOK)
  • ラベル:ここは、ランダムで入れてもらう項目を書いておきましょう。(例:『名前を入力してね!』『生年月日は?』など)
  • プレースホルダ:ここは、入力してもらうところに、うっすらと例を載せておく場合、その文字を入力。
  • 送信ボタンのテキスト:最後に診断結果に行くためのボタン上に表示させる文字を入力します(例:『診断する!』)
  • 診断方法:占いなど、ランダムで診断結果を出すパターン1の時は『診断はシステムに任せる』を選びましょう

ここまで終わったら下に行きます。

診断結果部分を設定しよう!

↓すると、以下のように『診断結果を設定』という部分が出てきます。自動診断の場合2

何が書いてあるかというと、

 

[Name]は[Text1]で[Text2]です。

[Text3]で[Text4]になるでしょう。

って書いてあります。それぞれ、何が入るようになるのか解説しますね。

 

OLの長野さん
ここからは、ちょっと佐伯さんには難しいかもね。
  • [Name] ⇒ 読者側が入力してくれた名前がそのまま出る。
  • [Text1]~[Text4] ⇒ 以下に入力する項目がそれぞれ出るようになります。

 

この診断結果の部分は[Name]とか[Text4]のカッコの中身を変えない限り、自由に設定ができます。

例えば、先ほどの初期設定の文字をこんな風に変更する事もできます。

 

[Name]さん!こんにちは。

すごい結果が出てしまいました…。

[Name]さんは[Text1]な人なので[Text2]です。

将来、[Text3]で[Text4]になるでしょう。

みたいに、ちょっとふざけた文章にする事もできるって事です。

 

※注意やポイント

  • この診断結果の部分は150文字以内で設定しないとシステム的に動いてくれません。
  • [Text1]や[Text2]など、ランダム表示させたい部分を減らしたかったら、[Text2]ごと消してあげればOKです。

じゃあ、一体この[Text1]とかいう部分には何が入るようになるのか?っていう話ですよね。

毎年平社員の佐伯さん
な、なんとか理解できます・・・!

 

ランダムに表示される項目部分を設定しよう!

[Text1]とか[Text2]の部分には、ランダムに言葉が出てくるようになります。ここのレパートリーを増やしておけば、いろんな組み合わせの、色んな結果で読者さんに楽しんでもらえます。

↓設定方法は簡単![Text1]とか、[Text2]の部分に表示させたい文言を、それぞれ1行ずつ入力します。自動診断の場合4

例えば↑の画像では、

[Text1]に表示されるパターンは

  1. 脳みそを使う事が苦手
  2. 超アイディアマン
  3. 感情豊か

の3パターンを用意した事になります。

同じように[Text2]や[Text3]でも3種類ずつ用意するとなると、これだけでも3パターン×3パターン×3パターン=27通りの診断結果を出すことができますよね。

こんな感じで、Text1などを設定してみて下さい。

各項目が設定できたら、一番下にある『作成する』ボタンをクリック!これでランダムな診断ツールは作れました。

診断プラグインの使い6

作成した診断ツールはどうやってサイトに設置するの?

毎年平社員の佐伯さん
これで、診断ツールはできたと思うんですが、これをどうやってサイトで見れるようにしたらいいのですか?
OLの長野さん
ショートコードを、投稿や固定ページにコピペするだけよ。

作成した診断ツールごとに、『ショートコード』というものが発行されます。

↓ ダッシュボード左の『診断ジェネレータ作成プラグイン』の中の『診断フォーム一覧』をクリック
ショートコード取得

 

↓作成した診断フォームの上にある「ショートコードを取得」をクリック
ショートコード取得2

 

↓すると、赤枠のような感じでコードが発行されます。これをコピーしてください。
ショートコード取得3

 

↓あとは、固定ページの「新規追加」をクリックして…
ショートコード取得4

 

↓ 本文の中に貼り付けます。ショートコード取得5

 

↓ プレビュー画面を見ると、ちゃんとこんな風に設置ができています。
ショートコード取得6

 

OLの長野さん
どう?分かった?
毎年平社員の佐伯さん
ハァハァ…。な、なんとかできました…。

 

パターン2)の設問形式診断ツールを作る場合の作り方

OLの長野さん
どんどん行くわよ。

次に、設問式の診断コンテンツを作る方法解説します。

↓まずは、ダッシュボードの左に『診断ジェネレータ作成プラグイン』っていうのがあるので、そこから『新規作成』をクリック!
診断プラグインの使い5

 

 

↓診断を作る画面になります。まずは、基本情報を入れましょう!

設問形式1
  • タイトル:この診断ツールの名前を付けておきましょう。(タイトルは『表示しない』でOK)
  • ラベル:ここは、ランダムで入れてもらう項目を書いておきましょう。(例:『名前を入力してね!』『生年月日は?』など)
  • プレースホルダ:ここは、入力してもらうところに、うっすらと例を載せておく場合、その文字を入力。
  • 送信ボタンのテキスト:最後に診断結果に行くためのボタン上に表示させる文字を入力します(例:『診断する!』)
  • 診断方法:設問形式の場合は『診断は設問形式にする』を選びましょう
  • 設問数:診断のために、読者側が回答する設問の数を選びましょう。(5問、10問、25問、50問から選べます)

ここまで出来たら、下に行きます。

診断結果を設定しよう!

診断結果の設定

ここは、パターン1でやったのと同じ要領で埋めていきます。最終的に読者さんに見せたい結果をここで設定してあげて下さい。

各設問文と点数を設定しよう!

設問文と点数

↑こんな画面になります。問を10個作る場合は、10個とも埋めましょう。

  • 設問文 ⇒ 読者さんに見てもらう質問を書きましょう
  • 選択肢 ⇒ 読者さんに選んでもらう選択肢を1つにつき1行で書いていきます
  • 点数 ⇒ 各選択肢の行に合わせて、それぞれを選ぶと何点になるか?の数字を半角で入れます。

 

診断結果に表示させる項目を設定する

各設問を答えると、最終的に各設問の答えのポイントが合計されるようになります。

例えば、設問1~設問10までの点数を合わせて何点以上~何点未満なら、この結果を出す!っていう設定ができます。

ここでは、最終的に結果の[Text1]に当たる部分にどんな項目が表示されるようになるか、[Text2]に当たる部分はどうか、、、などと1個ずつ設定してあげます。

設問と点数

↑例えば、こんな風に、[Text1]の部分に表示される可能性がある項目を1行につき1つ書いていきます。その右側の『表示条件』の所には、合計得点の条件をいれましょう。

※注意
以上と未満の違いに気を付けて設定してください。必ず、合計点を全てカバーできる選択肢を用意しておいてください。じゃないとエラーになってしまって診断が上手く動きません。

 

あとは、作成ボタンを押して、先ほど同様、生成したショートコードを、固定ページなどに貼ればOK!

 

OLの長野さん
分かった?

 

毎年平社員の佐伯さん

・・・・・は、はい・・・・。

(ぷすっぷすっ)

新人の森永君
先輩の頭から湯気が出てる。限界だ…。

 

じゃあ、早速作った物をやってみよう!

是非、以下にサンプルの診断ツールを置いておきましたので、あなたもやってみて下さい!

OLの長野さん
佐伯さん、森永君、ちょっとあたしがサンプル作ったから、ちょうどいいからやってみて。
新人の森永君
は、はい!!まずは僕がやってみます!
森永さんは、

勝気で上昇志向の強いタイプですよね。
なのでそこそこ優秀人材です。

将来の出世はどうかというと…
部長レベルまでは出世するでしょう。

じゃあ、今後どうしたらもっといいか?っていうと…
人を陥れるくらいのクーデターをすれば、社長になれるでしょう。

新人の森永君
結構いい感じでした!先輩はどうですか!?

 

佐伯さんは、

とても優しく気弱なタイプですよね。
なので会社にとって超都合のいい人材です。

将来の出世はどうかというと…
残念ながら一生平社員でしょう。

じゃあ、今後どうしたらもっといいか?っていうと…
死ぬほど頑張りましょう。

 

毎年平社員の佐伯さん

・・・・・。

よろしくお願いします。森永部長…。

 

 

OLの長野さん
(だめだこりゃ。)

 

応用編1:診断ツールは、他のサイトとの差別化に使える!

色んなサイトが世界中にはあります。

そんな中、文章だけで勝負するのはなかなか難しかったりします。少しでも、読者さんに楽しんでもらえるサイト作りをしたいって言っても、出来る工夫って限られていますよね。

たまには、こんな診断ツールをサイトに置いて、ライバルにも差をつけましょう!

応用編2:診断ツールは、診断結果によって、色んな商品が提案できる!

診断を遊んでもらうだけではもったいない!

診断結果にはリンクも用意ができるので、

『Aという結果のあなたには、この商品!

⇒おすすめ商品のリンク』

みたいな提案もできるんですよね。これは超便利な使い方ができるよ!

応用編3:診断ツールは、ソーシャルシェアが見込める!

こういう診断系のツールってソーシャルメディアの人好きですよね。

面白い診断が作れたら、バズってPVもどんどん増えますよね!

その結果、ナチュラルな被リンクが付けば、SEO的にも効果がある!イイイィィイ!!!

 

ちなみにこんなCSSを適用すると、もっと綺麗な診断フォームができるよ!

僕の大親友の素晴らしいWEBデザイナー矢野ヨシキ氏が、「こんな風にCSSを書いたらもっと綺麗なフォームになるよ」とサッとくれたのがこのCSS。

これを、スタイルシートの一番下に付け足すか、Jetpackっていうプラグインを入れているなら「外観」>「CSS編集」っていう所にポンッと丸ごと貼り付けるだけ!

是非試してみてね!

 

まとめ

さぁ、あなたも診断ツールを作ってみましょう!

JUNICHI
WordPressってほんま便利!

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

 

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

ebook

ブログ集客と収益化がオンラインで学べる!!
ブログマーケティングスクール

『集客』さえできれば、ほぼどんなビジネスも成功させることができます。

そしてブログは、現在のWEBメディアの中でも、最も強力な『集客メディア』として位置づけられています。

ブログマーケティングスクールでは、コンテンツマーケティング・SEOを意識したWEBマーケティングがオンラインで学べるスクールです。

BMSバナー

 

ブログマーケッターJUNICHI
×
OPEN CAGEコラボWordPressテーマ

あなたは今自分のサイトがスマートフォンからどれだけの人が見ているか知っていますか?

実は、2016年6月現在、6割~8割の人がスマホからブログを読んでいます。

なので、スマホから見た時に「分かりやすい」「使いやすい」「便利」というWordPressテーマが必要です。

『新しいスマホビュー時代を作ろう!』

がコンセプトの『STORK(ストーク)』を是非お試しください。

STORK

1 個のコメント

  • ABOUTこの記事をかいた人

    色んな人にブログ運営の事を教えているブログ集客の専門家。得意なのはブログ集客・SNS活用法・SEOライティング。※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。