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を読み込むように記述します。ディレクトリパスは調整してください。

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

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

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

さいごに

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