タグ: テーマ

ちょっと頭の片隅においておくといいかもしれないWordPress関連の2つの論争

日本では殆ど話題にも上らなかったのですが、今年(2010年)初夏のころ、海の向こうではWordPressに関して2つの大きな論争が持ち上がってました。1つはWordPressが採用しているライセンス「GPL」とその商用利用に関する論争。もう1つは3.0から新たに加えられた“機能”に関する論争です。1つ目の論争は、一応、解決しています。2つ目は、3.1にて何かしらの対応がされると思いますが、本質的には解決していません。

技術的な話題ではないのでスルーされがちですが、WordPressの本質に関わることなので、日本の開発者やユーザーの皆さんも「こういうことが起こっている」程度でもいいので、知っておき、頭の片隅にでも置いていた方がいいのでは?と思い記事にしてみました。

2つの大きな論争とは:

  1. WordPressが採用しているGPLライセンスに関する論争
  2. WordPress3.0に埋め込まれた”P”に関するコード

です。

なお、僕もこの2つの論争をはじめから全てフォローできているわけではありません。静まったと思ったらまた再熱したりしています。議論が交わされている場所も無数にあります。それから、僕自身はWordPressコアの開発には加わっていないので、裏事情までは知りません。幾つか英語の記事や、Trac上のチケット、そしてそれらに寄せられたコメント等を読んで、状況を大体把握できたしだいです。そこはご了承下さい。

修正(2010-10-29 00:31):記事のタイトルの「片隅に」の「に」が抜けていたので修正しました。 thanks @naokomc

Continue reading

ManabiTheme – IntermediateLevelを公開します

以前公開した、「ローカル環境にて、ソースコードからWordPressテーマを学ぶことを目的とした、テーマを学ぶ為のテーマ - ManabiTheme(学びテーマ)」の続きを公開します。前回公開したのはEntry Level(初級編)ですが、今回はIntermediate Level(中級編)です。

ダウンロード:ManabiTheme – IntermediateLeve ver.0.9

ManabiThemeを作成した経緯と、その特徴は、初級編の記事を参照してください。デザインの変更もありません。

中級編に追加したテンプレートファイルは以下の5つ。

  • single.php
  • archive.php
  • page.php
  • search.php
  • functions.php

テーマの機能としては、サイドバーのウィジェットに対応しています。

初級編と同様に、解説をコメントで説明していますが、初級編で書かれていたコメントは一部を除いて全て削除しています。分からない箇所があれば、初級編のテンプレートファイルをもう一度参照して下さい。もちろん、中級編にて新たに追加したテンプレートタグや、逆に削除したテンプレートタグは、初級編のように解説をコメントで説明しています。
Continue reading

ManabiTheme – EntryLevelを公開してみます

WordCamp Fukuoka 2010の2次会@APIカフェにて紹介させていただいた、「テーマを学ぶ為のテーマ」、名付けてManabiTheme、を公開します!

このManabiTheme(学びテーマ)は、「テーマを学ぶ為のテーマ」として作成しました。外部に公開するWordPressブログ用のテーマとしても使用可能ですが、それよりは、ローカル環境(XAMPP等)にてWordPressテーマを学ぶ為に使用されることを主たる目的として作成しています。

WordCamp Fukuoka 2010

ManabiThemeを作成した経緯

去年の秋頃だったと思うんですが、@khoshinoさんが、とあるWordPressの勉強会にてこんな趣旨のつぶやきをされました。

「テーマを学ぶ為のオススメのテキストやサイトは?」

このつぶやきに反応して、僕を含めて何人かの方がオススメしたのを纏めると。

「一番良いテキストブックは良いテーマ。」

僕はWordPressのテーマを1.5系からいじっているのですが、ある程度基礎的な事が分かると、あとはダウンロードしてきたテーマのコードを読んで学びました。XHTMLとCSSも、「これは!」と思うサイトのソースを読んでましたね。

で、@khoshinoさんに「ではどのテーマが良いですか?」と聞かれて改めて気がついたのですが、最近は「勉強するならこれがいいですよっ」と1つ進められるテーマがないんですよねぇ。WordPressが多機能になるにつれ、テーマの中身が複雑化しました。例えばサイドバーのウィジット化やコメントのスレッド化です。そして、公式レポジトリにアップされるテーマの数が多くなるにつれ、テーマ作者は競うように高機能化を進めていく。例えば、管理画面から各種設定が行えたり、様々な種類のレイアウトからお好みのを選択できたり。悪くはもちろんないんですが、テーマを独学する為の教材としては敷居が高くなってしまった感は否めませんね。

