「WordPress サイトデザイン リファレンス」の版間の差分

2007年8月18日 (土) 23:30時点における版

WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。

テーマ・デザイン・レイアウトに関する全てのページを概要付きで紹介。日本語ユーザによる外部ドキュメントも追加していきます。

用語説明：

テーマ

サイトの外観を変えるいわゆる「スキン」のようなもので、WordPress サイトの表示の一切を受け持ちます。多彩なデザインの「テーマ」が数多く配布されていて、管理パネルから 1クリックで簡単に切り替えられます。

レイアウトや装飾を行なう「CSS」＋どこにどのような情報を表示するかの「(x)HTML」＋テーマ独自のオプション機能などのセットで、WordPress 本体を触ることなく、サイトデザインを自由自在にカスタマイズできます。

テンプレート

CSS とともにテーマを構成するファイルで、サイト内の各ページに表示する内容（XHTML）を記述します。メインページ・カテゴリページなど各ページの土台となるテンプレートファイルに、ヘッダ・サイドバー・フッタなどのパーツ用テンプレートファイルを読み込むことで、1ページを表示します。XHTMLタグと PHP を組み合わせて書きます。

テンプレートタグ

データベースから投稿データ・設定情報などを取得してウェブ上に表示するための関数群で、テンプレートファイル上で使われます。例えば、記事の本文はテンプレートタグ the_content() によって表示されます。括弧内にパラメータを書くことで、表示する値や表示フォーマットなどのオプションを指定できます。

CSS（スタイルシート）

ページのレイアウト・装飾はスタイルシートで行います（色やサイズの指定だけでなく、サイドバーをどこに配置するか等も）。テーマの中にある style.css ファイルで定義します。

以下のリンク先について：

• ps*wiki で和訳済み or 予定のページ → ps*wiki＋未作成のときは本家も
• WPJ Codex で和訳済み or かなり進行中のページ → WPJ Codex＋本家
• 当面和訳できそうにないページ → 本家(en)

• 基礎 マーク： ちょっとカスタマイズしてみようかなあというときに、さくっと目を通すとよさそうなページに印を付けてみた。ページが多いので。

WordPress テーマ

テーマの基礎・使い方・仕組み・構成ファイルなど、テーマ全体についてのドキュメント

テーマの使い方 基礎 

テーマについての基本情報。テーマとは何か、テーマの入手、切り替え方法 (Using Themes)

テーマの作成 基礎 

テーマの構造と作り方。テーマの仕組み・テーマを構成するファイルの種類、プラグインとの連携などについて説明。配布されているテーマを自分でカスタマイズしたいときにも。 (Theme Development)

Designing Themes for Public Release(en) 

一般公開用テーマの設計・作成方法

プラグインとテーマの 2.1 への移行 

テーマを WordPress 2.1 以上に対応させる方法についての情報。2.0.x 系と 2.1 以上の変更点について。

Version 2.2 互換テーマリスト(en) 

WordPress 2.2 に対応しているテーマの一覧

Site Architecture 1.5(en) 

あなたのテーマでも倣うことが推奨される、デフォルトテーマ・クラシックテーマの標準サイト構造

管理パネル用テーマの作成(en) 

管理パネルの外観を変えるテーマ（プラグインとして動作する）の作り方。配布されている既存テーマを使いたいときは 管理テーマリスト(en) より入手できる。

Upgrade 1.2 to 1.5(en) 

WordPress 1.2 の「テンプレート」から 1.5 の「テーマ」へアップグレードするための情報あり

外部資料：

• Standing Tall » WordPress テーマの詳説 -- John Godley 氏による「UrbanGiraffe » WordPress Theme Guide」の和訳。デフォルトテーマを分解して、構造や仕組みを学びながら再構築していく。(taiさん)
• WordPressテーマ：作成＆カスタマイズ -- WordPressテーマの作り方、カスタマイズのポイントやアイデア等を集めたガイド (Toruさん)
• Make your Own Wordpress Theme by Fauzi Mohd Darus
• Ryan Boren's Anatomy of a Theme
• Moshu's Visual Anatomy of a WP v1.5 Theme
• Chris J. Davis' Secrets of WP Theming, Part 1
• Chris J. Davis' Secrets of WP Theming, Part 2
• Chris J. Davis' Secrets of WP Theming, Part 3
• Dissection of a WordPress Theme
• Design your First WordPress Theme
• How to create a WordPress Template or Theme tutorial
• WordPress is Not PHP - Template Files
• WordPress is PHP

