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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

Q&A

解決済

2回答

804閲覧

ループ処理中のアイキャッチ画像が、CSSで指定したサイズで表示されない。

nnn_syo_nnn

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

0グッド

0クリップ

投稿2019/12/26 14:22

前提・実現したいこと

wordpressで独自テーマを作成中です。
現在メインループ処理でトップページに記事カード一覧を表示させようとしています。

しかし、アイキャッチ画像のみ正しく表示されないため困っています。

発生している問題

アイキャッチ画像が設定されている記事のみ、正しく表示されません。
アイキャッチ画像を設定していない記事では何事もなく表示されているという状態です。

該当のソースコード

PHP

1 2 <?php if(have_posts()): ?> 3 <?php while(have_posts()): 4 the_post();?> 5 <a href="<?php the_permalink(); ?>" class="content__card"> 6 7 <?php 8 if(has_post_thumbnail()){ 9 the_post_thumbnail( 'thumbnail', array('class' => 'content__card-img')); 10 }else{ 11 echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/no-image.jpeg" alt="no-image" class="content__card-img">'; 12 } 13 ?> 14 15 <div class="content__card-description"> 16 <div class="content__card-meta"> 17 <div class="content__card-category"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></div> 18 <time class="content__card-time" datetime="<?php the_time('c'); ?>"><?php the_time('Y-m-d'); ?></time> 19 </div> 20 <h2 class="content__card-h2"><?php the_title(); ?></h2> 21 <p class="content__card-excerpt-p"><?php the_excerpt(); ?></p> 22 </div> 23 </a> 24 25 <?php endwhile; ?> 26 <?php endif; ?>

試したこと

functions.phpに

add_filter( 'post_thumbnail_html', 'custom_attribute' );
function custom_attribute( $html ){
$html = preg_replace('/(width|height)="\d*"\s/', '', $html);
return $html;
}
でstyle属性のサイズ指定を削除しましたが、効果がありませんでした。

補足情報

必要情報は全てお伝えしたつもりですが、足りない情報があれば都度、お答えさせていただきます。

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

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

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

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

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

madone99

2019/12/27 17:57 編集

試したサイズはthumbnailのみでしょうか?
nnn_syo_nnn

2019/12/28 16:54

the_post_thumbnail()のパラメータはthumbnailしか試していません。 サイズ指定をしてしまった場合、レスポンシブに対応できなくなると思ったので。
nnn_syo_nnn

2019/12/28 17:23

先ほど、the_post_thumbnail( array(300 , 200));と書き換えて試してみたのですが、レスポンシブに対応できず、レイアウト崩れが発生してしましました。 そのため、class指定でレスポンシブに対応させようとしているのですが、うまくできずに困っています。
guest

回答2

0

自己解決

<?php if(has_post_thumbnail()){ the_post_thumbnail( 'array()', array('class' => 'content__card-img')); }else{ echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/no-image.jpeg" alt="no-image" class="content__card-img">'; } ?>

とように記述することで解決しました。
たくさんの解決方法を提示していただき、とても助かりました。
ありがとうございました。

投稿2020/01/03 13:52

nnn_syo_nnn

総合スコア5

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

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

0

キーワードではなく、直接配列でサイズ指定したらどうでしょう?

php

1//array内の数値は適当に 2the_post_thumbnail([150, 150],[]);

投稿2019/12/27 18:00

madone99

総合スコア1855

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

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

nnn_syo_nnn

2019/12/28 17:14

ご返答ありがとうございます! サイズ指定にした場合、レスポンシブの際にレイアウト崩れが発生してしまいます・・・ そのため。SCSSで指定したサイズに対応させたいのですが、その方法が分からず(また他に良い方法があるのかもしれないのですが、ググっても良い方法が見つからなかったので)作業が詰まっています。
madone99

2019/12/28 17:31

'thumbnail'でもwidth,heightは出力された気がするんですけどね。 サイズ指定の次の配列で以下のようなclassを指定するとどうですか? ['class' => "attachment-thumbnail size-thumbnail]
nnn_syo_nnn

2019/12/29 19:18

ご返答ありがとうございます!! 試してみたのですが、やはりサイズがうまく調整されず、レイアウト崩れが発生してしまいます・・・
madone99

2019/12/30 00:20

そうなんですね。 そうしたらオリジナルのクラスにimportant付けるのはダメでしょうか。 .content__card-img { display: block !important; height: auto !important; max-width: 100% !important; }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問