ならば、それに適したテーマを作ってみよう、と思って作成したのがこのManabiThemeです。他人のソースコードを(良い意味で)盗み、学ぶのは、スキルアップに不可欠だと個人的には思います。このManabiThemeがその入り口となってもらったり、きっかけの1つになってもらったら幸いです。

ManabiThemeの特徴

幾つか特徴をご紹介いたします。

Continue reading

ファビコンとテーマの色とthe_date関数を変更・修正

このブログで使っているテーマ(スクラッチから作成した自作テーマ)を3カ所変更しました。

ファビコンを変更。

  • 上部の2色のバーを秋っぽい色に変更。
  • サイドバーのLatest Postsの日付をthe_date関数からthe_time関数へ修正。
  • ファビコンは古いロゴを元にした画像のままだったので、新しいロゴに変更しただけです。最後にファビコンを作成したのは随分昔だったので、その時に書いた記事を元に作成(笑)。

ページ上部の2色の線は、主に十二単のかさねいろを参考にしてます。今回は秋のかさねいろから朽葉を使いました

the_date関数からthe_time関数というのは、WPループを使ってこのように最新の記事やコメントリストを表示させた場合、the_date関数だと同じ日に投稿された記事の内ループの最初の記事しか日付が表示されないのです。修正前のスクリーンショットを見てください。

20091029_Waviaei

WordCamp Kyoto 2009 – Photo#3と#4の記事は、同じ10月25日に投稿されています。なので、the_date関数だと、ループで先にでてきた#3の方にしか日付が表示されません。これを解決するには、the_date関数をthe_time関数に置き換えます。そうすると、同じ日付でもきちんと投稿日が表示されます。

僕がテーマを作成したり編集・カスタマイズしたりし始めた頃に2~3度ハマったところです。皆さん、気をつけてください!(僕は今回すっかり忘れてしまってました…汗)

ちなみに、日本語版のCodexにもちゃんと書かれていますね。

テンプレートタグ/the date – WordPress Codex 日本語版

テンプレートタグ/the time – WordPress Codex 日本語版

ブログのデザインを少し変更 – ver.7

ブログのデザインをちょこっと変えました。これで少しすっきりしたかと。右側の黄色を取っ払おうかどうか考えましたが、結局は以前よりもちょっとだけ細くして、メインコンテンツとの間のホワイト・スペースを増やしました。

20091003_Waviaei_renew1

その他には、コメントやコメント周りや…
Continue reading

訪問者のブラウザをWordPressの機能で判別する方法

訪問者が利用しているブラウザを判別するには幾つか方法があります。WordPressテーマの場合、PHPを使える事ができるので、PHPで実装している場合が多いと思います。そして判別した結果を、echoで返す。

これを、WP2.8から新たに加えられたテンプレート・タグbody_classに、add_filterを使って表示してやると、たとえばこんな風に:

[xhtml]<body class="home blog logged-in safari">[/xhtml]

表示されて、すごくすっきりします。と、言うティップスをHow to detect the visitor browser within WordPressにて発見。やり方は、元記事にあるコードをfunctions.phpに記述するだけ。簡単です。いまさらns4の判別が必要なのかはともかく、iphoneも判別対象になっていますね。ここらへんは日本仕様に合わせて変更できるかも。

[復刻版]WordPressテーマガイド(4)WPテーマの構造と仕組み

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

ここでは具体的にWordPressテーマのファイルやディレクトリ構造を見ていきます。

最低限必要なテンプレート・ファイルはどれなのか?

モジュールは?

などなど、テーマの中身が分かると思います。

Continue reading

[復刻版]WordPressテーマガイド(3)XHTMLからWPテーマへ

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

WordPressの他にサーバ・インストール型のブログ・ツールを使用した事がある方は、テーマのフォルダ内を覗いただけでWordPressテーマの仕組みは大体分かるんじゃないかと思います。

ここでは、前章で述べたウェブ・スタンダードに準拠する形でコーディングされたXTHML+CSSのブログ・デザインが、どの様にテンプレート・ファイル、更にWordPressテーマと成っていくのかを追っていきます。

