WordPressでのsearch.phpテンプレートで表示が崩れてしまう

Question

WordPressでオリジナルテーマの作成中です。

WordPressのウィジェット機能で自作の検索フォームsearchform.phpを作成し、
検索結果をsearch.phpに表示させようとしています。

検索結果は、問題なく表示されるのですが、検索パターンによって表示が崩れてしまうことがあり
修正しようと試みましたがわからないことが多くなってきました。

search.phpはhome.phpをアレンジして編集しています。
適用させたいclass名もhome.phpのものを使いたいです。
（home.phpでの表示は崩れていません）

今の所、home.phpは投稿一覧を表示させるようにしています。

---

search.php

<div class="myposthead">
  <h1>検索結果</h1>
  <p>SEARCH</p>
  <?php if (have_posts()): ?>
</div>

<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '検索キーワードが未入力です'; 
} else {
echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件';
}
?>

<div class="mypostlist">

  <article <?php post_class(''); ?>>

    <?php while(have_posts()): the_post(); ?>
      <a href="<?php the_permalink(); ?>">

      <?php if( has_post_thumbnail() ): ?>
        <figure>
          <?php the_post_thumbnail(); ?>
        </figure>
      <?php endif; ?>

    <h2><?php echo get_the_title(); ?></h2>

      </a>
    <?php endwhile; ?>

    <?php else: ?>
      <p>検索されたキーワードにマッチする記事はありませんでした</p>
							
  </article>
<?php endif; ?>
</div>

---

home.php

<div class="myposthead">		
  <h1>最新情報</h1>
  <p>RESENT</p>
</div>

<div class="mypostlist">
<?php 
      if ( have_posts() ) :
          while ( have_posts() ) : the_post();
?>
				
  <article <?php post_class(''); ?>>
    <a href="<?php the_permalink(); ?>">
    <?php if( has_post_thumbnail() ): ?>

    <figure>
      <?php the_post_thumbnail(); ?>
    </figure>

<?php endif; ?>

<h2><?php the_title(); ?></h2>
    </a>
					
  </article>
<?php 
  endwhile;
  endif;
?>
</div>

---

style.css

.mypostlist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.mypostlist article {
	width: 48%;
	margin-bottom: 20px;
}


.mypostlist figure {
	margin: 0;
}

.mypostlist h2,
.mypostlist h3{
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0.8em;
}

.mypostlist img {
	height: 180px;
	object-fit: cover;
}

具体的な事象は以下の通りです。

検索したワードに候補が見つかった時

「“●●”の検索結果：●件」の下に該当の記事とアイキャッチ画像とタイトルが表示されますが、
<div class="mypostlist">で指定したcssの一部が適用されません。
（.mypostlistの内容全てと.mypostlist articleのmargin-bottom: 20px;が適用されません）

検索したワードに候補が見つからなかった時

検索結果として、「検索されたキーワードにマッチする記事はありませんでした」と表示されますが、
sidebar.phpで表示させているウィジェットエリア内で、WordPressの管理画面で登録したプロフィール情報（本文のみ）が消えてしまいます。

ブランクで検索ボタンを押した時

「検索キーワード未入力」と表示されますが、その下に全ての投稿一覧が表示されます。
投稿だけではなく、現在使う予定のない固定ページのリンクも混じって表示されてしまいます。
検索ワードが未入力のまま検索ボタン押すと、search.phpがテンプレートとして使われずindex.phpを見に行くということらしいので、index.phpの内容も確認してみましたが、原因がわかりませんでした。

---

お手数をおかけいたしますが、上記の事象から考えられる原因、可能性等
わかる方どうかご教示いただけますでしょうか。

Comments

[marlboro_tata]

検索ワードが未入力のまま検索ボタン押すと、WPのデフォルトの動きとしては、WPの投稿や固定ページ全ての記事が返ってくる、です。なので、投稿の一覧が表示されているように見えたり、固定ページへのリンクが混じっているのは仕様です、ということになるかと。。。

[piyo-coder335]

