ページネーションの2ページ目だけ、レイアウトが崩れてしまう。

page
1<?php
2
3/**
4 * Template Name: blog
5 */
6get_header(); ?>
7
8<main>
9  <!-- サブビジュアル -->
10  <section class="sub__mv __blog__mv">
11    <div class="sub__mv__ttl">
12      ブログ
13    </div>
14  </section>
15  <!-- パンくずリスト -->
16  <section class="breadcrumb">
17    <div class="container">
18      <div class="breadcrumb__inner">
19      <?php get_template_part('template-parts/breadcrumb'); ?>
20      </div>
21    </div>
22  </section>
23  <!-- ブログ一覧 -->
24  <section class="bloglists">
25    <div class="container">
26      <div class="headline __small">
27        新着一覧
28      </div>
29      <div class="bloglists__inner">
30        <?php
31        $paged = get_query_var('paged') ?: 1; //ページネーションを使いたいなら指定
32        $wp_query = new WP_Query();
33        $my_posts = array(
34          'post_type' => 'post',
35          'posts_per_page' => '10',
36          'paged' => $paged, //ページネーションを使いたいなら指定
37
38        );
39        $wp_query->query($my_posts);
40        if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
41        ?>
42            <!-- ここにコンテンツ -->
43            <div class="blog__items lower">
44              <div class="item__img lower">
45                <?php if (has_post_thumbnail()) : ?>
46                  <?php the_post_thumbnail('medium'); ?>
47                <?php else : ?>
48                  <img src="<?php echo get_template_directory_uri(); ?>/img/240x240.png" >
49                <?php endif; ?>
50                <p><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p>
51              </div>
52              <div class="blog__item">
53                <div class="blog__date lower"><?php the_time('Y-m-d'); ?></div>
54                <div class="blog__item__ttl lower">
55                  <a href="<?php the_permalink(); ?>">
56                  <?php
57                    if(mb_strlen($post->post_title, 'UTF-8')>40){
58                      $title= mb_substr($post->post_title, 0, 40, 'UTF-8');
59                      echo $title.'…';
60                    }else{
61                      echo $post->post_title;
62                    }
63                    ?></a>
64                </div>
65                <div class="blog__item__desc">
66                <?php
67                  //brとspanを残す
68                  if(mb_strlen($post->post_content, 'UTF-8')>60){
69                    $content= mb_substr(strip_tags($post->post_content, '<br><span>'), 0, 60, 'UTF-8');
70                    echo $content.'…';
71                  }else{
72                    echo strip_tags($post->post_content, '<br><span>');
73                  }
74                  ?>
75                </div>
76              </div>
77            </div>
78
79        <?php endwhile;
80        endif;
81        wp_reset_postdata(); ?>
82
83      </div>
84
85      <div class="pagenation">
86      <?php if (function_exists('wp_pagenavi')) {
87				wp_pagenavi();
88			} ?>
89
90      </div>
91    </div>
92  </section>
93  <section class="cta">
94    <div class="container">
95      <div class="cta__Induction">まずは無料で資料請求から</div>
96      <div class="btn__center"><a class="btn __large" href="<?php the_permalink(2126); ?>">資料請求</a></div>
97      <div class="contact__center"><a href="<?php the_permalink(2126); ?>">お問い合わせ</a></div>
98    </div>
99  </section>
100  <section class="tel">
101    <div class="container">
102      <div class="tel__inner">
103        <div class="tel__text">お電話でのお問い合わせはこちら</div>
104        <div class="tel__number">0123-456-7890</div>
105        <div class="tel__time">平日08:00~20:00</div>
106      </div>
107    </div>
108  </section>
109
110</main>
111<?php get_footer(); ?>
112``` WordPress初心者です。
113カンプコーディングしたhtmlを WordPress化しております。
114固定ページにブログの記事一覧を表示させており、そこに「WP-PageNavi」のプラグインでページネーションの実装をしたいです。
115
116ページネーションはきちんと表示されて、2ページ目以降も表示されるのですが、何故か2ページ目だけがレイアウトが崩れます。
1173ページ目以降はきちんと表示されています。
118
119レイアウトが崩れている原因を検証で見ようとしました。
120ページネーションは<div class="bloglists__inner">の外に書いているのですが、何故か２ページ目だけ、<div class="blog__items lower">の中に入っており、display:flexが適用されてしまっています。
121
122ダミー投稿（テーマユニットテストデーター）の先頭固定ページが原因かなと思いましたが、無効にしても変わりませんでした。
123
124何か解決策はありますでしょうか。
125宜しくお願いいたします。![イメージ説明](9791a1a25521c0438cf4cd533fa511f2.png)

tabuu

2022/01/11 02:45

post_titleやpost_contentを加工していますが、それによりhtmlが崩れていないでしょうか？

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

回答1件

自己解決

tabuuさん、ありがとうございます。
おっしゃる通りでした。加工している部分を<?php the_title(); ?>と<?php the_excerpt(); ?>に戻すと表示崩れがなくなりました。
文字数の制限はfunction.phpに記述することで解決しました。
本当に助かりました。ありがとうございました！

投稿2022/01/11 04:10

sara0102

総合スコア3