PHP+jsでページ遷移なしのお手軽ワンクリック投票ボタンを設置する方法。

PHP+jsでページ遷移なしのお手軽ワンクリック投票ボタンを設置しましたので、設置方法について簡単にご紹介します。

完成イメージ

このような読者が、クリックして簡単に投票することができる投票ボタンを作ります。

screenshot.149

スマホ表示時(レスポンシブ)

screenshot.150

仕様

・ワンクリックで投票。
・ページ遷移はしない
・クリック後、即時投票結果が反映
・投票結果はサーバーに蓄積
・投票結果をボタンに表示する
・クリックしたあとに、追加メッセージが表示される
・クリック後は、次回訪問時まで投票できない(セッション単位)
 ※記事下の現在設置のボタンは、何度でもクリックできる仕様に変更しています。
・月別の投票結果をレポートする(Googleアナリティクス)

設置方法/Wordpressに実装方法

1.javascriptの格納

テンプレートのjsフォルダに以下のjavascriptファイルを格納します。
・vote.js
・html5.js
・jQuery ※通常wordpress標準で持っているので不要

vote.jsは私がカスタマイズしていますので、以下よりダウンロードしてください。
※vote.js.txt → vote.jsに変更して使用します。
‘/wp/vote.php’部分は、’/vote.php’に変更の必要あり。ディレクトリにあわせて調整してください。
vote.js

getElementsByClassNameメソッド – JavaScript ライブラリー – HTML5.JP
www.html5.jp/library/dom_getElementsByClassName.html

2.fileフォルダの作成、パーミッション設定

ドメイン直下にfileフォルダを作成します。
アクセス権限は、777(読み書き可能)にしてください。
このフォルダ内に投票結果記録ファイルが作成されます。

3.vote.phpの格納

スクリプトファイル(vote.php)をドメイン直下に配置します。
ファイルは以下よりダウンロードしてください。※vote.php.txt → vote.phpに変更して使用します。
ファイル内のsetcookie部分は、有効期限設定を調整可能です。
vote.php

4.単一記事の編集

格納したjavascriptを読み込むように記述します。ディレクトリパスは調整してください。

<!-- 投票用スクリプト -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/html5jp/dom/getElementsByClassName.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/vote.js"></script>

単一記事テンプレート(single.php)に以下のスクリプトを記述します。
記事が読み込まれたあとに記述するとよいです。

<?php
// 投票数取得関数
function getVoteCount($id) {
  $filename = "./file/".$id.".cnt";//fileディレクトリ指定
	$fp = @fopen($filename, "r");
	if ($fp) { $vote = fgets($fp, 9182)."票"; } else { $vote = ""; }
	return $vote;
}
?>		
<div id="vote_area1" class="clear-fix" style="disply:block;">
	<p>この記事はいかがでしたか?</p>
	<!-- ページ名取得 -->
	<?php $page_name = "post-".$post->ID; ?>
  <!-- 投票ボタン1 -->
	<div class="votebox votebox1">
	<a href="javascript:void(0);" onclick="Vote(<?php echo "'".$page_name."_vote1'" ?>, 'cntClass1');" class="vote" title="">(知)参考になった
	<span class="cntClass1"><?php echo getVoteCount($page_name."_vote1"); ?></span></a>
	</div>
	<!-- 投票ボタン2 -->
	<div class="votebox votebox2">
	<a href="javascript:void(0);" onclick="Vote(<?php echo "'".$page_name."_vote2'" ?>, 'cntClass2');" class="vote" title="">(笑)おもしろい
	<span class="cntClass2"><?php echo getVoteCount($page_name."_vote2"); ?></span></a>
	</div>
	<!-- 投票ボタン3 -->
	<div class="votebox votebox3">
	<a href="javascript:void(0);" onclick="Vote(<?php echo "'".$page_name."_vote3'" ?>, 'cntClass3');" class="vote" title="">(驚)びっくり
	<span class="cntClass3"><?php echo getVoteCount($page_name."_vote3"); ?></span></a>
	</div>
	<!-- 投票ボタン4 -->
	<div class="votebox votebox4">
	<a href="javascript:void(0);" onclick="Vote(<?php echo "'".$page_name."_vote4'" ?>, 'cntClass4');" class="vote" title="">(美)かっこイイ
	<span class="cntClass4"><?php echo getVoteCount($page_name."_vote4"); ?></span></a>
	</div>
</div><!-- vote_area1 -->
<div id="vote_area2" style="display:none;">
	<p>ご覧いただきありがとうございます。次回もさらに良い記事を目指して頑張ります。</p>
</div>

5.スタイルシート(style.css)の編集

スタイルシートに以下のcssを追加してください。
衝突しないよう調整が必要かもしれません。

/* =投票ボックス
--------------------------------------------------- */
div.votebox a{
	font-size: 0.8em;
	color: #050505;
	background: -moz-linear-gradient(
		top,
		#e7e6e6 0%,
		#ffffff 22%,
		#ffffff 35%,
		#a3a0a0);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#e7e6e6),
		color-stop(0.22, #ffffff),
		color-stop(0.35, #ffffff),
		to(#a3a0a0));
	border: 1px solid #1B1B1B;
	-moz-box-shadow:
		0px 1px 0px rgba(000,000,000,0.7),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	-webkit-box-shadow:
		0px 1px 0px rgba(000,000,000,0.7),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	box-shadow:
		0px 1px 0px rgba(000,000,000,0.7),
		inset 0px 0px 1px rgba(255,255,255,0.3);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}


div.votebox a{
	float:left;
    display: inline-block;
    width:22%;
	text-align:center;
    margin:0.3em 0 0.3em -1px;
	padding: 0.7em 0.8em 0.7em 0.3em;
}

/* Mobile devices */
@media (max-width: 700px) {
	div.votebox a{
		width:90%;
		font-size:1.0em;
	}
}

div.votebox a:hover{
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}
div.votebox a{
	text-decoration:none;
	color:#444;
	font-weight:bold;
}
div.votebox a span{
	color: #BE35C4;
}
div#vote_area1 p {
    font-size: 1.1em;
    color: #535353;
    font-weight: bold;
    border-bottom: 1px dotted #3A3C3A;
}
div#vote_area2 p {
	margin-top:1em;
	font-size: 1.1em;
	color: #0C5EDA;
    font-weight: bold;
}
#vote_area1 {
    margin:0.2em 0 2em 0;
    clear: both;
}
div#vote_area1 p {
	margin-bottom:0.7em;
}

さいごに

微調整が必要な場合がありますので、その場合はファイルを書き換えてください。
この下にも設置していますので押してみてください。

あなたにオススメ(Amazon)

あなたにオススメ(楽天)