wordpressの検索フォームで検索してページャーで次のページに飛ぶとレイアウトが崩れる。

wordpressで検索フォームから検索をかけると関連する記事を表示してくれるようにしました。

しかし、1ページめもそうですがページャーで2ページ目や3ページ目に飛ぶとレイアウトが崩れてしまいます。

レイアウトが崩れないようにするにはどうしたらいいでしょうか？

そして、下記のようなコードで検索し、表示させています。

テンプレートはtwentyseventeenを使っています。

「検索フォーム」

<form id="form" action="http://tokyo-times.jp" method="get">
    <input id="s-box" name="s" type="text" placeholder="キーワードを入力"/>
    <button type="submit" id="s-btn-area"></button>
</form>

「検索結果」

             <h2 class="archive-title">「<?php echo esc_html($s); ?>」の検索結果</h2>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	
	<!-- imgTextBox -->
<div class="imgTextBox">
<?php
  $category = get_the_category();
  $cat_id   = $category[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  $cat_slug = $category[0]->category_nicename;
?>
<p class="textP"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a><br><span class="postDate"><?php echo get_the_date( $format, $post ); ?></span><span class="writeName"><?php the_author(); ?></span><span class="catName"><?php echo $cat_name; ?></span></p>
<p class="imgP"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></p>
</div>
<!-- imgTextBox -->	
</div>

<?php endwhile; else : ?>
                <p>お探しの記事はありませんでした</p>
<?php endif; ?>
<?php
if (have_posts() && function_exists("pagination")) {
    // 一覧ページネーション
    pagination($wp_query->max_num_pages);
}
?>

wordpress初心者ゆえ、どこをどういじればいいのかもわからず、一応ブラウザの検証機能をみてみましたが原因がわかりませんでした。

こちらのページのように表示させたいです。

CHERRY

2018/10/21 21:20

どのように表示されるのが正しいのかわからないので、まず、画像などで正しいレイアウトを記載できないでしょうか。

退会済みユーザー

2018/10/21 21:20

わかりました。すぐに追加します。

退会済みユーザー

2018/10/21 21:24

追加しました。

CHERRY

2018/10/21 22:43 編集

書き方が悪くて混乱させてしまったようです。現在の状況は、URL から見えるのですが、理想の表示は、どうなって欲しいのでしょうか？とお聞きしたかったのですが。現在四列レイアウトになっていますが、正しいのは、何列ですか？

退会済みユーザー

2018/10/21 22:43

お待ち下さい。理想の画像を追加します。

退会済みユーザー

2018/10/21 22:46

リンクを追加いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

なるほど、カラム落ちというかずれているのですね。

確認すると while (have_posts()) 〜 endwhile; の間が、おかしいですね。

<div> と </div> , <p> と </p> , <span> と </span> 等は、開くタグと閉じるタグがペアになるので、同じ数にならないとダメです。

質問のHTMLはきちんとインデントされていないため、わかりにくいと思うので、開くタグでインデントして、閉じるタグでインデントを戻して、綺麗に位置が揃うように整形すると下記のようになります。綺麗に揃えるとどこでずれているかわかりやすいと思うので、自分でかく際も注意するようにするとミスが減ると思います。

php
1 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2
3     <!-- imgTextBox -->
4     <div class="imgTextBox">
5         <?php
6         $category = get_the_category();
7         $cat_id   = $category[0]->cat_ID;
8         $cat_name = $category[0]->cat_name;
9         $cat_slug = $category[0]->category_nicename;
10         ?>
11         <p class="textP">
12             <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a><br>
13             <span class="postDate"><?php echo get_the_date( $format, $post ); ?></span>
14             <span class="writeName"><?php the_author(); ?></span>
15             <span class="catName"><?php echo $cat_name; ?></span>
16         </p>
17         <p class="imgP"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></p>
18     </div>
19     <!-- imgTextBox -->    
20 </div>
21
22 <?php endwhile; else : ?>