WordPress テーマ解説

wp_top_themesテーマ解説書は基本的なテーマ解説、用語説明に的を絞り、初めてWordPressをご使用になる方を対象にしています。HTML、テンプレートタグの解説については他の書籍に譲り、「Default_Theme(英語版)」を使った構造の解説をしています。

(詳細を読む)

2009.01.14 23;32

テーマ(Theme)

themes_imagesWordPressのサイトデザインは「外観」-「テーマ」画面で切替えることができます。「テーマ」画面の中から、好きなデザインを選び、確認して、選択するだけです。また、WordPressをインストールすると、既に、いくつかのテーマ(Classic,Default)が添付されていて、そのまま使用できるようになっています。

サイトデザイン(デザインテンプレート)をWordPressでは「テーマ(Theme)」と言います。

「テーマ(Theme)」は階層化されたテンプレートファイルの総称で、システムが指定するフォルダ(wp-content/themes)に「テーマ (Theme)」をアップロードすると、システムが読み取り、サイトデザインとして反映され、表示されます。

「テーマ(Theme)」にはデザインの基本となる体裁を記述したスタイルシート(style.css)とWebサイトを表示するためのテンプレートファイル(index.php,single.php等)とで構成されています。Webサイトの構成により、ファイルの数も変わり、ファイルの構成も変わります。

テンプレートファイル(index.php,single.php等)にはそれぞれの表示に伴う機能によって、HTMLやテンプレートタグ、phpのコードが記述され、サイト構成によって組み合わされます。

テンプレートファイル(index.php,single.php等)は各ファイルによって、階層的な関係にあります。例えば、トップページを表示するためにはhome.phpを利用できますが、home.phpがない場合にはindex.phpが代行します。index.phpはその他のページ表示にも使用できるので、最低、CSSファイル(style.css)とindex.phpがあれば、「テーマ(Theme)」を構成することができます。

詳しくは「WordPress テーマ解説書」

2009.04.08 20;30

Theme Directory

wp_themesWordPressテーマを誰でもが、自由にダウンロードして、利用できるように、設置されたのが Theme Directory です。

WordPress.orgが運営しており、GPLライセンスで、いろいろなテーマが提供されています。検索して、見比べ、ダウンロードして、時には改良して使用できるようになっています。

Theme Directoryにアクセスしてみると、テーマの一覧が表示されます。自分の好みの一覧を探して、気に入ったデザインを選択し、「Preview」でレイアウトを確認します。よろしければ、ダウンロードして、WordPressのthemesフォルダにアップロードしてみましょう。WordPressの管理画面でテーマを選択すれば、もう、使用可能です。

*しかも、選択したテーマがどれだけダウンロードされているかも、人気度も、「Theme Directory」を見れば、確認できます。

ところで、WordPressの普及が加速度的に進むなか、テーマデザインは、日々、多くのデザイナーや制作者によって、企画・開発され、提供されています。 提供の形態はさまざまで、優秀なWebデザイナーの方が有料で提供しているもの、テンプレートとして販売されているもの、GPLで無料提供されるもの、各種コードが公開・解説されているもの、など、いろいろな形式での提供がされています。

(Point!!)
このように、簡単にテーマテンプレートが入手できるのも、WordPressの特徴です。WordPressのシステムがデザインテンプレートが提供しやすいこともあり、他のCMSにない長所になっています。「このデザインがすてきだなあ」と思った瞬間に自分のWEBサイトデザインにすることができます。但し、テーマによっては日本語対応していないものもありますので、注意が必要です。

2009.04.09 08;14

「Classic」と「Default」

default_themes_imagesWordPressをインストールすると、標準として、添付されているテーマが「Classic」テーマと「Default」テーマです。

WordPressのテーマについては、この「Classic」テーマと「Default」テーマが基準とされています。それぞれのテーマには特徴があり、構成も異なりますが、このテーマを基準としてテーマ制作をすることを推奨されています。

具体的には「Classic」テーマと「Default」テーマの内容を修正したり、テーマで使用しているファイル構成、記述を再利用して、新しいオリジナルテーマを作成します。

特に「テンプレートファイル」の投稿表示の記述や「パーツテンプレート」の記述はそのままコピーして、ブログサイトに使用することも可能で、典型的なパターン表現は何度も利用されています。(再利用の方が記述の失敗を防ぐことにもなります)

WordPressをCMSとして、Webサイトを構築する場合は、当然、「Classic」テーマと「Default」テーマはブログ用のテンプレートですから、用途別に構成を変え、記述も変更しなければなりません。また、一覧の表示の仕方、デザインの応用など多くの知識も必要になります。

