月: 2007年10月

Vicunaのモジュールに、アイキャッチ画像が有りますが、その内の「Eye Catch Mini Module」をオンにしてみました。ただそれだけじゃ面白くないので、幾つかの画像をランダムに表示させるようにカスタマイズ。画像をランダムに表示させる方法は、JavaScriptを使う方法も含め幾つかあるようですが、今回はphpで実装しています。CSSに記述されている画像へのリンクを、とあるphpファイルへ置き換え、そのphpファイルが指定されたフォルダ内の画像をランダムに表示しています。

ちなみに、使用しているbazookaスタイルのミニのアイキャッチ画像ですが、角丸になっていたりして、ちょっと加工が面倒です。と思っていたら、Vicunaブログ経由でMercuriousLABさんがアイキャッチ画像作成ツール作成・公開してくださったとのニュースが！おおっ、なんちゅうタイミング！感謝です。

1. まずはアイキャッチ画像作成ツールみたいなものに、使用したい画像をアップロードしてアイキャッチ画像を作成。作成されたアイキャッチ画像の中から、使用する画像をローカルに（デスクトップとか）保存します。ファイル名は何でもOK。
2. A List Apart の、Random Image Rotation という記事からテキストファイルをダウンロードする。ファイルへのリンクはページの下の方。分からない方は直接ここから。
3. ダウンロードしたrotate.txtをrotate.phpにしておく。
4. 作成したアイキャッチ画像たちと、rotate.phpを同じフォルダに入れる。フォルダ名は何でもOK。ここでは、random_mini としておきます。
5. random_mini フォルダを、そのままサーバへアップします。アップする場所は、基本的にはvicuna のフォルダ内のどこでも良いです。僕はstyle-bazooka 用に画像を作成したので、管理しやすいように /wp.vicuna/style-bazooka/images/eyeCatch へアップロードしました。
6. module フォルダ内にある mod_eyeCatch-mini.css を編集します。編集するのは２７行目にあるbackground-image: url(../images/eyeCatch/mini.gif);
   これを
   /* background-image: url(../images/eyeCatch/mini.gif); */
background-image: url(../images/eyeCatch/random_mini/rotate.php);
   の用に編集。元の記述は削除せずに、コメントアウトして一応残しています。random_mini の箇所は、4. で作成したフォルダ名にして下さい。
7. 6. で編集したCSSファイルをサーバへアップして、上書きします。
8. これで完了。ブラウザ上で確認して、ページを再読込みして、画像がランダムに表示されればオッケー！

手順の2. ～ 3. あたりがよく分からない方は、chocobit さんのphpで画像をランダムに表示させるがわかりやすいです。

試しに、当ブログを再読込みしたり、サイト内へのリンクをクリックしてみて下さい。左上にランダムにアイキャッチ画像が表示されるはずです。

なお、アイキャッチ画像作成ツールに画像ファイルをアップロードする際、ファイルサイズが大きいデジカメ画像だと、処理に少し時間がかかります。おそらく設置されているサーバにも負担がかかるので、予め縮小して、ファイルサイズを落としてからアップロードする方が良いと思います。

WP2.3の注目新機能にタグ機能があります。が、いくら記事にタグを付けようとも、使用しているテーマが対応していなければ表示されません。そこで、現在使用中の wp.vicuna のテンプレートファイルを編集して、タグ表示に対応させます。

記事に付けられたタグを表示する

それぞれの記事に、分類されたカテゴリが表示されているように、付けられているタグを表示します。こんな感じで、カテゴリの横に表示させました。

コードは下記のように 、カテゴリとエディットの間へ。


<ul class="info">
<li class="date"><?php the_time('Y-m-d (D)') ?></li>
<li class="category"><?php the_category(' | ') ?></li>
<li class="tag"><?php the_tags(); ?></li>
<?php edit_post_link('Edit.', '<li class="admin">', '</li>'); ?>
</ul>


テンプレートファイルは、archive.php、category.php、index.php、search.php、single.php、の５つです。

タグ用のアーカイブを作る

タグ用のアーカイブ、テンプレートヒエラルキーは

1. tag-xxx.php
2. tag.php
3. archive.php
4. index.php

「xxx」は特定のタグです。カテゴリのテンプレートヒエラルキーと同じですね。archive.phpをコピーして、tag.phpにファイル名を変更。パンくずリストと、アーカイブタイトルの箇所に、現在選択中のタグ名を表示させるテンプレートタグが分からず、最初は困ってしまいましたが、「とりあえずいっとけ？」さんのこの記事で、single_tag_titleだと分かり、問題解決。ありがとうございました～。