Wordpress内でjquery.cookie.jsを用いたお気に入り登録機能を記事詳細ページ以外でも使用できるようにしたい。

Question

WordPress内にカスタム投稿を設置し、記事一覧ページでもお気に入りボタンが動くようにしたいと思っています。

実現したいこと

このページを参考にお気に入りボタンを設置し、記事の詳細ページではお気に入りに登録させる事はできました。

只、記事一覧ページや検索結果ページではお気に入り登録ボタンを押しても登録がされない状態であり、詳細ページだけではなく、一覧ページなどでも任意の記事をお気に入り登録できるようにしたいです。

該当のソースコード

【header.phpのbody直後】
<script>
$(function(){
	var fav = [];
	var current_page_id = $(".favorite_button").data("pageid");
	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: '/' });
		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");
		}
	}
});
</script>

【お気に入り一覧】
	<?php
	/*cookieを取得*/
	if(array_key_exists('fav_item', $_COOKIE)){
		$checked_items = $_COOKIE['fav_item'];
		$checked_items = json_decode($checked_items);
	}
	?>
	<?php if($checked_items):?>
		<?php foreach ($checked_items as $checked_item) : ?>
		  <a href="<?php echo $permalink = get_permalink( $checked_item ); ?>">
				  <p><?php echo $title = get_the_title($checked_item); ?></p>
		  </a>
	<?php endforeach;?>
	<?php else :?>
	<p>お気に入りはありません。</p>
	<?php endif;?>

【お気に入り登録ボタン】
<div class="favorite_button" data-pageid="<?php the_ID(); ?>">
	<button class="favorite_button_in" onclick="window.location.reload();"><i class="fas fa-star"></i><p>お気に入り登録</p></button>
</div>
　
※サイドバーにお気に入り一覧を設置しているので、ボタンにリロードを取り入れています。

　

考えられる原因

【header.phpのbody直後】に記載されている記述で、あくまで現在のページのCookie保存をしているので、これを現在のページだけではなく、【お気に入り登録ボタン】に記述している「data-pageid="<?php the_ID(); ?>」で出来ればいけるような気もしておりますが、調べても肝心の思うような参考記事も見つからない状況で難儀してます。

お手数ですが、お知恵をお借りできれば幸いです。
よろしくお願いいたします。

【ご回答用の追記※トップページも同一記述】

【一覧】
<ul class="food_list">
	<?php
		$paged = (int) get_query_var('paged');
		$args = array(
			'posts_per_page' => 5,
			'paged' => $paged,
			'orderby' => 'post_date',
			'order' => 'DESC',
			'post_type' => 'post',
			'post_status' => 'publish'
		);
		$the_query = new WP_Query($args);
		if ( $the_query->have_posts() ) :
			while ( $the_query->have_posts() ) : $the_query->the_post();
				get_template_part( 'foodlist', get_post_format() );
			endwhile;
		endif;
		wp_reset_postdata();
	?>
</ul>
　
【foodlistの中身】
<li class="foodbox">
	<div class="food_table">
		<div class="food_th">
			<h3><?php the_title(); ?></h3>
		</div>
		<div class="food_td">
			<div class="favorite_button" data-pageid="<?php the_ID(); ?>">
				<button class="favorite_button_in" onclick="window.location.reload();"><p>お気に入り登録</p></button>
			</div>
		</div>
	</div>
</li>

Comments

[arcxor]

記事一覧ページや検索結果ページには、どのようにお気に入り登録ボタンを設置したのですか？

[NNC]

コメントありがとうございます。
ご質問への認識に相違ありましたら申し訳御座いません。
ご回答用の追記として、記事一覧ページなどで使用しているコードを追記致しました。

ご覧の通り【お気に入り登録ボタン】の記述を設置しているのですが、理想の挙動にならず困っております・・。

Answer 1

jquery.cookiel.jsは古くていまのブラウザに合わない部分もある（sameSite非対応）のでできれば
js-cookieに切り替えてください

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

