大阪のホームページ制作会社 株式会社TREVO
技術ブログ

jQueryでお気に入りボタンと登録したページ一覧を作成

2021.12.07.

Java Script

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WordPressでお気に入り機能利用する場合Favoritesなどのプラグインを使いますが、jQueryとcookieを使うことでお気に入り機能を設置することができます。

の中にjQuery本体とその下に以下のjquery.cookie.js記述

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

お気に入りボタン

<div class="favorite_button" data-pageid="<?php the_ID(); ?>">
<button class="favorite_button_in"><i class="fas fa-star"></i></button>
</div>

cookie判別のjQueryの設置

$(function(){
    var fav = [];
    var current_page_id = $(".favorite_button").data("pageid");//現在のページのIDを取得
 
    checked_inspect();//現在のページがお気に入り登録済みかチェック
    $(document).on('click','.favorite_button_in',function(){
      var index = fav.indexOf(current_page_id);
      if(index > -1){
        fav.splice(index, 1);
      } else {
        fav.push(current_page_id);
      }
      var serializedArr = JSON.stringify( fav );
      $.cookie("fav_item",serializedArr, { expires: 7, path: '/' });//cookieを保存
      checked_inspect();
    });
 
 
    function checked_inspect(){//現在のページがお気に入り登録されているかどうか
      fav = $.cookie("fav_item") ? JSON.parse( $.cookie("fav_item") ) : [];
      console.log(fav);
      if(fav.indexOf(current_page_id) > -1){
        $("body").addClass("is-choosen");
      } else {
        $("body").removeClass("is-choosen");
      }
    }
    });

ページ一覧のPHPとCSSの設置

<?php
  /*cookieを取得*/
  if(array_key_exists('fav_item', $_COOKIE)){
    $checked_items = $_COOKIE['fav_item'];
    $checked_items = json_decode($checked_items);
  }
?>
 
<div class="p-main" id="list">
 
  <div class="p-list">
 
  <?php if($checked_items):?>
    <div class="p-list__title">
      お気に入り登録しているページはこちら
    </div>
    <div class="p-list_wrapper">
    <?php foreach ($checked_items as $checked_item) : ?>
      <div class="p-list__item">
		  <a href="<?php echo $permalink = get_permalink( $checked_item ); //パーマリンク ?>">
			  <div class="p-list__img">
				  <?php echo get_the_post_thumbnail( $checked_item ); //アイキャッチ画像 ?>
			  </div>
			  <div class="p-list__txt">
				  <p class="p-list__date dfont"><?php echo get_the_date( '',$checked_item ); //投稿日時 ?></p>
				  <p class="p-list__title"><?php echo $title = get_the_title($checked_item); //タイトル ?></p>
			  </div>
		  </a>
      </div>
    <?php endforeach;?>
  <?php else :?>
 
    <div class="p-not_fav_items">
      お気に入りに登録されているページはありません。
    </div>
 
  <?php endif;?>
    </div>
  </div>

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり