Web制作

【WP】メディアライブラリの画像をWP_Queryで呼び出す【WordPress】

投稿日：2022/09/22

ルナリス

WordPressのメディアライブラリの画像をテンプレート上から表示したいわ！！！！

どういう事？

ソルト

ルナリス

WordPressにアップロードした画像をプログラム上から呼び出すわ

なるほど…！

ソルト

imgタグを出力する関数を定義

ルナリス

直接imgタグを書くのが一般的だけど、画像サイズや遅延処理を設定することでSEO対策に繋がるわ

functions.phpにimgタグを出力する関数を記述します。
テンプレートから関数「generate_img_tag( 画像のURL );」を呼び出すことによってimgタグを自動で生成してくれます。

//URLから画像サイズを取得(WP内)
function get_image_size( $image_url ){
    $res = null;
    $wp_content_dir = WP_CONTENT_DIR;
    $wp_content_url = content_url();
    $image_file = str_replace($wp_content_url, $wp_content_dir, $image_url);
    $imagesize = getimagesize($image_file);
    if ($imagesize) {
        $res = array();
        $res['w'] = $imagesize[0];
        $res['h'] = $imagesize[1];
        return $res;
    }
}
//imgタグを生成
function generate_img_tag( $image_url ){
    $size = get_image_size( $image_url );
    echo '<img src="'.esc_url($image_url).'" width="'.htmlspecialchars($size['w']).'" height="'.htmlspecialchars($size['h']).'" loading="lazy">';
}

メディアライブラリ画像の表示サンプル

今回はメディアライブラリにアップロードした新着10件の画像を表示するプログラムを紹介します。

<?php
$args = array(
    'posts_per_page' => 10, //表示件数
    'orderby'          => 'date', //日時でソート
    'order'            => 'DESC', //ASC(昇順),DESC(降順)
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'post_status' =>'inherit',
);
$image = new WP_Query( $args );
?>
<?php if ( $image->have_posts() ) : ?>
    <?php while ( $image->have_posts() ) : $image->the_post(); ?>
        <div>
            <?php generate_img_tag( wp_get_attachment_image_url($image->ID,'full') ) ;?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

取得する画像設定の変更

配列「$args」が表示条件のSQLになっており、表示件数や表示方法を設定することができます。
公式ドキュメント等を参考にして各種パラメータを設定してください。

画像サイズの指定

サンプルではフルサイズを指定していますが、サムネイルを表示したい場合もあると思います。

<?php generate_img_tag( wp_get_attachment_image_url($image->ID,'full') ) ;?>

上記が画像のサイズ設定・表示をする記述となります。
‘full’の部分を変更することで任意のサイズの画像を表示できます。

・サムネイルを表示する例
サムネイルを表示したい場合は次のように変更します。

<?php generate_img_tag( wp_get_attachment_image_url($image->ID,'thumbnail') ) ;?>

・主要な画像サイズ設定表記
表のパラメータを設定することで必要な画像サイズを取得しましょう。

thumbnail	サムネイル画像(メディア設定のサムネイルサイズ)
medium	中サイズ画像(メディア設定の中サイズ)
large	大サイズ画像(メディア設定の大サイズ)
full	オリジナルの画像サイズ