質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1261閲覧

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

NNC

総合スコア22

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/03/12 05:33

編集2023/03/12 14:37

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

arcxor

2023/03/12 10:53

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

2023/03/12 11:21

コメントありがとうございます。 ご質問への認識に相違ありましたら申し訳御座いません。 ご回答用の追記として、記事一覧ページなどで使用しているコードを追記致しました。 ご覧の通り【お気に入り登録ボタン】の記述を設置しているのですが、理想の挙動にならず困っております・・。
guest

回答2

0

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

HTML

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

投稿2023/03/13 08:24

yambejp

総合スコア115053

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NNC

2023/03/13 13:01

ご返信ありがとうございます。 検証に時間かかってしまい、ご返信遅くなり申し訳御座いません。 js-cookieに切り替えた所、今まで動いていた固定ページやアーカイブ、詳細のページでも動かなくなってしまいました。 js-cookieを読み込むよう【import Cookies from 'js-cookie';】の記述や$.cookieを【Cookies.get】などに変更してみましたが、変わらずでした・・。
guest

0

ベストアンサー

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

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

js

1(function() { 2 'use strict'; 3 4 function main() { 5 // お気に入り登録ボタンの状態を更新する 6 $('.favorite_button_in').each(function() { 7 updateFavStatus(this); 8 }); 9 10 // お気に入り登録ボタンがクリックされたら状態を変更する 11 $(document).on('click', '.favorite_button_in', function(evt) { 12 updateFavStatus(this, true); 13 }); 14 } 15 16 function updateFavStatus(button, doToggle = false) { 17 const $button = $(button); 18 const $container = $button.parent(); 19 const the_id = $container.data('pageid'); 20 const fav = getFav(); 21 const idx = fav.indexOf(the_id); 22 let unregistered = idx === -1; 23 24 // 状態を変更する場合 25 if (doToggle) { 26 unregistered ? fav.push(the_id) : fav.splice(idx, 1); 27 setFav(fav); 28 unregistered = !unregistered; 29 } 30 31 // ボタンの表示を切り替える 32 if (unregistered) { 33 $button.text('お気に入り登録'); 34 } 35 else { 36 $button.text('お気に入り登録を外す'); 37 } 38 } 39 40 function getFav() { 41 const fav = $.cookie('fav_item'); 42 if (fav == null) return []; 43 return JSON.parse(fav); 44 } 45 46 function setFav(fav) { 47 fav = Array.from(new Set(fav)).sort((a, b) => a - b); 48 $.cookie('fav_item', JSON.stringify(fav), {expires: 3650, path: '/'}); 49 return fav; 50 } 51 52 $(main); 53}());

投稿2023/03/12 12:48

arcxor

総合スコア2859

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NNC

2023/03/12 13:56

ご回答ありがとうございます。 頂いた記述を反映させた所、下記のような挙動でした。 ・トップページに記載している一覧→反映せず ・固定ページに設置した同じ記述の一覧→反映しました ・検索結果→反映しました ・アーカイブ(記事一覧ページ)→反映しました 同header.phpで同じ記述を読み込んでいるのですが、トップページに設置している一覧ですと、なぜか反映がされませんでした。 トップに設置している一覧ですとpageidの辺りが拾えないのかな・・とも思いましたが、もしお分かりでしたらご教授頂ければ幸いです・・。 重ね重ねで申し訳御座いません。
arcxor

2023/03/12 14:08

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

2023/03/12 14:44

ご返信ありがとうございます。 ご回答用の追記として、記事一覧ページなどで使用しているコードに【ご回答用の追記※トップページも同一記述】と追記致しました。 固定ページなどで反映された内容と全く同じなのですが、何故かトップだけ反映されない状態です。 ChromeのF12にて、確認をしてみましたが固定ページや検索結果などでは特にエラーは出ていないのですが、トップページのみ【const fav = $.cookie('fav_item');】【const fav = getFav();】【updateFavStatus(this);】【$('.favorite_button_in').each(function()】などでエラーを吐いているようでした・・。
arcxor

2023/03/13 00:51

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

2023/03/13 03:04

ご返信ありがとうございます。 Uncaught TypeError: $.cookie is not a function と出ているので、トップページだけ読み込めていないのかもしれません・・。 別途で調べJqueryを先に読み込ませないと駄目とはあったのですが、それは既に行っており、読み込ませる順序を変更しながら試してみたのですが、変わらずトップページのみ反映しない状態です。
NNC

2023/03/20 01:16

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問