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

投稿日:

ルナリス

ルナリス

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 オリジナルの画像サイズ

まとめ

今回はWP_Queryを使ってメディアライブラリの画像を直接表示する方法を解説しました。
画像を中心としたサイト作りで非常に役立つと思うので、是非参考にしてみて下さい。

コメント一覧

コメントを残す

メールアドレスが公開されることはありません。