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

Posted under - WordPress

100

WordPress のギャラリー機能使っていますか? 使いにくい WordPress のギャラリーをちょっと使えるようにするカスタマイズです。 ものすごく長くなってしまいました ... できるだけ簡単にまとめてみたので興味があるひとはぜひ読んでみてくださいね!

ギャラリーの中の写真は、Tumblr で流れてた写真です。via webdesignrecipes.tumblr.com

Webサイトで写真を一覧表示したいときに、よく使われているギャラリー。WordPress のテーマにも、Webサイト全体をギャラリーみたくするものも、数多くありますよね!でも普段はブログや一般的な Webサイトとして使っていて、その中の数ページをギャラリーページとして使いたい … ってこともあると思います。

私の場合、ギャラリーを jQuery のプラグインと組み合わせて作成する事が多いので、WordPress のギャラリー系のプラグインは使ってません(おすすめのギャラリー系、画像管理系のプラグインがあったら教えて欲しいです)。

また、個人的な Webサイトの時は、テーマの中にそのまま <img> タグを書いて、画像を出力しちゃえばいいのですが、クライアントさんに納品する場合は、画像の追加などが簡単にできないと困ります …。

今回は管理画面から簡単に画像の追加ができて、jQuery などのプラグインでも使えるギャラリーをご紹介します!

WordPress ギャラリー 目次

  1. 実は WordPress のデフォルトのギャラリーを使ってます
  2. WordPress のデフォルトギャラリーの使い方
  3. WordPressのデフォルトのギャラリーの困ったところ
  4. ショートコードのパラメータ
  5. 画像のリンク先について
  6. リストで出力させたり、スタイルシートを変更する
  7. jQuery のプラグインと組み合わせたりいろいろできます
  8. 追記:WordPress で Gallerific を使う方法

1. 実は WordPress のデフォルトのギャラリーを使ってます

WordPress には、Ver2.5 以降から、デフォルトでギャラリー機能がついています。デフォルトのギャラリー機能は、記事やページごとにギャラリーを作れるし、画像の表示順序、タイトルやキャプション、説明まで書けるので、機能的には申し分ありません。でも実際は、デフォルトのままだとなかなかカスタマイズしにくいギャラリーだったりします。

デフォルトのギャラリーの使いにくい部分を改良して、使い易くする前に、ギャラリー機能をまだ知らないよーという人のために簡単にご紹介しますね。

2. WordPress のデフォルトギャラリーの使い方

ギャラリーの作り方はとっても簡単です。投稿画面のいつも画像をアップロードしているボタン、アップロード/挿入 を押して画像をアップロードします。

アップロード/挿入

「アップロード/挿入」ボタンを押します。

また、画像のアップロードは一枚ずつじゃなくても、一度にできるので、ギャラリー作りも効率的!

WordPress 3.2 からは、ドラッグするだけでアップロードできるようになりました!

画像をアップロードすると、メディアを追加画面に、ギャラリーというタブが出現します。

画像一枚一枚には、タイトルキャプション説明を加える事もできます。この画面は見慣れてますよね!

タイトルなどを一通り書き終わったら、ギャラリー設定をチェックして、ギャラリーを挿入ボタンを押せば OK です。または投稿画面に、直接[ gallery](半角スペースは削除してくださいね。)とショートコードを書くこともできます。

リンク先のチェックを忘れずに!

3. WordPressのデフォルトのギャラリーの困ったところ

簡単に作れるWordPressのデフォルトのギャラリーですが、このままだといろいろ困った?ことがあります。どこが困るかと言うと …

  1. 投稿内に、<style> タグが挿入されて、勝手に指定されてしまう。
  2. そのスタイルは、左フロートだったり、画像の回りのグレーのボーダーだったりする。
  3. HTML に直接書かれるので、外部スタイルシートよりこっちが優先されちゃう …。
  4. <dl> タグで出力されちゃう…
  5. パラメータで <li> タグを渡すと、<ul> タグがない…。

