なんだか物足りない、毎日ブログを書いてるけどなぜだか虚しくなる。その原因を探っていくと、記事を見られてはいるけど反応がないからではないかという結論に至った。やっぱり承認欲求というか、見たよ！ってリアクションがあるとモチベーションの向上にも繋がると思うんだよな。
様々なメディアに搭載されている「いいね！ボタン」。これが私のブログにも欲しいと思って色々調べながら実装してみたが「WP Ulike」というプラグインを使うと簡単にできるのでオススメ。それだけだと他の記事でも代用できるのでちょっとしたカスタマイズ方法も載せておきたいと思う。
「WP Ulike」の実装手順
まずはインストール
自分好みにカスタマイズ
インストールすると管理画面の右側に「WP Ulike」という項目ができるのでクリックしてみる。今回はわかりにくい箇所だけ解説していこうかな。全て解説すると量が多くなって逆に分かりにくくなるから。
「一般」基本的な設定
上の画像はConfigurationの中にある一般項目である。初めは私も何のことを言っているのだか迷った。最終的に全ての項目をONにしたが一応解説していく。
いいねの数をキロバイト形式で変換すると書いてある。これだけだとイマイチ掴めないが、簡単に纏めるといいねが1,000以上集まった場合に1kと表示するということだ。TwitterやInstagramで見たことある方がいるかもしれない。それぐらいいいね！された経験はないのだが、ONにしておいた。
カスタムトーストメッセージ。文字だけ見ると美味しそうだが、要はいいねされたときに出るバナーのことである。これは後述するがメッセージの内容を変えられるので読者の方へ感謝の気持ちを伝えるためにONにした。
GDPRとはEU一般データ保護規則のことだ。閲覧者のプライバシーを守るための規則だが、日本は対象ではない。しかし、IPアドレスも立派な個人情報であり、サイバー攻撃等で悪用されないとは限らない。あらぬ疑いをかけられないためにもONにしておくことを推奨する。
この項目をONにすることで管理者通知を完全に無効にすることができる。無駄な通知を見るのは時間の無駄なのでONにした。気になったときにだけ見れば十分かと思うな。
いいねボタンを設置したくないページを選択する。私の場合は投稿記事だけにあれば十分だと思ったのでSinguar以外は全て選択した。
「Content types」ボタンのデザイン
この項目ではいいね！ボタンのデザインを変更することができる。無料版では4つのアイコンから選べるのだが、これでも悪くないと思う。CSSをいじれば多少オリジナリティを加味できるので最後に纏めてみる。
デザインは自由なので特に解説する箇所はないが、注意するポイントが1つある。以下の画像を参照。
4つの項目があるが、「IPによって記録されました」がオススメだ。というのも他の選択肢を選ぶと1人が何回も押せたり、逆に押せなかったりするからである。IPはWi-Fiをリセットとかしない限り変わらない数値なので統計を取る際にも確実なデータが得られる。
「integration」前のバージョンからの引き継ぎ
英語で難しいことが書いてあるが、簡単に言うと昔のバージョンから現在のバージョンに移行した際に失われたログやオプションを現在の数値に追加できるということだ。なので、新規でプラグインを入れた場合はOFFにしておけば問題ない。
「翻訳」トーストメッセージを変更する
私は上記のような文言に変更した。参考までに。
CSSで個性的にカスタマイズ
さて、デフォルトのデザインでもなかなか良い感じだが、さらなる個性を求める方もいると思って任意で変更できるコードを置いておく。ただ、あくまで自己責任で。
CSSを貼り付ける場所はWP Ulike内のDeveloper Toolsだ。プレビューがないので別のツールを使って確認しながらの作業が必要になる。
選んだテンプレートによってクラス名が異なるのでお気をつけを。カスタマイズに向いた基本的なプロパティのみ記載する。
基本デザイン
.wpulike .wp_ulike_btn {
margin: 0; /* 外側の余白 */
border-radius: .25em; /* 角丸 */
box-shadow: none; /* 影 */
padding: 15px 25px; /* 内側の余白 */
border: none; /* ボーダー */
cursor: pointer; /* カーソルの形状 */
}1の場合
/* ボタン周辺 */
.wpulike-default .wp_ulike_btn {
background-color: #e0e0e0; /* 背景色 */
min-height: 30px; /* 高さの最小値 */
min-width: 50px; /* 幅の最小値 */
}
/* 吹き出し */
.wpulike-default .count-box {
border-radius: .25em;
font-size: 12px; /* 文字の大きさ */
background-color: #fff;
margin-left: 8px; /* 左マージン */
line-height: 28px; /* 行の高さ */
padding: 0 10px;
box-shadow: 0 0 0 1px #bdbdbd inset;
color: #616161; /* 文字の色 */
}2の場合
/* ハート周辺 */
.wpulike-heart .wp_ulike_put_image {
background-color: #fff;
padding: 15px;
}
/* 吹き出し */
.wpulike-heart .count-box {
font-size: 14px;
line-height: 28px;
color: #616161;
font-weight: 600; /* フォントの太さ */
padding: 0 5px;
}
/* 枠 */
.wpulike-heart .wp_ulike_general_class {
box-shadow: 0 0 0 1px #bdbdbd inset;
border-radius: .25em;
padding: 5px;
}3の場合
/* ハート周辺 */
.wpulike-robeen .wp_ulike_btn {
width: 30px; /* 幅 */
height: 30px; /* 高さ */
padding: 0;
border: 0;
background-color: #fff;
}
/* カウンター */
.wpulike-robeen .count-box {
font-weight: 600;
padding: 0 14px;
font-size: 16px;
}4の場合
/* ハート周辺 */
.wpulike-animated-heart .wp_ulike_btn {
border-radius: 50em;
background-color: #fff;
padding: 0;
box-shadow: 0 5px 30px rgba(255,111,99,.4);
border: 0;
width: 50px;
height: 50px;
}
/* カウンター */
.wpulike-animated-heart .count-box {
margin: 0 15px;
color: #ff6f63;
}トーストメッセージ
/* 基本設定 */
.wpulike-notification .wpulike-message {
margin: 0 0 6px;
padding: 15px 15px 15px 55px;
width: 280px;
border-radius: 3px;
color: #fff;
animation: wpUlikeNotifitcationsAnimation .2s backwards;
box-shadow: 0 3px 5px rgba(0,0,0,.08);
font-size: 14px;
font-weight: 500;
}
/* いいねしたとき */
.wpulike-notification .wpulike-message.wpulike-success {
background-color: #8bc34a;
}
/* いいねを取り消したとき */
.wpulike-notification .wpulike-message.wpulike-error {
background-color: #ef5350;
}長々とコードを書いたが、これで終わり。このプラグインは他にも便利な機能が搭載されており、使い方次第ではモチベーションを高める以外の効果も期待できる。例えば統計を活用すればマーケティングに使えたり、ランキングのウィジェットを使えばサイト内の回遊率を高めることが可能みたいな。
今のところ、ほとんど自分が押してるようなものだが、徐々にいいねが増えていくような良質な記事を書いていきたいものだ。