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', "{$template_url}/js/jquery.pikachoose.js", array('jquery') ); } jQueryプラグインが読み込めたら、jQueryで機能を起動してやればOK。起動方法やギャラリーのスタイルシートは、それぞれのjQueryプラグインに従ってくださいね。
jQuery(document).ready(function($){ $(".gallery-list").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' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => 'li', 'icontag' => '', 'captiontag' => 'span', 'columns' => 3, 'size' => 'large', 'include' => '', 'exclude' => '' ), $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 ) ) $gallery_style = "<!-- no style in default gallery. -->"; $size_class = sanitize_html_class( $size ); $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'><ul class='gallery-list'>\n"; $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div ); $i = 0; foreach ( $attachments as $id => $attachment ) { $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); $output .= "<{$itemtag} class='gallery-item'>"; if ( '' == $icontag ) { $output .= $link; } else { $output .= " <{$icontag} class='gallery-icon'> $link </{$icontag}>"; } if ( $captiontag && trim($attachment->post_excerpt) ) { $output .= " <{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>"; } $output .= "</{$itemtag}>\n"; } $output .= "</ul></div>\n"; return $output; } add_filter('post_gallery', 'my_gallery_shortcode', 10, 2); このカスタマイズ、当初はremove_shortcodeでショートコードを殺してしまってから再定義しようとしていたのですが、コアのソースを見ていたらこんなところにもフィルターフックがあったんですね。kzさんがフォーラムにも書いていました。フィルターフックは分かりにくいっす。