テンプレートファイル

テーマの構成要素である「テンプレート・ファイル」の仕組み、ページ内の各パーツや各種ページの作り方・カスタマイズ

基礎・全般

テンプレート 

テンプレートとは

Stepping Into Templates（和訳途中） 基礎 

テンプレートファイル入門。1つのウェブページを生成するためにテンプレートファイルがどのような働きをするか、あるテンプレートファイルへの別のテンプレートファイルの読み込み方など。 (Stepping Into Templates)

Template Hierarchy 基礎 

各種ページを生成するためのテンプレートの優先順序についての説明。ウェブログで要求されたページを生成する過程で、WordPress がチェックするテンプレートファイル名のリスト。 (Template Hierarchy)

ページ内の各ブロックのカスタマイズ

ヘッダ

ヘッダの設計(en) 

header.php テンプレートファイルのカスタマイズ

Adding Post Feeds to the Header(en) 

ヘッダ・テンプレートファイルへの RSS フィードリンクの追加方法

サイドバー

サイドバーのカスタマイズ 

sidebar.php テンプレートファイルのカスタマイズ （Customizing Your Sidebar）

コンテンツ部

ループ（和訳途中） 基礎 

テンプレートファイルの中でコンテンツ部を生成する WordPressループの説明。ループの基礎、複数ループについて (The Loop)

The Loop in Action(en) 

Wordpress ループの詳細、各種の実践例・小技

テンプレートタグ query_posts() 

ループの前に書くことで、ページに表示する記事をコントロールできるテンプレートタグ query_posts の説明 （Query Posts Template Tag）

Displaying Posts Using a Custom Select Query(en) 

SELECT文などでページに表示する記事を変える方法

「続きを読む」のカスタマイズ(en) 

抜粋文につける「続きを読む（Read More）」リンクの見た目のカスタマイズ

Styling Page-Links(en) 

一つの記事の表示を複数ページに分割したときの、ページリンクのカスタマイズ

Post Meta Data Section(en) 

記事のメタデータ（投稿日・著者・カテゴリなど）の表示

Separating Categories(en) 

各記事に表示するカテゴリリストの区切り文字の変え方（＝ the_category() のセパレータの話）

カスタムフィールドの使い方 

投稿記事へのカスタム・メタデータの追加、表示方法 (Using Custom Fields)

その他

入力フォームのスタイリング(en) 

コメント・検索等の入力フォームの作り方

Good Navigation Links(en)

次／前へのリンク(en) 

次／前の記事・ページへのリンクの見た目のカスタマイズ

Adding Asides(en) 

How to add side notes to your blog posts

ポップアップコメント(en) 

コメントをポップアップウィンドウに表示させる方法

各種ページのデザイン（アーカイブ・カテゴリ・特別ページ）

静的トップページの作成(en) 

サイトの静的トップページやスプラッシュ・ページ（本でいう表紙のような入り口ページ）の作り方

著者テンプレート(en) 

著者とその投稿記事を表示する author.php テンプレートファイルのカスタマイズ

カテゴリ・テンプレート(en) 

様々なカテゴリアーカイブのためのテンプレートの定義・カスタマイズ

記事のアルファベット順表示(en) 

カテゴリページの表示順を時系列ではなくアルファベット順にする方法

アーカイブ・インデクスの作成(en) 

日付単位で投稿記事を表示する archives.php テンプレートファイルのカスタマイズ

検索結果ページの作成(en) 

検索結果を表示する search.php テンプレートファイルのカスタマイズ

404エラーページの作成(en) 

