Wordpress 投稿ページの並べ方について

Question

wordpressのトップページ内で新着記事を表示したいと考えています。
画像と新着記事のタイトルなどを三つ、縦ではなく横に並べたいとした時、どのように表記したらいいかわからず困っております。ご教授いただけたら幸いです。

indepx.php

    <div class="site-section">
      <div class="container">
        <div class="row mb-5">
          <div class="col-md-12">
            <h2 class="site-section-heading text-center">最新情報</h2>
             <span class="caption d-block text-black text-center">NEWS</span>
          </div>
        </div>

<?php
 $infoPosts = get_posts('numberposts=3&category=4');
 foreach($infoPosts as $post): 
?>
       
          <div class="row mb-5">
          <div class="col-md-4 col-lg-4 mb-5 mb-lg-4">
            <div class="media-with-text mb-4">
              <div class="mb-4">

                <a href="#">
                <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/img_1.jpg" alt="" class="img-fluid">
                </a>
              </div>
              <h2 class="h5 mb-2"><a href="#"><?php the_title(); ?></a></h2>
              <span class="mb-3 d-block post-date"><?php the_time('Y/m/d'); ?>By <a href="#">harry black</a></span>
              <p>新しいニュースです。新しいニュースです。新しいニュースです。新しいニュースです。新しいニュースです。</p>
            </div>
          </div>
      </div>
  <?php endforeach; ?>
      </div>
    </div>

テーマは自作のHTMLです。

CSS表記はこうなっております。

.site-section {
  padding: 3em 0; }
  @media (min-width: 768px) {
    .site-section {
      padding: 7em 0; } }
  .site-section.site-section-sm {
    padding: 4em 0; }```

現時点では縦並びで三つ表示されております。

Comments

[CHERRY]

ブロックを横に並べるのは、 CSS の役目ですので、お使いのテーマ名 と　CSS も提示してください。

Answer 1

ついでにgridも

grid-template-columns:repeat(auto-fill,minmax(30rem,1fr));

みたいな指定でflexっぽい感じにできる
flexだと余った最後の行が横に伸びちゃうけど
gridでやればその問題は解決
なおかつflexよりレイアウト処理が早い（らしい）

実装がflexの時より比較的各ブラウザの足並みは揃ってる感じ

というかWordPressがすでに新エディタで
カラムとかメディアと文章とかのブロックに使っちゃってる

WordPress自身が使っちゃってるならもう
WordPressのテーマ作るのに使ってもいいでしょう
動かなかったらどうせその辺で崩れるわけですし

Answer 2

こんにちは。
私も2ヶ月前に自作テーマで記事の横並びを実装したので、参考になればと思います。

CSSで制御するには、ひと昔前にはfloatを使われていました。
それがより便利なったのがFlexボックス、さらに配置の自由度が増したグリッドレイアウトが登場しています。

添付した画像は私のサイトのものですが、横並びの要素を折り返すことで複数行にしています。（2x5や3x3など）

横並びにするだけならFlexでも充分です。
（Flexボックスの解説を読めば、その便利さがわかると思います）

• CSS Flexbox の基礎知識と使い方を詳しく解説 _ コリス

それでもグリッドレイアウトを採用した理由は、要素の横幅を自動計算してくれたり、記事と記事の間をmarginではなくgapというプロパティで一括で指定できるからです。

• CSS Gridを使ったレスポンシブ対応の基本レイアウト _ Webクリエイターボックス

以下、home.phpとcssのソースの一部です。画像と見比べてご活用ください。
※WordPressのループで最新記事を1ページに10件表示しています
※「カード」全体をリンクの範囲にするためにaタグで囲んでいます

<div class="grid-container">
<?php if( have_posts() ):
    while( have_posts() ): the_post(); ?>
  <article>
    <a href="<?php the_permalink(); ?>">
      <figure>
        <!-- アイキャッチ -->
      </figure>
      <h2><?php the_title(); ?></h2>
      <?php the_time('Y.m.d'); ?>
    </a>
  </article>
<?php endwhile; endif;?>
</div>

カギとなるのは、横並びにする要素を包むボックスです（よくコンテナと呼ばれます）。
これはFlexボックスにも同じことが言えます。

横並びにしたい記事（articleタグ）を包むコンテナ（divタグ）にいくつかのプロパティを指定しています。
PC表示では3つ横並びにしており、4件目以降が折り返されます。
※「3つ並べる」と決まっているなら、repeat記法に「3」と書くことで自動で3等分の幅を計算してくれます。
（最低幅・最大幅を指定したい場合、minmax関数というものがあります）

.grid-container {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, 1fr);
}

自作テーマの制作、頑張ってください。

Answer 3

オリジナルテーマを作成中ということなので、 CSS で横に並べる方法の参考情報だけ記載しておきます。

• CSSで横並びレイアウトを実現簡単にするinline-blockとは？
• CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」
• 要素を横並びにする5つの方法と各々のメリット・デメリット
• cssで要素を横並びにする方法まとめ

等。

Comments

[dogfood]

ありがとうございます！！！！