こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆様、ブログサイトを運営してますでしょうか。
すこし前までは、埋め込み型のSNSイイねボタンが流行ったりしましたが、
SNS側の仕様変更などの要因も重なり、あんまり見かけなくなりましたね。

そんな貴方に、WordPressでオリジナルのイイねボタンを実装する方法を紹介します！

実装例

♥
…

HTML例

<button id="like-btn">
  <span class="heart">&#9829;</span>
  <span id="like-count">...</span>
</button>

CSS例

#like-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.1s, border-color 0.2s;
  user-select: none;
}
#like-btn:hover { 
  border-color: #e91e63; 
}
#like-btn.liked { 
  border-color: #e91e63; background: #fff0f4; 
}
#like-btn .heart { 
  font-size: 22px; color: #ccc; transition: color 0.2s; 
}
#like-btn.liked .heart { 
  color: #e91e63;
}
#like-btn:active {
  transform: scale(0.93); 
}
#like-count { 
  font-weight: bold; color: #333; 
}

JavaScript例

(function () {
  const API = window.location.origin + '/wp-json/like/v1';
  const PAGE = window.location.pathname;
  const btn = document.getElementById('like-btn');
  const countEl = document.getElementById('like-count');
  fetch(API + '/count?page=' + encodeURIComponent(PAGE) + '&_=' + Date.now(), { cache: 'no-store' })
    .then(function(r) { return r.json(); })
    .then(function(data) { countEl.textContent = data.count; })
    .catch(function() { countEl.textContent = '-'; });
  btn.addEventListener('click', function () {
    btn.disabled = true;
    fetch(API + '/increment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ page: PAGE }),
    })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        countEl.textContent = data.count;
        btn.classList.add('liked');
        btn.disabled = false;
      })
      .catch(function() { btn.disabled = false; });
  });
})();

functions.php例

function like_register_routes() {
    register_rest_route( 'like/v1', '/count', [
        'methods'             => 'GET',
        'callback'            => 'like_get_count',
        'permission_callback' => '__return_true',
        'args'                => [
            'page' => [ 'required' => true, 'sanitize_callback' => 'sanitize_text_field' ],
        ],
    ] );

    register_rest_route( 'like/v1', '/increment', [
        'methods'             => 'POST',
        'callback'            => 'like_increment',
        'permission_callback' => '__return_true',
        'args'                => [
            'page' => [ 'required' => true, 'sanitize_callback' => 'sanitize_text_field' ],
        ],
    ] );
}
add_action( 'rest_api_init', 'like_register_routes' );

function like_option_key( $page ) {
    return 'like_count_' . md5( $page );
}

function like_get_count( WP_REST_Request $request ) {
    $count    = (int) get_option( like_option_key( $request->get_param( 'page' ) ), 0 );
    $response = rest_ensure_response( [ 'count' => $count ] );
    $response->header( 'Cache-Control', 'no-store, no-cache, must-revalidate' );
    $response->header( 'Pragma', 'no-cache' );
    return $response;
}

function like_increment( WP_REST_Request $request ) {
    $key   = like_option_key( $request->get_param( 'page' ) );
    $count = (int) get_option( $key, 0 ) + 1;
    update_option( $key, $count, false );
    return rest_ensure_response( [ 'count' => $count ] );
}

これをfunctions.phpに追記してください。

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！