投稿下に「いいね!」的な評価ボタンを追加する「DW Reactions」プラグインを入れてみた話

こんにちは。ブログ歴15年、Wordpress歴8年のLeoです!

ブログテーマを無料テーマ最強の「Cocoon」に変えて2ヶ月半が経ち、これまで様々なカスタマイズを施し、ようやく一つの答えにたどり着いたところです。

これまでのカスタマイズはこちらで。

今日はCocoonの機能ではなくプラグインでブログに機能を追加したので軽く紹介します。

追加したReactionという機能

今回追加したのは、記事の最後に「この記事はどうでしたか?」的なことを確認するための機能で、Viral系のWebマガジンなんかでよく目にします。

ボクが個人的に好きなリアクション機能にGizmodeの「WANT」確認欄(↓)があります。

せっかく記事を書いたんですからより多くの人に読んでもらいたいわけですが、コメントを書いてもらうまでのアクションを期待するには相当いい記事を書くか、質問されるような記事である必要があります。

それに対して、今回実装する「Like」機能はワンクリック/ワンタップで気軽に記事へのフィードバックが集められるのがいいかなって思いました。

GizmodeのWant! vs Stay…は、新製品の紹介記事にだけ追加されますが、例えばボクがCocoonのカスタマイズをしたとして、見た方が「自分もやりたい!」とか「このカスタマイズは微妙…」などというリアクションをくれれば記事の書き甲斐があるというものですよね。

いいね(Like)機能はFacebookやTwitter、Instagramで一般的になった機能なのでこの世に存在してもう10年以上になるため珍しいものでも新しいものでもありませんが、

ブログに顔文字を使ってReactionボタンが並ぶようになったのはここ2年くらいじゃないかと思います。

「DW Reactions」というプラグインで実装

プラグインを減らすことはWordpressでブログサイトを構築する上で重要なことですが、テーマ自体が装備していない機能をプラグインで追加できることはWordpress最大の魅力のひとつですので、欲しいと思う機能があるときは積極的に追加します。

今回は、「DW Reactions」というプラグインを使いました。

Reaction系プラグインは無料/有料結構数があるので色々調べましたが、Cocoonとの相性的なことも色々含めた上でこれを選択するに至りました。

インストール作業

「プラグイン」>「新規追加」でプラグイン追加ページへ。

検索バーで「DW Reactions」を探します。

この子です。最終更新日が古いのでWordpressの現行バージョンで使えるか心配しましたが、普通に使えました。(いつ使えなくなっても不思議ではない)

インストール→有効化で自動的に投稿ページ、固定ページ、そしてアーカイブ一覧にボタンが追加される様です。

設定

他にもいくつかプラグインを入れてみましたが、このプラグインが一番設定がシンプルです。

基本的にタブもないシンプルな設定ページで上のチェック数個をいじるだけ。

ボクはページ下部だけに表示させる様にし、あとは投稿ページだけに表示する様にしました(上のスクショではHomepageもチェックされていますが、Cocoonでは出ない様です)。

ひとつ重要なポイントが、上から3つ目の項目で、リアクションできる人をログインユーザーに縛るかどうかです。

縛ると、Wordpressにログインしている人しかリアクションできないので、多くの一般読者はきっとフィードバックを残せません。Wordpress系の記事に特化したサイトならいいかも知れませんがブロガーではない方でWPアカウントにログインしてブログに来る人はいないと思うのでボクは誰でもリアクションできる様にチェックを取っています。

実装後見た目

実装した時に表示される位置をカスタマイズできる項目がなく、入れると↑こんな感じで記事の最後に自動的に登場します。

ウィジットの設定などで差が出る可能性がありますが、ボクの場合はVA Social Buzzとこの記事を書いている人の間に出てきました。

