この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
ここでは具体的にWordPressテーマのファイルやディレクトリ構造を見ていきます。
最低限必要なテンプレート・ファイルはどれなのか？
モジュールは？
などなど、テーマの中身が分かると思います。
タグ: Theme
[復刻版]WordPressテーマガイド（3）XHTMLからWPテーマへ
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
WordPressの他にサーバ・インストール型のブログ・ツールを使用した事がある方は、テーマのフォルダ内を覗いただけでWordPressテーマの仕組みは大体分かるんじゃないかと思います。
ここでは、前章で述べたウェブ・スタンダードに準拠する形でコーディングされたXTHML+CSSのブログ・デザインが、どの様にテンプレート・ファイル、更にWordPressテーマと成っていくのかを追っていきます。
XHTMLからテンプレートへ（一般的な仕組み）
こ こに一般的なブログのトップページ（ホーム）が有るとします。ブログ・ツールはWordPressでも、Movable Typeでも、Serene Bachでも、何でもかまいません。ヘッダー、サイドバー、フッターがあり、コンテンツ部分には最近の記事が幾つか表示されています。このページは XHTMLでコーディングされ、外部CSSファイルによって見た目がコントロールされています。この何の変哲も無いウェブ・スタンダードな XHTML+CSSが目の前にあると思ってください。そしてCSSはいったん横に置き、XHTMLの方に注目します。
「目印」に置き換える
ブ ログでは、状況によって表示内容が変化する箇所が幾つかあります。記事のタイトル、日付、カテゴリ、タグ等はもちろんの事、トップページやアーカイブ表示 は時系列で記事が並んでいるので、新しい記事を投稿するたびに古い記事は下へ下へと移動していきます。さらに、例えばサイドバーにカテゴリの一覧をリスト 表示しているとすると、新たなカテゴリを作れば自動的にそのリスト付け加えて更新、表示してくれれば非常に便利です。
[復刻版]WordPressテーマガイド（2）ブログのデザイン
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
WordPressテーマの説明に入る前にブログで実践されるウェブ・デザインを知っておく必要があります。正直言って、WordPressテーマ をカスタマイズ、もしくは作成するにあたって重要なのはPHPよりも、XHTML+CSSでコーディングされたウェブ・スタンダードなサイトを作れるスキ ルです。（データベースからの結果を操作する、設定パネルを作る、等のよほど凝ったカスタマズでない限り。）
ここでは、WordPressテーマの構造を理解するのに必要な一般的なブログのレイアウトと、ウェブ・スタンダードとの関連性についてだけを簡単に解説します。XHTMLとCSSのスキルが足りないと感じている方は、ほかのサイトや書籍も参考にして下さい。
ブログ・デザインの定番
最 近は幾つか個性的なデザインも出てきましたが、まだまだ下の画面のようなデザインが一般的ではないでしょうか。ヘッダー（Header）とフッ ター（Footer）にサンドイッチされる形で、コンテンツ（Content）とサイドバー（Sidebar）があります。画面はWordPressの ディフォルト・テーマですが、ここではサイドバーが右に配置されています。テーマによっては、右側に表示されていたり、左右両方に表示されていたりしま す。
[復刻版]WordPressテーマガイド（1）イントロダクション
この記事について：この記事は2007年5月に公開した物を再アップした物です。詳しくはこの記事を参照してください。
WordPressテーマのカスタマイズ方法や作成方法を求めてここにたどり着いた方には説明不要だとは思いますが、一応書いておきます。
WordPressとは？
WordPress はPHP+MySQLで構築されるコンテンツ・マネジメント・システム（CMS）で、主にサーバ・インストール型のブログ・ツールとして使用されていま す。日本での知名度と使用率はまだまだメジャーとは言えませんが、海外ではMovable Typeと人気を二分するほど有名で人気があり、一部ではMovable Typeを抜き去ったとも言われます。今年になって登場したレンタル版（登録無料）も好評で、WordPress人気にますます拍車がかかっています。
[復刻版]WordPressテーマ：作成とカスタマイズのガイド
2007年の5月に書いた「WordPressテーマ：作成&カスタマイズ」と言う記事を復活させる事にしました。正確には、当ブログの記事ではなく、サブドメインで公開してた別サイトです。それを数回に分けて記事にする事にしました。
今回この古～いガイドを記事として投稿する事にした理由は：
- 古くても、未完成でも、何かWPコミュニティにcontributeできる物は公開しておきたい
- waviaei.comが存在した期間の中でも、index.phpに次ぐ第2位のページビューを獲得しているページを、お蔵入りにするのは（需要はともかく）個人的にもったいないと感じる
この2点です。そして注意してほしいのは：
- WordPress2.0～2.2頃に作成したので、それらバージョンに基づいて書かれている
- そして今回復活させるにあたり、最新バージョンに合わせて内容を編集したりはしていない
の2点です。 Continue reading
Random Image Script
サイドバーの上の方にある、Aboutの部分の写真をランダムに表示させるスクリプトを入れました。jQueryのスライド系プラグインも面白そうだったのですが、とりあえず以前もやった事のあるPHPスクリプトを用いたやり方で実装。ただし今回はMattがずいぶん昔にリリースしたRandom Image Scriptを利用。
新しいテーマとやっぱりテーマ作りは楽しい件
使用しているテーマを新しくしました。今回はダウンロードしてきたテーマではなく、一から自分で作ったテーマです。テーマ名はShikigasaneと命名。このブログ用に自作したテーマはこれで6つ目ですが、正式採用したのは4つ目。目標は相変わらず（？）和っぽいテイストをシンプルに。
今回のデザイン・ネタ
作る度にどこか「和」っぽいテイストを入れようとしてみますが、ことごとく失敗します（笑）。今回作成したテーマのネタは伊右衛門に付いてきたかさねいろ豆巾着です。かさね色と言う和の色目があることは前から（詳しくはないですが）知ってはいました。これってウェブ・デザインに使えるんじゃないかと思うも、どこでどのように使えば効果的なのか、全然アイデアが思い浮かばずにいたんです。ところがこの豆巾着を逆さまにしてみて「そうか！ヘッダーのバックグラウンド画像に使おう」と思いたち作ってみたのがこのテーマです。
とは言うものの、色がちょっと変わってるだけで、デザイン的にはよくあるやつです（苦笑）。シンプルで気の利いたデザインを設計できる人は凄いなと思います。コメント欄はシンプルなデザインのブログを探して、それを参考にしたんですけど、なんかこぅ、パクリっぽくなってしまいました（汗）。どこのブログのコメント欄にインスパイアされたかは当ててみてくださいな。
リンクメモ―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
テーマと管理画面に関する変更箇所をまとめた記事。テーマの項はコード付きで、管理画面の項はスクリーンショット付きで解説されていてわかりやすい。テーマ周りでは以下の４こうもく。
- コメント表示の拡張―スレッド、ページ
- Stickyの記事
- Post Class － 任意のクラス名をパラメータに渡してつけ加えられる。
- wp_page_menu － wp_list_pagesをブログのナビゲーションメニューに。
- ログアウト用リンク
最近気になっているWordPressの話題
マガジン・スタイルのWordPressテーマ「Arthemia」
今回使用する事にしたテーマArthemiaの主な特徴は以下の４つ。
今流行のマガジン・スタイル。
トップページに表示しているイメージ画像は、表示サイズより大きくても自動縮小。
グリッド・レイアウトに基づき整理・表示された情報。
主なカテゴリを５つピックアップして目立つように表示できる「Browse Categories」。
画像の自動縮小は、テーマに同梱されているTimThumb PHP Scriptで実現しています。また、作成された画像は指定してあるフォルダにキャッシュされるので、一度表示すれば2回目からは早く、負担も軽くなっているはずです。
もちろん幾つかカスタマイズして変更している点はあります。まずトップページに並んでいる記事は時系列表示（＝最新の記事５つ）に変更。４つの記事にもイメージ画像を表示するように変更。画像のサイズによってexcerptを表示するかどうかの条件式も足しています。カテゴリや月別アーカイブのページにもイメージ画像を表示するように変更。また、記事を投稿するときにイメージ画像をアップできなかった時（例：出張時や携帯電話からの投稿など）を考え、イメージ画像が無いとき用の処理も記述。
フッターの真ん中に表示しているコメント数の多い記事５つはそのままに、左にはGoogleReaderのShare、そして右にはメディアマーカーに最近登録した５つのアイテムを表示。
しばらくはこのテーマで行ってみようかと思います。最近、いやここ数ヶ月、ブログの中の情報（＝記事など）をどのように整理し、どうやって見せるのかにムクムクと興味がわいてきています。なのでアクセス解析（GoogleAnalytics使用）を用いて訪れるかたがどう反応しているのかもチェックできたらと思っています。
テーマ変更― Arthemia
テーマを変更しました。今回は流行りのマガジン・スタイルなデザインのArthemiaです。完全にディフォルトではなく、ちょこちょこっとカスタマイズしています。以前に「数ヶ月前から作り込んでるテーマ」と書いたんですが、これがそのテーマです。
「数ヶ月作り込んだのに見た目が（オリジナルと）あんまり変わらんやないか！」と言われそうですが…
今日はもうちょっと遅いので、そこらへんも含めて連休中に書こうと思います。とりあえず、サーバにアップ、テーマを適用して発生した不具合が2カ所。両方ともローカルでは問題無かったのになぁ。
まずはイメージ画像でサイズの大きい画像を縮小している箇所。これはArthemiaに同梱されていたTimThumb PHP Scriptを利用しているんですが、画像が表示されない場合がある。テーマを適用して1回目は問題無かったけど、何回かリロードすると表示されなくなっちゃった。ちゃんとキャッシュも作成されてるし、コードも間違ってないし。う～ん。やっぱりさくらのサーバーかな。
２つ目はファビコン。Firefox3ではなぜか表示されない。これもローカルでは問題なかった。ちなみにIE8では問題なし。Firefoxで使用しているアドオンのSpeed Dialでも問題なし。
うーん。何でやねん。
追記（2008/09/14/12:40）：一晩あけて、両方ともうまくいってるっぽい。ファビコンはたぶんFirefoxに残っていた履歴とかキャッシュとかの問題。TimThimb PHP Scriptは一時的に大きい負荷がかかっていたからでしょうね。
新しいテーマ － Notepad Chaos
WP Theme - Notepad Chaos
使用しているWPのテーマを変えてみました。今回はNotepad Chaosです。オーソドックスな2カラムのデザインですが、よく作り込まれた背景画像と、手書き文字が特徴的です。Archivesとか、リンク先が変だったり、記事の写真がはみ出してたりしてますが、相変わらずの「一時的用」として勘弁してください～。
で、数ヶ月前から作り込んでるテーマですが、スクラッチからではなく、一応ダウンロードできるのをベースにしています。でも改造してる内に、自分が普段（と言うか以前）用いているXHTML＋CSSのコーディングと違っていてそれが気になってしようがありません。たとえばid名だったりcss名だったりです。レイアウト的にもwrapperを使う、使わないとか。さらに、改造していくうちに削りたい箇所や、加えたいコードが有ったり、使う予定のないプラグイン用の記述を削除したり・・・。だいぶ混乱しています（笑）。
そんなこんなで、デザインと画像部品はそのままに、コーディングを書き直そうと思ってます。自分好みに綺麗にするか、Sandboxをベースにしてみるか、ちょっと悩んでますが・・・。