メディアライブラリにある画像を指定件数取得して表示させる方法(galleryショートコードの代替?)

公開日:2024(令和6)年3月26日/最終更新日:

WordPressでオリジナルショートコードを作る方法

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPress標準のギャラリーショートコード(ギャラリーブロック含む)。これを使ってできないことで、できたらいいなと常々思うのが以下の指定です。

  • カテゴリー分けして、そのカテゴリーに該当するものを表示させる
  • 画像の数を指定して表示させる
  • その他条件(並び順など)を指定して表示させる

まずカテゴリー分けについては、管理画面側の制御等もあるので、自力で云々するよりは、以下のプラグインを使うのが妥当だと思います(本ページではこのプラグインを使う前提で紹介しています)。

それよりも個人的にギャラリーショートコードにないと困るのが「表示数の設定」。コアのプログラムを目を皿のようにして見ても、パラメーターとして存在しないんですよね。

必要だと思うんですけどねぇ...。

そこで作成したのが以下のプログラムです。メディアライブラリにアップロードしているファイルはすべて投稿と同じように「attachment」という投稿タイプの投稿?として管理されていることに着想を得て、それならPHPで作成する投稿一覧の投稿タイプを「attachment」にすればいいのでは?という発想で生まれたものです。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
/*** メディアにある画像を件数指定で出力 ***/
function pwcn_all_media_images_shortcode( $atts ) {
//パラメーターの設定
	$args = shortcode_atts( array(
		'count' => '',
		'category' => '',
		'column' => '',
	), $atts );

//表示数の指定
	if(!empty($atts['count'])){
		$counts = $atts['count'];
	}else{
		$counts = '-1';
	}

//カテゴリーの指定
	$category = $atts['category'];
	//複数カテゴリー指定に対応
		$category_array = explode(',', $category);//「,」で投稿タイプを分割

//列数の指定
	if(!empty($atts['column'])){
		$columns = $atts['column'];
	}else{
		$columns = '3';
	}

//画像の抽出
	if(!empty($atts['category'])){//categoryパラメーターがある場合
		$images = get_posts( array(
			'post_type'      => 'attachment',
			'posts_per_page' => $counts,
			'tax_query' => array(
				array(
				'taxonomy' => 'category_media',
				'field' => 'slug',
				'terms' => $category_array,
			)),
		) );
	}else{//categoryパラメーターがない、または空の場合
		$images = get_posts( array(
			'post_type'      => 'attachment',
			'posts_per_page' => $counts,
		) );
	}

	//インラインスタイル
	$ul_style = 'display: flex;flex-wrap: wrap;list-style: none;align-items: stretch;';
	
	//開始タグ
	$images_list = '<ul class="pwcn-media-thumb-list" style="'.$ul_style.'">';

foreach ( $images as $image ) {
		//altの処理
		$image_alt = get_post_meta( $image->ID, '_wp_attachment_image_alt', true );
			if ( empty( $image_alt ) ) {
				$image_alt = $image->post_title;
			}

		//スタイルの処理
		$image_style = 'width: 100%; object-fit: cover;';
		$li_style = 'width: calc((100% / '.$columns.') - 8px);padding: 4px;';

		//画像の取得
		$attache_image = wp_get_attachment_image(
			$image->ID,
			'thumbnail',
			false,
			array( 'alt' => $image_alt, 'style' => $image_style )
		);

		$images_list .= '<li style="'.$li_style.'">' . $attache_image . '</li>';
	}

	//終了タグ
	$images_list .= '</ul>';

	return $images_list;

}
add_shortcode( 'pwcn-media-images', 'pwcn_all_media_images_shortcode' );

テーマのfunctions.phpへ上記コードを追加したら、投稿編集画面などで「pwcn-media-images」というショートコードを入れれば動作します(このサイトで使用するために作ったコードではないため、表示サンプルはありません)。

以下が完全なショートコードです。

[pwcn-media-images count="" category="" column=""]

以下が各パラメーターと初期値です。

パラメーター役割初期値
count表示数-1(無制限)
categoryカテゴリー
*Media Library Categoriesプラグイン使用時のカテゴリースラグ
なし(すべて)
column列数3

コード自体は「attachment」という投稿タイプから、パラメーター(ショートコードパラメーター)で限定したものを出力するというもので、コード自体にコメントをいっぱい入れているので、それぞれが何をしているのかはお分かりになるかと思います。

以下一応自身で使い勝手がいいよに工夫した部分です。

  • 各パラメーターがない(ショートコード中に存在しない)場合でも動作するようにした
  • カテゴリーは複数指定できるようにした
  • 列数の指定ができるようにした
  • スタイルはインラインで出力するようにし、別場所にスタイルコードを書かなくてもある程度の表示ができるようにした
  • 画像のalt属性はアップロードした画像のalt、なければファイル名を出力するようにした

当初、標準のギャラリーショートコードのプログラムを加工して何とか..と考えて進めていたものの、投稿一覧のショートコードを改造したほうが速そう..でこのコードに落ち着きました。

抽出条件自体はWP_Queryの要素に従って自由に設定できますので、工夫してみてくださいね。

最近のWordPressはブロック開発寄りですけど、別に必要な機能はすべてブロックで作る必要もないですし、ショートコードは特に開発環境も必要なく、エディター側で表現されないだけですから、必要な機能はショートコードで作っていった方が楽なんじゃないかなと個人的には感じます。本当に必要なら勉強してブロック化していけばいいのですから..。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressでオリジナルショートコードを作る方法
カスタムフィールドに保存した値を投稿本文内へショートコードで呼び出すコード