WordPress・WEB系の開発(プログラム)関係や技術情報ほか、技術情報全般を掲載

  • このエントリーをはてなブックマークに追加

WordPress メインループでアイキャッチ画像を表示する方法

WordPress メインループでアイキャッチ画像を表示する方法

記事のリストページや詳細ページのメインループ内でアイキャッチ画像を表示する方法のメモ。
IMGタグごと表示する場合とアイキャッチ画像のURLを取得して表示する2パターンを書きます。

■アイキャッチ画像を取得してIMGタグも合わせて表示する場合:

<?php while(have_posts()): the_post(); ?>    
<div class="blog_title"><?php the_title(); ?></div>
<span class="day"><?php the_time('Y.m.d'); ?></span>
<div class="box">
    <?php /* アイキャッチ画像 */ ?>
    <?php if (has_post_thumbnail()) : ?>
        <div class="blog_img">
            <?php the_post_thumbnail('full', array('class' => 'thumbnail')); ?>
        </div>
    <?php endif; ?>

    <p class="blog_text">
        <?php /* 本文 */ ?>
        <?php the_content() ?>
    </p>
</div>
<?php endwhile;?>

■アイキャッチ画像のURLを取得して表示する場合:

<?php while(have_posts()): the_post(); ?>    
<div class="blog_title"><?php the_title(); ?></div>
<span class="day"><?php the_time('Y.m.d'); ?></span>
<div class="box">
    <?php /* アイキャッチ画像 */ ?>
    <?php
        $thumbnail_id = get_post_thumbnail_id();
        $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , 'full' );
    ?>
    <?php if (has_post_thumbnail()) : ?>
        <div class="blog_img">
            <img src="<?php echo $thumbnail_img[0]; ?>">
        </div>
    <?php endif; ?>

    <p class="blog_text">
        <?php /* 本文 */ ?>
        <?php the_content() ?>
    </p>
</div>
<?php endwhile;?>

※動作確認したWordPressバージョン:4.8

【PR】月曜から夜更かしで話題の東山動植物園のケイジくん「おっさんの叫び声」は是非聞いてみたい♪

関連記事

コメントは利用できません。

アーカイブ