ご教示ありがとうございます。
固定ページのリンクが表示されるのはwpのデフォルトだったんですね。。
調べてみたところ、`functions.php`に表示させたくない投稿IDを指定すれば除外できるらしいので
試しに以下のコードを入れてみたところ直りました！

```
function fb_search_filter($query) {
if ( !$query -> is_admin && $query -> is_search) {
$query -> set('post__not_in', array(394, 401,410) );
}
return $query;
}
add_filter( 'pre_get_posts', 'fb_search_filter' );
```

[piyo-coder335]

ご教示ありがとうございます。
固定ページのリンクが表示されるのはwpのデフォルトだったんですね。。
調べてみたところ、`functions.php`に表示させたくない投稿IDを指定すれば除外できるらしいので
試しに以下のコードを入れてみたところ直りました！

function fb_search_filter($query) {
if ( !$query -> is_admin && $query -> is_search) {
$query -> set('post__not_in', array(394, 401,410) );
}
return $query;
}
add_filter( 'pre_get_posts', 'fb_search_filter' );

Answer 1

//search.php
<div class="myposthead">
  <h1>検索結果</h1>
  <p>SEARCH</p>
</div>

<div class="mypostlist">
  <?php if (have_posts()): ?>

<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '検索キーワードが未入力です'; 
} else {
echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件';
}
?>


    <?php while(have_posts()): the_post(); ?>
  <article <?php post_class(''); ?>>
      <a href="<?php the_permalink(); ?>">

      <?php if( has_post_thumbnail() ): ?>
        <figure>
          <?php the_post_thumbnail(); ?>
        </figure>
      <?php endif; ?>

    <h2><?php echo get_the_title(); ?></h2>

      </a>
  </article>
    <?php endwhile; ?>

    <?php else: ?>
    <div class="no-result">
      <p>検索されたキーワードにマッチする記事はありませんでした</p>
    </div>
<?php endif; ?>
</div>

直したのは、<?php if (have_posts()): ?>の開始位置、
<article <?php post_class(''); ?>>と閉じタグの</article> をwhileの内部へ。

おそらくこれで、レイアウト関係の崩れはなおると思います。

ブランクで検索ボタンを押した時

この時に思ったような表示結果にならないのは、またちょっと問題が別かな、と。

検索ワードが未入力のまま検索ボタン押すと、search.phpがテンプレートとして使われずindex.phpを見に行く

ということは、ないと思います・・・。クエリに/?s= が含まれているなら、何か特別なことをしない限りはsearch.php を参照すると思います。
実際にどのテンプレートを使っているかは、デバッグ系のプラグインで、表示しているページがどんなテンプレートファイルをつかっているかがわかるもの(Show Current Templateだったかな)があるので、入れて確かめてみると良いと思います。

Comments

[piyo-coder335]

回答ありがとうございます。
記載いただいたコードを元に修正したところレイアウトの崩れは直りました。
候補が見つからない時に、プロフィール情報が表示されない件は引き続き模索してみます。
（表示されなくても特に支障をきたさないので解決済みとします）

[marlboro_tata]

検索結果0件の時だけ、特定のウィジェットが表示されない、という状況なのでしょうか？
もしくは、サイドバー自体が表示されないのでしょうか？

あと、もし、WPのデバッグモードをONにしていないようでしたら、ONにして、念のため、エラーなどが出ていないか確認すると良いと思います。
参考：http://wpdocs.osdn.jp/WordPressでのデバッグ

[piyo-coder335]

はい、検索結果0件の時だけプロフィール情報の名前と紹介文が表示されない感じです。
ブラウザの検証で確かめてみましたが、ブランクになっていました。
デバックモードもonにしてみましたが、特にエラーらしきものは見つかりませんでした。

[marlboro_tata]

エラーも出てないとなるとますます不思議現象ですね・・・。
ウィジェットが消えてしまう件についてはお役に立てないです。ごめんなさいー。

[piyo-coder335]

いえいえ。
なんども回答くださりありがとうございました。