WordPressカスタマイズ　最新の投稿を横並びに戻したい！

現在WordPressでテーマのオリジナルカスタマイズをしております。
front-page.phpに[最新の投稿]を横並びに配置していたのですが
ループ処理を行ったところ縦並びになってしまいました。

デペロッパーツールで確認し、セレクタを変えてcssに記述しても
元の横並びにはなりません。

助けてください！

php
1コード
2```<section class="works section" id="works">
3        <div class="container">
4          <h2 class="title">WORKS</h2>
5          <?php if ( have_posts() ) : //もし、投稿が1件以上あったら ?>
6            <?php while ( have_posts() ) : //投稿の表示条件を満たす間は繰り返す ?>
7              <?php the_post(); //データ1件分を取り出して渡す ?>
8                <div class="works-wrap">
9                  <?php the_content(); ?>
10                </div><!--▲ works-wrap 終了-->
11                <?php endwhile; //投稿ループ終了 ?>
12            <?php endif; //条件分岐終了 ?>
13          <div class="btn">
14           <a class="btn-btn" href="<?php echo esc_url(home_url("/works/")); ?>" >|Read More|</a>
15          </div>
16        </div>
17      </section>
18

css

.wp-block-latest-posts__list{
  max-width: 70%;
  width:100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
  margin-bottom: 30px;
  margin:0 auto;
  
}
/*.works-item*/  
.wp-block-latest-posts__list li{
  margin: 20px;
  color: #333;
  width: calc(1 / 4 * 100% - 5%);
  display: flex;
  flex-direction: column;
}

tabuu

2022/06/09 02:10

cssに記述している「wp-block-latest-posts__list」はhtmlで使っていないのでは？

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

回答1件

ベストアンサー

下のcssで使われているクラスが上のphpの中に全く見当たらないので、クラスを理解できていないんだと思います。
以下の様に変えてみていかがでしょう？レイアウト崩れてるかもしれませんが、横並びになると思います。

php
1<section class="works section" id="works">
2        <div class="container">
3          <h2 class="title">WORKS</h2>
4<ul class="wp-block-latest-posts__list"> //この行追加
5          <?php if ( have_posts() ) : //もし、投稿が1件以上あったら ?>
6            <?php while ( have_posts() ) : //投稿の表示条件を満たす間は繰り返す ?>
7              <?php the_post(); //データ1件分を取り出して渡す ?>
8                <li> //この行変更
9                  <?php the_content(); ?>
10                </li> //この行変更
11                <?php endwhile; //投稿ループ終了 ?>
12            <?php endif; //条件分岐終了 ?>
13</ul> //この行追加
14          <div class="btn">
15           <a class="btn-btn" href="<?php echo esc_url(home_url("/works/")); ?>" >|Read More|</a>
16          </div>
17        </div>
18      </section>