Q&A
（質問文は編集できます）参考にしたサイトに「$grid.shuffle」のような記述が無いので、URLを間違えているか他のものと組み合わそうとしていませんか？
前提・実現したいこと
実装内容
カスタム投稿のスラッグを絞り込み選択
実装イメージ画像
実装にあたっての詳細
- Web実績の下のAll,Web,Logo等を押すと赤の画像部分が選択される
※別ページにリンクではなく、あくまで絞り込み選択
- カスタム投稿には、複数の親タームが存在するが表示したいものは１つの親要素の子タームです
現在のカスタム投稿の構成
- カスタム投稿名 works
- タクソノミー名 works_tag
※赤枠の箇所のみ表示させたい
使用しているプラグイン
『Smart Custom Fields』
実績を記事登録する際に利用しています。
その為、クライアント名・プロジェクト名・スラッグ名をプラグインでclass名をつけて表示指示を出しております。
発生している問題・エラーメッセージ
web実績のみを表示させることができたが、
ターム指定が間違えているのかAll以外のボタンを押しても何も選ばれていない状態
header.php
<!doctype html> <html> <head> <!-- title,ogタグ等は省略 --> <!-- css--> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css" type="text/css"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(window).load(function(){ var shuffle = function(){ var $grid = $('.works_container'); $grid.shuffle({ itemSelector: '.item', group: 'all', speed: 300, easing: 'ease-in-out' }); $('.works_sort_nav li').on('click', function() { var $this = $(this), group = $this.data('group'); $('.works_sort_nav li.sort_active').removeClass('sort_active'); $this.addClass('sort_active'); if(group != 'all'){ $grid.shuffle('shuffle', function($el, shuffle) { return group.indexOf($el.data('groups')) > -1 }); }else{ $grid.shuffle( 'shuffle', 'all' ); } }); } shuffle(); }); </script> </head> <!-- headerタグ省略 -->
page-web.php
<section> <div id="works"> <div class="inner"> <h1>Web実績</h1> <ul class="works_sort_nav clearfix"> <li data-group="all" class="sort_active">ALL</li> <li data-group="web">Web</li> <li data-group="logo">Logo</li> <li data-group="movie">Movie</li> <li data-group="illustration">illustration</li> </ul> <ul class="works_container fade"> <?php $args = array( 'numberposts' => 6, //表示する記事の数 'post_type' => 'works', //投稿タイプ名 'tax_query' => array( array( 'taxonomy' => 'works_tag', 'field' => 'slug', 'terms' => array( 'web','logo','illustration','movie' ) ) ) ); $customPosts = get_posts($args); if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); $cf_client = SCF::get('client'); $cf_project = SCF::get('project_name'); $cf_category = SCF::get('category'); //アイキャッチ画像のurlを取得する $thumbnail_id = get_post_thumbnail_id(); $eye_img = wp_get_attachment_image_src($thumbnail_id, 'full'); //タクソノミーを取得 $tarms = get_the_terms( $post -> ID ,'works_tag' ); foreach ($tarms as $tarm) { $tarmname = $tarm -> slug; } ?> <li class="item" data-groups='["<?php echo $tarmname ?>"]'> <div class="item_inner"> <div class="item_inner2" style="background:url(<?php echo $eye_img[0]; ?>) center center/auto 100% no-repeat;"> <a href="<?php the_permalink(); ?>" class="img-ef"> <div class="overlay"> <div class="top_works_info"> <h2 class="top_works_title"><?php echo $cf_client ?></h2> <p class="top_works_subject"><?php echo $cf_project ?></p> <p class="top_works_category"><?php echo $cf_category ?></p> </div> </div> </a> </div> </div> </li> <?php endforeach; ?> <?php endif; ?> <?php wp_reset_postdata(); //クエリのリセット ?> </ul> </div> </div> </section>
common.css
<style> #contents.web div#works{ padding: 0 0 250px; } .inner { width: 950px; margin: auto; padding: 62px 0 0; } #contents.web #works h1 { margin-bottom: 114px; font-size: 37.5px; font-weight: 600; letter-spacing: 0.3px; line-height: 0.9em; } ul.works_sort_nav { padding: 6px 0 0 0; letter-spacing: 0.4px; margin-bottom: 124px; } ul.works_sort_nav li.sort_active { color: #231815; border-bottom: 1px solid #231815 !important; } ul.works_sort_nav li { float: left; margin-right: 97px; padding: 0 0 20px 0; border-bottom: 1px solid transparent; transition: ease-in 0.2s; cursor: pointer; font-weight: 500; color: #89898A; } ul.works_sort_nav li:last-child { margin-right: 0; } .clearfix:after { content: ""; clear: both; display: block; } .works_container { min-height: 776px; margin: 0 0 93px 0; position: relative; } .fade_mv { opacity: 1.0 !important; transform: translate(0,0) !important; -webkit-transform: translate(0,0) !important; } div:not(.top) .works_container .item { width: 33.333%; padding: 0.15%; box-sizing: border-box; position: relative; overflow: hidden; } .works_container .item .item_inner2, .works_archive .item .item_inner2{ width: 100%; height: 100%; overflow: hidden; position: relative; } .works_container .item a{ display: block; width: 100%; height: 100%; position: relative; } .works_container .item .overlay, .works_archive .item .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.5); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .overlay .top_works_info { width: 90%; height: 145px; color: #fff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; text-align: center; color: #fff; } .overlay .top_works_info p { line-height: 1.5em; margin: 25px 0 0 0; } </style>
補足情報（FW/ツールのバージョンなど）
WordPress 5.4.1
Windows 10
Wordpress理解不足で説明が不足している場合があるかと思います。
その際は追加記述致しますので、遠慮なくご質問お願い致します。
お手数ですが、ご回答宜しくお願い致します。
ご指摘ありがとうございます。
参考サイトは、実装したい動きを見て頂きたく記載しており記述には全く関係ありません。
ややこしくしてしまい申し訳ありません。削除致しました。
では何を参考にされたのでしょう。参考にされたサイトのURLを提示することをお勧めします。
提示されたコード上には定義されていない、特定のjQueryプラグインを前提としたコードが書かれていますが、プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
度々ご指摘頂きありがとうございます。
参考サイトに関してですが、過去実装したコーディング・複数のサイトを見て自作したものになる為特定のサイトがございません。参考URLがなく申し訳ないのですが、ご教示頂ければ幸いです。
既に指摘しましたが、特定のjQueryプラグインを前提としたコードなのでそのプラグインが何かわからない状態での回答は私にはできません。どなたか当該プラグインに心当たりある回答者がいれば、回答がつくかもしれません。がんばってください。
何度もご指摘頂きありがとうございます。
再度コーディングに不備はないか模索したところ、ご指摘頂きましたらプラグインが抜けていることに気づきました。プラグインは『Smart Custom Fields』でした。大変お手数ですが、お時間がありましたらご協力頂ければ幸いです。
WebブラウザのデベロッパーツールでJavaScript のエラーは出ていませんか？
エラーメッセージがある場合は、どのようなメッセージか質問に追記していただけないでしょうか。
ご返信遅くなり申し訳ありません。
エラーメッセージ確認したところ、Cookieについてのエラーは入っていたものの
Java Script等のエラーは表示されておりませんでした。
あなたの回答
tips
プレビュー