デフォルトでは上下に灰色(#333)のボーダーが敷かれていますが、ボクは追加CSSで消しました。消し方興味ある方もしいらっしゃいましたらコメントでお願いします。

デフォルトでは「👍Like」という表記がひっそりいるだけなのでわからない人にはわかりにくいかもですが、マウスオーバーでLike/Love/Haha/Wow/Sad/Angryという6つの選択肢がポップアップします。

この辺、モバイルだと表示に安定がないのが最終更新日4年前の辛いところかも知れません。

どれかを選択すると、上の写真の様に左に自分の選択したリアクション、右にみんなのリアクション結果が並びます。

他のプラグインだとこれをカウント数ではなくパーセンテージにしたり、グラフで表示させるなどのオプションがあるものも見られます。

また、Cocoonではどうやっても表示させられなかったのですが、絵文字の入れ替えや数のカスタマイズができるタイプなどこの機能が重要だと思った際には深掘りしたいなと思うプラグインもありました。

WD Reactionsは設定もシンプルで、装備としてもシンプルだと感じています。

リアクションを入れた3つの理由

順序が逆になりましたが、最後に、このプラグインを入れた理由を詳しく紹介しておきます。

  • 気軽にフィードバックを残して欲しい
  • 入れ替え候補のテーマ選びのための指標にするため
  • 他との差別化を図るため 

解説します。

1. 気軽にフィードバックが欲しい

まずはさっきも書いた通り、コメントをもらうほどの行動を受け取るハードルの高さを考えた時、ワンアクションで記事についての感想が得られる気軽さを考え、

せっかく書いた記事に何らかのフィードバックをもらいたいなと思ったのがひとつ目の理由です。

2. 入れ替えテーマ選びのため

順番は2番目に書きますが、最近画策していることにこれが関連していて結構大きな理由でもあります。

Cocoonは本当に素晴らしいテーマで、カスタマイズも趣味レベルで楽しませていただきましたが、別件で有料テーマの購入のためにリサーチをしていた中でLEOLOGもそこで見つけたいくつかのテーマに入れ替えようかなと思う様になりました。

有料テーマはお金がかかる一方、完成度については無料テーマとかなり差があることがあり、目的に対して適切なテーマを選べさえすればブログの質が大きく向上することは間違いありません。

LEOLOG x Cocoonも時間をかけてカスタマイズした結果かなりいい感じのデザインになったと自負していますが、まだ足りない機能が結構あって、過度なカスタマイズによりいくつかの点でほころびもある実情も踏まえて有料テーマに入れ替えを考えているんですよね。

ただ、有料テーマは無数にあって、どれを買えば満足するかを悩んでいて、

いくつかの気に入ったテーマにこのリアクションボタン機能が組み込まれているのでその機能が、

  • 実際読者からの反応があるものか?
  • あってボクが幸せになれるものか?

という点で現行のCocoonに追加して実験してみようと思ったんですね。

3. 差別化

あまり日本のテーマではリアクション機能を見かけない気がします。

無料ブログでやってる方でブログ村的なランキングサイトに参加していて「ポチッとお願いします」的な文言が見られますが、

普段ボクがよく読ませていただいているWordpressでやってらっしゃるブログでリアクション系を見かけることはあまりないかなと。

逆にSNSボタンは結構多くのブログで見かける気がしますが、SNSで拡散ってどんな記事に対してやるのかなー?っていう思いも正直あるのでボクはSNSボタンを主張するよりはリアクションボタンを前に出したいかも?って思いました。

そしてそのデザインはうまく組み込めたなら他の(日本でよく見かける)ブログとは差別化できていいのかな、って感じです。

まとめ・総括

ってことで、

ブログ記事の最後に挿入して記事に対するリアクションをもらうための機能追加について紹介しました!

まずはこの記事を読まれたあなた!是非直下にあるリアクションボタン(まだ存在してたら)でLikeかLoveなのか、よろしくないのか反応してもらえたら幸いです!

シアトル生まれ、大阪育ち。6年前に独立・起業しましたが、コロナ禍で事業が大ダメージを受け、人生の方向転換に悪戦苦闘の日々です!とにかく、「ワクワク」に満ちた毎日を目指してできることから地道に頑張っています〜!


Fatal error: Uncaught ErrorException: md5_file(/home/users/1/leoism88/web/LeoLog/blog/wp-content/litespeed/js/04fcaf8f9ce138c414d60b32e5bfebaf.js.tmp): failed to open stream: No such file or directory in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php:130 Stack trace: #0 [internal function]: litespeed_exception_handler(2, 'md5_file(/home/...', '/home/users/1/l...', 130, Array) #1 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php(130): md5_file('/home/users/1/l...') #2 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(837): LiteSpeed\Optimizer->serve('https://blog.le...', 'js', true, Array) #3 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(382): LiteSpeed\Optimize->_build_hash_url(Array, 'js') #4 /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimize.cls.php(264): LiteSpeed\Optimize->_optimize() #5 /home/use in /home/users/1/leoism88/web/LeoLog/blog/wp-content/plugins/litespeed-cache/src/optimizer.cls.php on line 130