プラグインなしで「いいねボタン」機能を追加する方法

Cocoonカスタマイズ集
この記事は約16分で読めます。
記事内に広告が含まれています。

記事に記載したコードは、スキンに追加されています。

参考:管理画面の一覧に表示する方法

投稿一覧とコメント一覧に「いいね数」を表示します。
ただし、ソートを行うと「いいね数」が設定されているものだけが対象となり、表示されます。

完成イメージ

投稿一覧
コメント一覧

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加(投稿一覧)

    以下のコードをfunctions.phpに追加します。

    // 管理画面一覧にカラムを追加
    add_filter('manage_posts_columns', function ($columns) {
      $columns['post_like'] = 'いいね数';
    
      return $columns;
    });
    
    
    // 管理画面一覧のカラムを並び替え可能に設定
    add_filter('manage_edit-post_sortable_columns', function ($columns) {
      $columns['post_like'] = 'post_like';
    
      return $columns;
    });
    
    
    // 管理画面一覧のカラムにデータを表示
    add_action('manage_posts_custom_column', function ($column_name, $post_ID) {
      if ($column_name !== 'post_like') {
        return;
      }
    
      $count = intval(get_post_meta($post_ID, 'my_post_like', true));
      echo esc_html($count);
    }, 10, 2);
    
    
    // 投稿クエリの取得条件を変更
    add_action('pre_get_posts', function ($query) {
      if (!is_admin() || !$query->is_main_query()) {
        return;
      }
    
      if ($query->get('orderby') === 'post_like') {
        $query->set('meta_key', 'my_post_like');
        $query->set('orderby', 'meta_value_num');
      }
    });
  • ラベル
    PHPを追加(コメント一覧)

    以下のコードをfunctions.phpに追加します。

    // 管理画面一覧にカラムを追加
    add_filter('manage_edit-comments_columns', function ($columns) {
      $columns['comment_like'] = 'いいね数';
    
      return $columns;
    });
    
    
    // 管理画面一覧のカラムを並び替え可能に設定
    add_filter('manage_edit-comments_sortable_columns', function ($columns) {
      $columns['comment_like'] = 'comment_like';
    
      return $columns;
    });
    
    
    // 管理画面一覧のカラムにデータを表示
    add_action('manage_comments_custom_column', function ($column_name, $comment_ID) {
      if ($column_name !== 'comment_like') {
        return;
      }
    
      $count = intval(get_comment_meta($comment_ID, 'my_comment_like', true));
      echo esc_html($count);
    }, 10, 2);
    
    
    // コメントクエリの取得条件を変更
    add_action('pre_get_comments', function ($query) {
      global $pagenow;
    
      if (!is_admin() || $pagenow !== 'edit-comments.php') {
        return;
      }
    
      if ($query->get('orderby') === 'comment_like') {
        $query->query_vars['meta_key'] = 'my_comment_like';
        $query->query_vars['orderby']  = 'meta_value_num';
      }
    });

参考:いいね数をリセットする方法

管理画面ダッシュボードに「いいねリセット」ウィジェットを追加します。
ボタンをクリックすると、カスタムフィールドを削除し、いいね数を0にリセットします。

カスタムフィールドの「いいね数」をリセットして0にしても、閲覧者のブラウザ(クッキー)には「いいね済み」情報が残ってしまいます。
そのため、ユーザーがページを閲覧した際、「いいね」ボタンがハイライト(押下済み)のまま表示されます。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

/**
 * 設定値を管理
 *
 * @return void
 */
if (!function_exists('render_like_reset')):
function render_like_reset() {
  $buttons = [
    'post'    => '全ての投稿のいいねをリセット',
    'comment' => '全てのコメントのいいねをリセット',
  ];

  foreach ($buttons as $type => $label):
    ?>
    <form method="post" style="margin-bottom: 10px;">
      <?php wp_nonce_field('like_reset_action', 'like_reset_nonce'); ?>
      <input type="hidden" name="like_reset" value="<?= esc_attr($type); ?>">
      <button type="submit" style="width: 100%;" class="button button-secondary" onclick="return confirm('本当に実行しますか?')">
        <?= esc_html($label); ?>
      </button>
    </form>
    <?php
  endforeach;
}
endif;


// ダッシュボードウィジェットを追加
add_action('wp_dashboard_setup', function () {
  wp_add_dashboard_widget(
    'like-reset',
    'いいねリセット',
    'render_like_reset'
  );
});


// 管理画面からの設定データ更新
add_action('admin_init', function () {
  global $wpdb;

  if (!isset($_POST['like_reset'])) {
    return;
  }

  $type = sanitize_key($_POST['like_reset']);

  if (!in_array($type, ['post', 'comment'], true)) {
    return;
  }

  // nonceチェック
  if (!check_admin_referer('like_reset_action', 'like_reset_nonce')) {
    return;
  }

  // 権限チェック
  if (!current_user_can('manage_options')) {
    return;
  }

  // テーブル名とメタキーを作成
  $table    = ($type === 'comment') ? $wpdb->commentmeta : $wpdb->postmeta;
  $meta_key = 'my_' . $type . '_like';

  $wpdb->query($wpdb->prepare("DELETE FROM {$table} WHERE meta_key = %s", $meta_key));

  $message = ($type === 'comment')
    ? '全てのコメントの「いいね」をリセットしました。'
    : '全ての投稿の「いいね」をリセットしました。';

  set_transient('my_admin_notice', [
    'type'    => 'success',
    'message' => $message,
  ], 30);

  wp_safe_redirect(admin_url('index.php'));
  exit;
});


// 通知メッセージを出力
add_action('admin_notices', function () {
  if ($notice = get_transient('my_admin_notice')) {
    echo '<div class="like-reset__admin-notice notice notice-' . esc_attr($notice['type']) . ' is-dismissible"><p>' . esc_html($notice['message']) . '</p></div>';
    delete_transient('my_admin_notice');
  }
});

参考:「新着記事」の投稿をいいね数順で表示する方法

new_listショートコードを使用して、投稿をいいね数順で表示します。
ただし、いいねが1件以上ある記事のみが対象となります。

使用方法

actionオプションを追加します。

[new_list action="like"]

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('widget_entries_args', function ($args) {
  if (isset($args['action']) && $args['action'] == 'like') {
    $args['meta_key'] = 'my_post_like';
    $args['orderby']  = 'meta_value_num date';
    $args['order']    = 'DESC';
  }

  return $args;
});
タイトルとURLをコピーしました