Comments

[NNC]

ご返信ありがとうございます。
検証に時間かかってしまい、ご返信遅くなり申し訳御座いません。

js-cookieに切り替えた所、今まで動いていた固定ページやアーカイブ、詳細のページでも動かなくなってしまいました。

js-cookieを読み込むよう【import Cookies from 'js-cookie';】の記述や$.cookieを【Cookies.get】などに変更してみましたが、変わらずでした・・。

Answer 2

まず、登録ボタンの onclick="window.location.reload();" は削除してください。

そして、header.php で読み込んでいるスクリプトを以下のものに差し替えてください。

(function() {
  'use strict';

  function main() {
    // お気に入り登録ボタンの状態を更新する
    $('.favorite_button_in').each(function() {
      updateFavStatus(this);
    });

    // お気に入り登録ボタンがクリックされたら状態を変更する
    $(document).on('click', '.favorite_button_in', function(evt) {
      updateFavStatus(this, true);
    });
  }

  function updateFavStatus(button, doToggle = false) {
    const $button = $(button);
    const $container = $button.parent();
    const the_id = $container.data('pageid');
    const fav = getFav();
    const idx = fav.indexOf(the_id);
    let unregistered = idx === -1;

    // 状態を変更する場合
    if (doToggle) {
      unregistered ? fav.push(the_id) : fav.splice(idx, 1);
      setFav(fav);
      unregistered = !unregistered;
    }

    // ボタンの表示を切り替える
    if (unregistered) {
      $button.text('お気に入り登録');
    }
    else {
      $button.text('お気に入り登録を外す');
    }
  }

  function getFav() {
    const fav = $.cookie('fav_item');
    if (fav == null) return [];
    return JSON.parse(fav);
  }

  function setFav(fav) {
    fav = Array.from(new Set(fav)).sort((a, b) => a - b);
    $.cookie('fav_item', JSON.stringify(fav), {expires: 3650, path: '/'});
    return fav;
  }

  $(main);
}());

Comments

[NNC]

ご回答ありがとうございます。
頂いた記述を反映させた所、下記のような挙動でした。

・トップページに記載している一覧→反映せず
・固定ページに設置した同じ記述の一覧→反映しました
・検索結果→反映しました
・アーカイブ（記事一覧ページ）→反映しました

同header.phpで同じ記述を読み込んでいるのですが、トップページに設置している一覧ですと、なぜか反映がされませんでした。

トップに設置している一覧ですとpageidの辺りが拾えないのかな・・とも思いましたが、もしお分かりでしたらご教授頂ければ幸いです・・。

重ね重ねで申し訳御座いません。

[arcxor]

トップページに記載しているコードはどのようになっているのでしょうか。

[NNC]

ご返信ありがとうございます。

ご回答用の追記として、記事一覧ページなどで使用しているコードに【ご回答用の追記※トップページも同一記述】と追記致しました。

固定ページなどで反映された内容と全く同じなのですが、何故かトップだけ反映されない状態です。

ChromeのF12にて、確認をしてみましたが固定ページや検索結果などでは特にエラーは出ていないのですが、トップページのみ【const fav = $.cookie('fav_item');】【const fav = getFav();】【updateFavStatus(this);】【$('.favorite_button_in').each(function()】などでエラーを吐いているようでした・・。

[arcxor]

何というエラーが発生しているのでしょうか。

[NNC]

ご返信ありがとうございます。
Uncaught TypeError: $.cookie is not a function と出ているので、トップページだけ読み込めていないのかもしれません・・。

別途で調べJqueryを先に読み込ませないと駄目とはあったのですが、それは既に行っており、読み込ませる順序を変更しながら試してみたのですが、変わらずトップページのみ反映しない状態です。

[NNC]

その後、色々調べてトップページは他のscript（swiper）とぶつかっていたようです。
swiperを無効にした所、反映しました。
この度はご回答頂きありがとうございました。