【いいねボタン・改】WordPressにいいねボタンをつけてみた

少し前から、今まで使っていたいいねボタン用のプラグイン「WP ULike」をやめて、以下のサイトで配布されているプログラムを導入しています。

WP ULikeプラグインはとても高機能で、ボタンデザインもおしゃれなものをいくつか選べたりできるのですが、

• Web拍手のような気軽な感じで使っていただきたい
• 各記事ごとのいいね数を確認できるくらいの機能でいい

という私には少々多機能過ぎました。

子テーマのfunctions.phpを少しいじる必要はありましたが、簡単に設置できましたので備忘録も兼ねてまとめてみました。

プログラムファイルのダウンロード・初期設定・サーバーへのアップロードを行う

ファイルのダウンロードは、以下のリンク先より行います。

いいねボタン・改 | do - 創作・同人サイト制作支援サイト

次に、以下のリンク先のマニュアルを確認しながら、初期設定とファイルのアップロードを行います。

いいねボタン・改 設置手順 | do - 創作・同人サイト制作支援サイト

サーバーへのアップロードは、FFFTPのようなFTPソフトやファイルマネージャー機能（サーバー側で用意されていれば）などを使って行ってください。
例えば、以下のような設置になるかと思います。

当ブログは、サブディレクトリにWordPressをインストールしているので以下のように設置しています。

headエリアと</body>直前エリアにコードを追加する

Affinger6テーマの場合は、Affinger管理→その他と進み、上級者向け項目内の「コードの出力」でそれぞれ設定します。
追加するコードはマニュアルの「いいねボタンの設置」項目を確認しながら行います。

headエリア

headに出力するコードに以下を追加します。

 html<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
<link rel="stylesheet" href="https://ブログのアドレス/いいねボタン設置ディレクトリ/newiine.css">

</body>直前エリア

</body>直前に出力するコードに以下を追加します。

 html<script src="https://ブログのアドレス/いいねボタン設置ディレクトリ/newiine.js"></script>

マニュアルでは、jQueryライブラリ用のJSファイルを読み込むコードが記載されていますが、Affinger6側で設定されているので必要ありません。

子テーマのfunctions.phpに自作ショートコード用の設定を追加する

どの記事でいいねボタンが押されたのかを識別する値に「記事ID」を利用します。

記事IDの取得には、①記事ID出力用ショートコードを自作し、②後述するいいねボタン設置用コードに埋め込む方法がいいかなと思いました。

外観→テーマエディターと進み、テーマのための関数 (functions.php)を開きます。

 PHP<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}

以上のコードの下に、追加していきます。

参考リンク：投稿のIDを出力・取得する | The WordPress Press

参考リンク：【WordPress】自作ショートコードの作り方（引数有） | たろのプログラミング日記

 PHP⁠function get_post_ID() {
   global $post;
   $post_id = $post->ID;
   return $post_id;
}
add_shortcode( 'post_ID', 'get_post_ID');

最後の行にある「post_ID」が、ショートコードの名前になります。
もちろん、これ以外の名前でもOKです。

いいねボタンのコードを設置する

Affinger6には投稿記事の下に一括表示というウィジェットエリアが用意されているので、ここに設定します。

利用するウィジェットは「カスタムHTML」です。^*1Affinger6なら「00_STINGERカスタムHTML」でも可能です

「テキスト」ウィジェットだとショートコードが動作しません。

マニュアルにあるいいねボタン設置用コードに自作ショートコードを設定すると、以下のようになります。
これをウィジェットにコピペしたら完成です。

 html<!-- いいねボタン改ここから -->
<button type="submit" class="newiine_btn" data-iinename="[post_ID]">
   <span class="material-icons-round">favorite</span>
   <span class="newiine_count"></span>いいね
</button>
<!-- いいねボタン改ここまで -->

まとめ

導入いいねボタン、他にIPアドレスを拒否できたり、同一IPアドレスが1日に送れるいいね数の上限を設定できたりと、いたずら防止の機能も最低限盛り込まれていていい感じです。

