Twitterはこちら仕事依頼はこちら

【診断に使える】YES・NOチャートをWordPressで作る

WordPressでのYES NOチャートの作り方

Twitterでたまにトレンドに入る「診断メーカー」や「診断ドットコム」のような診断ツールをブログにも取り入れたい!

そう思い作ったのがこちら。

30秒診断

あなたの余命はあと何年!?

※結果はフィクションです

1.運動は週にどのくらい行ってますか?

2.脂っぽい食べものはどのくらい食べますか?

2.脂っぽい食べものはどのくらい食べますか?

2.脂っぽい食べものはどのくらい食べますか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

YES・NOチャートだったら何でも作れるので、あんなことやこんなことに使ってください。

ちなみに項目が増えれば増えるほど作るのが大変になる仕様になってます。とても簡易的な構造です。

(がんばれば)選択肢、問題、無限に増やせます。

このカスタマイズは難易度ちょっと高めです。

HTMLをバリバリ編集していきます。

HTMLを知らなくてもできるように説明していきますが、わかりにくかったらごめんなさい!

注意事項

JavaScriptを使用しています。AMPなどJavaScriptが動かない環境だと動きません。

YES・NOチャートをWordPressで実装する方法

手順は以下の通りです。

手順

STEP1:CSSコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy
/* YES・NO チャート */
.yn-chart{
	margin:0 auto 2rem;
	padding: 2em;
	max-width: 600px;
	background:#fff8e3;
	box-shadow: 0 3px 5px rgba(0,0,0,.07);
	font-size:0.9rem;
}
.yn-chart__add{
	background: #fdc44f;
	color:#fff;
	padding: 0.2em 0.9em !important;
	margin:0 !important;
	text-align:center;
	display:inline-block;
	line-height: 1.5 !important;
}
.yn-chart__title{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 0.5em 0 0.3em!important;
	margin: 0 auto !important;
	font-size:1.35em !important;
	font-weight: 600 !important;
	color:#fdc44f;
	letter-spacing: 1px !important;
	line-height:1.5 !important;
}
.yn-chart__title:before,.yn-chart__title:after {
	content: "";
	flex: 1;
	height: 1px;
	background: #fdc44f;
	display: block;
}
.yn-chart__title:before {
	margin-right: 0.7em;
}
.yn-chart__title:after {
	margin-left: 0.7em;
}
.yn-chart__ex{
	text-align:center;
	margin: 0 !important;
	padding: 0 !important;
}
.yn-chart > div{
	display:none;
	padding-top: 100px;
	margin-top: -100px;
}
.yn-chart > div.yn-chart__display{
	display:block;
}
.yn-chart > div > figure{
	margin:1em 0 2em;
}
.yn-chart > div > figure img{
	display:block;
}
.yn-chart > div > p{
	margin:2em 0 0 !important;
	padding: 0.8em 1em 0.8em 4.3em !important;
	background:#fff;
	position:relative;
}
.yn-chart > div > p:before{
	content: "Q";
	background: #fdc44f;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.1em;
	min-width: 48px;
}
.yn-chart > div ul{
	margin:2em 0 0 !important;
	padding:0 !important;
	list-style:none !important;
	border:none;
}
.yn-chart > div ul li {
	margin: 0 0 1em 1em!important;
	padding: 0 !important;
}
.yn-chart > div ul li:last-child{
	margin:0 0 0 1em !important;
}
.yn-chart > div ul li a{
	background: #fff;
	display: block;
	padding: 0.8em !important;
	text-decoration: none;
	color: #333;
	box-shadow: 0 3px 5px rgba(0,0,0,.07);
}
.yn-chart > div ul li a:hover{
	box-shadow: inset 2px 2px 0 0 #ee8f81, 2px 2px 0 0 #ee8f81, 2px 0 0 0 #ee8f81, 0 2px 0 0 #ee8f81;
	transition: 0.1s ease-in-out;
	opacity:1;
}
.yn-chart > div ul li:before{
	content:unset !important;
}
.yn-chart__result{
	background:#fff;
	padding:1em;
}
.yn-chart__result-title{
	color: #fdc44f;
	font-size: 1.1em !important;
	font-weight:600 !important;
	padding: 0 !important;
	margin: 0 0 1em !important;
	border-bottom: 1px dashed #fdc44f;
}
@media screen and (max-width: 560px) {
	.yn-chart{
		padding:1.8em 1.3em;
	}
	.yn-chart > div > figure {
		margin: 0.5em 0;
	}
	.yn-chart > div > p {
		margin: 1em 0 0 !important;
		padding: 0.8em 1em 0.8em 3.3em !important;
	}
	.yn-chart > div ul {
		margin: 1em 0 0 !important;
	}
	.yn-chart__title{
		font-size:1em !important;
	}
	.yn-chart__title:before {
		margin-right:0.3em;
	}
	.yn-chart__title:after {
		margin-left:0.3em;
	}
	.yn-chart__ex,.yn-chart__add{
		font-size:0.9em !important;
	}
	.yn-chart > div > p:before{
		min-width: 30px;
	}
}
/* Twitterシェアボタンなど */
.p-tw-btn,.p-check-btn{
	text-align:center;
	margin:1.5em 5em !important;
	padding:0 !important;
}
.p-tw-btn a,.p-check-btn a{
	display:block;
	box-shadow: 0 3px 5px rgba(0,0,0,.15);
	color:#fff !important;
	font-weight:600 !important;
	text-decoration:none !important;
	padding:0.5em 0;
	border-radius:30px;
}
.p-tw-btn a{
	background:	#00acee;
}
.p-check-btn a{
	background:#fbc55e;
}
.p-tw-btn a:hover,.p-check-btn a:hover{
	transform: translateY(3px);
	box-shadow: 0 2px 2px rgba(0,0,0,.22);
}
.yn-chart > div > p.p-check-btn{
	background: none !important;
	padding: 0 5em !important;
}
.yn-chart > div > p.p-check-btn:before{
	content:unset !important;
}
@media screen and (max-width: 800px) {
	.p-tw-btn,.p-check-btn{
		margin:1.5em 3em !important;
	}
}
@media screen and (max-width: 560px) {
	.p-tw-btn,.p-check-btn{
		margin:1.5em 1em !important;
	}
	.yn-chart > div > p.p-check-btn{
		padding: 0 3em !important;
	}
}