こんな風な事情で、デフォルトのギャラリーは下記のように表示されます。困るのは、 HTML にスタイルを直接書かれてしまうので、外部スタイルシートでいくらスタイルを指定してもこっちが優先されてしまうこと。

WordPress のデフォルトギャラリー

キャプションがセンター揃えになっていたり、画像には 2px のグレーのボーターが引かれる …。

Gallery SAMPLE

また、デフォルトでは、画像を <dl> タグで囲んでいます。[ gallery itemtag="div"] などのようにすれば、タグを入れ替えることもできるのですが、<li> タグを指定しても、<ul> タグが付かないのは前述した通りです。

そして最後に、<br style="clear: both" /> というおまけまで付いてきてしまいます。jQuery のプラグインなどと組み合わせて、いろいろデザインをカスタマイズするのには、ちょっと困ってしまいます。

なので自分の使いやすいように、ギャラリー機能をカスタマイズしてみましょう!… でもその前に、デフォルトギャラリーの振る舞いを、もう少しだけチェックしておきます。

4. ショートコードのパラメータ

デフォルトのギャラリーは、[ gallery] というショートコードの中に、いろいろパラメータを記述すれば、いろんな細かい設定をすることができます。

4.1. size

  • 1. [ gallery size="medium"]

ギャラリーとして表示するサムネイル画像のサイズを指定します。指定できる値は “thumbnail”, “medium”, “large”, “full” です。初期値は “thumbnail” です。”thumbnail(サムネイルのサイズ)”, “medium(中サイズ)”, “large(大サイズ)” の画像サイズは管理画面の 設定 > メディア で指定できます。例えば、”medium(中サイズ)” の画像ギャラリーを表示するなら以下のように指定します。

実際のサイズ(ピクセル)は、管理画面 → 設定 → メディア で設定したサイズになります(アップロード時点での設定)。

4.2. order

  • 1. [ gallery order="DESC"]

画像の表示順序を指定します。初期値は “ASC” です。

これは昇順か降順かを指定するパラメータ。ASC が昇順、DESC が降順です。

4.3. orderby

  • 1. [ gallery order="DESC" orderby="ID"]

画像の表示順序のキーとなる項目を指定します。スペース区切りで複数指定できます。初期値は “menu_order ID” です。”RAND” (ランダム)も指定できますが、その場合、order の指定は無視されます。

“menu_order ID” のときには、ここで表示する順番を入力することもできます!

4.4. itemtag

  • 1. [ gallery itemtag="div"]

ギャラリーの各項目(画像とキャプション)を囲む XHTML タグの名前を指定します。初期値は “dl” です。

4.5. icontag

  • 1. [ gallery itemtag="div" icontag="p"]

ギャラリーの各画像を囲む XHTML タグを指定します。初期値は “dt” です。

4.6. captiontag

  • 1. [ gallery itemtag="div" icontag="p" captiontag="p"]

各キャプションを囲む XHTML タグを指定します。初期値は “dd” です。

4.7. link

[ gallery link="file"]

“file” を指定すると、各画像は画像ファイルへリンクされます。初期値はメディアのパーマリンクへのリンクです。

画像のリンク先は、画像ファイルの他、別ページ(テンプレートファイル)を指定することができます。あとでちょっと説明しますね!

4.8. include

  • 1. [ gallery include="23,39,45"]

表示したい添付画像の ID をコンマで区切って指定します。[ gallery include=”23,39,45″] と指定すると、指定した ID の画像のみ表示されます。

4.9. exclude

  • 1. [ gallery exclude="21,32,43"]

表示したくない添付画像の ID をコンマで区切って指定します。[ gallery exclude=”21,32,43″] と指定すると、指定した ID の画像は表示されません。

include と exclude は同時に指定しないでください。同時に指定した場合は include が優先されます。

画像 ID は、メディア → ライブラリ から、各画像へ移動すると、URL の末尾に &attachment_id=3595 のようにパラメータがついています。この番号が ID となります!


