タグ: Theme

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

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

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

モジュールは？

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

Continue reading

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

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

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

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

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

「目印」に置き換える

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

Continue reading

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

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

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

ブログ・デザインの定番

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

Continue reading

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

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

WordPressとは？

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

Continue reading

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

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

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

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

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

の2点です。 Continue reading

またテーマをいじっているけど、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の話題を３つ。

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

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

Continue reading

今回使用する事にしたテーマ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は一時的に大きい負荷がかかっていたからでしょうね。

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だと分かり、問題解決。ありがとうございました～。

WordPressテーマの作り方、カスタマイズのポイントやアイデア等を集めたガイド、その名も「WordPressテーマ：作成＆カスタマイズ」を公開する事にしました。

Continue reading

WordPressコミュニティには素晴らしいテーマがたくさんあるのですが、ほとんど全てが欧文のブログを想定しています。気に入っても、いざ導入してみると「あれっ？」と思うこともすくなくないと思います。和文だと見栄えがよくないのが多いんですよね。

そこで、日本語でも見栄えをよくする為のポイントを書いてみます。

Continue reading

もう１週間くらい前になるんですけど、WordPress 2.0 Theme Competitionの結果が発表されていたみたいです。 Tecnhorati のWordPress タグをチェックしていて発見しました。そう言えばそんなコンペやっていたなぁ。すっかり忘れてた。結果は以下。

Best Overall Designs（最優秀賞）
1st Place（１位） – Durable by Andy Peatling

2nd Place（２位） – Kurtina by Gail Dela Cruz
3rd Place（３位） – Ambiru theme by Phu Ly

Most Creative Design（ベスト・クリエイティブ・デザイン賞）
Foliage by Derek Punsalon

Best 3 Column Design（ベスト３カラム・デザイン賞）
Tiga by Shamsul Azhar

Best 2 Column Design（ベスト２カラム・デザイン賞）
Disconnected by Adam Freetly

Best Use Of Colours（ベスト・カラーリング賞）
Dapit Hapon by Gail Dela Cruz

Best Liquid Design（ベスト・リキッド・デザイン賞）
DarkPad by Sreejith Krishnan

Best Use of WordPress Theme Options（ベスト・テーマ・オプション活用賞）
TBD by People’s Choice and Sponsor（ユーザーとスポンサーの投票によって後日決定）

Best AJAX Integration（ベスト・AJAX賞）
TBD by People’s Choice and Sponsor（ユーザーとスポンサーの投票によって後日決定）

WPのテーマをよくチェックされている方はほとんど見たことがあるテーマばかりだと思います。２つほどJavaScriptを使った今風の作りになってますが、以外と堅実なのが多い気がします。個人的には、最優秀２カラム・デザインに選ばれたDisconnectedが一番使いやすそうな印象を受けました。

ちなみに、エントリされたテーマ数は５０を超えるとか 8O　これらは全てTheme Browserでチェックできます。ページ上部のドロップダウンから「WP2.0 Theme Competition」を選んで、「Go」を押してください。

WordPressの管理画面をかっこよくしてくれるプラグインと言えばWP Tiger Administrationが超有名です。しかし欠点が一つ。レイアウトまで変えてしまうところです。もちろん見た目は良くなりますし、僕もきらいではないです。ただ投稿画面に色々と機能を追加するプラグインを入れていると、表示位置がずれたり、最悪の場合画面からはみ出てしまいます。

そこで、見つけたのが、akaさん経由で知ったSpotMilk。これ良いです。レイアウトは変えずに、色やフォント、ちょっとした部品なんかを変えてくれます。

１つだけ気になったのが、記事のタイトルや本文などを入力するエリアのフォント。
"Lucida Grande", "Lucida Sans Unicode",Verdana, sans-serif
となっているんだけど、WindowsでのLucida Grandeの見栄えは非常に悪い。なのでLucida GrandeとLucida Sans Unicodeは削除。Verdanaに統一して非常に書きやすくなりました。

編集方法は、Spotmilkのフォルダにあるwp-admin.cssをエディタで開きます。エディタの検索機能を利用して、"Lucida Sans", "Lucida Sans Unicode", を検索して削除、もしくはコメントアウトしていきます。それだけです。確か３箇所ありました。