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は一時的に大きい負荷がかかっていたからでしょうね。
使用しているテーマ、wp.vicunaのスキンをカスタマイズしてみました。ベースにしたのは、Originのスキンです。いやー、やっぱり他人が作ったテーマのテンプレート・ファイルを編集するのは、それはそれで結構大変な部分がありますね。XHTMLとCSSの書き方の癖の他に、テンプレ作りの癖。やっぱり、一番やりやすいと感じるのは人それぞれですからね。自分でスクラッチから始めた方がやりやすいんじゃないか？と思いつつも、1日もいじっていれば、大体つかめてきて、結局思ったより早く完成しました。いや、完成はしてないんですけど、アップできるようにはなった、です。
主にCSSの方をいろいろといじったわけですが、テンプレート・ファイル（phpの方）も少し編集（naviとfooterの部分）しています。ヘッダーは、実装してみたいと思っているしかけが有って、そのため、ちょっとややこしい事をしてます。頑張って、さっさと実装しようと思っています。
あっ！IEのチェック忘れてる・・・。でも、もう遅いので明日にします。どっちみち、家からじゃぁVista+IE7環境でしかチェックできないですし。
Vicunaのモジュールに、アイキャッチ画像が有りますが、その内の「Eye Catch Mini Module」をオンにしてみました。ただそれだけじゃ面白くないので、幾つかの画像をランダムに表示させるようにカスタマイズ。画像をランダムに表示させる方法は、JavaScriptを使う方法も含め幾つかあるようですが、今回はphpで実装しています。CSSに記述されている画像へのリンクを、とあるphpファイルへ置き換え、そのphpファイルが指定されたフォルダ内の画像をランダムに表示しています。
ちなみに、使用しているbazookaスタイルのミニのアイキャッチ画像ですが、角丸になっていたりして、ちょっと加工が面倒です。と思っていたら、Vicunaブログ経由でMercuriousLABさんがアイキャッチ画像作成ツール作成・公開してくださったとのニュースが！おおっ、なんちゅうタイミング！感謝です。
/wp.vicuna/style-bazooka/images/eyeCatch へアップロードしました。background-image: url(../images/eyeCatch/mini.gif); /* background-image: url(../images/eyeCatch/mini.gif); */
background-image: url(../images/eyeCatch/random_mini/rotate.php);手順の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、の５つです。
タグ用のアーカイブ、テンプレートヒエラルキーは
「xxx」は特定のタグです。カテゴリのテンプレートヒエラルキーと同じですね。archive.phpをコピーして、tag.phpにファイル名を変更。パンくずリストと、アーカイブタイトルの箇所に、現在選択中のタグ名を表示させるテンプレートタグが分からず、最初は困ってしまいましたが、「とりあえずいっとけ？」さんのこの記事で、single_tag_titleだと分かり、問題解決。ありがとうございました～。
WordPressテーマの作り方、カスタマイズのポイントやアイデア等を集めたガイド、その名も「WordPressテーマ：作成＆カスタマイズ」を公開する事にしました。
WordPressコミュニティには素晴らしいテーマがたくさんあるのですが、ほとんど全てが欧文のブログを想定しています。気に入っても、いざ導入してみると「あれっ？」と思うこともすくなくないと思います。和文だと見栄えがよくないのが多いんですよね。
そこで、日本語でも見栄えをよくする為のポイントを書いてみます。
WordPressはピンバックが出来るので便利ですが、世間ではまだまだトラックバックが主流です。特にポータル・サービス系とMTのシェアが高い日本は・・・:cry:
そこで、トラックバックURIをきちんと表示する事にしました。WordPressは記事のURI、つまりパーマリンク、がトラックバックURIとは違うのでややこしい。テキストリンクだけで表示させるのは分かりにくい。WordPressユーザでも、初心者の方はその違いに長時間戦ってしまう事になる。
以前sbを使っていた時に設置していた自動選択できるフォームが便利なので、WordPress用に編集して設置。
[php]
<input name="trackback_url" size="69" type="text" value="<?php trackback_url(); ?>" />[/php]
WordPressでは初めて一からテーマを作ってみました。テストブログの方でテストしてみたけど、やっぱりこっち（Waviaei）にインストールすると色々と不具合がでてきますね。コーディング周りをチェックしてたら出るわ出るわ、記事本文中のコーディングミス。記事を書く時にリッチ・エディタを使っていないので、時々手打ちでタグを入れます。そのときにプロパティのクォーテーション・マークが抜け落ちていたり、>が抜けてたり:oops:
この変はハックしたり、プラグイン探したりして解決したいと思います。記事書くときの手間は、ミスと快適度に直結するような気がします。とりあえず、修正が必要な点とか、気になった点をリストアップ。