ウェブページに『いいね』やリアクションボタンを追加 (Post Reaction & WP ULike)

Post ReactionプラグインとWP ULikeを導入して, ウェブページに『いいね』やリアクションボタンを追加してみました！

Post Reactionには5種類のリアクションをカスタム機能で実装しています. また, リアクションの各画像は OpenMoji から引用しています.(クレジットは後述)

なお, Post ReactionとWP ULikeはそれぞれ独立したプラグインなので, カウントも別々です. また, WP ULikeにはデータ確認パネルが存在しますが, Post Reactionにはパネルは実装されていません.
もし, Post Reactionで各リアクションを押していただいた場合はWP ULikeのいいねボタンも押していただけますと幸いです.🙇

ちなみに, WP ULikeのいいねボタンはカスタム画像で置き換えており, カスタムCSS(後述)でサイズを変更しています.

以下は導入にあたり参考にさせていただいた記事です.

Post Reactionプラグインの導入にはAKAEHO PORTALさんによるこちらの記事を参考にいたしました.

リアクションボタンを追加できるプラグイン・「Post Reaction」の使い方

ワードプレスサイトにオリジナルのリアクションボタンを追加できる「Post Reaction」というプラグインの使い方です。

akaeho.com

WP ULikeの導入にはちーまどパパさんによるこちらの記事を参考にいたしました.

【WP ULikeの使い方】ブログにいいねボタンを設置するプラグイン

SNSでよく見る「いいねボタン」を自分のブログに簡単＆無料で設置できるプラグイン「WP ULike」の使い方を解説します。カスタマイズ機能が豊富なので、他のブログとの差別化ができる点が気に入っています。設定方法をかなり分かりやすく書いている…

papablog.blog

Post Reactionの各リアクションボタンはOpenMojiで公開されているものを使用させていただきました.
Original artwork: OpenMoji © HfG Schwäbisch Gmünd and contributors.
Licensed under CC BY-SA 4.0.

OpenMoji

Open source emojis for designers, developers and everyone else!

openmoji.org

WP ULikeのいいねボタン用カスタム画像のサイズ変更用カスタムCSS

.wpulike-default .wp_ulike_put_image:after {
    width: 100px !important;
    height: 100px !important;
}
.wpulike-default .wp_ulike_put_image {
    width: 105px !important;
    height: 105px !important;
}

このページが皆さまのお役に立てることを願っております.

もし, お気に召していただけたのであればPost ReactionのリアクションならびにWP ULikeのいいねを押していただけますと幸いです.