質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

234閲覧

wordpressでの画像レイアウトについて

sasai_tacos

総合スコア17

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/02/02 08:46

wordpressで①画像のように列で表示したいのですが、②画像のように縦一列で表示されてしまいます。ちなみにbootstrapを使用してレイアウトしています。初心者で説明不足かもしれませんが、おわかりの方いらっしゃいましたらご教授お願い致します。


イメージ説明


イメージ説明

<?php $args = array( 'post_type' => 'gourmet', 'posts_per_page' => 8, ); ?> <?php $my_query = new WP_Query( $args ); ?> <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> <!-- ▽ ループ開始 ▽ --> <div class="mb-1 row mx-2"> <div class="col-6 col-md-2 p-1 "> <div class="staff-list"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail()) : ?> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, true); ?> <img src="<?php echo $image_url[0]; ?>" class="thumb w-100"> <?php endif; ?> <div class="mask"> <div class="staff-name "><?php the_title(); ?></div> </div> </a> </div> </div> </div> <!-- △ ループ終了 △ --> <?php endwhile; ?> <?php wp_reset_postdata(); ?>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

whileループする箇所が違っていますので、そこを直しました。

また、コラムがcol-6 col-md-2となっていたのでcol-6 col-md-3としています。
ミディアムサイズ以上のスクリーンで4列で表示したいのであればcol-md-3となります。(全体が12のため)

php

1<?php 2 $args = array( 3 'post_type' => 'maker', 4 'posts_per_page' => 8, 5 ); ?> 6 7 <?php $my_query = new WP_Query( $args ); ?> 8 9<div class="mb-1 row mx-2"> 10 <!-- ▽ ループ開始 ▽ --> 11 <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?> 12 <div class="col-6 col-md-3 p-1"> 13 <div class="staff-list"> 14 <a href="<?php the_permalink(); ?>"> 15 <?php if ( has_post_thumbnail()) : 16 $image_id = get_post_thumbnail_id(); 17 $image_url = wp_get_attachment_image_src($image_id, true); 18 ?> 19 <img src="<?php echo $image_url[0]; ?>" class="thumb w-100"> 20 <?php endif; ?> 21 22 <div class="mask"> 23 <div class="staff-name "><?php the_title(); ?></div> 24 </div> 25 </a> 26 </div> 27 </div> 28 <?php endwhile; ?> 29 <!-- △ ループ終了 △ --> 30</div> 31 <?php wp_reset_postdata(); ?> 32

こちらで動くかと思いますがいかがでしょうか。

投稿2019/02/02 13:16

unotalk

総合スコア124

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問