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

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

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

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

PHP

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

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

Ajaxによる絞り込みが全て表示される

hiro_0000
hiro_0000

総合スコア22

WordPress

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

PHP

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

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1回答

0グッド

0クリップ

401閲覧

投稿2022/11/07 06:17

編集2022/11/07 06:44

前提

https://100webdesign.jp/services/wordpress/wp_result/wp_result-22451/
こちらの記事を参考にしております。

実現したいこと

ajaxによる絞り込みを行いたい。

発生している問題・エラーメッセージ

フォーム送信→結果表示までは問題なくできましたが、
その後で絞り込みが上手くいきません。

チェックボックスをチェックすると全ての記事が表示されてしまいます。
また、チェック後にコンソールから確認するとcheckedがついていないようです。

エラーは特に出ておりません。

該当のソースコード

page-jobs.php

PHP

1<?php 2// カスタム投稿タイプ 3$post_type = 'jobs'; 4 5$jobs_skills_selected = array(); 6$jobs_skill = array(); 7$jobs_skill_terms = get_terms('jobs_cat', array('orderby' => 'term_order', 'order' => 'ASC')); 8$jobs_skills = $_GET['check_jobs'] ?? null; 9if ($jobs_skills) { 10 foreach ((array)$jobs_skills as $value) { 11 $jobs_skills_selected[] = htmlspecialchars($value); 12 $jobs_skill[] = htmlspecialchars($value); 13 } 14} else { 15 foreach ($jobs_skill_terms as $jobs_skill_term) { 16 $jobs_skill[] = $jobs_skill_term->slug; 17 } 18} 19?> 20<form method="get" action="<?php echo home_url('/'); ?>works/"> 21 <div> 22 <div> 23 <?php foreach ($jobs_skill_terms as $jobs_skill_term) { 24 echo '<label><input type="checkbox" name="check_jobs[]" value="' . $jobs_skill_term->slug . '" '; 25 if ($jobs_skills_selected) { //選択した項目はページ遷移後 checked 26 foreach ($jobs_skills_selected as $value) { 27 if ($value == $jobs_skill_term->slug) { 28 echo 'checked'; 29 } 30 } 31 } 32 echo '> ' . $jobs_skill_term->name . '</label>'; 33 } ?> 34 </div> 35 </div> 36</form> 37 38<div class="search-results-container"> 39 <div id="search-result"></div> 40</div>

ajax-search.php

PHP

1<?php 2$post_type = 'jobs'; 3 4$jobs_skills_selected = array(); 5$jobs_skill = array(); 6$jobs_skill_terms = get_terms('jobs_cat', array('orderby' => 'term_order', 'order' => 'ASC')); 7$jobs_skills = $_GET['check_jobs'] ?? null; 8if ($jobs_skills) { 9 foreach ((array)$jobs_skills as $value) { 10 $jobs_skills_selected[] = htmlspecialchars($value); 11 $jobs_skill[] = htmlspecialchars($value); 12 } 13} else { 14 foreach ($jobs_skill_terms as $jobs_skill_term) { 15 $jobs_skill[] = $jobs_skill_term->slug; 16 } 17} 18 19$the_query = new WP_Query(array( 20 'post_status' => 'publish', 21 'post_type' => $post_type, 22 'tax_query' => array( 23 'relation' => 'AND', 24 array( 25 'taxonomy' => 'jobs_cat', 26 'field' => 'slug', 27 'terms' => $jobs_skill, 28 ) 29 ), 30 'posts_per_page' => -1, 31 'orderby' => 'date', 32 'order' => 'DESC', 33)); 34?> 35<?php if ($the_query->have_posts()) : ?> 36 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 37 38 <article class="jobs_list"> 39 <a href="<?php the_permalink(); ?>"> 40 <div class="post-thumbnail"> 41 <img src="<?php if (post_custom('jobs_main_image')) : ?><?php the_field('jobs_main_image'); ?><?php else : ?><?php echo get_template_directory_uri(); ?>/library/images/noimage.png<?php endif; ?>" alt=""> 42 </div> 43 <h2 class="post-title"><?php the_title(); ?></h2> 44 <p class="post-date"> 45 <?php 46 if ($terms = get_the_terms($post->ID, 'jobs_cat')) { 47 foreach ($terms as $term) { 48 $term_slug = $term->slug; 49 echo ('<span class="post-category '); 50 echo esc_html($term_slug); 51 echo ('">'); 52 echo esc_html($term->name); 53 echo ('</span>'); 54 } 55 } 56 ?> 57 </p> 58 </a> 59 </article> 60 <?php endwhile; ?> 61<?php else : ?> 62 <p>まだ投稿がありません。</p> 63<?php endif; ?> 64<?php wp_reset_postdata(); ?>

functions.php

PHP

1function blank_scripts_and_styles(){ 2 if (is_page('jobs')) { 3 //jobs-ajax 4 wp_enqueue_script('jobs-ajax', get_template_directory_uri() . '/library/js/jobs-ajax.js', array(), '', true); 5 } 6} 7add_action('wp_enqueue_scripts', 'blank_scripts_and_styles'); 8 9/* フォームの内容を取得してAjaxに送信するプログラムが記述されたJavascriptをheadタグにキュー */ 10add_action('wp_enqueue_scripts', function () { 11 $handle = 'jobs-ajax'; 12 $file = get_template_directory_uri() . '/library/js/' . $handle . '.js'; 13 wp_register_script($handle, $file, array('jquery'), '3.6.0', true); 14 15 $localize = [ 16 'ajax_url' => admin_url('admin-ajax.php'), 17 'action' => 'view_search_results', 18 'nonce' => wp_create_nonce('view_search_results') 19 ]; 20 wp_localize_script($handle, 'localize', $localize); 21 wp_enqueue_script($handle); 22}); 23 24 25/* Ajaxから取得したnonceを認証し、認証通過したらテンプレートを出力する */ 26function view_search_results() 27{ 28 $nonce = $_REQUEST['nonce']; 29 if (wp_verify_nonce($nonce, 'view_search_results')) { 30 get_template_part('template-parts/ajax-search'); 31 } 32 die(); 33} 34 35add_action('wp_ajax_view_search_results', 'view_search_results'); //第一引数は wp_ajax_{ファンクション名} にする 36add_action('wp_ajax_nopriv_view_search_results', 'view_search_results'); //第一引数は wp_ajax_nopriv_{ファンクション名} にする

JS

1$("input[name='check_jobs[]']").change(function () { 2 3 let check_jobs = []; 4 $("[name='check_jobs[]']:checked").each(function () { 5 check_jobs.push(this.value); 6 }); 7 $.ajax({ 8 type: 'GET', 9 url: localize.ajax_url, 10 data: { 11 'action': 'view_search_results', 12 'jobs_skill': check_jobs, 13 'nonce': localize.nonce 14 }, 15 success: function (response) { 16 $('#search-result').html(response); 17 } 18 }) 19 20 return false; 21});

試したこと

・パーマリンクの更新
・:checkedが付与されているか確認
・参考サイトのhtmlを使用してみましたが同じ結果に
※追記です
var_dump($jobs_skill);
を試したら全て取得されていました。

ajax自体は動いているようなのですが絞り込みが上手くいっていないです。
お忙しいところ恐縮ですがどうぞ何かしらのヒントを頂けましたら幸いです。

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

余分な余白があったようです。
コード整形をかけたら無事表示されました。

投稿2022/11/07 07:14

hiro_0000

総合スコア22

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.83%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

PHP

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

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。