WordPressで診断コンテンツを作成する方法【HTML・CSS・jQuery】

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

商品やサービスを比較してもらうときに、診断コンテンツって便利ですよね。
質問に答えてもらうことで、より目的にあわせたサービスを紹介できます。

ただ、診断コンテンツ用のプラグインってあまり見かけません。
どうやって実装すればいいか、困っている方も多いのではないでしょうか？

この記事では、HTML・CSS・jQueryのみで診断コンテンツを実装する方法を紹介します。
シンプルかつ自由度の高いコンテンツが作れますよ。

ソースコードをコピペすれば使えるので、さっそく試してみませんか？

診断コンテンツを作成する方法【HTML・CSS・jQuery】

ではさっそく、質問に回答してもらう診断コンテンツを作ってみましょう！

まずあなたにもイメージしてもらえるように、診断コンテンツのサンプルをお見せします。
サンプルの後に、ソースコードを解説していきますね。

診断コンテンツ【サンプル】

デモサイトを見る

サンプルの解説

質問に回答することで、診断結果が表示されます。

サンプルは簡易的な質問ですが、ボリュームのあるコンテンツも作成可能です。
ベースはHTMLなので、中身を作りこめば結果に表示されるコンテンツも変化します。

では、診断コンテンツ【サンプル】のHTML・CSS・jQueryを見ていきましょう！

HTML

<p id="contents-qa">診断コンテンツ【サンプル】</p>
<div class="shindan">
<div id="q_01">
	<p>「りんご」と「みかん」どちらが好き？</p>
	<ul class="q-choices">
		<li><a class="qa_btn" href="#q_02">りんご</a></li>
		<li><a class="qa_btn" href="#q_03">みかん</a></li>
	</ul>
</div>
 
<div id="q_02" style="display: none;">
	<p>りんごの「ジュース」と「ジャム」どっちがいい？</p>
	<ul class="q-choices">
		<li><a class="qa_btn" href="#q_04">ジュース</a></li>
		<li><a class="qa_btn" href="#q_05">ジャム</a></li>
	</ul>
</div>

<div id="q_03" style="display: none;">
	<p>みかんの「ジュース」と「ジャム」どっちがいい？</p>
	<ul class="q-choices">
		<li><a class="qa_btn" href="#q_06">ジュース</a></li>
		<li><a class="qa_btn" href="#q_07">ジャム</a></li>
	</ul>
</div>
 
<div id="q_04" style="display: none;">
	<p>りんごジュース</p>
	<p><a class="qa_btn" href="#q_01">もう一度診断する</a></p>
</div>

<div id="q_05" style="display: none;">
	<p>りんごジャム</p>
	<p><a class="qa_btn" href="#q_01">もう一度診断する</a></p>
</div>

<div id="q_06" style="display: none;">
	<p>みかんジュース</p>
	<p><a class="qa_btn" href="#q_01">もう一度診断する</a></p>
</div>

<div id="q_07" style="display: none;">
	<p>みかんジャム</p>
	<p><a class="qa_btn" href="#q_01">もう一度診断する</a></p>
</div>
</div>

ソースコードの解説

3～9行目の<div>が最初の質問です。
<li>で回答を用意して、<a>で次の質問にリンクしています。

<div id="q_01">
	<p>「りんご」と「みかん」どちらが好き？</p>
	<ul class="q-choices">
		<li><a class="qa_btn" href="#q_02">りんご</a></li>
		<li><a class="qa_btn" href="#q_03">みかん</a></li>
	</ul>
</div>

2つめ以降の質問は、「style="display: none;"」で非表示になっています。
jQueryによって、回答とリンクした<div>が表示されます。

つまり以下のような<div>タグを追加すれば、質問を増やすことができます。

<div id="q_〇" style="display: none;">
	<p>質問</p>
	<ul class="q-choices">
		<li><a class="qa_btn" href="#q_〇">回答</a></li>
		<li><a class="qa_btn" href="#q_〇">回答</a></li>
	</ul>
</div>

診断結果に以下のHTMLを追記すれば、最初から診断しなおすことができます。

<p><a class="qa_btn" href="#q_01">もう一度診断する</a></p>

結果の内容はHTMLでカスタマイズできるので、ボリュームを増やすことも可能です。
しっかり作りこんでおけば、価値あるソリューションを提供できるでしょう！

CSS

.shindan .q-choices {
	display: flex;
	margin-left: 0;
}
.shindan .q-choices li {
	list-style:none;
	font-size: 1.1em;
	margin-right: 2em;
}
.shindan .q-choices li a{
	display: inline-block;
	border: 0;
	padding: 1em;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	background-color: #00BB23;
	box-shadow: 0px 5px 0px #009B1B;
}
.shindan .q-choices li a:hover, .shindan .q-choices li a:active, .shindan .q-choices li a:focus {
	background-color: #4EBF53;
	box-shadow: none;
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
}

ソースコードの解説

CSSは、デフォルトの装飾がない状態という前提です。
もし適用したいCSSがあれば、自由に中身を書き換えて装飾できます。

jQueryと連動しているClassがあるので、Class名はそのままにしておきましょう。
新しいClassを付与するのはOKです。

jQuery

jQuery.noConflict();
(function($) {
	$(function(){
		$(".qa_btn").on("click", function() {
			$(this).closest("div").css("display","none");
			id = $(this).attr("href");
			$(id).fadeIn("500");
			$("html,body").animate({scrollTop: $("#contents-qa").offset().top}, 'normal','swing');
		});
	});
})(jQuery)

ソースコードの解説

jQueryのコードは、WordPressで不具合が起きないようにカスタマイズしています。
なので、<script>タグ内にこのままコピペすれば問題ありません。

jQueryを編集できる方は、細かな挙動を変更してみるのも良いと思います。

【まとめ】シンプルなコードで診断コンテンツを作成できる

ここまで、ワードプレスで診断コンテンツを作成する方法を紹介してきました。
もちろん、HTML・CSS・jQueryを使える環境であれば、ワードプレス以外でも設置できます。

診断コンテンツは、ユーザーに能動的なアクションを起こしてもらえる機能です。
自分で選ぶのが難しいサービスほど、喜んでもらえる機能だといえるでしょう。

注意点としては、選択肢がたくさん増えるほどソースコードが複雑化します。
なので、あらかじめマインドマップなどで質問・回答の構造を見える化しておくのが大事です。

構造さえ決まってしまえば、あとはコンテンツを作りこむだけです。
ユーザーの求める価値を提供して、より良いサイト運営につなげていきましょう！