めちゃくちゃ長くなってしまいました!

色の変更をしたいときは

  • #fff8e3:薄い黄色
  • #fdc44f:濃い黄色

上記カラーコードをCSS内で検索。変更したいカラーコードに置換してください。

STEP2:PHPコピペ

JavaScriptのコードを入力するためのPHPをfunctions.phpにコピペします。

functions.phpは少しでもミスるとサイトにアクセスできなくなります。

必ずバックアップをとってからから行ってください。
Copy
//YSE・NOチャート
if ( !function_exists( 'p_yesno_chart' ) ):
function p_yesno_chart() {
echo <<< EOM
<script>
jQuery('.yn-chart a').click(function() {
jQuery(this).closest('div').css('display', 'none');
id = jQuery(this).attr('href');
jQuery(id).fadeIn('fast');
return false;
})
</script>
EOM;
}
add_action( 'wp_print_footer_scripts', 'p_yesno_chart' );
endif;

STEP3:HTMLを入力

HTMLで診断コンテンツを作っていきます。これがやや複雑。

WordPress上ではなく、エディターを使った方がわかりやすいです。

まずは、こちらのHTMLを入力。

Copy
<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<!-- ここに質問を入れていきます -->

</div>

ここに質問を入れていきます。

一問目のHTML。一問目だけclass:yn-chart__displayが付いています。他の問題には付けないでください。

Copy
<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目:タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

現状合体させるとこんな感じ↓です。

Copy
<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目:タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

</div>

あとは質問数・項目数に応じてHTMLを足していきます。

重要ポイント

idhrefの文字を紐付けさせていきます。

現在、1問目の選択肢のhrefが#q2-1、#q2-2になっています。

この状態で2問目の質問HTMLを足してみます。

仕組み

1問目でhrefが#q2-1の選択肢をクリックするとidがq2-1の質問に飛びます。

Copy
<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目:タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-1">
<figure>imgタグ</figure>
<p>二問目:タイトル</p>
<ul>
   <li><a href="#q3-a-1">選択肢1</a></li>
   <li><a href="#q3-a-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-2">
<figure>imgタグ</figure>
<p>二問目:タイトル</p>
<ul>
   <li><a href="#q3-b-1">選択肢1</a></li>
   <li><a href="#q3-b-2">選択肢2</a></li>
</ul>
</div>

</div>

この紐付けの文字列は何でも良いので、ご自身のわかりやすい英数字でOKです。

例えば、「2択×3問のHTML」はこうなります。

Copy
<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目:タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-1">
<figure>imgタグ</figure>
<p>二問目:タイトル</p>
<ul>
   <li><a href="#q3-a-1">選択肢1</a></li>
   <li><a href="#q3-a-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-2">
