いいねボタン for WordPress(β)を導入しました

【2024年11月2日追記】正式版がリリースされたので「いいねボタン for WordPress(β)」からβがとれて現在は「いいねボタン for WordPress」になっています。

去年書いたこの記事のおそらく「いいねボタンを拍手風にしました。」のあたりに検索で辿り着く方がいらっしゃると思われ良く拍手頂いてたので、こういうのは更新のついでじゃなく独立した記事にしておいたほうがいいかなと思って書いておきます。

検索で来た方向け自己紹介

WordPressで自作の漫画・イラストを公開する個人サイトを運営をしています。使用テーマはCocoon。漫画・イラストのほうに興味ある方はトップページからどうぞ。

↓過去に書いたWordPress関連の記事(これもちょっと情報が古いですが)

導入の経緯

以前のこの記事で書いた通りWP ULikeをカスタマイズしてどうにか拍手風にして使っていたのですが、アップデートでどんどん統計画面が見づらくなってきていて、うーん……となっていたところに個人・同人サイト制作支援でおなじみのdo様から「いいねボタン for WordPress(β)」がリリースされたので、こちらに変更しました。ありがとうございます!

いいねボタン for WordPress | 創作・同人サイト制作支援メディア do

「いいねボタン for WordPress(β)」を設置してみての感想

設置の仕方は普通のプラグインと同じで、設定項目もシンプル目に作ってくださっているので難しいところもなくとても使い勝手が良いと感じます。動作もWP ULikeに比べると軽めなのも良いです。

まだβ版とのことですが、今のところ私の使用環境では不具合ないです(多分)日本語対応のいいねボタンプラグイン自体がほぼないので大変ありがたいですし、ボタンを拍手っぽくカスタムして使えるのも嬉しい要素です。

ボタンサンプル

設定画面からできるカスタマイズと自分でCSSを追加して調整したボタンがこちら↓テスト感覚で押してもらってOKです。コメントはメールに転送されるようになっているのでテスト送信とかしないでね!

送信中です

×

※コメントは最大1000文字、5回まで送信できます

送信中です送信しました!

これはショートコードで記事中に表示させています。普段使い(?)のは「基本設定」→「いいねボタンの自動挿入」で「投稿」にチェックを入れてブログ記事の本文下に表示されるようにしています。

導入方法とかは公式サイトを見てもろて……

普通のプラグイン同様にインストールして、メニューに追加された「いいねボタン」→「基本設定」から表示設定をするorショートコードを使ってウィジェットなどに挿入する、ですぐ使えるので難しいところはないかな~と思います。

以下は一応ダウンロードするタイプのプラグインの実装したことない方向けに書いておきます。

公式サイトからzipファイルをダウンロード(解凍しないでOK)→自分のWordPressの管理画面のメニュー「プラグイン」→「新規プラグインを追加」→「プラグインをインストール」→参照ボタンが出るので最初にダウンロードしたzipファイルを選択して「今すぐインストール」→インストールが完了した後に有効化すると管理メニューに「いいねボタン」が追加されて使えるようになります。

自分でやった設定とかカスタマイズとか

ボタンの中央寄せとアイコンとホバー時の背景色変更

どちらも「いいねボタン」→「基本設定」のページに設定項目があります。

ボタン表示位置:ボタンの「左寄せ」「中央寄せ」「右寄せ」が選べます。
アイコンの色:アイコンの色を設定できます。
ボタンにカーソルを合わせたときの背景色:マウスホバー時のボタン内の背景色が設定できます。

カウント数の非表示とボタン内の文字の変更

初期設定だとボタン内にボタンが押された数が表示されるようになっていて、これを非表示にしたいが設定項目が見当たらない……と思ったら「いいねボタン」→「ボタンデザイン」ページの「ボタンに表示する文章」のところに書いてありました。

<count>と書いたところにいいね数が表示されます」!初期設定だと<count>が記述されているので、それを消せばOKです。

ここの記述欄でボタン内の文字を変更もできます。htmlタグも使えるみたいなのでimgタグで自分で用意した画像を呼び出したりもできると思います。頑張れる人は頑張って!

CSSで上下余白と枠線を変更

上下の要素と余白をとりたいのと丸みを少なくしてキリリとさせたいと思ったので出力されたボタンのCSSを調べて以下のようにテーマファイルエディタのスタイルシートに記述を追加しました。

/* ボタンの上下に余白を追加 */
.ifw_wrap.ifw_center {
	padding: 40px 0 20px;
}
/* ボタンの枠線の色を変えて角丸を小さめに */
.ifw_wrap button.ifw_btn {
	border: 1px solid #333;
	border-radius: 5px;
}

コピペして使ってもらってもいいですが表示の保証は致しかねます。また、今後のアップデートで構成やクラス名が変更されたりすると反映されなくなる場合があるので、その時はご自分で対処願います。

【2024年11月2日追記】

正式版がリリースされて「いいねボタン」のメニューの中の「ボタンデザイン」の下のほうに「カスタムCSS」を記述できる欄が出来たので現在はそちらに記述しています。ただコメント部分が入っていると上手く保存できなかったので(403エラーになる)カスタムCSS部分に上記をコピペする際はコメント部分(/* ~ */の部分)は削除してご利用ください。

終わりに

前述の通り、日本語対応のいいねボタンプラグインはほとんどないので大変ありがたいですし、拍手っぽいのがいい!という拍手文化に慣れ親しんできたオタクにも優しいプラグインなのでおすすめです。本当に設置に難しいところはまったくないので気軽にお試しで設定してみるといいのではないかな~と思います。

「拍手っぽいいいねボタン」みたいなのを探してここに辿り着く方はだいたい同人系の個人サイトをやってる、これから作る方じゃないかなと思うのですが、個人サイト楽しいよね!どっしりやるつもりの方もとりあえず作ってみるか~の方も昔やってたしまたやってみよな方も、どうぞ楽しい個人サイトライフを👍

送信中です

×

※コメントは最大1000文字、5回まで送信できます

送信中です送信しました!