web-dev-qa-db-ja.com

注目画像の代替画像

おすすめの画像が設定されていない場合は、代替画像を使用します。次のコードを使用していますが、画像が表示されていません...

<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
    <?php the_post_thumbnail( array(334, 259) ); // Declare pixel size you need inside the array ?>
<?php else : // No thumbnail? Showing default is better UX than no image. ?>
    <img src="/wp/wp-content/themes/klicknet-theme/images/testbild.png" 
alt="testbild" width="334" height="259" title="Bild: <?php the_title(); ?>"> 
<?php endif; ?>

何かアイディアは?

1
tom84

あなたのコードは大丈夫に見えます、そしてそれはちょうどうまく動くはずです。しかし、あなたが修正できるもの(そして修正すべきもの)がいくつかあります。

1.フォールバック画像に絶対URLを使用しない

あなたはあなたのイメージのsrcとして/wp/wp-content/themes/klicknet-theme/images/testbild.pngを渡します。その中でWP関数を使用した方がはるかに良く、より安全であるでしょう。例えばこんな感じ:

<img src="<?php bloginfo('template_url'); ?>/images/testbild.png">

あなたは適切にタイトルをエスケープしていません

フォールバック画像では、title属性にthe_title()を使用します。しかし、それを属性としてエスケープすることはありません。タイトルに"文字が含まれていると、HTMLが壊れます。もう1つの問題は、タイトルにHTMLタグを含めることができ、それらがあなたの属性に印刷されることです。

属性としてtitleを使いたいなら、代わりに the_title_attribute functionを使うべきです。そのため、その行の修正版は次のようになります。

<img src="<?php bloginfo('template_url'); ?>/images/testbild.png" alt="testbild" width="334" height="259" title="<?php the_title_attribute( array( 'before' => 'Bild: ', 'after' => '' ) ); ?>"> 
1