基本的にこのブログの目的は遠方の友人へ向けての消息情報を報せることと自分のための備忘録。だが、検索エンジンから情報を求めに訪れる方もいらっしゃるようなので、コメントに残さずとも気軽に感想や苦情を言えるようなものがあると便利かなと思いWeb拍手をつけてみたくなった。Minor Problem さんの GJ!（グッジョブ）がよさそうという噂を聞きつけたので導入。若干導入に戸惑うところがあったのでそのカスタマイズのメモ。
現在本サイトに設けているものは 本家Web拍手 の別ページがポップアップで開くものだが、GJ! は JavaScript（最近は Dynamic HTML とか言うのかな）を利用したページ遷移のないタイプのWeb拍手スクリプト。WordPress 専用プラグインではないのでいろいろとソースをいじる必要がある。
まずはモノをダウンロードして gj.js や gj.php の内容を自分用に書き換えてサーバにアップロード。この辺は本家や他のサイトでも解説してあるので割愛。しかしぷりどうぐさんの WordPressにWeb拍手”GJ!”を導入してみた。 にも書いてあるのだが、本家 GJ! サイトの見本スクリプトをコピペすると何故か " （ダブルクォーテーションマーク）などが全角になってしまって動作しない。上記のteraさんのところのスクリプトを利用させていただいたら無事動作。でも出来合いをまんま導入しても若干しっくりこないので以下をカスタマイズ。
まず WordPress 管理画面のテーマ編集で「ヘッダー（header.php）」を編集する際に、サーバー上にアップした gj ディレクトリ内の prototype.js のリンクを貼るようにあるが、これを省略。すべてのテンプレートにあるのかどうかは知らないが、私が利用している環境にはすでに prototype.js がインストールされている。調べてみたら prototype.js とは Sam Stephenson 氏が書かれた JavaScript でさまざまな機能を一から書かずに利用できるAJAXライブラリ。一つあれば動作するだろうと思ったら案の定動いた。なので header.php には、
<script type="text/javascript" src="<?php bloginfo('url'); ?>/gj/gj.js"></script>
のみを任意の場所にコピペ。<head>～</head> の間にあればどこでもいいはず（もちろんタグが閉じたところ）。既存の </script> とあるところの下にまるごと行を挿入するのが間違いない。赤文字のように入れれば WordPress が勝手にURLを入れてくれるので各々のURLに書き換える必要ない。ただし prototype.js がインストールされていない環境であれば JavaScript エラーを吐くと思うので、その際は追加しないとダメだろう。なお本家のサイトには何故か改行タグ <br /> が間に挿入されているが、ヘッダーの <head>～</head> に挿入するのであれば必要はないはず。
次に「単一記事の投稿（single.php）」を編集。表示させたい場所に挿入とあるが、ソースを見慣れない人にはイマイチ難しいと思うが、コメント欄の上辺りに置きたかったので <?php comments_template(); ?> を探して以下を挿入。
<br />
<input id="<?php the_permalink(); ?>" type="image" src="" width="81" height="19" alt="Good Job!" title="Good Job!" style="vertical-align:middle; cursor:pointer" onClick="goodjob('<?php the_permalink(); ?>','<?php the_title(); ?>')" />
<input type="text" size="30" id ="<?php the_permalink(); ?>_gj_message" style="background:#e4ddc6; border:1px solid #8d8c87" />
<script>showbutton('<?php the_permalink(); ?>','<?php the_title(); ?>');</script>
<span id="<?php the_permalink(); ?>_gj_mark"></span>
良かったら拍手をどうぞ。短いメッセージも送れます。
赤い文字がカスタマイズ、という程のものではないが自分で改造した場所。ボタン上にマウスカーソルが乗っかったときの見栄えを意識したところと、テンプレートに合わせたフォームの見栄えをCSS指定。画像サイズにいちいち指定を入れてしまうのは、少しでも表示の負荷を低減させようという私のこだわりだが、果たして今の高スペックのマシンに意味はあるのかないのか不明。
気軽にクリックさせたいのでどうせなら記事一覧にもボタンを表示させたい。だが一言送信の1行フォームがいちいち表示されるのはスマートではない。なので「メインインデックスのテンプレート（index.php）」と「アーカイブ（archive.php）」には以下のように記述。
<input id="<?php the_permalink(); ?>" type="image" src="" width="81" height="19" alt="GJ!" title="Good Job!" style="vertical-align:middle; cursor:pointer" onClick="goodjob('<?php the_permalink(); ?>','<?php the_title(); ?>')" />
<script>showbutton('<?php the_permalink(); ?>','<?php the_title(); ?>');</script>
<input type="hidden" value="from main index" id ="<?php the_permalink(); ?>_gj_message" />
<span id="<?php the_permalink(); ?>_gj_mark"></span>
テキストフォームを hidden にして隠し、「from main index」という値を送信してメインインデックスからボタンが押されたことがわかるように設定。昔からHTML手打ちでサイトを作ってきた人の小細工。ついでにサイトのテンプレの色調に合わせてボタンの色を Photoshop で若干調整。まあこれで出来合いの素材っぽくなくなったんじゃないかと自己満足。
そういえば昔、美大受験の予備校に通っていたとき講師に木炭デッサンを修正されたのだが、少し気に入らなくて直したら「俺が手を入れたところがまたお前の絵になっている」と言われたことを思い出した。何もかんも自分色に染めたい気質は変わらないのね。とはいえゼロからソースを書く技術も気力もないので、こうしたスクリプトや使い方を公開している方には心から敬意を示したいと思います。ありがとうございました。
追記：
GJ! のバグというか環境によって変わると思うけれど、ブログのエントリータイトルによってはボタンが表示されない状況を確認。シングルクォーテーション ‘ がタイトルに入っていると、JavaScript の変数送信の際に ’ に変換されるにも関わらず、なぜかそこを変数の区切りと誤認識してJSエラーになるという現象。応急的な回避方法としてはエントリータイトルの ‘ をキーワード ’ に置き換えるか、全角 ’ に置き換え。英語で「Don‘t」とか使う際は「Don’t」と記述すればOK。バグ報告させてもらおうと思ったら、開発元のHEX68さんは多忙な様子なので修正は難しそうですね…
2012/06/30 追記
カーソルのCSSの cursor:hand ってのがIE独自仕様だったみたいなので cursor:pointer に修正。あとXHTMLの記述ルールに準じ input タグを閉じるため、半角スペース＋/を追加。