PHP Wordpress アクセス解析

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

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

完成イメージ

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

screenshot.149

スマホ表示時（レスポンシブ）

screenshot.150

仕様

・ワンクリックで投票。
・ページ遷移はしない
・クリック後、即時投票結果が反映
・投票結果はサーバーに蓄積
・投票結果をボタンに表示する
・クリックしたあとに、追加メッセージが表示される
・クリック後は、次回訪問時まで投票できない（セッション単位）
　※記事下の現在設置のボタンは、何度でもクリックできる仕様に変更しています。
・月別の投票結果をレポートする（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を読み込むように記述します。ディレクトリパスは調整してください。

1
2
3
<!-- 投票用スクリプト -->
<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)に以下のスクリプトを記述します。
記事が読み込まれたあとに記述するとよいです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?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を追加してください。
衝突しないよう調整が必要かもしれません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* =投票ボックス
--------------------------------------------------- */
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;
}

さいごに

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

-PHP, Wordpress, アクセス解析
-, ,

S