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

2016年2月16日

2016年3月4日

WRITER

松原 潤一

　

この記事を書いている人 - WRITER -

松原 潤一

デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。

詳しいプロフィールはこちら

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

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

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

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

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

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

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

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

↓　右上の検索できる窓の中に、『os　diagnosis　generator』と入力してENTERをぼちっと！

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

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

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

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

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

パターン２）設問式の診断ができるパターン

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

STEP3）診断コンテンツの作り方！

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

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

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

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

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

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

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

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

• [Name]　⇒　読者側が入力してくれた名前がそのまま出る。
• [Text1]～[Text4]　⇒　以下に入力する項目がそれぞれ出るようになります。

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

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

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

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

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

↓設定方法は簡単！[Text1]とか、[Text2]の部分に表示させたい文言を、それぞれ１行ずつ入力します。

例えば↑の画像では、

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

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

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

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

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

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

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

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

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

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

↓あとは、固定ページの「新規追加」をクリックして…

↓　本文の中に貼り付けます。

↓　プレビュー画面を見ると、ちゃんとこんな風に設置ができています。

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

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

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

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

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

診断結果を設定しよう！

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

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

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

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

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

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

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

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

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

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

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

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

・

・

・

・

・

・

・

応用編１：診断ツールは、他のサイトとの差別化に使える！

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

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

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

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

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

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

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

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

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

応用編３：診断ツールは、ソーシャルシェアが見込める！

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

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

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

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

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

/* ------------------------------------------------------------
診断ジェネレーター作成プラグイン用style
------------------------------------------------------------*/
.diagnosis-wrap .question{
	margin-bottom:1.5em;
}
.diagnosis-wrap .question .qcontents{
	margin-bottom:.5em;
	font-weight:bold;
}
.diagnosis-wrap .question .qselect span{
	display:block;
}
.diagnosis-wrap .question .qselect span input{
	margin:0 5px;
}
.diagnosis-wrap .submit input{
	padding:1em;
	width:300px;
	max-width:80%;
	margin-bottom:1em;
}

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

是非試してみてね！

まとめ

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