<figure>imgタグ</figure>
<p>二問目:タイトル</p>
<ul>
   <li><a href="#q3-b-1">選択肢1</a></li>
   <li><a href="#q3-b-2">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-1">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-2">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-1">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-2">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

</div>

全パターン必ず作る必要はないので、必要に応じて減らしたり増やしたりしてください。

STEP4:結果表示用ページ作成

あとは結果が表示されるページを作成すればOKです。

別ページではなく、その場で結果を表示させたい人はこちらへジャンプ。

固定ページで作っていきましょう。

まずはTwitterのボタンの作り方。

Twitterリンク

https://twitter.com/intent/tweet?text=ツイート内容&url=リンクURL&hashtags=ハッシュタグ1,ハッシュタグ2

本当は自動生成すべきなんですが今回は手動での作り方です。

「Twitterリンクボタン」と「もう一度診断するボタン」をあわせたHTMLがこちらです。

Copy
<div class="p-check-btn"><a href="診断ページURL"><i class="fas fa-check-circle"></i> もう一度診断する</a></div>
<div class="p-tw-btn"><a href="https://twitter.com/intent/tweet?text=ツイート内容&url=リンク先URL&hashtags=ハッシュタグ,ハッシュタグ" target="_blank"><i class="fab fa-twitter"></i> 結果をツイートする</a></div>

もう一度診断するのリンク先(診断ページURL)について、

今回は別途診断ページを作成しましたが記事途中や記事終わりに配置してることもあると思います。

その場合、リンク先は「該当記事URL+一問目のid」にすればOK。

例えば、このページの冒頭にある診断に飛ばしたい場合はこうなります。

<a href="https://ponhiro.com/yesno-chart/#q1">もう一度診断する</a>

デモ:もう一度診断する

あとはアイキャッチとコンテンツを入れたらOKですね。

診断結果ページの内容が薄い場合はnoindexにしましょう!

その場で診断結果を表示させる方法

最終結果を別ページではなくその場で表示させる方法。

サンプルはこちらです。

30秒診断

あなたの余命はあと何年!?

※結果はフィクションです

1.運動は週にどのくらい行ってますか?

2.脂っぽい食べものはどのくらい食べますか?

2.脂っぽい食べものはどのくらい食べますか?

2.脂っぽい食べものはどのくらい食べますか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

3.睡眠時間はどれくらいですか?

診断結果

あなたの寿命は32年です。

もう一度診断する

診断結果

あなたの寿命は52年です。

もう一度診断する

診断結果

あなたの寿命は56年です。

もう一度診断する

診断結果

あなたの寿命は60年です。

もう一度診断する

診断結果

あなたの寿命は65年です。

もう一度診断する

診断結果

あなたの寿命は72年です。

もう一度診断する

診断結果

あなたの寿命は87年です。

もう一度診断する

診断結果

あなたの寿命は92年です。

もう一度診断する

診断結果

あなたの寿命は98年です。

もう一度診断する

質問と仕組みは同じなので結果用のHTMLを足していきます。

ひとつの結果のHTMLがこちら。

Copy
<div id="★">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#一問目のid">もう一度診断する</a></p>
</div>

★は紐付けするために好きな英数字を入れてください。

と言ってもよくわからないと思うので例を見てみましょう。

先ほどの2択×3問のHTMLに結果を足すとこうなります。

Copy
<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目:タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-1">
<figure>imgタグ</figure>
<p>二問目:タイトル</p>
<ul>
   <li><a href="#q3-a-1">選択肢1</a></li>
   <li><a href="#q3-a-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-2">
<figure>imgタグ</figure>
<p>二問目:タイトル</p>
<ul>
   <li><a href="#q3-b-1">選択肢1</a></li>
   <li><a href="#q3-b-2">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-1">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="#result-1">選択肢1</a></li>
   <li><a href="#result-2">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-2">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="#result-3">選択肢1</a></li>
   <li><a href="#result-4">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-1">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="#result-5">選択肢1</a></li>
   <li><a href="#result-6">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-2">
<figure>imgタグ</figure>
<p>三問目:タイトル</p>
<ul>
   <li><a href="#result-7">選択肢1</a></li>
   <li><a href="#result-8">選択肢2</a></li>
</ul>
</div>

<div id="result-1">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-2">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-3">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-4">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-5">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-6">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-7">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-8">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

</div>

もう長くてわけわかんなくなってきました。

3問目のhrefに結果先のidを入れてます。

一つ一つのかたまりを見ていけば仕組みはシンプルなので、かたまりごとに作っていくと良いと思います。

かなり複雑になってしまいましたが、いろんなことに使えると思うので是非チャレンジしてみてね!

コメント

ページトップへ