5. 画像のリンク先について

ショートコード内のパラメータ link で、画像のリンク先を指定できると書きました。もう少し詳しく見ていきましょう。

5.1. link=”file”

こうすると、元画像へのリンクが貼られます。jQuery の lightbox 系のプラグインと組み合わせれば、下記のように表示させる事もできますね!

LightBox系のプラグインとの組み合わせ

リンク先をオリジナル画像にして、jQuery のプラグインと組合わせてみました。

5.2. link=”page”(デフォルト)

デフォルトでは、リンクはページに貼られます。このページというのは、下の順番でテンプレートファイルが自動的に選択されて表示される、attachment(アタッチメント)ページのこと。

  1. MIME_TYPE.php – image.php、video.php、audio.php、application.php、その他 MIME type の最初の部分のファイル名
  2. attachment.php
  3. single.php
  4. index.php

最優先されるのは、image.php などの MIME_TYPE.php です。MIME_TYPE.php がなければ、attachment.php、それもなければ single.php という順番で、WordPress は自動でテンプレートファイルを探しにいきます。

なかなか MIME_TYPE.php、attachment.php まで揃ってるテーマはないと思う(最近は増えてきましたね!)ので、その場合は single.php で表示されます。表示されるページでは、ファイルのタイトルがページのタイトルになります。下記は single.php で表示された状態です。

single.php での表示

画像が一枚、single.php で表示された状態です。画像の説明も表示されます。

でも、ここでも問題が…。ここで表示される画像のサイズは、フルサイズで表示されないんです。メディアの設定で設定してある、中サイズが摘要されてしまします。

フルサイズや大サイズで表示したい場合は、single.php の the_content() を以下のように書き換えれば、他のサイズで表示されるようになります。

single.php
<?php if(is_attachment()): ?>
	<?php if (wp_attachment_is_image($post->id)) : ?>
	<?php $att_image = wp_get_attachment_image_src( $post->id, "full-size"); ?>
<p class="attachment">
<img src="<?php echo $att_image&#91;0&#93;;?>" width="<?php echo $att_image&#91;1&#93;;?>" height="<?php echo $att_image&#91;2&#93;;?>" class="attachment-full-size" alt="<?php $post->post_excerpt; ?>" />
</p>
	<?php else: ?>
  	<?php the_content(); ?>
  	<?php endif; ?>
<?php else: ?>
	<?php the_content(); ?>
<?php endif; ?>

条件分岐タグ、is_attachment()(添付ファイルが表示されている場合)を使って、画像ファイルが表示されている時は、the_content() を使わずに、直接元画像を呼び出しています。

  • 3. $att_image = wp_get_attachment_image_src( $post->id, "full-size");

"full-size" の部分を "large" にすれば、大サイズで表示することができます!また、the_content() では、ファイルの説明を表示していましたが、タイトルやキャプションも表示することができます!

echo $post->post_excerpt;
キャプションを表示
echo $post->post_title;
タイトルを表示
echo $post->post_content;
説明を表示

普通のブログ記事と同じように、みんなからのコメントをもらう事もできるので、素敵なギャラリーができそうですね!でも、せっかくなので写真をキレイに見せるために、image.php や attachment.php を作って、画像専用のテンプレートを作った方がいいかもです。

私は以下のような感じで attachment.php を作ってみました。ちなみにギャラリー内で画像に追加できる説明では、html タグが使えるので、リンクを貼ったりするのも OK です。

attachment.php を使って、大サイズでの表示

attachemnt.php を作り、大サイズで表示してみました。説明にはリンクも貼れます!

6. リストで出力させたり、スタイルシートを変更する

それではここからが本番です。デフォルトのままでは使えなかった、ulli 要素を使って出力するようにしてみます。それからスタイルシートも変更してみましょう。

