かたつむりノート

パソコンとか生活の備忘録

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

time 2019/08/22

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

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

sponsored link

仕様

  • 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' );

 

 

役に立った 11

sponsored link

down

コメントする




このサイトについて

日頃調べて解決したこととか思った事とか徒然なるままに投稿していきます。

カテゴリ



sponsored link