PHP＋jsでページ遷移なしのお手軽ワンクリック投票ボタンを設置しましたので、設置方法について簡単にご紹介します。
完成イメージ
このような読者が、クリックして簡単に投票することができる投票ボタンを作ります。
スマホ表示時（レスポンシブ）
仕様
・ワンクリックで投票。
・ページ遷移はしない
・クリック後、即時投票結果が反映
・投票結果はサーバーに蓄積
・投票結果をボタンに表示する
・クリックしたあとに、追加メッセージが表示される
・クリック後は、次回訪問時まで投票できない（セッション単位）
※記事下の現在設置のボタンは、何度でもクリックできる仕様に変更しています。
・月別の投票結果をレポートする（Googleアナリティクス）
設置方法／Wordpressに実装方法
１．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
２．fileフォルダの作成、パーミッション設定
ドメイン直下にfileフォルダを作成します。
アクセス権限は、777（読み書き可能）にしてください。
このフォルダ内に投票結果記録ファイルが作成されます。
３．vote.phpの格納
スクリプトファイル（vote.php）をドメイン直下に配置します。
ファイルは以下よりダウンロードしてください。※vote.php.txt → vote.phpに変更して使用します。
ファイル内のsetcookie部分は、有効期限設定を調整可能です。
vote.php
４．単一記事の編集
格納した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>
５．スタイルシート（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;
}
さいごに
微調整が必要な場合がありますので、その場合はファイルを書き換えてください。
この下にも設置していますので押してみてください。