WordPressの記事ページでいいね機能を自作する方法＋プラグインを解説(ログインなしで可能＋いいね一回などに対応)
みなさんこんにちは！エンジニアの高澤です！
今回は、WordPressの記事ページでいいね機能を自作する方法を解説したいと思います。
いいね機能はよくさまざまなサイトの記事ページなどに設置されているかと思いますが、ご自身のWordPressサイトにいいね機能を導入したい！という時ありますよね？
当記事ではそんな需要にお応えするべく、いいねボタン機能の実装を方法を自作する方法とプラグインで導入する方法の二つの方向から解説したいと思います。
自作する方法に関しては、解説の手順通りに進めていただければ非常に簡単に無理なく実装できるようになっておりますので、Webサイト制作、テーマ・プラグイン開発をされているエンジニアさんや、ブロガーさん、ウェブ担当者の方まで多くの方向けに記事の内容を構成し執筆いたしました。
よろしければぜひ当記事を繰り返しご活用いただけましたら幸いです。
目次
当記事で作れるもの
それではまず事前に当記事の内容で作れるものについて説明しておきたいと思います。
今回解説する実装内容としては、いわゆるよくある「いいね機能」 になります。各記事ページに対して設置することで、ページごとに定量的に客観的な評価を可視化することが可能です。
実装したいいねボタンをクリックすると、下図のようにいいね数として数字がカウントされます。
また、今回解説するいいね機能のサンプルコードは様々ないいね機能やデザインのベースになるかと思います。
例えば、Webサイトやアプリケーションで利用できるアイコンフォントとそのツールキットであるFont Awesome（フォント・オーサム）を利用すれば下図のようにハート型のアイコンを利用したよくあるいいねボタンにカスタマイズすることが可能です。
Font Awesomeは以下のURLからご確認可能ですので、よろしければご確認ください。
また、当ブログで解説するサンプルコードはコピ＆ペーストするだけで簡単に実装できるものとなっておりますので、Webサイト制作やWordPressを使ったWebアプリケーションの開発、また、ブロガーさんやWeb担当者の方など、多くの方向けに執筆しておりますので、よろしければぜひお仕事などでご活用いただければ幸いです。
デザインは非常に簡素なものとなっておりますが、汎用性を重視したこととしておりますので、自由にカスタマイズしていただければと思います。
いいね機能のメリット・デメリット
当記事ではいいね機能を簡単に実装できるように構成しておりますが、いいね機能を考えなしにむやみに導入するのもリスクがあります。
そのため、事前にしっかりいいね機能のメリットとデメリットについて把握しておきましょう。
会社で運用されているオウンドメディアの企画やクライアントのメディアの運用企画などでも提案の材料になるかと思います。
いいね機能のメリット
いいね機能のメリットとしては、まずユーザーが手軽にコンテンツに対して評価・アクションをすることができます。
つまり、コメントを残すほどではないが共感や評価を示したいというユーザー心理にマッチしており、エンゲージメント（強い結びつきや信頼関係）を高める効果があります。
また、各記事ページごとの「いいね数」を可視化することで、人気のある記事や注目されているコンテンツを把握でき、ユーザーの興味関心に沿った情報提供がしやすくなります。
さらに、管理者にとってはコンテンツの評価指標として活用できるため、今後の記事の企画や改善・マーケティングなどにも役立ちます。
いいね機能のデメリット
いいね機能はメリットもありますがデメリットもあるかと思いますのでしっかりお伝えしておきます。
まず、スパムや不正操作によって「いいね数」が意図的に操作されるリスクがあり、信頼性のある指標として扱うには実装に工夫が必要です。また、実装方法によってはパフォーマンスに影響が出る場合があり、Ajaxやキャッシュとの兼ね合いに注意が必要です。
さらに、「いいね」が少ないことで記事の価値を誤解されたり、投稿者がモチベーションを下げてしまう可能性もあります。
極端ですが、「あれ？この記事いいね0じゃん、読む価値ないんじゃね？」と思われかねません。
こうした点を踏まえ、サイトの目的やユーザー層に応じた設計が求められますので、導入の際にはしっかりゴールは何か？またいいね機能の導入によってサイトにどんなメリットや相乗効果があるのか？などについてしっかり仮説を立てつつ検討しておきましょう。
いいね機能の実装方法
それでは早速ですが、いいね機能の実装方法について解説したいと思います。
まず前提として、テーマに機能追加する前提で解説しますが、プラグイン開発でも使える内容となっておりますので、ご活用いただけましたら幸いです。
当記事で解説するいいね機能の種類としては以下の内容となっております。
- 一度いいねしても戻せるいいね機能の実装
- ログイン＋一度いいねしても戻せるいいね機能の実装
- 一度いいねしたら戻せないいいね機能の実装
それぞれ解説いたします。
一度いいねしても戻せるいいね機能の実装
おそらく一般的に一番スタンダードないいね機能の仕様である「一度いいねしても戻せるいいね機能」の実装方法について解説いたします。
難しい説明はまずは置いといて、以下のコードをsingle.phpなどの記事ページとして機能するPHPテンプレートファイルの表示したい場所にコピー＆ペーストしてください。
いいねボタンを表示し、JavaScriptで動きを制御するコードになります。
<?php
// いいね数取得
$post_id = get_the_ID();
$like_count = (int) get_post_meta($post_id, '_like_count', true);
// いいね済み判定（Cookie）
$liked = isset($_COOKIE['liked_post_' . $post_id]);
?>
<div id="like-area">
<button id="like-btn" data-liked="<?php echo $liked ? '1' : '0'; ?>">
<?php echo $liked ? 'いいね済み（取り消す）' : 'いいね'; ?>
</button>
<span id="like-count"><?php echo $like_count; ?></span> 件のいいね
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var btn = document.getElementById('like-btn');
var count = document.getElementById('like-count');
var postId = <?php echo json_encode($post_id); ?>;
btn && btn.addEventListener('click', function() {
if(btn.disabled) return;
btn.disabled = true;
var liked = btn.getAttribute('data-liked') === '1';
var actionType = liked ? 'unlike' : 'like';
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'action=like_post&post_id=' + postId + '&do=' + actionType
})
.then(res => res.json())
.then(data => {
if(data.success) {
count.textContent = data.data.like_count;
if(liked) {
btn.textContent = 'いいね';
btn.setAttribute('data-liked', '0');
} else {
btn.textContent = 'いいね済み（取り消す）';
btn.setAttribute('data-liked', '1');
}
} else {
alert('エラーが発生しました');
}
btn.disabled = false;
});
});
});
</script>次に、以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// いいねボタン用Ajaxハンドラ
add_action('wp_ajax_like_post', 'my_like_post_ajax');
add_action('wp_ajax_nopriv_like_post', 'my_like_post_ajax');
function my_like_post_ajax() {
if (empty($_POST['post_id'])) {
wp_send_json_error();
}
$post_id = intval($_POST['post_id']);
$do = isset($_POST['do']) ? $_POST['do'] : 'like';
$cookie_name = 'liked_post_' . $post_id;
$like_count = (int) get_post_meta($post_id, '_like_count', true);
if ($do === 'unlike') {
// 取り消し処理
if (isset($_COOKIE[$cookie_name]) && $like_count > 0) {
$like_count--;
update_post_meta($post_id, '_like_count', $like_count);
setcookie($cookie_name, '', time() - 3600, '/'); // Cookie削除
}
wp_send_json_success(['like_count' => $like_count]);
} else {
// いいね処理
if (!isset($_COOKIE[$cookie_name])) {
$like_count++;
update_post_meta($post_id, '_like_count', $like_count);
setcookie($cookie_name, 1, time() + 365*24*60*60, '/');
}
wp_send_json_success(['like_count' => $like_count]);
}
}ペーストが完了したら、いいね機能を実装したページの箇所をご確認ください。
すると下図のように「いいね」のボタンが表示されているかと思います。（以下の例では、すでに他のユーザーによって1いいねされている状態ですが気にしないでください）
いいね！として一度クリックすると下図のように「いいね」から「いいね済み（取り消す）」と言う文言に切り替わるかと思います。
それに合わせて1件分のいいねが追加されているかと思います。
もう一度いいねをクリックすると、下図のように1いいね追加されておりましたが、1いいね減った状態になるかと思います。
これで一番スタンダードな仕様のいいね機能の実装は完了です。お疲れ様でした！
ログイン＋一度いいねしても戻せるいいね機能の実装
次は、前述の一番スタンダードな仕様と言える「一度いいねしても戻せるいいね機能の実装」の方法を解説いたしましたが、そのいいね機能にログインしたユーザーだけがいいねできるようにする機能を追加した実装方法の解説となります。
実装するには、以下のコードをsingle.phpなどの記事ページとして機能するPHPテンプレートファイルの表示したい場所にコピー＆ペーストしてください。
いいねボタンを表示し、JavaScriptで動きを制御するコードになります。
<?php
// いいね数取得
$post_id = get_the_ID();
$like_count = (int) get_post_meta($post_id, '_like_count', true);
// いいね済み判定（Cookie）
$liked = isset($_COOKIE['liked_post_' . $post_id]);
?>
<div id="like-area">
<button id="like-btn" data-liked="<?php echo $liked ? '1' : '0'; ?>" <?php if(!is_user_logged_in()) echo 'disabled'; ?>>
<?php if(!is_user_logged_in()) {
echo 'ログインしてください';
} else {
echo $liked ? 'いいね済み（取り消す）' : 'いいね';
} ?>
</button>
<span id="like-count"><?php echo $like_count; ?></span> 件のいいね
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var btn = document.getElementById('like-btn');
var count = document.getElementById('like-count');
var postId = <?php echo json_encode($post_id); ?>;
btn && btn.addEventListener('click', function() {
if(btn.disabled) return;
var liked = btn.getAttribute('data-liked') === '1';
var actionType = liked ? 'unlike' : 'like';
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'action=like_post&post_id=' + postId + '&do=' + actionType
})
.then(res => res.json())
.then(data => {
if(data.success) {
count.textContent = data.data.like_count;
if(liked) {
btn.textContent = 'いいね';
btn.setAttribute('data-liked', '0');
} else {
btn.textContent = 'いいね済み（取り消す）';
btn.setAttribute('data-liked', '1');
}
} else {
if(data.data && data.data.message) {
alert(data.data.message);
} else {
alert('エラーが発生しました');
}
}
});
});
});
</script>次に、以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// いいねボタン用Ajaxハンドラ
add_action('wp_ajax_like_post', 'my_like_post_ajax');
add_action('wp_ajax_nopriv_like_post', 'my_like_post_ajax');
function my_like_post_ajax() {
if (empty($_POST['post_id'])) {
wp_send_json_error();
}
// ログインしていなければエラー
if (!is_user_logged_in()) {
wp_send_json_error(['message' => 'ログインが必要です']);
}
$post_id = intval($_POST['post_id']);
$do = isset($_POST['do']) ? $_POST['do'] : 'like';
$cookie_name = 'liked_post_' . $post_id;
$like_count = (int) get_post_meta($post_id, '_like_count', true);
if ($do === 'unlike') {
// 取り消し処理
if (isset($_COOKIE[$cookie_name]) && $like_count > 0) {
$like_count--;
update_post_meta($post_id, '_like_count', $like_count);
setcookie($cookie_name, '', time() - 3600, '/'); // Cookie削除
}
wp_send_json_success(['like_count' => $like_count]);
} else {
// いいね処理
if (!isset($_COOKIE[$cookie_name])) {
$like_count++;
update_post_meta($post_id, '_like_count', $like_count);
setcookie($cookie_name, 1, time() + 365*24*60*60, '/');
}
wp_send_json_success(['like_count' => $like_count]);
}
}ペーストが完了したら、いいね機能を実装したページの箇所をご確認ください。
すると下図のようにログインしていない状態の時は「いいね」のボタンが「ログインしてください」と表示されており、いいねができない状態になっていることと思います。
確認できたら、WordPressにログインしてみてください。ログイン後、いいねボタンを確認すると下図のようにいいねできる状態になっていることと思います。
この実装は、WordPressでの会員登録サイトである場合に適した実装になります。
ログインしなければいいねできない、と言うのはよくあるパターンかと思いますので、ご自身のサイトが会員限定サイトなどであれば活用できるかと思います。
もしそもそもご自身のサイトをWordPressで会員登録サイトとして作りたい！と言う方は、よろしければ以下の記事をご確認いただけると実装できますので、お仕事などにぜひご活用ください。
一度いいねしたら戻せないいいね機能の実装
一度いいねしたら戻せない方の機能の実装方法について解説いたします。
ここで実装する「一度いいねしたら戻せない」とは、一度いいねしたらそのいいねをいいねしていない状態に戻すことができない、つまり一度クリックしたらずっとそのまま、のいいね機能になります。
少し特殊ですがたまーに見かけますよね？
なのでここで解説しておきたいと思います。
以下のコードをsingle.phpなどの記事ページとして機能するPHPテンプレートファイルの表示したい場所にコピー＆ペーストしてください。
いいねボタンを表示し、JavaScriptで動きを制御するコードになります。
<?php
// いいね数取得
$post_id = get_the_ID();
$like_count = (int) get_post_meta($post_id, '_like_count', true);
// いいね済み判定（Cookie）
$liked = isset($_COOKIE['liked_post_' . $post_id]);
?>
<div id="like-area">
<button id="like-btn" <?php if($liked) echo 'disabled'; ?>>
<?php echo $liked ? 'いいね済み' : 'いいね'; ?>
</button>
<span id="like-count"><?php echo $like_count; ?></span> 件のいいね
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var btn = document.getElementById('like-btn');
var count = document.getElementById('like-count');
var postId = <?php echo json_encode($post_id); ?>;
btn && btn.addEventListener('click', function() {
if(btn.disabled) return;
btn.disabled = true;
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'action=like_post&post_id=' + postId
})
.then(res => res.json())
.then(data => {
if(data.success) {
count.textContent = data.data.like_count;
btn.textContent = 'いいね済み';
} else {
btn.disabled = false;
alert('エラーが発生しました');
}
});
});
});
</script>次に、以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
// いいねボタン用Ajaxハンドラ
add_action('wp_ajax_like_post', 'my_like_post_ajax');
add_action('wp_ajax_nopriv_like_post', 'my_like_post_ajax');
function my_like_post_ajax() {
if (empty($_POST['post_id'])) {
wp_send_json_error();
}
$post_id = intval($_POST['post_id']);
// すでにCookieがある場合は二重カウント防止
if (isset($_COOKIE['liked_post_' . $post_id])) {
$like_count = (int) get_post_meta($post_id, '_like_count', true);
wp_send_json_success(['like_count' => $like_count]);
}
// いいね数をDBから取得し+1
$like_count = (int) get_post_meta($post_id, '_like_count', true);
$like_count++;
update_post_meta($post_id, '_like_count', $like_count);
// Cookieをセット（1年間有効）
setcookie('liked_post_' . $post_id, 1, time() + 365*24*60*60, '/');
// JSからも即時反映させるため、レスポンスにも返す
wp_send_json_success(['like_count' => $like_count]);
}ペーストが完了したら、いいね機能を実装したページの箇所をご確認ください。
すると下図のように「いいね」のボタンが表示されているかと思います。（以下の例では、すでに他のユーザーによって1いいねされている状態ですが気にしないでください）
いいねすると、下図のように1件のいいねが追加され、もう二度といいねを戻せない（クリックできない）状態になっているかと思います。
これで一度いいねしたら戻せないいいね機能の実装は完了です。お疲れ様でした！
プラグインで導入する方法
ここまでで、コードで自作する方法を解説してきましたが、非常に簡単にいいね機能を導入できる便利なプラグインもありますので、ここでご紹介しておきたいと思います。
その名も「WP ULike – All-in-One Engagement Toolkit」と言うプラグインになります。（※プラグイン名は随時変更されている可能性があるためご注意ください）
「WP ULike – All-in-One Engagement Toolkit」は非常に簡単にいいねボタンをサイトに追加することができるプラグインで、プラグインをインストールして有効化するだけで、ご自身のサイトの記事ページにいいねボタンを表示することができます。
導入方法としては、まずWordPress管理画面左メニュー「プラグイン」から「プラグインを追加」をクリックして下図のようにプラグイン検索画面を開きます。
開いたら、画面右上の検索バーから「WP ULike 」などと検索してください。
すると下図のように検索結果にプラグインが表示されるので、「今すぐインストール」をクリックしてください。
クリック後、「有効化」と言うボタンに切り替わるので、その「有効化」ボタンもクリックしてプラグインを有効化してください。
はい、これでいいね機能をWordPressに導入することができました。
ここまでできたらご自身のサイトの記事ページをご確認ください。
すると、下図のようにいいねボタンが表示されていることと思います。
これでいいね機能の導入は完了です。お疲れ様でした！
非常に簡単だったかと思います。
このプラグインは非常に高度な機能を提供しており、下図のように専用の設定ページがWordPress管理画面へ追加されます。
設定できる項目も非常に豊富で、例えば下図のようにいいねボタンのデザインなども変更することが可能です。
筆者的にはプラグインを追加するだけでこれだけ高機能で優れたいいね機能を導入できるので、ここでご紹介させていただきました。
もしエンジニアに実装するにはコストがかかるから困ったり、ブロガーさんやWeb担当者さんがご自身でいいね機能の設定や見た目を管理画面からカスタマイズしたい、と言う場合はおすすめと言えます。
ここまででいいね機能を自作する方法とプラグインで導入する方法を解説しましたが、自作する場合はサイトに適したデザインや機能で非常に自由度を高く作れる、プラグインで導入する場合は予算や工数などをかけずにクリック一つで簡単に導入できる、と言うそれぞれメリットデメリットがあるかと思います。
当記事がご自身のサイトにいいね機能を導入する際の一つの手助けになれば
まとめ
今回はWordPressの記事ページに「いいね」機能を実装する方法について、自作とプラグインの両面から解説しました。
「いいね」機能は、ユーザーの反応を気軽に集められる便利な仕組みであり、ご自身のサイトにも取り入れたいと感じていた方も多いのではないでしょうか。
自作での実装方法については、手順通りに進めれば無理なく導入できるよう丁寧に構成しておりますので、Webサイト制作に携わる方やテーマ・プラグインを開発されているエンジニアの方はもちろん、ブロガーや企業のウェブ担当者の方にもお役立ていただける内容となっております。
ぜひ当記事を参考に、ご自身のWordPressサイトに合った方法で「いいね」機能を取り入れてみてください。繰り返しご活用いただければ幸いです。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など