ちなみに、自作ショートコードを利用せず、ウィジェットでPHPコードを利用できるように設定して、記事IDを出力する処理を直接書く方法もあります。
しかしテキストウィジェット縛りになるのに、デフォルトの編集モードが「ビジュアル」になってしまうのが難点でやめました。
ビジュアル、PHPコードがエスケープ処理されてしまうんですよね……。

ブログに限らず、シンプルないいねボタンを探している方はぜひ導入してみてください😊

追記：アップデートがありました

記事をアップした数日後に、正式版へのアップデートがありました。

• コイブミのようなお礼メッセージをポップアップできるようになりました。これまで通り、お礼メッセージなしでも利用できます。
• お礼メッセージ実装にあたり、newiine.jsを改修し、お礼メッセージの表示時間を設定できるようになりました。
• 管理画面にて、いいねボタン一覧の表示順を変更できるようになりました。（名前昇順もしくは降順の2通り）

とのことです。結構大きな更新ですね。

お礼メッセージのポップアップ表示は密かに欲しい機能だったので嬉しい限り。
ということで、当ブログに早速反映してみました。気になる方はぜひ押して試してみてください〜

アップデート方法＆お礼メッセージの設定の仕方は、上のリンク先をご覧くださいませ。

追記その2：記録される記事URLを調整する

当ブログは目次をクリック（タップ）すると、記事URLの後ろに「#目次1」というような形で付加されるしくみになっています。
この状態で「いいね」するとどうなるかというと、「#目次1」の文字列がエンコードされて、とてもなが〜いURLが記録されてしまうのです。
……っていうかこうなるまで、この可能性に全く気づかn（ry

証拠画像。クリック（タップ）すると大きく表示されます。
一番下にやたら長いURLが書かれているのがわかるでしょうか。

これだと、画像の通りレイアウトが崩れてしまうので、とても見づらい。

目次をクリックされても、目次部分はカットして、記事URLだけ記録されるようにしたーい！
※この記事なら、必ず「https://weblog.sh-rainbow.net/like-button-noplugin」で記録されるようにしたい！

と思い、配布元サイトを探ってみたら、解決法がありました。

マニュアル通り、「＜button＞タグにdata-iineurl="記録したいURL"を追加」するのですが、その前に「記録したいURL」に設定する用の自作ショートコードを用意します。

上でまとめている、子テーマのfunctions.phpに自作ショートコード用の設定を追加すると、ほぼほぼ作業の流れは一緒ですね

外観→テーマエディターと進み、テーマのための関数 (functions.php)を開いて、以下のコードを設定します。

 php⁠function get_post_add() {
$permalink = get_permalink();
return $permalink;
}
add_shortcode( 'post_permalink', 'get_post_add');

参考：個別ページ（記事ページ）へのURLを取得・出力する | The WordPress Press

「post_permalink」がショートコードの名前になります。

これで、タグに追加するコードがdata-iineurl="[ post_permalink ]"となります。
マニュアルにあるサンプルコードに追加してみます。

 html<!-- いいねボタン改ここから -->
   <button type="submit" class="newiine_btn" data-iinename="いいねボタンの名前" data-iineurl="[post_permalink]">
   <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>
<!-- いいねボタン改ここまで -->

これでURLすっきり！

……になるのですが、ついでにログファイルも修正しました。
修正しないと、ずっとなが〜いURLが管理画面上に残ったままになるので。。

ログファイルは/newiine_app/datas以下に保存されています。
「いいねボタンの名前.csv」ファイルです。

中身を開くと、こんな記述になっているかと思います。

"http://hogehoge.com/sample1","テスト記事",123.456.78.99,2022/08/19,12:00:00,1

データの意味を自分なりにまとめてみると、こんな意味になるかな？ と。

"記事URL","記事のタイトル",いいねボタンを押した人のIPアドレス,押した日付,押した時間,（おそらく）この人がいいねボタンを押した回数

今回のようにURLを修正したい場合は、「記事URL」をいじればOKです。

見事、修正できました！