XHTMLからテンプレートへ(一般的な仕組み)

こ こに一般的なブログのトップページ(ホーム)が有るとします。ブログ・ツールはWordPressでも、Movable Typeでも、Serene Bachでも、何でもかまいません。ヘッダー、サイドバー、フッターがあり、コンテンツ部分には最近の記事が幾つか表示されています。このページは XHTMLでコーディングされ、外部CSSファイルによって見た目がコントロールされています。この何の変哲も無いウェブ・スタンダードな XHTML+CSSが目の前にあると思ってください。そしてCSSはいったん横に置き、XHTMLの方に注目します。

「目印」に置き換える

ブ ログでは、状況によって表示内容が変化する箇所が幾つかあります。記事のタイトル、日付、カテゴリ、タグ等はもちろんの事、トップページやアーカイブ表示 は時系列で記事が並んでいるので、新しい記事を投稿するたびに古い記事は下へ下へと移動していきます。さらに、例えばサイドバーにカテゴリの一覧をリスト 表示しているとすると、新たなカテゴリを作れば自動的にそのリスト付け加えて更新、表示してくれれば非常に便利です。

Continue reading

[復刻版]WordPressテーマガイド(2)ブログのデザイン

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

WordPressテーマの説明に入る前にブログで実践されるウェブ・デザインを知っておく必要があります。正直言って、WordPressテーマ をカスタマイズ、もしくは作成するにあたって重要なのはPHPよりも、XHTML+CSSでコーディングされたウェブ・スタンダードなサイトを作れるスキ ルです。(データベースからの結果を操作する、設定パネルを作る、等のよほど凝ったカスタマズでない限り。)

ここでは、WordPressテーマの構造を理解するのに必要な一般的なブログのレイアウトと、ウェブ・スタンダードとの関連性についてだけを簡単に解説します。XHTMLとCSSのスキルが足りないと感じている方は、ほかのサイトや書籍も参考にして下さい。

ブログ・デザインの定番

最 近は幾つか個性的なデザインも出てきましたが、まだまだ下の画面のようなデザインが一般的ではないでしょうか。ヘッダー(Header)とフッ ター(Footer)にサンドイッチされる形で、コンテンツ(Content)とサイドバー(Sidebar)があります。画面はWordPressの ディフォルト・テーマですが、ここではサイドバーが右に配置されています。テーマによっては、右側に表示されていたり、左右両方に表示されていたりしま す。

Continue reading

[復刻版]WordPressテーマガイド(1)イントロダクション

この記事についてこの記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。

WordPressテーマのカスタマイズ方法や作成方法を求めてここにたどり着いた方には説明不要だとは思いますが、一応書いておきます。

WordPressとは?

WordPress はPHP+MySQLで構築されるコンテンツ・マネジメント・システム(CMS)で、主にサーバ・インストール型のブログ・ツールとして使用されていま す。日本での知名度と使用率はまだまだメジャーとは言えませんが、海外ではMovable Typeと人気を二分するほど有名で人気があり、一部ではMovable Typeを抜き去ったとも言われます。今年になって登場したレンタル版(登録無料)も好評で、WordPress人気にますます拍車がかかっています。

Continue reading

[復刻版]WordPressテーマ:作成とカスタマイズのガイド

2007年の5月に書いた「WordPressテーマ:作成&カスタマイズ」と言う記事を復活させる事にしました。正確には、当ブログの記事ではなく、サブドメインで公開してた別サイトです。それを数回に分けて記事にする事にしました。

今回この古~いガイドを記事として投稿する事にした理由は:

  • 古くても、未完成でも、何かWPコミュニティにcontributeできる物は公開しておきたい
  • waviaei.comが存在した期間の中でも、index.phpに次ぐ第2位のページビューを獲得しているページを、お蔵入りにするのは(需要はともかく)個人的にもったいないと感じる

この2点です。そして注意してほしいのは:

  • WordPress2.0~2.2頃に作成したので、それらバージョンに基づいて書かれている
  • そして今回復活させるにあたり、最新バージョンに合わせて内容を編集したりはしていない

の2点です。 Continue reading

Random Image Script

20090517_waviaei

