WordPress、Web Design、Photography、その他もろもろ
訪問者が利用しているブラウザを判別するには幾つか方法があります。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も判別対象になっていますね。ここらへんは日本仕様に合わせて変更できるかも。
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
ここでは具体的にWordPressテーマのファイルやディレクトリ構造を見ていきます。
最低限必要なテンプレート・ファイルはどれなのか？
モジュールは？
などなど、テーマの中身が分かると思います。
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
WordPressの他にサーバ・インストール型のブログ・ツールを使用した事がある方は、テーマのフォルダ内を覗いただけでWordPressテーマの仕組みは大体分かるんじゃないかと思います。
ここでは、前章で述べたウェブ・スタンダードに準拠する形でコーディングされたXTHML+CSSのブログ・デザインが、どの様にテンプレート・ファイル、更にWordPressテーマと成っていくのかを追っていきます。
こ こに一般的なブログのトップページ（ホーム）が有るとします。ブログ・ツールはWordPressでも、Movable Typeでも、Serene Bachでも、何でもかまいません。ヘッダー、サイドバー、フッターがあり、コンテンツ部分には最近の記事が幾つか表示されています。このページは XHTMLでコーディングされ、外部CSSファイルによって見た目がコントロールされています。この何の変哲も無いウェブ・スタンダードな XHTML+CSSが目の前にあると思ってください。そしてCSSはいったん横に置き、XHTMLの方に注目します。
ブ ログでは、状況によって表示内容が変化する箇所が幾つかあります。記事のタイトル、日付、カテゴリ、タグ等はもちろんの事、トップページやアーカイブ表示 は時系列で記事が並んでいるので、新しい記事を投稿するたびに古い記事は下へ下へと移動していきます。さらに、例えばサイドバーにカテゴリの一覧をリスト 表示しているとすると、新たなカテゴリを作れば自動的にそのリスト付け加えて更新、表示してくれれば非常に便利です。
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
WordPressテーマの説明に入る前にブログで実践されるウェブ・デザインを知っておく必要があります。正直言って、WordPressテーマ をカスタマイズ、もしくは作成するにあたって重要なのはPHPよりも、XHTML+CSSでコーディングされたウェブ・スタンダードなサイトを作れるスキ ルです。（データベースからの結果を操作する、設定パネルを作る、等のよほど凝ったカスタマズでない限り。）
ここでは、WordPressテーマの構造を理解するのに必要な一般的なブログのレイアウトと、ウェブ・スタンダードとの関連性についてだけを簡単に解説します。XHTMLとCSSのスキルが足りないと感じている方は、ほかのサイトや書籍も参考にして下さい。
最 近は幾つか個性的なデザインも出てきましたが、まだまだ下の画面のようなデザインが一般的ではないでしょうか。ヘッダー（Header）とフッ ター（Footer）にサンドイッチされる形で、コンテンツ（Content）とサイドバー（Sidebar）があります。画面はWordPressの ディフォルト・テーマですが、ここではサイドバーが右に配置されています。テーマによっては、右側に表示されていたり、左右両方に表示されていたりしま す。
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
WordPressテーマのカスタマイズ方法や作成方法を求めてここにたどり着いた方には説明不要だとは思いますが、一応書いておきます。
WordPress はPHP+MySQLで構築されるコンテンツ・マネジメント・システム（CMS）で、主にサーバ・インストール型のブログ・ツールとして使用されていま す。日本での知名度と使用率はまだまだメジャーとは言えませんが、海外ではMovable Typeと人気を二分するほど有名で人気があり、一部ではMovable Typeを抜き去ったとも言われます。今年になって登場したレンタル版（登録無料）も好評で、WordPress人気にますます拍車がかかっています。
2007年の5月に書いた「WordPressテーマ：作成&カスタマイズ」と言う記事を復活させる事にしました。正確には、当ブログの記事ではなく、サブドメインで公開してた別サイトです。それを数回に分けて記事にする事にしました。
今回この古～いガイドを記事として投稿する事にした理由は：
この2点です。そして注意してほしいのは：
の2点です。 Continue reading
サイドバーの上の方にある、Aboutの部分の写真をランダムに表示させるスクリプトを入れました。jQueryのスライド系プラグインも面白そうだったのですが、とりあえず以前もやった事のあるPHPスクリプトを用いたやり方で実装。ただし今回はMattがずいぶん昔にリリースしたRandom Image Scriptを利用。
wp_enqueue_script をテーマで使うときは、わざわざフックを通さなくても大丈夫です。 header.php の冒頭にいかのように書くだけでおっけ。
と、をかもとさんに教えてもらい、テンプレートを少し編集しました。フックを通すと管理画面でも適用されると言うことも、全く頭になかったのでまた１つ勉強になりました。をかもとさんありがとう！やはりこの辺はテーマ作成者よりもプラグイン作成者の方がよく分かってらっしゃる。PHPスキルの差。
コリスさんが作成されたページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプト
「Page Scroller」を入れてみました。ページの右下の方にある「↑toTop」をクリックしてみてください。スムーズにページ上部へスクロールするはずです。
で、このスクリプトを実装するときに使ったのがwp_enqueue_script();と言うWordPressのアクションフック。Ver. 2.1から導入されたみたいなんだけど、プラグイン向けの関数と言うこともあって、その存在すら全然知りませんでした（汗）
何をするフックかと言うと、外部参照のスクリプトを：
読み込むように自動的に調節してくれるフックです。なぜこんなのが必要かと言うと、最近のプラグインやWPコアの機能において、jQueryやscript.aculo.usと言ったJavaScriptのライブラリとそれらプラグインがよく利用されているからです。これらスクリプトはそれぞれ適切な読み込み順序があり、また当然の如く、同じライブラリを2回も3回も読み込むのは無駄です。
より詳しく知るにはこの２つの記事が勉強になります。
使ってみると、便利ですね。もしテーマを自作したり、カスタマイズしたりする時は、スクリプトの外部参照をheader.phpのhead内に直接記述するのではなく、wp_enqueue_script();を利用するのが必須となってきそうです。
またテーマをいじっているけど、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
テーマと管理画面に関する変更箇所をまとめた記事。テーマの項はコード付きで、管理画面の項はスクリーンショット付きで解説されていてわかりやすい。テーマ周りでは以下の４こうもく。
今回使用する事にしたテーマArthemiaの主な特徴は以下の４つ。
今流行のマガジン・スタイル。
トップページに表示しているイメージ画像は、表示サイズより大きくても自動縮小。
グリッド・レイアウトに基づき整理・表示された情報。
主なカテゴリを５つピックアップして目立つように表示できる「Browse Categories」。
画像の自動縮小は、テーマに同梱されているTimThumb PHP Scriptで実現しています。また、作成された画像は指定してあるフォルダにキャッシュされるので、一度表示すれば2回目からは早く、負担も軽くなっているはずです。
もちろん幾つかカスタマイズして変更している点はあります。まずトップページに並んでいる記事は時系列表示（＝最新の記事５つ）に変更。４つの記事にもイメージ画像を表示するように変更。画像のサイズによってexcerptを表示するかどうかの条件式も足しています。カテゴリや月別アーカイブのページにもイメージ画像を表示するように変更。また、記事を投稿するときにイメージ画像をアップできなかった時（例：出張時や携帯電話からの投稿など）を考え、イメージ画像が無いとき用の処理も記述。
フッターの真ん中に表示しているコメント数の多い記事５つはそのままに、左にはGoogleReaderのShare、そして右にはメディアマーカーに最近登録した５つのアイテムを表示。
しばらくはこのテーマで行ってみようかと思います。最近、いやここ数ヶ月、ブログの中の情報（＝記事など）をどのように整理し、どうやって見せるのかにムクムクと興味がわいてきています。なのでアクセス解析（GoogleAnalytics使用）を用いて訪れるかたがどう反応しているのかもチェックできたらと思っています。
テーマを変更しました。今回は流行りのマガジン・スタイルなデザインのArthemiaです。完全にディフォルトではなく、ちょこちょこっとカスタマイズしています。以前に「数ヶ月前から作り込んでるテーマ」と書いたんですが、これがそのテーマです。
「数ヶ月作り込んだのに見た目が（オリジナルと）あんまり変わらんやないか！」と言われそうですが…
今日はもうちょっと遅いので、そこらへんも含めて連休中に書こうと思います。とりあえず、サーバにアップ、テーマを適用して発生した不具合が2カ所。両方ともローカルでは問題無かったのになぁ。
まずはイメージ画像でサイズの大きい画像を縮小している箇所。これはArthemiaに同梱されていたTimThumb PHP Scriptを利用しているんですが、画像が表示されない場合がある。テーマを適用して1回目は問題無かったけど、何回かリロードすると表示されなくなっちゃった。ちゃんとキャッシュも作成されてるし、コードも間違ってないし。う～ん。やっぱりさくらのサーバーかな。
２つ目はファビコン。Firefox3ではなぜか表示されない。これもローカルでは問題なかった。ちなみにIE8では問題なし。Firefoxで使用しているアドオンのSpeed Dialでも問題なし。
うーん。何でやねん。
追記（2008/09/14/12:40）：一晩あけて、両方ともうまくいってるっぽい。ファビコンはたぶんFirefoxに残っていた履歴とかキャッシュとかの問題。TimThimb PHP Scriptは一時的に大きい負荷がかかっていたからでしょうね。