WordPressに「役に立ったボタン」を設置する【プラグイン不要】

人様の記事を読んでいて、「すごい！助かった！ありがとう！」と思っても、わざわざコメントに残すのもなぁ…でも何か感謝を表したいなぁと思うことがよくあったので、作りました。

仕様

• function.phpとsingle.phpに追記するだけ
• ボタンカラー設定可
• 一回の訪問で1回だけポチれる
• ポチったあとの取り消し不可
• ipなんかは見てないので再訪問したらまたポチれる

という簡単仕様です。

設置方法

ダッシュボード ＞ 外観 ＞ テーマエディター から編集できます。

single.php
ボタンを設置したい箇所（get_the_IDを使っているので記事ループの中）に挿入してください。

<!-- 役に立ったボタン -->
<?php
// --- ボタン設定 ---
// ボタンの背景色
$btn_bg = "hotpink";
// ボタンの文字色
$btn_color = "white";
// ボタンhover時の背景色
$btn_hover_bg = "pink";
// ボタンクリック後の背景色
$btn_clicked_bg = "lavender";
// ボタンクリッ後の文字色
$btn_clicked_color = "#1E1E1E";

?>

<style>
    .yakunitatta {
      background-color: <?= $btn_bg ?>;
      color:<?= $btn_color ?>;
      font-weight: bold;
      font-size: 1.3em;
      text-align: center;
      border-radius: 5px;
      box-shadow: 0 2px 5px #999;
      width: 100%;
      padding: 10px 1em;
      float: left;
      cursor: pointer;
    }
</style>
<?php
  $yakunitatta_count = get_post_meta(get_the_ID(), 'yakunitatta');
  $yakunitatta_count = empty($yakunitatta_count) ? 0 : $yakunitatta_count[0] ;
?>
<div class="yakunitatta">
  <span>役に立った</span> <span id="yakunitatta_heart">♥</span> <span id="yakunitatta_count"><?php echo $yakunitatta_count ?></span>
</div>

<script>
  var yakunitatta_clicked = false;
  
  $( '.yakunitatta' ).on({
    'mouseenter': function () { if (yakunitatta_clicked == false) $(this).css("background-color", "<?= $btn_hover_bg ?>") },
    'mouseleave': function () { if (yakunitatta_clicked == false) $(this).css("background-color", "<?= $btn_bg ?>") },
    'click': function(){
      if (yakunitatta_clicked == false){
        $.ajax({
          type: 'POST',
          url: ajaxurl,
          data: {
            'action' : 'yakunitatta_count_add',
            'id' : <?php the_ID();?>
          }
        });
        $("#yakunitatta_count").text(<?php echo $yakunitatta_count ?> + 1);
        $(this).css({
          "color":"<?= $btn_clicked_color ?>",
          "box-shadow":"none" , 
          "background-color": "<?= $btn_clicked_bg ?>",
          "cursor": "auto"
        });
        $("#yakunitatta_heart").css("color","red");
        yakunitatta_clicked = true;
      }
    }
  });
</script>

function.php
最後の「?>」の前に挿入してください。

/***** 役に立ったボタン *****/
/** wordpressでajaxを使うための変数を設定 **/
function add_ajaxurl() {
  ?>
  <script>
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>';
  </script>
  <?php
}
add_action( 'wp_head', 'add_ajaxurl', 1 );

/** ボタンが押されたときの処理 **/
function yakunitatta_count_add(){
  $id = $_POST['id'];
  $key = 'yakunitatta';
  $count = get_post_meta( $id, $key);
  if (empty($count)){
    add_post_meta($id,$key,1);
  }else{
    $count[0]++;
    update_post_meta($id,$key,$count[0]);
  }
  die();
}
add_action( 'wp_ajax_yakunitatta_count_add', 'yakunitatta_count_add' );
add_action( 'wp_ajax_nopriv_yakunitatta_count_add', 'yakunitatta_count_add' );