WordPressサイトにpage, post双方を複数作成しました。
JavaScriptを用いて、検索機能を作ろうとしていますが、postの情報は上がってくるものの、pageの情報が上がってきません。
どこに原因があるのかご教示頂けますと幸いです。
functions.php および js コードは以下の通りです。
PHP
1<?php 2 3function pageBanner($args = NULL) { 4 5 if (!$args['title']) { 6 $args['title'] = get_the_title(); 7 } 8 9 if (!$args['subtitle']) { 10 $args['subtitle'] = get_field('page_banner_subtitle'); 11 } 12 13 if (!$args['photo']) { 14 if (get_field('page_banner_background_image')) { 15 $args['photo'] = get_field('page_banner_background_image')['sizes']['pageBanner']; 16 } else { 17 $args['photo'] = get_theme_file_uri('/images/ocean.jpg'); 18 } 19 } 20 21 ?> 22 <div class="page-banner"> 23 <div class="page-banner__bg-image" style="background-image: url(<?php echo $args['photo']; ?>);"></div> 24 <div class="page-banner__content container container--narrow"> 25 <h1 class="page-banner__title"><?php echo $args['title'] ?></h1> 26 <div class="page-banner__intro"> 27 <p><?php echo $args['subtitle']; ?></p> 28 </div> 29 </div> 30 </div> 31<?php } 32 33function university_files() { 34 wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i'); 35 wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 36 wp_enqueue_script('googleMap', '//maps.googleapis.com/maps/api/js?key=AIzaSyDin3iGCdZ7RPomFLyb2yqFERhs55dmfTI', NULL, '1.0', true); 37 38 if (strstr($_SERVER['SERVER_NAME'], 'fictional-university.local')) { 39 wp_enqueue_script('main-university-js', 'http://localhost:10003/bundled.js', NULL, '1.0', true); 40 41 } else { 42 wp_enqueue_script('our-vendors-js', get_theme_file_uri('/bundled-assets/vendors~scripts.24d997ebbc93d4ed3bb9.js'), NULL, '1.0', true); 43 wp_enqueue_script('main-university-js', get_theme_file_uri('/bundled-assets/scripts.6635d5ba1dc408f1e1b4.js'), NULL, '1.0', true); 44 wp_enqueue_style('our-main-styles', get_theme_file_uri('/bundled-assets/styles.6635d5ba1dc408f1e1b4.css')); 45 } 46 47 wp_localize_script('main-university-js', 'universityData', array( 48 'root_url' => get_site_url() 49 )); 50} 51 52add_action('wp_enqueue_scripts', 'university_files'); 53 54function university_features() { 55 add_theme_support('title-tag'); 56 add_theme_support('post-thumbnails'); 57 add_image_size('professorLandscape', 400, 260, true); 58 add_image_size('professorPortrait', 480, 650, true); 59 add_image_size('pageBanner', 1500, 350, true); 60} 61 62add_action('after_setup_theme', 'university_features'); 63 64function university_adjust_queries($query) { 65 if (!is_admin() AND is_post_type_archive('campus') AND is_main_query()) { 66 $query->set('posts_per_page', -1); 67 } 68 69 if (!is_admin() AND is_post_type_archive('program') AND is_main_query()) { 70 $query->set('orderby', 'title'); 71 $query->set('order', 'ASC'); 72 $query->set('posts_per_page', -1); 73 } 74 75 if (!is_admin() AND is_post_type_archive('event') AND is_main_query()) { 76 $today = date('Ymd'); 77 $query->set('meta_key', 'event_date'); 78 $query->set('orderby', 'meta_value_num'); 79 $query->set('order', 'ASC'); 80 $query->set('meta_query', array( 81 array( 82 'key' => 'event_date', 83 'compare' => '>=', 84 'value' => $today, 85 'type' => 'numeric' 86 ) 87 )); 88 } 89} 90 91add_action('pre_get_posts', 'university_adjust_queries'); 92 93function universityMapKey($api) { 94 $api['key'] = 'AIzaSyBh9b1rNCp6kOi5JeMHiRP4klDymBeoEWk'; 95 return $api; 96} 97 98add_filter('acf/fields/google_map/api', 'universityMapKey'); 99
js
1class Search { 2 // 1. describe and create/initiate our object 3 constructor() { 4 this.addSearchHTML(); 5 this.openButton = document.querySelector('.search-trigger'); 6 this.closeButton = document.querySelector('.search-overlay__close'); 7 this.searchOverlay = document.querySelector('.search-overlay'); 8 this.searchField = document.querySelector('#search-term'); 9 this.resultsDiv = document.querySelector('#search-overlay__results'); 10 this.isSpinnerVisible = false; 11 this.previousValue; 12 this.events(); 13 this.isOverlayOpen = false; 14 this.typingTimer; 15 } 16 17 // 2. events 18 events() { 19 this.openButton.addEventListener('click', () => this.openOverlay()); 20 this.closeButton.addEventListener('click', () => this.closeOverlay()); 21 document.body.addEventListener('keydown', this.keyPressDispatcher.bind(this)); 22 document.body.addEventListener('keyup', this.typingLogic.bind(this)); 23 } 24 25 // 3. methods (function, action...) 26 typingLogic() { 27 // only perform search if searchfield value changes 28 if (this.searchField.value != this.previousValue) { 29 clearTimeout(this.typingTimer); 30 31 if (this.searchField.innerHTML === '') { 32 if (!this.isSpinnerVisible) { 33 this.resultsDiv.innerHTML = `<div class="spinner-loader"></div>`; 34 this.isSpinnerVisible = true; 35 } 36 this.typingTimer = setTimeout(this.getResults.bind(this), 750); 37 } else { 38 this.resultsDiv.innerHTML = ''; 39 this.isSpinnerVisible = false; 40 } 41 42 } 43 44 this.previousValue = this.searchField.value; 45 } 46 47 getResults() { 48 let searchTerm = this.searchField.value; 49 let urls = [ 50 `${universityData.root_url}/wp-json/wp/v2/pages?search=${searchTerm}`, 51 `${universityData.root_url}/wp-json/wp/v2/posts?search=${searchTerm}` 52 ]; 53 let combinedResults = []; 54 55 let requests = urls.map(url => fetch(url).then(res => res.json()).catch(err => this.resultsDiv.innerHTML = `<p>エラーです</p>`)); 56 57 Promise.all(requests).then(results => { 58 combinedResults = results.flat(); 59 60 this.resultsDiv.innerHTML = `<h2 class="search-overlay__section-title">インフォメーション</h2> 61 ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>該当する結果が見つかりませんでした</p>'} 62 ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered} (${item.type})</a></li>`).join('')} 63 ${combinedResults.length ? '</ul>' : ''} 64 `; 65 this.isSpinnerVisible = false; 66 }); 67 } 68 69 keyPressDispatcher(e) { 70 // S Key && document.querySelector('input textarea').activeElement 71 if (e.keyCode === 83 && !this.isOverlayOpen) { 72 this.openOverlay(); 73 this.isOverlayOpen = true; 74 } 75 // Escape Key 76 if (e.keyCode === 27 && this.isOverlayOpen) { 77 this.closeOverlay(); 78 this.isOverlayOpen = false; 79 } 80 } 81 82 openOverlay() { 83 this.searchOverlay.classList.add("search-overlay--active"); 84 // adds css property overflow:hidden 85 document.body.classList.add("body-no-scroll"); 86 // clears search field on overlay open 87 this.searchField.innerHTML = ''; 88 // waits for overlay to fade in before focusing cursur in input field. 89 setTimeout(() => this.searchField.focus(), 750); 90 this.isOverlayOpen = true; 91 } 92 93 closeOverlay() { 94 this.searchOverlay.classList.remove("search-overlay--active"); 95 document.body.classList.remove("body-no-scroll"); 96 } 97 98 addSearchHTML() { 99 document.body.innerHTML += ` 100 <div class="search-overlay"> 101 102 <div class="search-overlay__top"> 103 104 <div class="container"> 105 <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i> 106 <input type="text" id="search-term" class="search-term" placeholder="何をお探しですか?"> 107 <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i> 108 </div> 109 110 </div> 111 112 <div class="container"> 113 <div id="search-overlay__results"> 114 </div> 115 </div> 116 117 </div> 118 `; 119 } 120 121} 122 123export default Search;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。