waka8*stakes

〜馬絵+林檎+Wordpress〜

WordPressのギャラリーショートタグでJavaScriptモーダルウインドウ

はじめに…モーダルウインドウとは

簡単にいうとLightboxに代表される、最近のWebサイトでよく見るクリックしたら画像が「うにゅっ!」とでかくなったりするアレwのことです。

このサイトでは、一度投稿にアップしたイラストのサムネール画像を[gallery]を使って個別ページに一覧にしてギャラリーページを作ってます。クリックしたらjQuery.fancyboxという名前通りjQueryを使ったモーダルウインドウを演出するスクリプトで画像全体を表示するようにしてます。

ショートコードに属性をつける

本来はギャラリーを作ろうとしてページ作成と同時に並べたい画像をアップロードするのですが、私は既にアップ済の画像を並べたかったのでinclude属性を使う事にしました。そうすれば画像のIDを指定すればWordPressにアップロードされた画像ならどんな画像でも貼付ける事ができます。それを使ってギャラリーページを作ってます。

[gallery include="画像のID"]
<!-- 複数の画像を貼る時はコンマで区切る -->

include属性を指定しなかった場合は投稿作成時にアップロードした画像全てを並べます。

画像IDを知るには

管理画面の『メディアライブラリ』でメディア一覧を表示させ、メディアのタイトルにカーソルを合わせます。ステータスバーにhttp://WordPressのURL/wp-admin/media.php?attachment_id=xxx&action=editと表示される筈です。attachment_id=xxxの値が画像のIDになります。

画像だけを表示したい

しかしこの[gallery]タグ、そのままですと画像の個別頁(attachment.phpで生成されたページ)に飛ばされます。link属性で画像のみを表示する事ができます。

[gallery link="file"]
<!-- 初期値はpage -->

画像だけを表示する事ができました。fancyboxのclassを付けたいけど…そうするにはコアの部分を弄らなければならないのです。

[gallery]は/wp-includes/media.phpの745行目から876行目にて定義されてます。ソース長過ぎですw

code #1:media.phpに書かれてるもの

日本語は私がこの記事で付け加えたものです。

add_shortcode('gallery', 'gallery_shortcode'); /*ショートコードgalleryを定義*/

/**
 * The Gallery shortcode.
 *
 * This implements the functionality of the Gallery Shortcode for displaying
 * WordPress images on a post.
 *
 * @since 2.5.0
 *
 * @param array $attr Attributes attributed to the shortcode.
 * @return string HTML content to display gallery.
 */
function gallery_shortcode($attr) {
	global $post, $wp_locale;

	static $instance = 0;
	$instance++;

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

	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}
       
 /*galleryショートコードの基本設定*/
	extract(shortcode_atts(array(
		'order'      => 'ASC', /*並べる順序*/
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'dl', /*画像とキャプションを囲むタグ*/
		'icontag'    => 'dt', /*画像を囲むタグ*/
		'captiontag' => 'dd', /*キャプションを囲むタグ*/
		'columns'    => 3, /*カラム数(横に並べたい数)*/
		'size'       => 'thumbnail', /*並べる画像のサイズ:medium(中),large(大),fullも設定出来る*/
		'include'    => '', /*表示したい画像のアタッチメントID*/
		'exclude'    => '', /*表示したくない画像のアタッチメントID*/
	), $attr));

	$id = intval($id);
	if ( 'RAND' == $order )
		$orderby = 'none';

	if ( !empty($include) ) {
		$include = preg_replace( '/[^0-9,]+/', '', $include );
		$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( !empty($exclude) ) {
		$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
		$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	} else {
		$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	}

	if ( empty($attachments) )
		return '';

	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id => $attachment )
			$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
		return $output;
	}

	$itemtag = tag_escape($itemtag);
	$captiontag = tag_escape($captiontag);
	$columns = intval($columns);
	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
	$float = is_rtl() ? 'right' : 'left';

	$selector = "gallery-{$instance}";

	$gallery_style = $gallery_div = '';
	if ( apply_filters( 'use_default_gallery_style', true ) )
              
 /*ページに以下のCSSが直接出力されてしまうのでCSSを頑張って書いても無視されてしまう。functions.phpでこれを取り除くコードを書けば思いのままにスタイルできる。*/
		$gallery_style = "
		
		";
	$size_class = sanitize_html_class( $size );
	$gallery_div = "\n";

	return $output;
}

しかしここを弄ると本体のアップグレードをした時に消えてしまいます。そういう時にはテーマディレクトリのfunctions.phpで設定する事ができます。functions.phpに上記のソースをまずコピペします。

code #2:link=”file”で出力されるリンクの設定

ショートタグでlink="file"を指定した時に出力されるリンク。属性もなくページ移動して画像のみ表示される。

$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

の後に

code #3:リンクに属性を付けて出力

$link = str_replace ('<a ','<a class="指定しているクラス" rel="指定しているrelの値" ',$link);

と記述し、classやrelなど属性入りのコードを吐き出すようにします。media.phpからコピペしてきたコードの必要箇所を書き換えたら、ギャラリーのCSSを無効にするために以下をfunctions.phpに書きます。

/*[gallery]タグで出力されるCSSを削除*/
function remove_gallery_css() {
  return "
%", "", $output); /* br clear を削除 */ $output = preg_replace("%
%", "", $output); return $output; } add_filter('the_content', 'fix_gallery_output',11, 1);

そして書き換えたcode #1の先頭の

add_shortcode('gallery', 'gallery_shortcode');

をさらに、以下に書き換えます。

/*デフォルトのgalleryショートコード関数を削除*/
remove_shortcode('gallery', 'gallery_shortcode');
/* 新しいgalleryショートコード関数を定義 */
add_shortcode('gallery','my_gallery_shortcode');

長くなりましたが私はこれで[gallery link="file" include="n"]でfancyboxが適用できました!

お世話になった記事
Webデザインレシピ様の
使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法
[gallery]をもっと知りたい弄りたい方におすすめです。

どうせ趣味のブログだしPHP弄るのマンドクセ(‘A`)っていう時にはLightbox Gallery Plugin(作者サイト)等のプラグインを使えば[gallery]のソースコードを知らなくても簡単にカッコいいギャラリーが出来ます。私はjQuery.fancyboxが使いたかったんで頑張っていぢいぢしてみました。