Yet Another Photoblog 使用時のテーマ « Blog

Yet Another Photoblog 使用時のテーマ

2007/07/25(水) 02:12
Web | WordPress
Add comments

※わかりにくそうだったので改訂しました。

　Yapbを導入していると、普通のテーマのままでも特に何もしなくてもちゃんと投稿した画像は表示されます。設定画面でカスタマイズすることもできます。

　ここで何を語るかというと、うちのサイトのイラストページをどうやってるかということですね。
　ざっと流れを書いてみます。

「イラスト」カテゴリを作成
「イラスト」の子カテゴリを作成（「オリジナル」とか「版権」とかそういうのです）
「イラスト」カテゴリのテーマファイルを作成（詳細は下記）

「イラスト」カテゴリのテーマファイルを作成

「イラスト」カテゴリのページ、テーマファイルcategory-n.ph（nはカテゴリーID）にはアーカイブを表示させるのではなく、サムネイルリストを表示します。
　query_postsを使うのでページ作成でイラストページを作成してそこで表示することもできるのですが、記事の所属カテゴリを表示する際にカテゴリリンクが表示される（※図1参照）ので、それを有効利用するためにこのような形をとりました。ページよりお手軽に戻り先が取得できるかもしれません
Yapb使用時テーマ図1

　表示条件などはこんな感じです。

サムネイルサイズ 90×90px、トリミングする
最大表示件数10件、それを超えると「View All」リンクを表示
「View All」リンクは子カテゴリのページ（テーマファイルcategory-n.ph（nは子カテゴリーID））へリンク、そこで全件を表示

　下のソースをイラストの子カテゴリ数に応じてコピペします。
　サムネイルの設定は最初の3行です。強調部分の数字で変更してください。
　すべて同じ設定で良い場合、子カテゴリの２つめからは設定部分の最初の4行は必要ありません。
　子カテゴリはカテゴリースラッグで呼び出しますので、ご自分の設定に合わせて変えてください。

　サンプルファイルを置いておきますので、ご参考ください。

<?php
// ■ 初期設定
$thumb_w = 90; // サムネイル横幅
$thumb_h = 90; // サムネイル高さ
$show_no = 10; // 表示件数

$thumbnailConfig = array('w=' . $thumb_w , 'h=' . $thumb_h , 'fltr[]=usm|30|0.5|3' , 'zc=1');
?>

<!-- ここから下をコピー＆ペーストしてカテゴリーを増やしてください。 -->
<?php
// ■ カテゴリースラッグ設定
$illust_cat = "original";

query_posts($query_string . "&category_name=" . $illust_cat . "&showposts=" . $show_no);
if (have_posts()) :
    while (have_posts()) { the_post();}
    $nowcat = get_the_category();
    $cat_id = $nowcat[0]->cat_ID;
    $cat = get_category($cat_id);
?>
  <div class="post">
    <h3><?php single_cat_title(); ?></h3>
    <div class="category_desc">
      <?php print category_description($cat_id); ?>
    </div>
    <div class="entry">
      <ul>
<?php
    while (have_posts()) : the_post();
        if ($post->image):
?>
        <li class="thumb_list"  title="<?php the_title() ?>"><a href="<?php the_permalink(); ?>" class="illust_thumb"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>" width="<?php print $thumb_w; ?>" height="<?php print $thumb_w; ?>" /></a></li>
<?php
        endif;
    endwhile;

    if(intval($cat->category_count) > $show_no) {
      echo '        <li class="view_all"><a href="' . get_category_link($cat_id) . '">' . '<span class="guide">View All &raquo; Total:</span><span class="all_no">' . intval($cat->category_count) . '</span></a></li>';
    }
?>

      </ul>
    </div><!-- /entry -->
  </div><!-- /post -->
<?php endif; ?>

変更履歴など

2007-09-17T16:46:16+00:00 カテゴリスラッグを一度指定するだけでできるように訂正しました。
2008-02-22T06:55:50+00:00 変更しなければならない場所をなるべく減らしました。カテゴリー概要を表示するようにしました。

この記事のタグ

この記事を評価

(まだ評価されていません)

読み込み中 ...

Comments:8

れん :
2007/09/18 (火) at 0:19:47
はじめまして。Yet Another Photoblogのことを検索しててたどり着きました。とてもテーマがステキですね。
ほかにYet Another Photoblogを使ってイラストサイトを作ってらっしゃる方があまりいないので、大変参考になりました＾＾

私もイラストページのサムネイルを同じように作りたいのですが、上記のソースは、テーマの中に新たにPHPファイルを作成して設置しているということですか？
どうもサムネイルのページがうまく出来ないもので・・・よかったらご教授願えないでしょうか。
彩子 :
2007/09/18 (火) at 2:22:09
れんさん、初めまして～。
わわ、ありがたいお言葉ありがとうございます～！
思いっきり自分用のメモですが、少しでもお役に立てて良かったです。
そういえばYapbでイラストサイトというのはあまり見かけないですね。便利なのに不思議ですねー。

わかりにくくてスミマセン；
3の「イラスト」カテゴリのテーマファイルを作成、のところですね。
「category-1.php」といったファイルを作っておくと、カテゴリーID「1」のアーカイブページのテンプレートになるのをご存じでしょうか？
普通カテゴリーアーカイブは抜粋記事をずらずら数件並べて表示するのに使いますが、私はこのテーマファイルをサムネイル表示に利用しています。
このPHPファイルに上記のソースをカテゴリーの数だけ作ればOKです。

