WPに「いいねボタン」を付けたい
- Qわっちのブログにも「いいねボタン」を付けたいんですが。
- A
少し難しいけど「いいねボタン・改」がオススメです。簡単に設置したいのならWPプラグインのWP ULikeをオススメします。
ここでは「いいねボタン・改」の設置方法について書きます。WP ULikeは特に難しい設定はないのでインスコするだけで動きます。ボタンはウィジェットで配置出来るので分かりやすいです。
いいねボタン・改
これまではプラグインの「WP ULike」を使ってました。コメント欄よりも気軽に送ってもらえるところがいいです。しかしWP ULikeは御礼の画像を表示したり連打が出来ません。そこが残念だったので別のボタン「いいねボタン・改」に変えました。
このボタンはホームページ用に設計されたものなのでブログで使うには工夫が必要です。プラグインではないので導入は大変ですが、使い勝手は良好です！Cocoonを前提に解説してますが、応用すれば別のテーマでも設置可能です。
プログラム設置手順
パスが通ってないと動かないので分かりやすいようにpublic_htmlフォルダの直下に置きます。public_htmlフォルダ直下にダウンロードして解凍したファイル［newiine.app］を丸ごと配置。動作に必要なものはすべてnewiine_appフォルダにあり集計データもここにCSV形式で保存されます。
配置場所： public_html > newiine_app次にCocoon子テーマのtmp-userフォルダにあるhead-insert.phpに以下を追加。Googleフォントの読み込みは「♥」記号だけに限定してトラフィックを減らしてます。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round&text=favorite&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://（ドメイン）/newiine_app/newiine.css">さらにCocoon子テーマのtmp-userフォルダにあるfooter-insert.phpに以下を追加。公式の設置マニュアルでは<head>や<body>もイジりますが、Cocoonの場合は不要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://（ドメイン）/newiine_app/newiine.js"></script>
ドメインの部分は御自身のものに置き換えてください。
ブログ用に一部改造
記事番号を自動的に取得して記事毎にログを作成・集計出来るように修正します。そのためには設置用ソースにあるボタンの名前を <?php the_ID(); ?> に変更します。
<!-- いいねボタン改ここから -->
<button type="submit" class="newiine_btn" data-iinename="<?php the_ID(); ?>">
<span class="material-icons-round">favorite</span>
<span class="newiine_count"></span>いいね
<!-- お礼メッセージここから -->
<div class="newiine_thanks newiine_thanks_up" style="display:none;">
<div class="newiine_box">
<img src="newiine_app/example.jpg" alt="THANK YOU!">
<p>ありがとうございます！</p>
</div>
</div>
<!-- お礼メッセージここまで -->
</button>
<!-- いいねボタン改ここまで -->親テーマのtmpフォルダにあるcontent.phpを子テーマにコピーして修正したソースを追記します。
（コピー元） public_html > wp-content > themes > cocoon-master > tmp > content.php
（コピー先） public_html > wp-content > themes > cocoon-child-master >tmp > content.phpcontent.phpはブログ本文のレイアウトを構成するファイルです。ページ内の要素が順番通り並んでるのでボタンを表示させたい箇所に改造したソースを追加します。
ウチでは<footer class=”article-footer entry-footer”>の下に貼り付けました。
お礼画像の差し替え
これがWP Ulikeにはない画像ポップアップ機能です。ボタンを押してもらった時に画像とメッセージを表示します。
先ほどcontent.phpに貼り付けたソースの以下の部分を修正します。
<img src="newiine_app/example.jpg" alt="THANK YOU!">
<p>ありがとうございます！</p>画像とメッセージは希望のものに変更出来ます。画像はWordPressのメディアファイルに置いてフルパスで指定。パスが通ってないと表示されないのでフルパスで指定すると確実です。オリジナルの画像はnewiine_appフォルダの中にあるexample.jpgです。ピクセル数は600x400dpiです。
その他、ボタンの形を変えたりメッセージの表示時間を変えたりも出来ます。公式の設置マニュアルに詳しく載ってますので一度ご覧いただければと存じます。
管理画面
集計結果は管理画面から確認出来ます。https://（ドメイン）/newiine_app/admin/setting.php を開くと管理画面が表示されます。ログイン用パスワードを忘れずに設定しておきます。
いいねボタンをクリックすると記事毎にクリック数がカウントされます。もし全ページ同じクリック数だったら個別に集計出来ていない事になります。ページごとに異なるクリック数が表示されているか確認してみて下さい。
WordPressのいいねボタンのメリット
無料ブログサービスだと最初からいいねボタンが実装されてます。しかしそのブログサービスの利用者でないと押せません。通りすがりの人がいちいち会員登録までしてボタンを押すでしょうか？ WordPressのいいねボタンなら登録なしに誰でも押せます。
