いつか使う機会があるかもしれないからと触ったついでに備忘録兼ねて紹介します。
ZillaLikes」は簡単に説明すると、Facebookのいいねのようなものを独自で実装できるWordPressのプラグインで、このブログにも実験的に設置してみました。

現在は設置していません。

今では多くの人がTwitterやFacebookなどのSNSアカウントを持っていると思いますが、もちろんそれらのアカウントを持っていない人もいるでしょうし、持っているとしても何らかの理由で「いいね」などをできないという人もいるかと思います。
あとは、「いいね」とか「役に立った」とは思ったけど、わざわざ自分のSNSで拡散するほどでもないとかしたくないとか..。

ZillaLikes

今回紹介する「ZillaLikes」はSNSなどを使うものではなく、クリックしてもらうと単純にカウントが増えていく、そのサイト独自のいいねボタンみたいなものを実装できるWordPressプラグインです。
こういうのクリックしてもらう為にはいろいろと工夫が必要だとは思いますが、とりあえず設置するだけならこのプラグインで簡単にできます。

リリースされてから少し経っているのと“Compatibility: WordPress 3.0+”となっているのでどうなんだろと思いましたが、3.6に入れても今のところ問題なく動いてる感じです。
(追記:その後、WordPress Ver 4.1までは問題なく動作するのを確認しました)
まだそんなにいじったりしていないので簡単にはなりますが、使い方や設定方法を紹介します。

インストール・有効化

  1. ZillaLikes」にアクセスして必要なファイルをダウンロードして環境にアップロード。
  2. プラグインを有効化するとサイドに「ZillaLikes」の項目が追加されるので、そこでいくつかの設定などを行う。
  3. 詳しくは後述しますが、設定画面で表示させたい箇所にチェックを入れる、又はショートコードやテンプレートタグで表示させたい箇所に記述することで実装ができます。

各種設定

「ZillaLikes」設定画面のイメージ

イメージは設定画面をキャプチャしたところで、プラグイン有効後にサイドに追加される「ZillaLikes」からこのページに飛べます。
各項目についてはそれぞれ下記のようになっており、一番下の「Save Changes」のボタンで設定を保存できます。

Automatically show likes on

単純に全ての投稿や固定ページに表示させたいという場合は、それぞれチェックを入れるだけで表示されます。
表示される箇所が意図した場所でなければ、後述するショートコードやタグを使って表示させる方法を使用します。

Exclude from Post/Page ID

表示させたくない投稿やページのIDを記述すると、そのIDのページには表示されなくなります。
例えば「4,7,87」と記述すると、それぞれのIDが振られているページではカウント表示のボタンは表示されません。
(「Automatically show likes on」で表示の設定をしている場合に有効です)

Disable CSS

見栄えを自分で調整したい場合は、ここにチェックを入れればあらかじめ読まれているCSSを読まないようにできます。

AJAX Like Counts

ここにチェックを入れればAJAX経由でカウントをロードするようになります。
正直しっかり挙動確認してないですが、キャッシュ系プラグインとか使っているならチェック入れておいたほうが良いのかなと思います。

0 Count Postfix / 1 Count Postfix / More than 1 Count Postfix

カウントされた時・されてない時のそれぞれで表示されるテキストを設定できます。
例えば「1 Count Postfix」の所に何か入力しておくと、クリックされた際にその文言が表示されます。

表示方法

さくっと表示させたい場合は、上記にも書いたように設定画面で「Automatically show likes on」や「Exclude from Post/Page ID」の部分の設定をいじれば出力されます。
自分が意図した箇所に表示させる際は設定画面にも載っていますが、ショートコード又はテンプレートタグでそれぞれ下記のように記述します。

ショートコードの場合

[zilla_likes]

テンプレートタグの場合

if ( function_exists( 'zilla_likes' ) ) zilla_likes();

見栄えを調整する

プラグインにはあらかじめ画像やCSSが用意されているので、単純に有効化するだけでそのまま使用することができ、デフォルトの場合は以下のように非常にシンプルな感じで表示されます。

クリックでカウントが増え、アイコンカラーも変化するイメージ

シンプルすぎるとかもっとデザインにこだわりという場合は、先述したように設定画面で「Disable CSS」にチェックを入れればデフォルトのCSSを無効にできるので、あとはCSSで自分好みに装飾していけばオリジナルなデザインで実装ができます。
出力時のコードは下記のようになっているので、これらのidやclassを用いて調整ができます。

【クリック前】

<a href="#" class="zilla-likes" id="zilla-likes-xxx" title="xxx">
  <span class="zilla-likes-count">0</span>
  <span class="zilla-likes-postfix"></span>
</a>

【クリック後】

<a href="#" class="zilla-likes active" id="zilla-likes-xxx" title="xxx">
   <span class="zilla-likes-count">0</span>
   <span class="zilla-likes-postfix"></span>
</a>

クリック前後のコードを載せていますが、見ての通り基本的には変わりません。
クリック後にactiveというclassが付加されるようになっているので、クリック前後で見栄えとかを変更したい場合はこれを使って実装できます。
また、.zilla-likes-postfixの部分には設定でPostfixを設定した際の文言が表示される場所になります。

その他のプラグイン

今回は「ZillaLikes」を紹介しましたが、似たようなものだと以下のようなものもあります。
「ZillaLikes」は自分が思っていたものと違うとか何らかと干渉してしまうなどあれば、これらも試してみてください。
他にも同じようなプラグインは探せば沢山ありそうですが、目についたものや使いやすそうと感じたものです。