ギャラリーを HTML として出力しているコードは、wp-includes → media.php にしまわれています。このコアファイルを変更してしまえばいいのですが、コアファイルをいじるのは厳禁です!なのでデフォルトのギャラリーのショートコードを削除して、新しいショートコードを登録する … という方法で、ギャラリーを出力するコードを変更します。

functions.php

/* デフォルトの gallery ショートコードを削除 */
remove_shortcode('gallery', 'gallery_shortcode');

/* 新しい gallery ショートコードを追加 */
add_shortcode('gallery', 'my_gallery_shortcode');

上記のように記述すると、もともとあった gallery というショートコードが削除されて、新しく my_gallery_shortcode という関数で定義されたショートコードが追加されます。my_gallery_shortcode は、もともとある gallery_shortcode という関数の代わりになるものです。この関数の中で、ulli 要素を出力するように変更すれば OK ですね!

それでは my_gallery_shortcode という関数を、functions.php 内に記述していきましょう。

my_gallery_shortcode
function custom_gallery_shortcode($attr) {
	global $post;

	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'] );
	}

	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'li',
		'icontag'    => 'p',
		'captiontag' => 'p',
		'columns'    => 3,
		'size'       => 'thumbnail',
		'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 = "
		<style type='text/css'>
			#{$selector} {
				/* style */
			}
			#{$selector} ul{
				/* style */
			}
			
			#{$selector} .gallery-item {
				/* style */
			}
			#{$selector} .gallery-icon{
				/* style */
			}
			#{$selector} img {
				/* style */
			}
		</style>
		<!-- see gallery_shortcode() in wp-includes/media.php -->";
	$size_class = sanitize_html_class( $size );
	$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'><ul class='clearfix'>";
	$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);
		$link=str_replace('<a ','<a class="fancybox" rel="group" ', $link);
		$output .= "<{$itemtag} class='gallery-item'>";
		$output .= "
			<{$icontag} class='gallery-icon'>
				$link
			</{$icontag}>";
		
		if ( $captiontag && trim($attachment->post_title) ) {
			$output .= "
				<{$captiontag} class='wp-title-text gallery-title'>
				" . wptexturize($attachment->post_title) . "
				</{$captiontag}>";
		}
		
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='wp-caption-text gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				</{$captiontag}>";
		}
		$output .= "</{$itemtag}>";
	}

	$output .= "
		</ul></div>\n";

	return $output;
}

このコードは、WordPress 3.3.1 の gallery_shortcode 関数を元にして、少しいじった程度です。何をしたのかは、以下にまとめました。

  • 23. 'itemtag' => 'li',dlli に変更
  • 24. 'icontag' => 'p',dtp に変更
  • 25. 'captiontag' => 'p',ddp に変更

ここまでは、デフォルトで設定されている dl 要素を li 要素や p に変更しただけです。

70 行目 ~ 90 行目までがスタイルシートに関する記述ですね。この中を変更するか、丸ごと削除しても構いません。その場合は、別途外部スタイルシートでスタイリングしてあげます。

  • 92. $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'><ul class='clearfix'>";
    末尾に <ul> タグを追加

92 行目で、<ul> タグ(開始タグ)を追加しています。そして 98 行目は、画像を囲む <a> 要素に、クラスをつけたりしています。この行はもともとありませんので、追加した行です。

また、105 行目 ~ 110 行目は、画像のタイトルを表示するコードです。これも追加したものなので、必要なければ削除してください。

112 行目 ~ 117 行目 は、もともと記述されている、画像のキャプションを表示するコードです。

  • 112. </ul></div>\n";
    </ul> タグ(終了タグ)を追加しています。

最後に 112 行目で、</ul> タグ(終了タグ)を追加しています。オリジナルのコードは、下記リンク先の 762 行目で確認できます。

また、オリジナルコードの 871 行目では、設定したギャラリーのカラム数に応じて、<br style="clear:both;"> というタグを挿入するコードが記述されています。

  • 871. if ( $columns > 0 && ++$i % $columns == 0 )
    $output .= '<br style="clear:both;">';

