Blog

WordPressのギャラリーをカスタマイズして好きなjQueryプラグインを使う

Posted by admin at 16:20 日時 2011/11/15

#

今回は、WordPressのデフォルトのギャラリー機能を上書きして、完全に自分好みに変えてしまう方法をご紹介します。Webデザインレシピさんの記事では、さらに詳しく紹介されていますので、ギャラリー機能って何?という方はまずはこちらを読むことをおすすめします。

» 使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法

では始めます。add_filter関数を使って、自分の作っているテーマのfunctions.phpでギャラリーのショートコードを上書きできます。

add_filter('post_gallery', 'my_gallery_shortcode', 10, 2);

WordPressのコアで定義されている、ギャラリーを出力する関数 gallery_shortcode() は、 wp-include/media.php に書かれていますので、まるごとfunctions.phpにコピペして関数名を my_gallery_shortcode() とします。このままだと関数が取る引数は$attrだけなのですが、以下のようにその前にひとつ引数を追加します。

function my_gallery_shortcode($output, $attr) {

さらに、関数内でフィルタフックを追加している部分を削除します。↓ココ

$output = apply_filters('post_gallery', '', $attr);  	if ( $output != '' )  		return $output;

以上で準備完了です。デフォルトのギャラリーの変えたい部分を変更していきます。たとえば、こんな感じでスタイルシートが直接書いてあるのですが、

$gallery_style = "  <style type='text/css'>  #{$selector} {  ...

テーマのCSSで定義したいので、消してしまいます。

$gallery_style = "<!-- no style in default gallery. -->";

それから、ulタグで囲みたいので、この部分を

$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";

こんな風に変えてulタグを追加しました(閉じる方も忘れずにね)

$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'><ul class='gallery-list'>\n";

オプションのicontagが空でも問題ないようにしました。

if ( '' == $icontag ) {  	$output .= $link;  } else {  	$output .= "  		<{$icontag} class='gallery-icon'>  			$link  		</{$icontag}>";  }

あと、ジャマな <br style=”clear: both;” /> を削除しました。

以上でギャラリーのマークアップの調整が終わりました。次に、使いたいjQueryプラグインに対応させます。今回はPikaChooseというプラグインを使いました。functions.phpに以下のようにコードを追加して、テーマのjsフォルダに置いた jquery.pikachoose.js を読み込ませています。

if ( !is_admin() ) {  $template_url = get_stylesheet_directory_uri();  wp_enqueue_script( 'pikachoose', &quot;{$template_url}/js/jquery.pikachoose.js&quot;, array('jquery') );  }

jQueryプラグインが読み込めたら、jQueryで機能を起動してやればOK。起動方法やギャラリーのスタイルシートは、それぞれのjQueryプラグインに従ってくださいね。

jQuery(document).ready(function($){  $(&quot;.gallery-list&quot;).PikaChoose();  });

最後に、functions.phpに追加した関数の全文を載せておきます。 shortcode_atts() で、デフォルト値も調整しています。

/* redesign gallery style. originally in wp-includes/media.php */  function my_gallery_shortcode($output, $attr) {  	global $post, $wp_locale;    	static $instance = 0;  	$instance++;    	// 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'] );  	}    	extract(shortcode_atts(array(  		'order'      =&gt; 'ASC',  		'orderby'    =&gt; 'menu_order ID',  		'id'         =&gt; $post-&gt;ID,  		'itemtag'    =&gt; 'li',  		'icontag'    =&gt; '',  		'captiontag' =&gt; 'span',  		'columns'    =&gt; 3,  		'size'       =&gt; 'large',  		'include'    =&gt; '',  		'exclude'    =&gt; ''  	), $attr));    	$id = intval($id);  	if ( 'RAND' == $order )  		$orderby = 'none';    	if ( !empty($include) ) {  		$include = preg_replace( '/[^0-9,]+/', '', $include );  		$_attachments = get_posts( array('include' =&gt; $include, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );    		$attachments = array();  		foreach ( $_attachments as $key =&gt; $val ) {  			$attachments[$val-&gt;ID] = $_attachments[$key];  		}  	} elseif ( !empty($exclude) ) {  		$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );  		$attachments = get_children( array('post_parent' =&gt; $id, 'exclude' =&gt; $exclude, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );  	} else {  		$attachments = get_children( array('post_parent' =&gt; $id, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );  	}    	if ( empty($attachments) )  		return '';    	if ( is_feed() ) {  		$output = &quot;\n&quot;;  		foreach ( $attachments as $att_id =&gt; $attachment )  			$output .= wp_get_attachment_link($att_id, $size, true) . &quot;\n&quot;;  		return $output;  	}    	$itemtag = tag_escape($itemtag);  	$captiontag = tag_escape($captiontag);  	$columns = intval($columns);  	$itemwidth = $columns &gt; 0 ? floor(100/$columns) : 100;  	$float = is_rtl() ? 'right' : 'left';    	$selector = &quot;gallery-{$instance}&quot;;    	$gallery_style = $gallery_div = '';  	if ( apply_filters( 'use_default_gallery_style', true ) )  		$gallery_style = &quot;&lt;!-- no style in default gallery. --&gt;&quot;;  	$size_class = sanitize_html_class( $size );  	$gallery_div = &quot;&lt;div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'&gt;&lt;ul class='gallery-list'&gt;\n&quot;;  	$output = apply_filters( 'gallery_style', $gallery_style . &quot;\n\t\t&quot; . $gallery_div );    	$i = 0;  	foreach ( $attachments as $id =&gt; $attachment ) {  		$link = isset($attr['link']) &amp;&amp; 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);    		$output .= &quot;&lt;{$itemtag} class='gallery-item'&gt;&quot;;  		if ( '' == $icontag ) {  			$output .= $link;  		} else {  			$output .= &quot;  				&lt;{$icontag} class='gallery-icon'&gt;  					$link  				&lt;/{$icontag}&gt;&quot;;  		}  		if ( $captiontag &amp;&amp; trim($attachment-&gt;post_excerpt) ) {  			$output .= &quot;  				&lt;{$captiontag} class='wp-caption-text gallery-caption'&gt;  				&quot; . wptexturize($attachment-&gt;post_excerpt) . &quot;  				&lt;/{$captiontag}&gt;&quot;;  		}  		$output .= &quot;&lt;/{$itemtag}&gt;\n&quot;;  	}    	$output .= &quot;&lt;/ul&gt;&lt;/div&gt;\n&quot;;    	return $output;  }  add_filter('post_gallery', 'my_gallery_shortcode', 10, 2);

このカスタマイズ、当初はremove_shortcodeでショートコードを殺してしまってから再定義しようとしていたのですが、コアのソースを見ていたらこんなところにもフィルターフックがあったんですね。kzさんがフォーラムにも書いていました。フィルターフックは分かりにくいっす。


Share this entry