アクセスしたページが存在しないときに表示される 404エラー ページをカスタムできるテンプレートファイルの作り方

外部資料：

• Creating Multiple Single Posts for Different Categories

WordPressページ

WordPressページ 基礎 

「ページ」とは何か、使い方、「ページ」の表示フォーマットを指定する「ページテンプレート」の説明など (Pages)

テンプレートタグ wp_list_pages() 

WordPressページの一覧を作成するテンプレートタグ wp_list_pages() の説明 (List Pages Template Tag)

テンプレートタグ

(Template Tags Articles)

テンプレートタグの書き方、オプションの指定方法、各テンプレートタグの詳細説明・用例

テンプレートタグをさわってみよう(en) 

テンプレートタグ入門

テンプレートタグ 基礎 

テンプレートタグ一覧と各タグの説明ページへのリンク (Template Tags)

テンプレートタグ大解剖(en) 

テンプレートタグの構造・使用法・パラメータの理解

インクルードタグ 基礎 

テンプレートファイルに WordPress の基本テンプレート（サイドバーなど）を読み込むときに利用できるタグの説明 (Include Tags)

条件分岐タグ 基礎 

このタグ（is_home() のように いずれも is_something() という形式）は、表示中のページの種類（例: メインページ、カテゴリアーカイブ等）を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。 (Conditional Tags)

外部資料：

• Wptags.com -- テーマファイルをアレンジするうえで必要な「テンプレートタグ」の機能と使い方を説明。さらなる詳細や使用例は Codex 参照。
• Templates and "is" functions, by Ryan
• Theme cheatsheet
• Using the_content and the_excerpt tags within the Loop at the same time.

CSS・デザイン・レイアウト

(CSS, Design, and Layout)

CSS(en) 

How to integrate CSS into WordPress, with list of other WordPress CSS references

CSS Shorthand

Finding Your CSS Styles

Creating Horizontal Menus(en) 

サイトのメニューを水平に並べる方法

Dynamic Menu Highlighting(en) 

表示中のページをメニュー・バー上でハイライトさせる

Styling Lists with CSS(en) 

CSS による箇条書きリストのスタイリング

Wrapping Text Around Images(en) 

画像を囲むようにテキストを配置する方法

外部資料：

• Flumpcakes CSS Optimizer - Optimize your CSS file. Contains a possibly "not safe for work" header image.
• Creative Commons Images:Search for Creative Commons images that are free to share and use online.
• Image * After:A free stock image library for commercial and personal use.
• stock.xchng:Photographs available free of charge to the public.
• freedigitalphotos.net:Free photos for commercial and non-commercial use.
• informaticafriuli.com:Free wordpress theme and template.

ツール・テスト・検証

CSS Fixing_Browser Bugs(en) 

CSS の実装に関するブラウザのバグへの対処

ウェブサイトの検証(en)

テキストエディタ 

各 OS 対応のテキストエディタ一覧

WordPress Site Reviews(en)

FAQ・トラブルシューティング

FAQ レイアウト・デザイン(en)

CSS トラブルシューティング(en)

変更したのに何も変化しないときは(en)

未分類

Know Your Sources(en) 

(x)HTML、PHP、CSS 一般についての外部資料。リンク集 にも日本語資料へのリンクがあります。

Developing a Colour Scheme(en)

Styling for Print(en)

Styling for Mobile(en)

投稿日時の表示形式(en) 

投稿日時の設定と表示形式のカスタマイズ

見出しのデザイン(en) 

見出し要素（hn）のデザイン

Playing With Fonts(en)

画像の利用(en) 

サイトへの画像の取り入れ方・表示の工夫

Fun Character Entities(en) 

文字実体参照を使って » などの特殊記号を表示してみよう

スマイリーの利用(en) 

「:-)」などの顔文字をスマイリー画像で表示するには。投稿の分野かなあ。

Using Gravatars(en) 

Gravatar をコメント欄などに表示する

Protection From Harvesters(en) 

メールアドレスを収集ロボットに盗まれないように表示する

Theme Switching(en)

WordPress Semantics(en)