Wordpressで画像を呼び出しのテンプレート

Question

Wordpress、PHP初心者です。

画像の出力の際に、もっと簡素に指定する事が出来ないかと思い質問させて頂きます。

画像の出力する際、HTMLの中にechoでPHP(出力)を挿入する事が多いので、wp_get_attachment_image_srcを使用しております。ループ箇所にこのように設置しております。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); 
        /* サムネイルサイズ */
        $img_s = 'thumbnail'; /* 420 */
        $img_m = 'medium'; /* 640 */
        $img_ml = 'medium_large'; /* 900 */
        $img_l = 'large'; /* 1200 */
        $img_f = 'full'; /* 1500 */
        /* サムネイルサイズ */
        $thumbnail_id = get_post_thumbnail_id();
        $Simg = wp_get_attachment_image_src( $thumbnail_id , $img_s);
        $Mimg = wp_get_attachment_image_src( $thumbnail_id , $img_m);
        $MLimg = wp_get_attachment_image_src( $thumbnail_id , $img_ml);
        $Limg = wp_get_attachment_image_src( $thumbnail_id , $img_l);
        $Fimg = wp_get_attachment_image_src( $thumbnail_id , $img_f);
    ?>
        <picture>
            <source data-srcset="<?php echo $Simg[0]; ?>" media="--xs" />
            <source data-srcset="<?php echo $Mimg[0]; ?>" media="--md" />
            <source data-srcset="<?php echo $Limg[0]; ?>" media="--lg" />
            <img data-src="<?php echo $Fimg[0]; ?>"/>
        </picture>
    <?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

こちらのソースで意図したサイズを出力できているのですが、他のテンプレートのループでも、上記の指定をしなくてはいけないので、こちらの部分を共通化したいと考えました。

試した事

呼び出しや共通化だとadd_actionが使えると思い以下のコードで試しました。

/* functions.php */

    add_action( 'n_image_template', 'n_image_setup' );
    function n_image_setup() {
        /* サムネイルサイズ */
        $img_s = 'thumbnail'; /* 420 */
        $img_m = 'medium'; /* 640 */
        $img_ml = 'medium_large'; /* 900 */
        $img_l = 'large'; /* 1200 */
        $img_f = 'full'; /* 1500 */
        /* サムネイルサイズ */
        $thumbnail_id = get_post_thumbnail_id();
        $Simg = wp_get_attachment_image_src( $thumbnail_id , $img_s);
        $Mimg = wp_get_attachment_image_src( $thumbnail_id , $img_m);
        $MLimg = wp_get_attachment_image_src( $thumbnail_id , $img_ml);
        $Limg = wp_get_attachment_image_src( $thumbnail_id , $img_l);
        $Fimg = wp_get_attachment_image_src( $thumbnail_id , $img_f);
    }

functions.phpに上記を入力。
テンプレートファイルに以下を入力。

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); 
        do_action( 'n_image_template' );
    ?>
        <picture>
            <source data-srcset="<?php echo $Simg[0]; ?>" media="--xs" />
            <source data-srcset="<?php echo $Mimg[0]; ?>" media="--md" />
            <source data-srcset="<?php echo $Limg[0]; ?>" media="--lg" />
            <img data-src="<?php echo $Fimg[0]; ?>"/>
        </picture>
    <?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

もちろん動きませんでした。知識があるからしたら何やってんだ、という感じだと思います。
add_actionとdo_actionで何でも呼び出せるのかと思いましたが違いました。
・
・
・
上記のような画像サイズ指定を共通化したい場合、どのような方法がありますでしょうか？
尚、HTMLベースにPHPを埋め込む方法は変えられないので(PHPでHTMLをechoする方法NG)、上記のような方法で何かあればご教授お願いできればと思います。

Answer 1

こんにちは、単純に関数にまとめて
テーマに表示させたいという状況と想像して以下書いてみました。

function n_image_setup( $size ) {

	$thumbnail_id = get_post_thumbnail_id();
	$thumbnail_size = wp_get_attachment_image_src( $thumbnail_id, $size );

	return $thumbnail_size[0];
}

<?php
/*
Template Name: サムネイル関数テスト
*/
query_posts('post_type=post&posts_per_page=10');
if (have_posts()) : ?>
	<?php while (have_posts()) : the_post();
		?>
		<picture>
			<source data-srcset="<?php echo n_image_setup('thumbnail'); ?>" media="--xs" />
			<source data-srcset="<?php echo n_image_setup('medium'); ?>" media="--md" />
			<source data-srcset="<?php echo n_image_setup('large'); ?>" media="--lg" />
			<img data-src="<?php echo n_image_setup('full');; ?>"/>
		</picture>
	<?php endwhile; ?>
<?php endif; wp_reset_query(); ?>

一応当方の環境では動きました。
フックが必要でしたら関数を適宜指定すれば
フックのタイミングで実行できると思います。

当方もphpまだまだなのでもっと良い書き方があるかもしれません。
ほかの回答者の方がいれば要チェックです。

Comments

[nats]

ご回答ありがとうございました！
共通化でき、尚且つ簡潔なコードで実現できて大変嬉しいです！

こちらのコードの理解を深めて、応用していきたいと思います。
本当にありがとうございました。

[ruuusaamarki]

解決したようで何よりです！

1点補足として上記ではループの部分はquery_postsを使いましたが
実はあまり使わないほうが良いです。
（わかりやすくするためにループの部分に変更を加えるのはやめました）

WP_Query または get_postsでも同じことができるので試してみてください。
http://notnil-creative.com/blog/archives/1288

query_postsは遅くなることもあるようです。
http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/query_posts

[nats]

WP_Queryでも問題なく動く事を確認致しました！
本当にありがとうございます^^