WordPress：この記事好き♡を簡単に実装できるプラグイン「ZillaLikes」

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

March 7, 2015 追記

現在は設置していませんが、WordPress 4.1でも問題なく動作しました。

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

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

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

WordPress：この記事好き♡を簡単に実装できるプラグイン「ZillaLikes」目次

インストール・使い方
各種設定
表示方法
見栄えを調整する
見栄えを調整する（おまけ）
その他のプラグイン

1. インストール・使い方

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

目次へ

2. 各種設定

画像は設定画面をキャプチャしたところで、プラグイン有効後にサイドに追加される「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」の所に何か入力しておくと、クリックされた際にその文言が表示されます。

目次へ

3. 表示方法

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

// ショートコードの場合
[zilla_likes]

// テンプレートタグの場合
<?php if( function_exists('zilla_likes') ) zilla_likes(); ?>

目次へ

4. 見栄えを調整する

プラグインには予め画像や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が付加されるようになっているので、クリック前後で見栄えとかを変更したい場合はこれを使って実装できます。
また、class="zilla-likes-postfix"の部分には設定でPostfixを設定した際の文言が表示される場所になります。

目次へ

5. 見栄えを調整する（おまけ）

~~実験的にこのブログにも設置しており、記事下辺りに画像のような感じで設置しています。~~
2015年3月7日追記：現在は設置していません。

設置するなら他のものと合わせた感じにしたかったので、それぞれの動作がわかりやすいように通常時・hover時・active時で簡単にですが作ってみました。
使用している画像とCSSを載せておくので、もしこのブログと同じ感じにしたい場合は下記画像を保存して、CSSは下記のものを参考にして調整してみてください。

CSS

.zilla-likes {
  display: block;
  width: 50px;
  height: 56px;
  padding-top: 4px;
  background: url(zillalikes.png) no-repeat left top;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.zilla-likes:hover {
  background-position: left -60px;
}
.zilla-likes.active {
  background-position: left bottom;
  cursor: default;
}
.zilla-likes.active:hover {
  cursor: default;
}

※ハイライト部分は画像を指定しているので、ご自身の環境などに合わせて変更して下さい。

目次へ