WordPress2.5 の『ギャラリー』をカスタマイズする

WordPress2.5 の『ギャラリー』を使ってみて如何でしたでしょうか．簡単に画像をギャラリー化して綺麗にレイアウトしてくれるのは良いのですが、少しでも標準的な使い方から外れるような事をしたい場合には、残念ながら全く役に立ちません．

このような場合、自分で『ギャラリー』に関係する部分のPHPソースコードを書き換えてしまえば良いのですが、オリジナルのソースコードを書き換えてしまうのは後々のメンテナンスを考えると、決してお薦めできません．特に WordPressはアップデートが頻繁にありますので、オリジナルのソースコードを書き換えてしまうと、痛い目に遭います．

幸い、Wordpressにはプラグインというとても便利な拡張機能があります．このような場合プラグインを作成してオリジナルの機能を拡張すれば良いのですが、プラグインを作成するのは結構面倒です． （　’post_gallery’ というカスタムフックを用意すれば自分専用のギャラリーを作成できるようです）
プラグインをわざわざ作らなくてもちょっとした機能拡張や自分のオリジナルコードを追加するために、Wordpress では theme フォルダ内に “functions.php” という名前で、追加プログラムを簡単に組み込む事が可能です．

勿論プラグインの方が、メンテナンス面や他の人にも簡単に使って貰いやすいなどの計り知れないメリットが有るのですが、ちょっとした実験や機能追加であれば “functions.php” を利用する方が簡単です．

では、早速『ギャラリー』に関わるソースコードを見ていきましょう．

まず、『ギャラリー』の機能を実現している主なソースコードは次のファイルに有ります．

【 ファイル “media.php” ( /wp-include/media.php ) 】　　

　　function gallery_shortcode()

　　function wp_get_attachment_image()

【 ファイル “link-template.php” ( /wp-include/link-template.php ) 】　　

　　function get_attachment_link()

　　

オリジナルの『ギャラリー』では、吐き出される XHTML コードが

<a href='https://y2tech.net/blog/?attachment_id=609'
  title='Apple Store 5th Ave. Manhattan N.Y. Entrance'>
  <img src="https://y2tech.net/blog/wp-content/uploads/2008/04/applestoreny01-150x150.jpg"
    width="150" height="150" class="attachment-thumbnail" />
</a>

のようになっています．この部分を吐き出す PHPコードは、function gallery_shortcode()　にあり、その中身は

foreach ( $attachments as $id => $attachment ) {
    $link = wp_get_attachment_link($id, $size, true);
    $output .= "<{$itemtag} class='gallery-item'>";
    $output .= "
    <{$icontag} class='gallery-icon'>
        $link
    </{$icontag}>";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
        $output .= "
        <{$captiontag} class='gallery-caption'>
        {$attachment->post_excerpt}
        </{$captiontag}>";
    }

    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
        $output .= '<br style="clear: both" />';
    }
    $output .= "
     <br style='clear: both;' >
     </div>\n";

     return $output;
}

のようになっています．このままではリンク先のアンカータグが

<a href='https://y2tech.net/blog/?attachment_id=609' title='Apple Store 5th Ave. Manhattan N.Y. Entrance'>

という、Wordpress のパーマリンク形式で出力されてしまいます．

この部分は $link = wp_get_attachment_link($id, $size, true); で作成されていますので、wp_get_attachment_link() を書き換え、Wordpress のパーマリンク形式ではなく、直接アップロード先の画像のURLを返すように修正します．

私の場合は Lightbox2.0 で表示したかったので、rel =’lightbox[id609]’というパラメータを追加するようにしています．改造したwp_get_attachment_link() が返す最終的な画像データのアンカータグは次のようになります．

<a href='https://y2tech.net/blog/wp-content/uploads/2008/04/applestoreny014.jpg'
  rel='lightbox[id609]' title='Apple Store 5th Ave. Manhattan N.Y. Entrance'>
  <img src="https://y2tech.net/blog/wp-content/uploads/2008/04/applestoreny01-150x150.jpg"
   width="150" height="150" class="attachment-thumbnail" />
</a>

尚、wp_get_attachment_link() の内部では、wp_get_attachment_image() を呼び出して、画像のアップロード先のURLを得ています．

---

修正手順

まず、上記の3つのPHP関数を “functions.php” ファイルにコピーします．

次にこれらの3つの関数の名前を my_gallery_shortcode(), my_wp_get_attachment_link(), my_wp_get_attachment_image() のように変更します．

自分の欲しい機能を実現するために必要なコードの変更や追加を行います．

最後に、 “functions.php” の中に、次の1行を書き加えて下さい．

    add_shortcode( 'mygallery',  'my_gallery_shortcode' );

この add_shortcode() 関数の呼び出しによってショートコードをWordpressに登録しています．

“［mygallery］” というテキストが記事中に現れると、その部分を 自作のPHP関数 my_gallery_shortcode() が返す XHTMLコードの文字列に置き換えます．

オリジナルのコードには全く手を付けていませんので、”［gallery］” というショートコードテキストがそのまま有効です．
【　ショートコードに関するAPIのドキュメントは “The Shortcode API” を参照下さい．】
my_gallery_shortcode() の中に、CSSコードを吐き出す部分がありますので、この部分を修正すれば、ギャラリーの見てくれを簡単に変えることができますね．
　”functions.php” の中身は次のようになります．

add_shortcode('mygallery', 'my_gallery_shortcode');

function my_gallery_shortcode($attr) {

	global $post;

	// Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;



【途中省略】


	return $output;
}

// get an attachment page link using an image or icon if possible
function my_wp_get_attachment_link($id = 0, $size = 'thumbnail', $permalink = false, $icon = false) {
	$_post = & get_post( intval($id) );



【途中省略】

}

function my_wp_get_attachment_image($attachment_id, $size='full', $icon = false) {



【途中省略】

}

---

ギャラリーの表示方法を Lightbbox 2.0 による表示へ変更した例

“［mygallery columns=”4″ id=”608″ ］”
【 id=”608″ は前の記事で使ったギャラリーをそのまま利用している 】
[mygallery columns=”4″ id=”608″ display=”lightbox” ]

---

以上、『ギャラリー』の機能拡張方法を簡単に説明しましたが、現状ではその記事に関連する画像データが全て表示されてしまいますので、ちょっと困りものですね．

一つの記事の中でも複数のギャラリーを持たせたい場合には、ギャラリーをグループ化するなどの対策が必要になりますね．アップロードの際に記事のpost ID 以外に グループID のようなものをデータベースに登録するなどの措置が必要になるので、かなり大がかりな改造になってしまいそうです．

---

【追記： 2/05 2011 】ギャラリーのカスタマイズについての補足

この記事を書いたのはWordpress 2.5 が出た直後のことで、現在のギャラリーショートコードの内容とは異なっているかもしれません．暫くWordpressのコードを覗いていないので最近のWordpressがどのようになっているのか掌握していません．

WEBプログラミングに覚えの有る方は最新のWordpressコードを覗いて是非とも自分でカスタムギャラリーを作成してみて下さい．WEBプログラミングはあまり得意ではないという方は、
『使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法』by Web Design RECIPIES
の記事を参考にするのが良いかもしれません．WordpressのTIPSなども豊富に載っているようなので、Wordpressを使いこなしたい人にはお勧めのサイトです．