サイドバーの上の方にある、Aboutの部分の写真をランダムに表示させるスクリプトを入れました。jQueryのスライド系プラグインも面白そうだったのですが、とりあえず以前もやった事のあるPHPスクリプトを用いたやり方で実装。ただし今回はMattがずいぶん昔にリリースしたRandom Image Scriptを利用。

wp_enqueue_scriptを使う(その2)

wp_enqueue_script をテーマで使うときは、わざわざフックを通さなくても大丈夫です。 header.php の冒頭にいかのように書くだけでおっけ。

テーマでwp_enqueue_scriptを使う « Waviaei

と、をかもとさんに教えてもらい、テンプレートを少し編集しました。フックを通すと管理画面でも適用されると言うことも、全く頭になかったのでまた1つ勉強になりました。をかもとさんありがとう!やはりこの辺はテーマ作成者よりもプラグイン作成者の方がよく分かってらっしゃる。PHPスキルの差。

テーマでwp_enqueue_scriptを使う

コリスさんが作成されたページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプトPage Scroller」を入れてみました。ページの右下の方にある「↑toTop」をクリックしてみてください。スムーズにページ上部へスクロールするはずです。

で、このスクリプトを実装するときに使ったのがwp_enqueue_script();と言うWordPressのアクションフック。Ver. 2.1から導入されたみたいなんだけど、プラグイン向けの関数と言うこともあって、その存在すら全然知りませんでした(汗)

wp_enqueue_scriptとは

何をするフックかと言うと、外部参照のスクリプトを:

  1. 重複しないように
  2. 適切な順番で

読み込むように自動的に調節してくれるフックです。なぜこんなのが必要かと言うと、最近のプラグインやWPコアの機能において、jQueryscript.aculo.usと言ったJavaScriptのライブラリとそれらプラグインがよく利用されているからです。これらスクリプトはそれぞれ適切な読み込み順序があり、また当然の如く、同じライブラリを2回も3回も読み込むのは無駄です。

より詳しく知るにはこの2つの記事が勉強になります。

使ってみると、便利ですね。もしテーマを自作したり、カスタマイズしたりする時は、スクリプトの外部参照をheader.phphead内に直接記述するのではなく、wp_enqueue_script();を利用するのが必須となってきそうです。

Continue reading

新しいテーマとやっぱりテーマ作りは楽しい件

使用しているテーマを新しくしました。今回はダウンロードしてきたテーマではなく、一から自分で作ったテーマです。テーマ名はShikigasaneと命名。このブログ用に自作したテーマはこれで6つ目ですが、正式採用したのは4つ目。目標は相変わらず(?)和っぽいテイストをシンプルに。

20090510_waviaeidesign6

今回のデザイン・ネタ

作る度にどこか「和」っぽいテイストを入れようとしてみますが、ことごとく失敗します(笑)。今回作成したテーマのネタは伊右衛門に付いてきたかさねいろ豆巾着です。かさね色と言う和の色目があることは前から(詳しくはないですが)知ってはいました。これってウェブ・デザインに使えるんじゃないかと思うも、どこでどのように使えば効果的なのか、全然アイデアが思い浮かばずにいたんです。ところがこの豆巾着を逆さまにしてみて「そうか!ヘッダーのバックグラウンド画像に使おう」と思いたち作ってみたのがこのテーマです。

とは言うものの、色がちょっと変わってるだけで、デザイン的にはよくあるやつです(苦笑)。シンプルで気の利いたデザインを設計できる人は凄いなと思います。コメント欄はシンプルなデザインのブログを探して、それを参考にしたんですけど、なんかこぅ、パクリっぽくなってしまいました(汗)。どこのブログのコメント欄にインスパイアされたかは当ててみてくださいな。

Continue reading

リンクメモ―WordPress 2.7のテーマとコメント周り

またテーマをいじっているけど、WordPress2.7にバージョンアップしてテーマ周りが少し変わった。特にcomment.phpが一番変更が多かったように思うけど、これに関する詳細なドキュメントがなかな見つからなかった。でもようやく見つけたのでそのリンクの自分用メモ。

Migrating Plugins and Themes to 2.7/Enhanced Comment Display « WordPress Codex

Codexのページ。特に、新しいコメントループ用のテンプレタグwp_list_comments()が、liに付け加えるclass=””のリストは要チェック