これは丸ごと削除しています。<li> タグで出力する場合には、必要ないですものね!以下のリンク先は、カスタマイズした WordPress のギャラリーのデモです!

Custom Galley

7. jQueryのプラグインと組み合わせたりいろいろできます

ショートコードを貼るだけで、ギャラリーの画像をリストで表示できるようになりました。これなら jQuery のイメージギャラリー系のプラグインと組み合わせることだって、簡単にできますね!試しに jQuery のギャラリー系プラグイン、galleriffic と組み合わせてみました。

Galleriffic

WordPress のギャラリーと、Galleriffic を組み合わせたギャラリー

以下に WordPress のギャラリーで作ったデモがあります!

Galleriffic on WordPress


色んな jQuery のプラグインに合わせて、専用のギャラリーショートコードを作っておけば、 functions.php で使い回す事ができるのでとっても便利。でも、functions.php のコードが長くなってしまうのも、ちょっとイヤかも …。なので、ギャラリーを表示する single.php のときにだけ、必要なコードを読み込む … という方法がおすすめです。

gallery-functions.php などの好きなファイル名をつけて、functions.php とは別にファイルを作成します。そして single.php などで、以下のように読み込みます。

ex – single.php
<?php include( TEMPLATEPATH . '/gallery-functions.php' ); ?>

そんな訳で、私は今のところ WordPress のデフォルトギャラリーを使ってます。よく使う jQuery プラグインごとに、複数の gallery-functions.php を作って使い回してます。

ギャラリーの画像を追加したり変更するのも、管理ページから簡単にできちゃいます。これならクライアントさんでも何とかなるかなーと …。

随分と長い記事になってしまいましたが、最後まで読んでくれた方、ありがとうございます!そんな事しなくても、クライアントさんでも簡単に管理できる、使いやすいギャラリープラグインあるよーとかあったら、ぜひ教えてください!よろしくお願いします。

8. 追記:WordPress で Gallerific を使う方法

たくさん質問をいただいたので、前述した jQuery のプラグイン Gallerific を、WordPress で使う方法をご紹介します。

8.1. まずは Gallerific をダウンロード

まずは Gallerific から、プラグインのファイルをダウンロード。ダウンロードしたフォルダの中は、以下のようになっています。

Gallerificフォルダの中