あ、あと記事には書いてませんが、イラストの子カテゴリのテンプレートファイル（「category-2.php」など）では「showposts=99」などにして全件表示させます。（今のところこれで問題ないですが、多すぎて大変なことになった場合は対処が必要かもですね…）
子カテゴリでは <?php endwhile; ?> と <?php endif; ?> の間のソースは不要なので消します。

こんな感じでしょうか。
うまく説明できなくて申し訳ないです。
分からなければ聞いてやってください
れん :
2007/09/19 (水) at 0:56:51
早速返答いただけて嬉しいです＾＾ありがとうございます。
ためしにやってみたのですが、うまく出来そうです！あとはもう少し勉強しながら作ってみます。

MTからWPに変えたばかりで、色々手探り状態です＾＾；こちらのサイトさんのようにかっこよく出来るように頑張りますー＾＾
ホントにありがとうございました！
彩子 :
2007/09/19 (水) at 19:13:00
いえいえ、うまくいきそうで良かったです！
私もMTを使っていたことがありますが、結構勝手が違うので戸惑いますよね。
タグの自由度はMTのほうがあるように思いますが、WordPressはプラグインが楽しいです。
お互い頑張りましょう♪
美雨 :
2007/10/09 (火) at 22:38:26
私もMTから移ってきた派です。今までzenphotoを使ってギャラリーページを作っていたのですが最近文字化けするようになったりで調子が悪いのでこちらの記事を参考にYapb導入してみました。
ちょっとわからないことがあったので質問してもよろしいでしょうか？サムネイルをよこにずらーっと並ぶようにするにはどうすればいいのか教えていただきたいです。
こちら設置ページです↓
http://www.11010.org/category/illust/
彩子 :
2007/10/10 (水) at 1:02:31
美雨さんもMTからの移行派でいらっしゃいましたか。ああ、zenphotoは私も使おうかなと思っていたことがありました～。
というかギャラリー系のプラグインはとりあえずほとんどチェックしたような気がします(笑)文字化けは困りますねー。

＞サムネイルをよこにずらーっと並ぶように
えと。これはですね、CSSの設定です。
下のソースをCSSファイルに貼り付けてください。
このサイトではサムネイルサイズが90pxなので「view all」を同じくサムネイルの隣に正方形にして置いていますが、美雨さんのサイトの50pxのサムネイルでこれをやると可読性に欠けるような気がするので、普通に文字が次の行に横に並ぶようにしてみました。
こんなのでどうでしょうか？もっとこうしたい、みたいなご希望がありましたら、私の技量が許す限り対応してみますのでどうぞー。

ていうか絵のレベル高いです。ステキですっ。
```
/* ソース ここから */
li.thumb_list {
  list-style : none;
  display : inline;
}

a.illust_thumb {
  display : block;
  float : left;
  width : 50px;
  height : 50px;
  margin : 2px;
  border : solid 3px #ffffff;
}

a.illust_thumb:hover {
  border : solid 3px #808080;
  text-decoration : none;
}

li.view_all {
  clear : left;
  display : block;
}

li.view_all .guide {
  display : inline;
}
/* ソース ここまで */
```
美雨 :
2007/10/10 (水) at 1:33:14
わー、ご丁寧にありがとうございますっ！！！
さっそくやってみましたがきれいに表示されました～。
彩子さんのギャラリーページのソースを参考に一度自分でやってみたら崩れまくりでひぇ～って感じだったのでちゃんと表示できてうれしいです。本当にありがとうございますっ。
絵はもしゃもしゃしてるだけなので大したことないですよ～。オリジで描ける方のほうが尊敬です。
サイトロゴのキャラクターかわいいですねvv
彩子 :
2007/10/10 (水) at 9:51:56
いえいえ、うまくいったようで良かったですv
そうですね、サムネイルサイズが違うと大変なことになりますね；

いやー漫画絵ばっかりじゃダメだと思ってリアル絵をひっそりと描いたりするんですが、めちゃ難しいです。
ロゴキャラクターお褒めいただいてありがとうございます！サイト名にちなんで何かしなければとひねり出したものでした(笑)

ではでは、お互いWPいじり頑張りましょう♪（違う）
また美雨さんのサイトの方も目の保養にうかがいますです！

コメントフォーム

お名前
メールアドレス (公開されません)

Website

コメント

強調	文字を強調します。
引用	文章を引用する場合に使います。
ソースコード	数行以上にわたるソースコードの作成に使います。インデントが反映されます。特殊文字 & < > " ' - をエスケープしてソースコード用セクションを作成します。
エスケープ	特殊文字 & < > " ' - を & < > " ' - に置換します。上記のソースコード用セクションは数行のコードを綺麗に表示するためにありますが、こちらは一単語などの短い範囲の場合に。特殊文字を使いたい場合にもどうぞ。
タグを閉じる	開いているタグを全て閉じます。

※タグの不整合やXHTML1.1に準拠しない場合は管理者で訂正する場合があります。

　投稿者情報を保存　する　しない

Trackbacks:0

このエントリーにトラックバックするためのURL: http://lovingcat.net/2007/07/25/yapb-theme/trackback/
Listed below are links to weblogs that reference: Yet Another Photoblog 使用時のテーマ from LOVING CAT

LOVING CAT

Contents

Web | WordPress