ブログ

【プラグイン未使用】WordPressにいいねボタンをつけてみた

2022年2月3日

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

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

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

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

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

管理人

当ブログで使用しているテーマは「Affinger6」ですが、基本的にどのテーマでも問題なく設置できると思います。

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

スポンサーリンク

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

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

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

フォルダ構成例1

public_html/
   ├ WordPressインストールディレクトリ/
   │      └ いいねボタンディレクトリ/

WordPressインストールディレクトリの中に、いいねボタンファイルを設置する

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

フォルダ構成例2

public_html/
   ├ サブディレクトリ/
   │      ├ 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;
}

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

 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通り)

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

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

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

脚注[+]

この記事をシェアする▼

-ブログ
-