WordPress 2.7 Comments Enhancements

Codexの解説とかぶる内容だけど、comments.phpを2.7以前と以降の両方に対応させるための方法が詳細に書かれている。

Mastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks

テーマと管理画面に関する変更箇所をまとめた記事。テーマの項はコード付きで、管理画面の項はスクリーンショット付きで解説されていてわかりやすい。テーマ周りでは以下の4こうもく。

  • コメント表示の拡張―スレッド、ページ
  • Stickyの記事
  • Post Class - 任意のクラス名をパラメータに渡してつけ加えられる。
  • wp_page_menu - wp_list_pagesをブログのナビゲーションメニューに。
  • ログアウト用リンク

最近気になっているWordPressの話題

寒くなってきました。秋を通りすぎて一気に冬って感じですねー。ここ最近気になっているWordPressの話題を3つ。

フレームワーク系のテーマが相次いでリリース

自分でテーマを作成する際にベースとして使えるテーマと言うと、真っ先に名が上がるのは、おでさんがWordCampでもプレゼンされたSandboxでしょう。日本だとwp.Vicunと言う選択肢もポピュラーだと思います。しかしここ数ヶ月間で、SandboxやVicunaのように、フレームワークとして利用できるWordPress用テーマが幾つか相次いでリリースされてます。

Continue reading

[投票企画]ブログの記事タイトルと同じ場所に表示してほしいのは?

トップページにしろ、個別記事のページにしろ、記事のタイトルは(ほぼ)必ず表示されます。よくこの記事タイトルの下に投稿日やカテゴリに、タグ、コメント数、投稿者、等が表示されるように一般的になっています。でも、あまり表示しすぎるとかえってごちゃごちゃと見にくい事になります。どうするのが一番良いのかな、と思っていましたが、せっかくなのでAutomatticが先日買収したPollDaddy.comを使用して投票企画を行ってみようと思います。

Continue reading

マガジン・スタイルのWordPressテーマ「Arthemia」

今回使用する事にしたテーマArthemiaの主な特徴は以下の4つ。

今流行のマガジン・スタイル。
トップページに表示しているイメージ画像は、表示サイズより大きくても自動縮小。
グリッド・レイアウトに基づき整理・表示された情報。
主なカテゴリを5つピックアップして目立つように表示できる「Browse Categories」。

画像の自動縮小は、テーマに同梱されているTimThumb PHP Scriptで実現しています。また、作成された画像は指定してあるフォルダにキャッシュされるので、一度表示すれば2回目からは早く、負担も軽くなっているはずです。

もちろん幾つかカスタマイズして変更している点はあります。まずトップページに並んでいる記事は時系列表示(=最新の記事5つ)に変更。4つの記事にもイメージ画像を表示するように変更。画像のサイズによってexcerptを表示するかどうかの条件式も足しています。カテゴリや月別アーカイブのページにもイメージ画像を表示するように変更。また、記事を投稿するときにイメージ画像をアップできなかった時(例:出張時や携帯電話からの投稿など)を考え、イメージ画像が無いとき用の処理も記述。

フッターの真ん中に表示しているコメント数の多い記事5つはそのままに、左にはGoogleReaderのShare、そして右にはメディアマーカーに最近登録した5つのアイテムを表示。

しばらくはこのテーマで行ってみようかと思います。最近、いやここ数ヶ月、ブログの中の情報(=記事など)をどのように整理し、どうやって見せるのかにムクムクと興味がわいてきています。なのでアクセス解析(GoogleAnalytics使用)を用いて訪れるかたがどう反応しているのかもチェックできたらと思っています。

テーマ変更― Arthemia

テーマを変更しました。今回は流行りのマガジン・スタイルなデザインのArthemiaです。完全にディフォルトではなく、ちょこちょこっとカスタマイズしています。以前に「数ヶ月前から作り込んでるテーマ」と書いたんですが、これがそのテーマです。

「数ヶ月作り込んだのに見た目が(オリジナルと)あんまり変わらんやないか!」と言われそうですが…

今日はもうちょっと遅いので、そこらへんも含めて連休中に書こうと思います。とりあえず、サーバにアップ、テーマを適用して発生した不具合が2カ所。両方ともローカルでは問題無かったのになぁ。

