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

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

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

2015年3月7日 追記
現在は設置していませんが、WordPress 4.1でも問題なく動いていました。

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

ZillaLikes

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

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

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

  1. インストール・使い方
  2. 各種設定
  3. 表示方法
  4. 見栄えを調整する
  5. 見栄えを調整する(おまけ)
  6. その他のプラグイン

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

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

目次へ

2. 各種設定

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」の所に何か入力しておくと、クリックされた際にその文言が表示されます。

目次へ

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やクラスを用いて調整ができます。

【クリック前】

<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を設定した際の文言が表示される場所になります。

目次へ

5. 見栄えを調整する(おまけ)

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

見栄えを自分好みに調整

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

zillalikes.png

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;
}

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

目次へ

6. その他のプラグイン

今回は「ZillaLikes」を紹介しましたが、似たようなものだと以下のようなものもあります。
他にも同じようなプラグインは探せば沢山ありそうですが、目についたものや使いやすそうと感じたものです。

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。