WordPressのギャラリー機能で追加した画像一覧からアイキャッチを除外して、画像に任意のリンク先を指定する

Warning: Undefined array key "HTTP_USER_AGENT" in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/other/tiny-fixed.php on line 75

WordPressの記事投稿で、アップロード
した画像をショートコードで簡単に画像
ギャラリーを作成する機能がデフォルト
で備わっていますが、基本的にあまり
使いやすいものではありません。なので
少し便利にしてみます。

デフォルトのギャラリー機能でちょっと微妙な点は「アイキャッチ画像も含まれる」と「リンク先を自由に指定できない」の2つです。これを、実装できるようにしてみます。

アイキャッチ画像を除外する

まずはアイキャッチを除外します。

ギャラリーは[gallery]というショートコードで、その記事内でアップロードした画像のギャラリーを実装出来ます。これは、結構クライアントさんにも手軽で良いと評判です。ギャラリー系のプラグインは便利なんですけど、プラグインそのものの利用方法に戸惑う方もいますので、個人的には極力デフォルトのギャラリーを使って貰うようにしています。

手動で除外

さて、アイキャッチを除外する方法ですが、[gallery exclude='画像ID']とすれば、任意の画像をギャラリーから除外できますので、ここにアイキャッチ画像のIDを含めればOK。

投稿している場合は画像のclassにwp-image-***と付きます。これがIDになりますが、アイキャッチを投稿内に含めない場合はIDを調べるのも、excludeってわざわざ入力するのも面倒臭い。

自分でも面倒臭いと思うような事をクライアントさんにやってもらう訳には行かないですね。

自動で除外

自動で除外する。ここは素直にテーマファイルにショートコードを埋め込んだ方が良さそうです。

<?php  $id = get_post_thumbnail_id(get_the_ID()); ?>
<?php echo do_shortcode('[[gallery exclude='.$id.' size="thumbnail" columns="3"]]'); ?>

get_post_thumbnail_idで取得したIDをexcludeオプションに含めてあげます。

これだと毎回ギャラリーが追加されてしまいますのでカスタムフィールドで条件分岐し、ギャラリーの有無を選択できるようにします。

カスタムフィールドでギャラリー表示をスイッチできるようにする

ギャラリーを追加したいときはカスタムフィールドを登録すればいいだけ。

<?php $img_gallery = get_post_meta($post->ID, 'img_gallery', true); if ($img_gallery) { ?>
<?php  $id = get_post_thumbnail_id(get_the_ID()); ?>
<?php echo do_shortcode('[[gallery exclude='.$id.' size="thumbnail" columns='.$img_gallery.']]'); ?>
<?php } else { ?>
<?php } ?>

上記のコードをテーマファイルに含めます。あとは、記事でimg_galleryという名前で、値にギャラリーの列数を指定すればアイキャッチ画像の含まれないギャラリーを手軽に実装出来ます。

続いて、ギャラリーの画像のリンク先を任意に指定出来るようにします。

プラグインを使う

通常、画像にはリンク先を指定できますが、ギャラリーにはリンク先を指定出来ません。これはgallery-custom-linkというプラグインが実現してくれます。

有効化すると、アップロードした画像の編集画面にCustom Linkという項目が追加されます。ここに、任意のリンク先を指定し、保存します。

あとは、

[gallery link="custom_url"]

とするだけで、設定したURLが画像リンクになってくれます。これを先ほどのコードに含めれば完成ですね。

ゴール

<?php $img_gallery = get_post_meta($post->ID, 'img_gallery', true); if ($img_gallery) { ?>
<?php  $id = get_post_thumbnail_id(get_the_ID()); ?>
<?php echo do_shortcode('[[gallery exclude='.$id.' link="custom_url" size="thumbnail" columns='.$img_gallery.']]'); ?>
<?php } else { ?>
<?php } ?>

link=”custom_url”を追加しました。これで

ギャラリー機能で追加した画像一覧からアイキャッチを除外して、画像に任意のリンク先を指定

を簡単に実装出来る様にするという要望に応えることができます。でも、出来れば標準でリンク先を指定出来るようになって欲しいです。

※紹介したプラグインは標準装備のギャラリーテンプレートをオーバーライドします。利用にはご注意下さい。詳しくはデベロッパーの記事をご参照下さい。

おまけ

自動で除外する一つの方法としてget_post_thumbnail_id()でアイキャッチ画像のIDを取得して一旦ギャラリーを無効化し、配列からアイキャッチ画像を除外して再度ギャラリーのショートコードを有効化させる方法があります。

	<?php
	function exclude_thumbnail_from_gallery($null, $attr)
	{
	if (!$thumbnail_ID = get_post_thumbnail_id())
	return $null;

	remove_filter('post_gallery', 'exclude_thumbnail_from_gallery');

	if (!isset($attr['exclude']) \|\| empty($attr['exclude']))
	$attr['exclude'] = array($thumbnail_ID);
	elseif (is_array($attr['exclude']))
	$attr['exclude'][] = $thumbnail_ID;

	$gallery = gallery_shortcode($attr);
	add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2);
	return $gallery;
	}
	add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2);
	?>

view raw gistfile1.aw hosted with ❤ by GitHub

<?php function exclude_thumbnail_from_gallery($null, $attr) { if (!$thumbnail_ID = get_post_thumbnail_id()) return $null; remove_filter('post_gallery', 'exclude_thumbnail_from_gallery'); if (!isset($attr['exclude']) || empty($attr['exclude'])) $attr['exclude'] = array($thumbnail_ID); elseif (is_array($attr['exclude'])) $attr['exclude'][] = $thumbnail_ID; $gallery = gallery_shortcode($attr); add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2); return $gallery; } add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2); ?>

via:Exclude the_post_thumbnail from gallery shortcode

これはこれで楽なのですが、一旦関数を除去したせいか、先ほどのプラグインが動作しませんでした。

という分けでこのコードは不採用としています。

アイキャッチ画像を除外する

手動で除外

自動で除外

カスタムフィールドでギャラリー表示をスイッチできるようにする

プラグインを使う

ゴール

おまけ

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code