web-dev-qa-db-ja.com

サムネイルの代替タイトルの投稿

投稿のサムネイルに "Title"のように "Alt title"が必要かどうか、またそれを関連する投稿クエリに追加する方法を知りたいのですが…投稿のサムネイルを取得するには、次のコードを使用します。

<div class="td-module-thumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if (has_post_thumbnail()) {
the_post_thumbnail(array(324,235));
} else {
echo '<img src="' . get_bloginfo('template_directory') . '/images/no-thumb/td_324x235.png" />';
}
?>
</a>
</div>
post-thumbnails
5
Hank Scorpio

ブラウザが画像を読み込めない場合や訪問者がスクリーンリーダーを使用している場合は、すべての画像にalt値を設定する必要があります。

2つの選択肢があります。おすすめの画像のキャプション（空白の場合もあります）を使用するか、投稿のタイトルをaltとして使用します。

キャプションは get_the_post_thumbnail_caption() を使って取得できます。それを使うのはこれと同じくらい簡単です：

echo '<img alt="' . esc_html ( get_the_post_thumbnail_caption() ) . '" src="URL HERE" />';

ただし、ループ内で使用するか、$postオブジェクトまたはIDを渡してください。

別の方法は投稿のタイトルをaltテキストとして使うことです。そうするために、あなたは使うことができます：

echo '<img alt="' . esc_html ( get_the_title() ) . '" src="URL HERE" />';

条件を設定してサムネイルにキャプションがあるかどうかを確認し、投稿タイトルの代わりにそれを使用できる場合はそれを使用できます。

if ( $alt = get_the_post_thumbnail_caption() ) {
    // Nothing to do here
} else {
    $alt = get_the_title();
}

echo '<img alt="' . esc_html ( $alt ) . '" src="URL HERE"/>

更新

alt属性をget_post_thumbnail()に直接追加したい場合は、それを配列として関数に渡すことができます。

the_post_thumbnail( 'thumbnail', [ 'alt' => esc_html ( get_the_title() ) ] );
5
Jack Johansson

この例では、メディアライブラリに設定されている代替テキストを使用します。一般的なWordPressオプションを使用して代替テキストを入力するユーザーにとって、動作がより一貫しているので、私はそれを好みます。

$thumbnail_id = get_post_thumbnail_id( $post->ID );
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);   
the_post_thumbnail( 'full', array( 'alt' => $alt ) ); ?>
6
Tom Woodward

あなたのWordPressテーマで次のコードを使うことができます：

<div class="td-module-thumb">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
        <?php if (has_post_thumbnail()) {
            echo '<img src="' . the_post_thumbnail_url( array(324,235) ) . '" alt="any thing you want" title="Some Text" />';
        } else {
            echo '<img src="' . get_bloginfo('template_directory') . '/images/no-thumb/td_324x235.png" alt="any thing you want" title="Some Text" />';
        }
        ?>
    </a>
</div>
0
Peyman Naeimi