まずはイメージ画像でサイズの大きい画像を縮小している箇所。これはArthemiaに同梱されていたTimThumb PHP Scriptを利用しているんですが、画像が表示されない場合がある。テーマを適用して1回目は問題無かったけど、何回かリロードすると表示されなくなっちゃった。ちゃんとキャッシュも作成されてるし、コードも間違ってないし。う~ん。やっぱりさくらのサーバーかな。

2つ目はファビコン。Firefox3ではなぜか表示されない。これもローカルでは問題なかった。ちなみにIE8では問題なし。Firefoxで使用しているアドオンのSpeed Dialでも問題なし。

うーん。何でやねん。

追記(2008/09/14/12:40):一晩あけて、両方ともうまくいってるっぽい。ファビコンはたぶんFirefoxに残っていた履歴とかキャッシュとかの問題。TimThimb PHP Scriptは一時的に大きい負荷がかかっていたからでしょうね。

WPテーマ検証用のサンプル・ポスト・コレクション

テーマを作成する時に、XAMPPで作ったローカル環境にインストールしたWordPressで検証します。その時にテーマ全体の出来具合や不具合のチェックも行いますが、その時面倒くさいのが記事のチェック。

<p>や<blockquote>、<ul>に<ol>、<img>の左寄り・真ん中寄り・右寄り、と行った具合に検証しなきゃいけないマークアップが多すぎ。自分のみ利用するテーマの場合、これまでの経験からだいたいどんなのを自分のWordPressブログで利用するか分かってます。なので僕はいつも手っ取り早くウェブ上の自分のブログ(つまりWaviaei)からコピッてきます。でも絶対1つぐらいはチェックし忘れたり見落としてたりするんですよねぇ。

で、そんな人の為にWPCandyがリリースしたのがSample Post Collection。検証用のサンプル・ポストです!

Continue reading

新しいテーマ - Notepad Chaos

WP Theme - Notepad Chaos

WP Theme - Notepad Chaos

使用しているWPのテーマを変えてみました。今回はNotepad Chaosです。オーソドックスな2カラムのデザインですが、よく作り込まれた背景画像と、手書き文字が特徴的です。Archivesとか、リンク先が変だったり、記事の写真がはみ出してたりしてますが、相変わらずの「一時的用」として勘弁してください~。

で、数ヶ月前から作り込んでるテーマですが、スクラッチからではなく、一応ダウンロードできるのをベースにしています。でも改造してる内に、自分が普段(と言うか以前)用いているXHTML+CSSのコーディングと違っていてそれが気になってしようがありません。たとえばid名だったりcss名だったりです。レイアウト的にもwrapperを使う、使わないとか。さらに、改造していくうちに削りたい箇所や、加えたいコードが有ったり、使う予定のないプラグイン用の記述を削除したり・・・。だいぶ混乱しています(笑)。

そんなこんなで、デザインと画像部品はそのままに、コーディングを書き直そうと思ってます。自分好みに綺麗にするか、Sandboxをベースにしてみるか、ちょっと悩んでますが・・・。

wp.vicunaのデザインを変えてみた

使用しているテーマ、wp.vicunaのスキンをカスタマイズしてみました。ベースにしたのは、Originのスキンです。いやー、やっぱり他人が作ったテーマのテンプレート・ファイルを編集するのは、それはそれで結構大変な部分がありますね。XHTMLとCSSの書き方の癖の他に、テンプレ作りの癖。やっぱり、一番やりやすいと感じるのは人それぞれですからね。自分でスクラッチから始めた方がやりやすいんじゃないか?と思いつつも、1日もいじっていれば、大体つかめてきて、結局思ったより早く完成しました。いや、完成はしてないんですけど、アップできるようにはなった、です。

主にCSSの方をいろいろといじったわけですが、テンプレート・ファイル(phpの方)も少し編集(naviとfooterの部分)しています。ヘッダーは、実装してみたいと思っているしかけが有って、そのため、ちょっとややこしい事をしてます。頑張って、さっさと実装しようと思っています。

あっ!IEのチェック忘れてる・・・。でも、もう遅いので明日にします。どっちみち、家からじゃぁVista+IE7環境でしかチェックできないですし。

vicunaのアイキャッチ画像をランダムに

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 を編集します。編集するのは27行目にある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で画像をランダムに表示させるがわかりやすいです。

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

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