KumaTechLab
2021-10-19/2023-05-23

画像URLから指定したサイズの画像を取得する方法

画像URLから指定したサイズの画像を取得する方法

投稿のサムネイルは「get_the_post_thumbnail()」などでサイズ別の画像も簡単に取得することができます。

ですが、カスタムフィールドなどで画像登録を実装した場合はサイズ別の画像はどのように取得すればよいでしょうか。

おそらくカスタムフィールドの値として画像のURLは持たせているはず。

そこで今回は画像のURLからWordPressで生成されたサイズの画像を取得する方法を紹介します。

ページの表示速度を気にする場合、モバイル端末向けに軽い素材を出せるので便利です。

画像URLから指定したサイズの画像を取得する方法

ボリューム的にもそんなにないので早速コードから紹介します。

function get_image( $image_url, $size ) {
    $attachment_id = get_image_id( $image_url );


    return $attachment_id ? wp_get_attachment_image_src( $attachment_id , $size )[0] : $image_url;
}


 function get_image_id( $image_url ) {
    global $wpdb;
    $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE guid='%s' ", $image_url ) );


    return $attachment ? $attachment[0] : false;
}

「get_image」

こちらはattachement_idを取得してそのattachment_idで「wp_get_attachment_image_src」により指定のサイズの画像を取得しています。

「get_image_id」

メディアをアップロードすると「(wp_)posts」テーブルに「post_type」が「attachment」ととして登録されます。

また、 「(wp_)posts」 の「guid」カラムには画像URLが登録されています。

その「guid」に照会し、「ID」を取得、返却しています。

「get_image」にカスタムフィールドの値(画像URL)、そして取得したいサイズを指定すれば希望の画像サイズを取得することができます。

プラグインでの利用想定

便利なのですが、あまりテーマでは使用することは少ないかもしれません。

そこでプラグインで使用するのを想定し、クラス化したものも紹介しておきます。

<?php
/**
 * 画像サイズ取得
 */
namespace Sample\Util;


class Image {


    // 小サイズ
    public const SMALL = 'sample-small';


    // 中サイズ
    public const MEDIUM = 'sample-medium';
    
    public function __construct() {
        add_action( 'after_setup_theme', [ $this, 'add_image_size' ] );
    }


    /**
     * 画像URLと画像サイズから画像URL取得
     *
     * @param string $image_url
     * @param string $size
     * @return string choose size image url
     */
    public static function get_image( $image_url, $size ) {
        $attachment_id = self::get_image_id( $image_url );


        return $attachment_id ? wp_get_attachment_image_src( $attachment_id , $size )[0] : $image_url;
    }


    /**
     * 画像URLからattachment idを取得
     *
     * @param string $image_url
     * @return int|bool
     */
    private static function get_image_id( $image_url ) {
        global $wpdb;
        $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE guid='%s' ", $image_url ) );


        return $attachment ? $attachment[0] : false;
    }


    /**
     * 画像サイズの追加
     *
     * @return void
     */
    public function add_image_size() {
        add_theme_support( 'post-thumbnails' );
        add_image_size( self::SMALL, 150, 150, false );
        add_image_size( self::MEDIUM, 350, 350, false );
    }
}


return new Image();


//使用例
use Sample\Util\Image;


$image_url = get_post_meta( $post->ID, 'image', true );
$small_image_url = Image::get_image( $image_url, Image::SMALL );

おそらく画像のサイズを追加することも多いと思うので、画像のサイズ追加の記述もしています。

また、画像取得時にインスタンスは必要はないのでstaticを指定しています。

まとめ

namespace、class利用なので簡素な名前にしていますが、利用する状況によってプレフィックスを付与するなどして使用してください。

カスタムフィールド、オプションなどで画像を使用する場合は非常に便利なので覚えておいて損はしないです。

関数でモバイル判定で出し分けるよりも、imgタグのsrcsetやpicture,sourceと併せると相性が良いかと。(モバイル判定出し分けはページキャッシュ系のプラグインと相性が悪いので…)

2020 KumaTechLab.