ブログ記事にいいねボタンを設置する方法

WordPressの記事に「グッドボタン」を設置して、クリックするとリアルタイムでカウントアップさせる方法を解説します。

実装のポイント

• functions.php にショートコードと Ajax 処理を追加
• JavaScript でボタンクリック時に Ajax 送信
• CSSで可愛いボタンデザインに調整
• テーマに合わせて Lightning/Cocoon 用に微調整

functions.php にコードを追加

// いいねボタン（グッドボタン）ショートコード
function like_button_shortcode($atts){
    global $post;
    $likes = get_post_meta($post->ID, 'post_likes', true);
    if($likes === '') $likes = 0;
     return '<div class="like-button-container"><button class="like-button" data-postid="'. $post->ID .'">👍 グッド <span class="like-count">'. $likes .'</span></button></div>';
}
add_shortcode('like_button', 'like_button_shortcode');

// Ajax いいね処理
add_action('wp_ajax_like_post', 'ajax_like_post');
add_action('wp_ajax_nopriv_like_post', 'ajax_like_post');
function ajax_like_post() {
    $post_id = intval($_POST['post_id'] ?? 0);
    if($post_id > 0){
        $likes = get_post_meta($post_id, 'post_likes', true);
        $likes = ($likes === '') ? 1 : $likes + 1;
        update_post_meta($post_id, 'post_likes', $likes);
        echo $likes;
    }
    wp_die();
}

// JS用にAjax URLを渡す
function enqueue_like_button_script(){
    wp_enqueue_script(
        'like-button',
        get_stylesheet_directory_uri() . '/js/like-button.js',
        array(),
        '1.0',
        true
    );
    wp_localize_script('like-button', 'likeButtonAjax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_like_button_script');

// 投稿本文の最後に自動でグッドボタンを追加
function append_like_button_to_content($content){
    if(is_singular('post')){ // 投稿ページのみ
        $content .= do_shortcode('[like_button]');
    }
    return $content;
}
add_filter('the_content', 'append_like_button_to_content');
  

javascript にコードを追加

ファイル名：like-button.js
保存先：wp-content/themes/child-theme/js/like-button.js

document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.like-button').forEach(function(btn){
        btn.addEventListener('click', function(){
            const postId = this.dataset.postid;
            const countSpan = this.querySelector('.like-count');
            const xhr = new XMLHttpRequest();
            xhr.open('POST', likeButtonAjax.ajax_url);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function(){
                if(xhr.status === 200){
                    countSpan.textContent = xhr.responseText;
                    btn.classList.add('liked'); // ポップアニメーション用クラス
                    setTimeout(()=>{btn.classList.remove('liked');},500);
                }
            };
            xhr.send('action=like_post&post_id=' + postId);
        });
    });
});
  

子テーマのディレクトリ構造

汎用CSS

/*いいねボタン*/
.like-button-container{
    text-align:center;
    margin:20px 0;
}

