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表記はこうなっております。
CSS
.site-section {
padding: 3em 0; }
@media (min-width: 768px) {
.site-section {
padding: 7em 0; } }
.site-section.site-section-sm {
padding: 4em 0; }
現時点では縦並びで三つ表示されております。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
こんにちは。
私も2ヶ月前に自作テーマで記事の横並びを実装したので、参考になればと思います。
CSSで制御するには、ひと昔前にはfloatを使われていました。
それがより便利なったのがFlexボックス、さらに配置の自由度が増したグリッドレイアウトが登場しています。
添付した画像は私のサイトのものですが、横並びの要素を折り返すことで複数行にしています。（2x5や3x3など）
横並びにするだけならFlexでも充分です。
（Flexボックスの解説を読めば、その便利さがわかると思います）
それでもグリッドレイアウトを採用した理由は、要素の横幅を自動計算してくれたり、記事と記事の間をmarginではなくgapというプロパティで一括で指定できるからです。
以下、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);
}
自作テーマの制作、頑張ってください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
オリジナルテーマを作成中ということなので、 CSS で横に並べる方法の参考情報だけ記載しておきます。
- CSSで横並びレイアウトを実現簡単にするinline-blockとは？
- CSSの基本！横並びなどフレキシブルに対応する「Flexボックス」
- 要素を横並びにする5つの方法と各々のメリット・デメリット
- cssで要素を横並びにする方法まとめ
等。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
ついでにgridも
grid-template-columns:repeat(auto-fill,minmax(30rem,1fr));
みたいな指定でflexっぽい感じにできる
flexだと余った最後の行が横に伸びちゃうけど
gridでやればその問題は解決
なおかつflexよりレイアウト処理が早い（らしい）
実装がflexの時より比較的各ブラウザの足並みは揃ってる感じ
というかWordPressがすでに新エディタで
カラムとかメディアと文章とかのブロックに使っちゃってる
WordPress自身が使っちゃってるならもう
WordPressのテーマ作るのに使ってもいいでしょう
動かなかったらどうせその辺で崩れるわけですし
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
CHERRY
2019/05/24 10:02
ブロックを横に並べるのは、 CSS の役目ですので、お使いのテーマ名 と CSS も提示してください。