テーマのテンプレート構成例:「Default」テーマ

テンプレートファイル
index.php メインテンプレート
single.php 記事用テンプレート
page.php 固定ページ用テンプレート
archive.php アーカイブ用テンプレート
archives.php アーカイブタイトル一覧用テンプレート
404.php 404 Not Found用テンプレート
image.php 画像用テンプレート
links.php リンクページ用テンプレート
パーツテンプレート
header.php header記述用テンプレート
sidebar.php sidebar記述用テンプレート
footer.php footer記述用テンプレート
comments.php コメント用テンプレート
comments-popup.php ポップアップコメント用テンプレート
serchform.php 検索フォーム用テンプレート
スタイルシート
style.css スタイルシート
関数ファイル
functions.php 関数ファイル
その他
screenshot.png 表示用画像ファイル
images テーマ用画像フォルダ
(Point!!)
「Classic」テーマと「Default」テーマの詳しい解説はあるようでなく、WordPressを知るうえで、なかなか敷居の高いものでした。ファイルごとに1つ1つを読み、確認する作業はタイヘンです。ところが、「Classic」テンプレートと「Default」テンプレートを詳しく解説する書籍が登場しました。本サイトでも「Default」テーマを扱っていますが、詳しい解説を必要とする場合はお勧めです。
基本からしっかりわかる WordPress 2.7 カスタマイズブック (Web Designing BOOKS) (単行本(ソフトカバー))大藤 幹 (著)

2009.04.09 22;52

スタイルシート (style.css)

cssWordPressの「スタイルシート(style.css)」 とはWebサイトのレイアウトを定義するファイルです。

他のWebサイトと同様に「スタイルシート(style.css)」を使用すると、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報やレイアウトに関する情報を、Webサイトの内容を記述した「テーマテンプレートファイル」から切り離すことができます。

「スタイルシート(style.css)」は「テーマ」の中の1つのファイルとして提供されますが(テーマごとにstyle.css が必要)、テーマに関する「スタイルシート」情報のに加えて、「テーマ説明(コメントヘッダ)」がファイルの先頭に必要になります。この記述は管理画面の「外観」で「スクリーンショット(screenshot.png)」とともに表示されますので、必ず、記述しないと、「テーマの説明」が表示されずどのテーマなのか識別できなくなってしまいます。

/*
Theme Name: テーマ名
Theme URI: テーマのホームサイトの URI
Description: テーマの説明
Author: テーマの制作者の名前
Author URL: テーマの制作者の URL
Template: 継承テンプレート指定(op:継承がない場合は不要)
Version: バージョン番号(op)
tags:テーマの種類タグ 注意点・留意点・利用許諾の記述など(op)
*/
(Point!!)
最も単純なテーマには、style.css ファイルと画像だけで構成されます。その際には「Template: 継承テンプレート指定(op)」で他のテーマテンプレートファイルを含むテーマ名を記述します。また、「テーマ説明(コメントヘッダ)」とともに、テーマを表示する「スクリーンショット(screenshot.png:300×225の画像ファイル)」も必要ですので、必ず、テーマファイルにアップロードしておきましょう。また、「テーマ説明(コメントヘッダ)」は標準で添付されている「Default」テーマ等を参考に作成してみましょう。

2009.04.10 17;21

関数ファイル(functions.php)

WordPressのテーマには、「関数ファイル(functions.php)」を含めることができます。

WordPressは起動する際に、テーマのファイルを読み取って、Webサイト表示をしますが、その際、「関数ファイル(functions.php)」も、テーマ特有の関数として自動的に読み込まれ、WebサイトやWordPress本体に反映されます。

「関数ファイル(functions.php)」にPHPでコーディングされた関数が定義してあると、WordPressはそれを読み込み、サイト表示、管理画面等に反映させます。 例えば、拡張機能を定義して、テンプレートファイルに反映させたり、標準機能としてある機能を反映させずに、表示できなくしたりすることができます。また、追加機能や拡張機能用の管理画面を設置したりできますので、とても、幅広い活用が可能です。

同じような機能拡張である「プラグイン」はWordPress本体とは別のソフトウェアとして組み込まれ、どのテーマでも機能しますが、「関数ファイル(functions.php)」はWordPressの中の「テーマ」の一部として、「特定のテーマ」でのみ機能します。

関数ファイル(functions.php)使用例

(Point!!)
「Default」WordPress テーマには、関数と管理画面を定義する functions.php ファイルが入っているので、見本にするといいでしょう。functions.php は基本的にプラグインのように動作するので、このファイルでできることの情報は、「プラグインの作成」を参照してください。

2009.04.11 01;30

このページのトップへ