5
08
2008
GalleriaをWordPressに組み込む（その２）
Galleria を WordPress に組み込む
Galleria をWordPress に組み込む準備ができたところで、Galleriaのサンプルコードを参考にして自分専用のカスタムギャラリーを作成してみましょう．基本的な作り方は前の記事（WordPressギャラリーのグループ化、WordPress カスタムギャラリーの参考コード）を参考にしていただくとして、今回はプラグイン形式で作成してみようと思います．
プラグインを作成する手順はそれほど難しくはありませんが、いきなりプラグイン用のコードを書き始める前に、前と同じように 自分のテーマディレクトリの中の “functions.php” でコードをテストして、有る程度動作するようになってから、プラグイン形式に変更する方が良いでしょう．
基本方針
基本的なギャラリーの設計方針は前回のサンプルコード記事の場合と同じですが、今回は galleria 専用とするので、display=”lightbox” のような画像表示ユーティリティーの切り替えは無しにします．オプションとして自動スライドショーの Play ボタンを付け加えます．また、ユーザがギャラリーの表示スタイルを変更できるように、予め用意したスタイルを自由に指定できるようにします．ユーザの環境が必ずしも Javascript に対応しているとは限らないので、必要最低限の画像表示はできるようにしましょう．
それでは、実際にコードを書いてみましょう．
まず、ショートコードカスタムギャラリーの名前を決めます．今回は “galleria” という名前にします．オプションはとりあえず次の12個にします．後で必要に応じて簡単に増やしたり、減らしたりできますので、ここは気楽に行きましょう．
function galleria_shortcode( $attr ) {
global $post;
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( !$attr['orderby'] )
unset( $attr['orderby'] );
}
extract( shortcode_atts( array(
'orderby' => 'menu_order ASC, ID ASC',
'id' => $post->ID,
'size' => 'thumbnail',
'gid' => '',
'cssclass' => 'galleria_std',
'bgs' => '',
'thumbs' => '',
'caps1' => '',
'caps2' => '',
'exif' => 0,
'playbutton' => 0,
'interval' => 5.0,
), $attr ) );
簡単にオプションの変数を説明しておきます．’orderby’, ‘id’ , ‘size’ の３つは標準のギャラリー ［gallery］のオプションと同じです．gid はグルーピングオプションです．gidの指定方法は前の記事を参考にして下さい．
‘cssclass’ はユーザが自分でスタイルシートに記述されているクラスを選ぶことで、予め用意してあるスタイルに従ってギャラリーを表示することができるようにするためのものです．WordPressのテーマファイル用のスタイルシート “style.css” や “galleria” 用のスタイルシート “galleria.css” などに予め自分の好みのスタイルを作成しておきます．サンプルとして、 “galleria.css” に 標準 “galleria_std” と ブラックバージョン “galleria_black” の２つのクラスを用意しておきました．
スタイルシートと吐き出すXHTMLタグをプログラム中でコントロールすることで、かなり自由なギャラリーのレイアウトを構築可能ですが、今回はシンプルに デモサンプルの “demo_01.htm” のレイアウト（サムネイルと画像ステージの関係は逆ですが）をたたき台にします．
‘bgs’, ‘thumbs’, ‘caps1’, ‘caps2’ はそれぞれ背景と、サムネイル画像のリストアイテム、キャプションのテキストのスタイルを指定するためのものです．このオプションで追加指定したスタイルは、スタイルシートに指定してあるスタイルよりも後方の位置に挿入されるため、デフォルトのスタイルをオーバライドすることができます．使いこなすにはスタイルシートの知識が必要になりますので、WEB関係の人でないと少し難しいかもしれませんが慣れればかなり自由にデザインをカスタマイズできます．
‘exif’ はJPEG画像に含まれている EXIF メタタグの内容の一部を表示するためのオプションです．撮影日時と絞り．露出時間（シャッタースピード）、カメラモデルがデフォルトで表示されます．他のEXIFメタ情報を表示する場合は、ソースコードを変更して下さい．
‘playbutton’ は自動再生スライドショーのプレイボタンを表示するためのオプションです．デフォルトでは Play ボタンは表示されません．’interval’ はスライドショーの表示間隔（単位は秒）を指定します．指定しない場合はデフォルトの 5.0 秒が適用されます．
細かなソースコードの説明はとてもできませんので、ここでは galleria 特有のコード部分を見ていくことにします．関数 prepareGalleriaScript() が、galleria ライブラリ（”jquery.galleria.js”）に対して基本的な動作の設定を行っている部分です．
サンプルデモではヘッダ部にこのスクリプトが書かれていますが、ショートコードのオプション情報を Javascript 側え渡すため、敢えて本体<body> 部分にこの Javascript コードを置くようにしています．
jQuery を使って書かれているので、一見すると通常の Javascript のようではありませんが、あくまでも Javascript ですので安心して下さい．サンプルコードの内容から拡張してある部分は、Javascript が無効な場合にはナビゲーション用のリンクや スライドショーのプレイボタンを表示しないようにしてある事と、自動スライドショーを制御するタイマールーチン、キーボードナビゲーション（Escキーで再生ストップ）用のイベントハンドラーです．
尚、ファイルの最後の方にある、_(アンダースコア）で始まる３つの関数はWordPressのバグ（以前のバージョンで作成したサムネイル画像の情報を正しく取得できない）を回避するために用意した置き換え用の関数ですので、今回のプラグインとは直接関係有りません．WordPress 本体のバグが修正されるまで、とりあえずそのままファイルに入れておいて下さい．
function prepareGalleriaScript( $classString,
$playbutton = 0,
$interval = 5.0 ) {
$intervalMilliSec = (int) ($interval * 1000);
$output = "";
$output .= apply_filters( 'gallery_style',
"<script type='text/javascript'>
var timerID;
jQuery('ul.$classString').galleria( {
history : false,
clickNext : true,
insert : '#main_stage',
onImage : function( image, caption1, caption2, thumb ) {
image.css('display','none').fadeIn(1000);
caption1.css('display','none').fadeIn(100);
caption2.css('display','none').fadeIn(100);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.5);
thumb.fadeTo('fast',1).addClass('selected');
image.attr('title','Click to Show Next image >>');
},
onThumb : function( thumb ) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.5';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.5); }
)
}
});
// show navigation items
jQuery('div.$classString p.galleria_nav').css('display', 'block' );
//
if ( $playbutton == 1 ) {
jQuery('button.play').css('display', 'block' );
// automatic navigation
jQuery('button.play').click( function() {
if ( jQuery(this).text() == 'Play' ) {
jQuery(this).text('Stop');
timerID =setInterval( 'jQuery.galleria.next();', $intervalMilliSec );
} else {
clearInterval( timerID );
jQuery(this).text('Play');
}
} );
} else {
// hide the play button
jQuery('button.play').css('display', 'none' );
}
// add keybord navigation [ May 04th 2008 by Y2 ]
jQuery(document).keydown( function (e) {
// if ( e.which == 39 ) {
// // press [ Right Arrow ] key
// jQuery.galleria.next();
// } else if ( e.which == 37 ) {
// // press [ Left Arrow ] key
// jQuery.galleria.prev();
// }
if ( e.which == 27 && ($playbutton == 1) ) { // Escape Key
if ( jQuery('button.play').text() == 'Stop' ) {
clearInterval( timerID );
jQuery('button.play').text('Play');
}
}
});
</script>\n");
return $output;
}
プラグイン化の方法
admin 画面のダイアログで動作や設定を管理するようなプラグインを作るのは結構面倒なようですが、今回のように単純にプラグインの機能をON/OFF するだけのプラグインは簡単に作成可能です．
プラグイン化のために用意するのは、ファイルの先頭にプラグイン用の専用コメント（様式が決まっている）を記述する事と、プラグインで使用するスタイルシートや Javascript などのソースコードをヘッダ部に取り込むための専用フックを用意するだけです．
今回のプラグインでは、スタイルシートとして “galleria.css” を、galleria 本体 “jquery.galleria.js”, jQuery ライブラリ “jquery.min.js” の３つのファイルです．ヘッダー部に直接書いても良いのですが、この方法ではプラグインの ON/OFF とは関係なく、常時取り込まれてしまいますので、このような指定方法は行わない方が良いでしょう．代わりに、プラグイン専用のフックを書くことで、プラグインの ON/OFF に連動して、ヘッダ部分にプラグイン用のリソースファイルを取り込んでくれます．
<?php /* Plugin Name: Galleria WP Plugin URI: https://y2tech.net/samples/wordpress/plugins/galleria-wp Description: A simple image gallery for WordPress2.5 using galleria 1.0 image gallery. Galleria <a href="http://devkick.com/lab/galleria/> DEVKICK </a> jQuery <a href="http://jquery.com/> jQuery </a> Author: Y2 Author URI: https://y2tech.net/ Version: 1.0.0 */
プラグイン専用のコメントをファイルの先頭に記述する
ファイルのプラグインコメントの後であれば場所はどこでも良いのですが、コメントの後に書くのが良いでしょう．次のコードをソースコードに書き加えて下さい．ソースコードのファイル名は “galleria-wp.php” という名前にしました．
function galleria_wp_headers() {
$galleria_plugin_path =
get_option('siteurl')."/wp-content/plugins/galleria-wp";
$galleria_style_path = "<link rel=\"stylesheet\" type=\"text/css\"
href=\"$galleria_plugin_path/css/galleria.css\" media=\"screen\" />\n";
$galleria_script_path = "<script type='text/javascript'
src='$galleria_plugin_path/js/jquery.min.js'></script>\n";
$galleria_script_path .= "<script type='text/javascript'
src='$galleria_plugin_path/js/jquery.galleria.js'></script>\n";
echo "<!-- Galleria WP [ BEGIN ] --> \n";
echo $galleria_style_path;
echo $galleria_script_path;
echo "<!-- Galleria WP [ END ] --> \n";
}
add_action( 'wp_head', 'galleria_wp_headers');
プラグインフック用の関数を作成しWordPressにフックする
このプラグインのソースコードのHTMLは、galleria-wp.html に置いてあります．完全な形のソースコード（プラグインリソース）は
・galleria-wp.zip ZIP形式（約286KB）
・galleria-wp.tar.gz tar アーカイブ GNU zip圧縮（約283KB）
からダウンロードして下さい．
インストール方法： 通常のプラグインと同じく、 “/wp-content/plugins/” フォルダに galleria-wp を
フォルダごとコピーして、管理画面のプラグインで “Galleria WP” を ON にして下さい．
修正情報 V1.0.1 5/08 2008
最初のバージョンでは、アーカイブなどを表示した際に記事の本文をそのまま表示する設定になっていた場合に、複数の記事の galleria ギャラリーが表示されてしまう事がありました．
Galleria WP ではWordPressのコンテンツ領域に表示できるギャラリーは、１つだけですのでシングルポストかページ以外では表示しないように修正しました．
Internet Explorer でメインステージに表示された画像が、WordPress のコンテンツ表示領域をはみ出さないように、メインステージに IE用の CSS 設定を追加しました．（ * html で始まる行）
overflow: hidden; を設定（ファイル : “galleria.css”）
【 V1.0.2 5/09 2008 Opera で表示できなかった問題を解消しました． 】
修正情報 V1.0.3 5/09 2008
表示する画像の元サイズがステージの幅よりも大きな場合に、Crop（デフォルト：はみ出した部分は非表示）と、shrink （ステージの幅に収まるように自動的に縮小表示する）を選択できるようにした．
shrink=”1″ を指定すると自動縮小モードになる．