.like-button{
    padding:10px 20px;
    border:none;
    border-radius:30px;
    background:#3399ff; /* 薄い青系 */
    color:#fff;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.like-button:hover{
    transform: scale(1.1);
    background:#1a75d2; /* 濃いめの黄色 */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

.like-button:active{
    transform: scale(0.95);
}

.like-button.liked{
    animation: pop 0.5s ease;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.like-count{
    margin-left:8px;
    font-weight:bold;
}
  

テーマ別サンプルCSS

Lightning用

/* Lightning用 いいねボタン */
.like-button-container{
    text-align:center !important;
    margin:20px 0 !important;
}

.like-button{
    padding:10px 20px !important;
    border:none !important;
    border-radius:30px !important;
    background:#3399ff !important; /* 薄い青系 */
    color:#fff !important;
    font-weight:bold !important;
    font-size:16px !important;
    cursor:pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.like-button:hover{
    transform: scale(1.1) !important;
    background:#1a75d2 !important; /* 濃いブルー */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15) !important;
}

.like-button:active{
    transform: scale(0.95) !important;
}

.like-button.liked{
    animation: pop 0.5s ease !important;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.like-count{
    margin-left:8px !important;
    font-weight:bold !important;
}
    

Cocoon用

Cocoonはsingle-contents.phpに直書きしてます。

ファイル名：single-contents.php
保存先：wp-content/themes/child-theme/tmp/single-contents.php

<?php
/**
 * Cocoon WordPress Theme
 * single.php カスタマイズ版
 *
 * 投稿ページのレイアウトに「いいねボタン用のスタイル」を追加。
 * 管理画面でも編集しやすいように、改行とコメントを整理済み。
 */
if ( !defined( 'ABSPATH' ) ) exit;
?>


<?php // パンくずリスト（メイントップに表示する場合） ?>
<?php if (is_single_breadcrumbs_position_main_top()) : ?>
  <?php cocoon_template_part('tmp/breadcrumbs'); ?>
<?php endif; ?>


<?php // 本文テンプレート ?>
<?php cocoon_template_part('tmp/content'); ?>


<div class="under-entry-content">

  <?php // 関連記事上ページ送りナビ ?>
  <?php if (is_post_navi_position_over_related()) cocoon_template_part('tmp/pager-post-navi'); ?>

  <?php // 投稿関連記事上ウィジェット ?>
  <?php if ( is_active_sidebar( 'above-single-related-entries' ) ) dynamic_sidebar( 'above-single-related-entries' ); ?>

  <?php cocoon_template_part('tmp/related-entries'); // 関連記事 ?>

  <?php // 関連記事下の広告 ?>
  <?php
    if (is_ad_pos_below_related_posts_visible() && is_all_adsenses_visible()){
      get_template_part_with_ad_format(
        get_ad_pos_below_related_posts_format(),
        'ad-below-related-posts',
        is_ad_pos_below_related_posts_label_visible()
      );
    }
  ?>

  <?php // 投稿関連記事下ウィジェット ?>
  <?php if ( is_active_sidebar( 'below-single-related-entries' ) ) dynamic_sidebar( 'below-single-related-entries' ); ?>

  <?php // ページ送りナビ ?>
  <?php if (is_post_navi_position_under_related()) cocoon_template_part('tmp/pager-post-navi'); ?>

  <?php // コメント上ウィジェット ?>
  <?php if ( is_active_sidebar( 'above-single-comment-aria' ) ) dynamic_sidebar( 'above-single-comment-aria' ); ?>

  <?php // コメント表示 ?>
  <?php if (is_single_comment_visible() && !post_password_required( $post )) comments_template(); ?>

  <?php // コメントフォーム下ウィジェット ?>
  <?php if ( is_active_sidebar( 'below-single-comment-form' ) ) dynamic_sidebar( 'below-single-comment-form' ); ?>

  <?php // コメント下ページ送りナビ ?>
  <?php if (is_post_navi_position_under_comment()) cocoon_template_part('tmp/pager-post-navi'); ?>

</div>


<?php // パンくずリスト（メインボトムに表示する場合） ?>
<?php if (is_single_breadcrumbs_position_main_bottom()) cocoon_template_part('tmp/breadcrumbs'); ?>


<?php // メインカラム追従領域 ?>
<?php cocoon_template_part('tmp/main-scroll'); ?>


<!-- =========================================
     いいねボタン用スタイル
     ========================================= -->
<style>
  /* いいねボタン全体を囲むコンテナ */
  .like-button-container {
    text-align: center;
    margin: 20px 0;
  }

  /* ボタン本体 */
  .like-button {
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background: #3399ff;  /* 薄い青系 */
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  /* ホバー時 */
  .like-button:hover {
    transform: scale(1.1);
    background: #1a75d2;  /* 濃いめの青 */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
  }

  /* クリック時 */
  .like-button:active {
    transform: scale(0.95);
  }

  /* すでに「いいね！」した状態 */
  .like-button.liked {
    animation: pop 0.5s ease;
  }

  /* ポップアニメーション */
  @keyframes pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  /* カウント表示 */
  .like-count {
    margin-left: 8px;
    font-weight: bold;
  }
</style>
    

子テーマのディレクトリ構造

（例）

代用プラグイン

もしコード編集が難しい場合は、「WP ULike」や「WP Favorite Posts」などのプラグインでいいね機能を実装可能です。

まとめ

この方法で記事に「グッドボタン」を設置でき、クリックするとリアルタイムでカウントが増えます。テーマに合わせてCSSを微調整し、固定ページの任意の場所で ショートコード [like_button] を貼り付けても動作します。