サンプルの HTML ファイルが 5つ程ありますが、それぞれのデザインは、以下のリンクから見ることができます。

  1. Example 1:Minimal implementation
  2. Example 2:Thumbnail rollover effects and slideshow crossfades
  3. Example 3:Integration with history plugin
  4. Example 4:Insert and remove images after initialization
  5. Example 5:Alternate layout using custom previous/next page controls
  6. 今回はこの中から、Example 2 を使ってみます!当然上記の全てのファイルが必要となる訳ではないので、必要なものだけをサーバーにあげます。

    8.2. Example 2 で必要なファイル

    1. css フォルダの中の loader.gif
    2. css フォルダの中の galleriffic-2.css
    3. jsフォルダの中の jquery.galleriffic.js
    4. js フォルダの中の jquery.opacityrollover.js

    Example 2 で必要になるのは、上記の4つです。jQuery 自体は、WordPress にもともとインストールされているので必要ありません。

    8.3. 必要なファイルを読み込む

    今度は上記の CSS と Javascript ファイルを、WordPress のテーマで読み込みます!いろいろやり方はあるのですが、今回は functions.php を使ってみます!

    functions.php
    /* JS ファイルを読み込む */
    if(!is_admin()){
      function register_script(){
        /* jsファイルへのパスは、環境に合わせて変更してください */
        wp_register_script('galleriffic', get_bloginfo('template_directory').'/js/jquery.galleriffic.js', array('jquery'));
        wp_register_script('opacity', get_bloginfo('template_directory').'/js/jquery.opacityrollover.js');
      }
      function add_script(){
        register_script();
        if(is_page('gallery')){
          wp_enqueue_script('galleriffic');
          wp_enqueue_script('opacity');
        }
      }
      add_action('wp_print_scripts','add_script',10);
    }
    
    /* CSSファイルの読み込み */
    if(!is_admin()){
      function add_my_stylesheet() {
        /* css ファイルへのパスは、環境に合わせて変更してください */
        wp_register_style('galleriffic-css', get_bloginfo('template_directory') . '/css/galleriffic.css');
          if(is_page('gallery')){
            wp_enqueue_style( 'galleriffic-css');
          }
        }	
      add_action('wp_print_styles', 'add_my_stylesheet');
    }
    

    if(is_page('gallery'))は、gallery という固定ページの場合 … という条件分岐なので、環境に合わせて変更してくださいね!また、上記の方法は、header.php 内に wp_head() 関数を記述する必要がありますが、普通は記述されているはずなので、気にしなくてもいいかも …。

    functions.php ではなく、header.php で読み込む場合は、以下のように記述します!

    header.php
    <?php wp_enqueue_script ('galleriffic', get_bloginfo('template_directory').'/js/jquery.galleriffic.js', array('jquery')); ?>
    <?php wp_enqueue_script ('opacity', get_bloginfo('template_directory').'/js/jquery.opacityrollover.js'); ?>
    <?php wp_enqueue_style ('galleriffic-css', get_bloginfo('template_directory') . '/css/galleriffic.css'); ?>
    <?php wp_head(); ?>
    

    wp_head() より前に wp_enqueue_scriptwp_enqueue_style で、書くファイルを読み込みます!これで Galleriffic を使う準備ができました!次に WordPress の設定をしましょう!

    8.5. Galleriffic 用のショートコードを作ろう

    ギャラリーを出力する WordPress のショートコード [ gallery]。この記事の前半では、この機能をカスタマイズする方法を紹介しました。今回はこれを応用して、専用のショートコードを作ってしまいましょう!ちょっと長いですけど、functions.php に以下を追加します。

    functions.php
    /* galleriffic用ショートコード */
    add_shortcode('galleriffic', 'my_gallery_shortcode');
    
    function my_gallery_shortcode($attr) {
      global $post, $wp_locale;
      static $instpe = 0;
      $instpe++;
      // 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'] );
        }
      extract(shortcode_atts(array(
        'order'      => 'ASC',
        'orderby'    => 'menu_order ID',
        'id'         => $post->ID,
        'size'       => 'thumbnail',
        '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;
      }
      $columns = intval($columns);
      $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
      $float = is_rtl() ? 'right' : 'left';
      $selector = "gallery-{$instpe}";
      $output = apply_filters('gallery_style', "
    	<div id='gallery' class='content'> 
    		<div id='controls' class='controls'></div> 
    		<div class='slideshow-container'> 
    			<div id='loading' class='loader'></div> 
    			<div id='slideshow' class='slideshow'></div> 
    		</div> 
    		<div id='caption' class='caption-container'></div> 
    	</div> 
    	<div id='thumbs' class='navigation'> 
    		<ul class='thumbs noscript'> 
      ");
      $i = 0;
      foreach ( $attachments as $id => $attachment ) {
        $link =  wp_get_attachment_link($id, $size, false, false);
        $link=str_replace('<a ','<a class="thumb" ', $link);
        $output .= "<li class='gallery-item'>";
        $output .= $link;
        /* Title */
        $output .= "<div class='caption'>";
        if (trim($attachment->post_title) ) {
          $output .= "
            <div class='image-title'>
            " . wptexturize($attachment->post_title) . "
            </div>";
        }
        /* Caption */
        if (trim($attachment->post_excerpt) ) {
          $output .= "
            <div class='image-desc'>
            " . wptexturize($attachment->post_excerpt) . "
            </div>";
        }
        /* Content */
        if (trim($attachment->post_content) ) {
          $output .= "
            <div class='image-content'>
            " . wptexturize($attachment->post_content) . "
            </div>";
        }
        $output .= "</div></li>";
      }
      $output .= "</ul></div><div class='clear'></div>";
      return $output;
    }
    

    前述したコードを、Galleriffic 用に少し変更しただけです!これで投稿画面で、[ galleriffic ]と記述すれば、Galleriffic 用に整形された HTML が出力されます。

    8.6. ギャラリーに画像を追加しよう

    ちょっと前後してしまいましたが、ギャラリーに画像を追加するときの補足です。前述した Galleriffic 用のコード内では、以下の機能が使えます。

    画像アップロード画面

    タイトルやキャプション、説明も、記述すれば出力されるので、必要なら書き加えてくださいね!前述したソースコードの中、タイトルやキャプションは下記のように取得していますので、必要ならカスタマイズしてください。

    画像のタイトル
    $attachment -> post_title
    画像のキャプション
    $attachment -> post_excerpt
    画像の説明
    $attachment -> post_content

    8.7. Galleriffic 用のコードを記述しよう

    あとは <haed> 内や </body> タグ直前などに、Galleriffic 用のコードを記述するだけです。header.php や footer.php に書いてもいいし、前述したように外部ファイル化して functions.php から読み込ませても OK です!今回は header.php に記述してみましょう。

    headar.php
    <?php wp_head(); ?>
    <?php /* ギャラリーページ */ ?>
    <?php if(is_page('gallery')): ?>
    <script type="text/javascript"> 
    jQuery(function() {
    // We only want these styles applied when javascript is enabled
      jQuery('div.navigation').css({'width' : '300px', 'float' : 'left'});
      jQuery('div.content').css('display', 'block');
     
    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
      var onMouseOutOpacity = 0.67;
      jQuery('#thumbs ul.thumbs li').opacityrollover({
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
         exemptionSelector: '.selected'
      });
    				
    // Initialize Advanced Galleriffic Gallery
      var gallery = jQuery('#thumbs').galleriffic({
      delay:                     2500,
      numThumbs:                 15,
      preloadAhead:              10,
      enableTopPager:            true,
      enableBottomPager:         true,
      maxPagesToShow:            7,
      imageContainerSel:         '#slideshow',
      controlsContainerSel:      '#controls',
      captionContainerSel:       '#caption',
      loadingContainerSel:       '#loading',
      renderSSControls:          true,
      renderNavControls:         true,
      playLinkText:              'Play Slideshow',
      pauseLinkText:             'Pause Slideshow',
      prevLinkText:              '&lsaquo; Previous Photo',
      nextLinkText:              'Next Photo &rsaquo;',
      nextPageLinkText:          'Next &rsaquo;',
      prevPageLinkText:          '&lsaquo; Prev',
      enableHistory:             false,
      autoStart:                 true,
      syncTransitions:           true,
      defaultTransitionDuration: 900,
      onSlideChange:             
      function(prevIndex, nextIndex) {
      // 'this' refers to the gallery, which is an extension of $('#thumbs')
      this.find('ul.thumbs').children()
        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
        .eq(nextIndex).fadeTo('fast', 1.0);
      },
      onPageTransitionOut:       function(callback) {
        this.fadeTo('fast', 0.0, callback);
      },
      onPageTransitionIn:        function() {
      this.fadeTo('fast', 1.0);
      }
    });});
    </script>
    <?php endif; ?>
    

    プラグインのパラメータなどは、お好みで変更してください。気を付けるのは、wp_head() よりあとに、jQuery のコード記述すること。それから WordPress では、 $('div.content').css('display', 'block'); という風に、jQuery で $ を使うことが出来ません。なので、 jQuery('div.content').css('display', 'block'); というように、$ の代わりに jQuery と書きます。

    これで、WordPress のギャラリー機能を使って、Galleriffic をショートコードだけで使えるようになりました!

    今までの記事ではちょっと分かりにくかったですねー … 今度はサンプルも公開したので、ぜひ参考にしてみてくださいね!

    Galleriffic SAMPLE

Comments

Thank you for the comment.