ギャラリーページ製造メモ

WordPressに変更するにあたって、一番悩んだのがギャラリーページの生成でした。…ということでメモ。

絵エントリの表示は基本的にrNote時代と同じく、HOMEやArchiveではサムネイル+解説文表示でギャラリーカテゴリページではサムネイルのみの表示で単記事モードにすると全体サイズ画像+説明文という感じにしたかったのでテンプレートを改造することに。

最初はプラグインで何かあるかなー？と思ったのですが、写真ですとFlickrと関連プラグインでサムネイルを並べたりとあったのですが、ヲタ絵でFlickrはちょっとなぁ。検索かけてあちこちWordPressでのイラスト扱っているサイトさんを見て回ったりしたのですが、自分がやろうとしていることを実践している方は見つからず。

結局テンプレートタグ辞典を見つつこつこつとテンプレ改造をすることに。タグ辞典はネット上のものを見ればいいのですがテンプレを作りつつだと画面移動しつつ、というのが不便だったのでWordPressサイト構築スタイルブックを購入。

サイト構築スタイルブックにやろうとしていることに割と近めなサンプルがのっていたのでそれとタグ辞典を見つつテンプレ改造。最初はテンプレも1から自作しようとしていたのですがいろいろと考えすぎて混乱してきたので配布されているものを使用しました。

以下現時点で使用しているテンプレの改造部分ですがこれが都合のいい記述かどうかは分かりません(=。ω。)
(07/07/24) テーマをVicuna 使用のに変更。

とりあえず必要なものは

1. ギャラリーページはサムネイルのみの表示
2. 個別記事モードで大判画像と本文を表示（サムネイルは見えないようにする）
3. ギャラリーページのエントリに本文のほかにサムネイルを表示

記事の記述は本文は説明文のみ、画像はカスタムフィールドにサムネイル用はキーをthumb値をファイル名・大判画像はキーをimage値をファイル名にして記述して処理しています。

廃Wizさん/ROの例ですと。

• 大判：http://www.meisjesbeeld.net/ro/cg/070121.jpg
• サムネ：http://www.meisjesbeeld.net/ro/cg/070121_.jpg

画像アドレスが上記のようになるのでカスタムフィールドは

キー	値
image	/ro/cg/070121.jpg
thumb	/ro/cg/070121_.jpg

このような感じになります。値が /ro/cg/070121_.jpg のような書き方になるのは画像のディレクトリを子カテゴリ毎に分けているのでこうなっています。画像を全て同じディレクトリに格納している場合テンプレートの方にアドレスを全て書いておけば値はファイル名だけで済みます。

ギャラリーカテゴリの表示に関してはcategory-カテゴリID.phpで個別に指定できるのでcategory.phpを複製して、h1下19行目の <?php if (have_posts()) : while (have_posts()) : the_post(); ?>から47行目 &lt<?php paging_link('next_label=Older Entries&prev_label=Newer Entries&indent=2') ?> までを削除。

以下category-12.phpの例（RagnarokOnline Archive のテンプレです）

<div class="section entry">
	<p><em>new＞＞＞old</em></p>
<ul class="gallery">
<?php query_posts('cat=20 & showposts=50'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="http://meisje.littlestar.jp<?php echo post_custom('thumb');?>" alt="<?php the_title(); ?>" width="85" height="85" /></a></li>
	<?php endwhile; ?>
	<?php endif; ?>
</ul>
</div>

ソースはこんなかんじでわかりやすくすると

<div class="section entry">
	<p><em>new＞＞＞old</em></p>
<ul class="gallery">
<?php query_posts('cat=カテゴリID & showposts=表示件数'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<li><a href="記事へのリンク" title="記事のタイトル">
<img src="サムネイルのアドレス<カスタムフィールド'thumb'>" alt="記事のタイトル" width="サムネサイズ" height="サムネサイズ" /></a></li>
	<?php endwhile; ?>
	<?php endif; ?>
</ul>
</div>

php query_postsの後ろのcat=20がカテゴリID（上ではオリジナルのカテゴリ）showposts=50が表示件数（50件以上ある場合は件数を増やす）。サムネイルはリストでマークアップしてCSSで横並びに調整しています。
サムネイルの書き出しは上にある通りカスタムフィールドを使用しています（キーをthumb値をファイル名）。
サムネイルのファイル名を記事IDの数値にしておけばカスタムフィールドを使用せずにテンプレのみでできると思います（カスタムフィールド呼び出し部分を記事IDを書き出すようにする）。

これでギャラリー内子カテゴリ分のサムネイル表示は完成。親カテゴリのギャラリーのトップにはカテゴリ毎に新規5件分のサムネイルを表示したいので

<h2 class="charaname">
<a href="http://www.meisjesbeeld.net/archives/category/gallery/ragnarokonline/" title="Ragnarok Online">Ragnarok Online</a></h2>
<ul class="gallery">
<?php query_posts('cat=20 & showposts=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="http://meisje.littlestar.jp<?php echo post_custom('thumb');?>" alt="<?php the_title(); ?>" width="85" height="85" /></a></li>
	<?php endwhile; ?>
	<?php endif; ?>
</ul>

こんなかんじのものをカテゴリ分作って並べて表示させています（子カテゴリのタイトルのclass名は使いまわしているだけなので気にしないでください…）。

次は個別記事モードですがこっちは単純で<div class=”textBody”>直下・<d?php the_content(’Continue reading’); ?>上に下のものを挟み込むだけ。

<?php if(in_category('6')): ?>
<p><img src="http://meisje.littlestar.jp<?php echo post_custom('image');?>" alt="<?php the_title(); ?>" /></p>
<?php endif; ?>

うちの場合大判画像を表示させるものが全てギャラリーの子カテゴリのみなので親カテゴリのID6のみを書いておけば画像表示が出来ますが、表示させるものが子カテゴリでない場合は<?php if(in_category('6')||in_category('15')||in_category('18')||in_category('19')): ?>のようにカテゴリIDを列挙していけば動くと思います。

わかりやすくすると

<?php if(in_category('親カテゴリID')): ?>
<p><img src="画像アドレス<カスタムフィールド'image';?>" alt="記事タイトル" /></p>
<?php endif; ?>

残りはトップページ等で表示されるサムネイル+説明文の処理（対象はindex.php/archive.phpうちではトップも別にしているのでhome.php）。
これは個別記事モードとほぼ同じで<?php the_content(’Continue reading’); ?>の真上に下のものを挟むだけです。

<?php if(in_category('6')): ?>
<p>
<a href="http://www.meisjesbeeld.net/<?php echo post_custom('image');?>" class="highslide" onclick="return hs.expand(this)" title="<?php the_time('Y.m.d') ?> <?php the_title(); ?>">
<img src="http://meisje.littlestar.jp<?php echo post_custom('thumb');?>" alt="<?php the_title(); ?>" /></a></p>
<?php endif; ?>

サムネイルからクリックでWPJ-Highslide 0.2を使用して大判画像を表示させているのでclass="highslide" onclick="return hs.expand(this)"を入れてあります。

あとはHomeの上部にあるRecentImagesですが、これは自動書き出しではなくテンプレートに直接書き込んでいます。
自動書き出しもできるとは思うのですがイマイチ上手くいかないのと、ギャラリーカテゴリ内にトップに表示したくないカテゴリもあるので手書きにしています。

Related posts

• ＝□○＿ (0)
• 細細更新 (6)
• 移住。 (0)
• 作業めも (0)
• テーマ完成 (0)