- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）
WordPress サイトデザイン リファレンス
提供: WordPress Codex 日本語版
WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。 テーマ・デザイン・レイアウトに関する全てのページを概要付きで紹介。日本語ユーザーによる外部ドキュメントも追加していきます。
目次
用語
- テーマ
- サイトの外観を変えるいわゆる「スキン」のようなもので、WordPress サイトの表示の一切を受け持ちます。多彩なデザインの「テーマ」が数多く配布されていて、管理画面から 1クリックで簡単に切り替えられます。
- レイアウトや装飾を行なう「CSS」＋どこにどのような情報を表示するかの「(x)HTML」＋テーマ独自のオプション機能などのセットで、WordPress 本体を触ることなく、サイトデザインを自由自在にカスタマイズできます。
- テンプレート
- CSS とともにテーマを構成するファイルで、サイト内の各ページに表示する内容（XHTML）を記述します。メインページ・カテゴリページなど各ページの土台となるテンプレートファイルに、ヘッダ・サイドバー・フッタなどのパーツ用テンプレートファイルを読み込むことで、1ページを表示します。XHTMLタグと PHP を組み合わせて書きます。
- テンプレートタグ
- データベースから投稿データ・設定情報などを取得してウェブ上に表示するための関数群で、テンプレートファイル上で使われます。例えば、記事の本文はテンプレートタグ
the_content()によって表示されます。括弧内にパラメータを書くことで、表示する値や表示フォーマットなどのオプションを指定できます。 - CSS（スタイルシート）
- ページのレイアウト・装飾はスタイルシートで行います（色やサイズの指定だけでなく、サイドバーをどこに配置するか等も）。テーマの中にある
style.cssファイルで定義します。
記号：
- 基礎 マーク： ちょっとカスタマイズしてみようかなあ、という時に、さくっと目を通すとよさそうなページに印を付けています。
WordPress テーマデザインの基礎
テーマの基礎・使い方・仕組み・構成ファイルなど、テーマ全体についてのドキュメント
- First Steps With WordPress
- テーマの使い方 基礎
- テーマについての基本情報。テーマとは何か、テーマの入手、切り替え方法
- テーマの作成 基礎
- テーマの構造と作り方。テーマの仕組み・テーマを構成するファイルの種類、プラグインとの連携などについて説明。配布されているテーマを自分でカスタマイズしたいときにも。
- 一般公開用テーマの設計・作成方法
- プラグインとテーマの移行
- テーマを新バージョンに対応させる方法についての情報。メジャーバージョンの変更点について。
- 管理画面用テーマの作成
- 管理画面の外観を変えるテーマ（プラグインとして動作する）の作り方。
配布されている既存テーマを使いたいときは 管理テーマリスト(en) より入手できる。（無くなってしまった）（→ 作った）
テンプレートファイル
テーマの構成要素である「テンプレート・ファイル」の仕組み、ページ内の各パーツや各種ページの作り方・カスタマイズ
基礎・全般
- テンプレート
- テンプレートとは
- テンプレート入門 基礎
- テンプレートファイル入門。1つのウェブページを生成するためにテンプレートファイルがどのような働きをするか、あるテンプレートファイルへの別のテンプレートファイルの読み込み方など。
- テンプレート階層 基礎
- 各種ページを生成するためのテンプレートの優先順序についての説明。ウェブログで要求されたページを生成する過程で、WordPress がチェックするテンプレートファイル名のリスト。
ヘッダ
- ヘッダの設計 /en
-
header.phpテンプレートファイルのカスタマイズ - Adding Post Feeds to the Header /en
- ヘッダ・テンプレートファイルへの RSS フィードリンクの追加方法
サイドバー
- サイドバーのカスタマイズ /en
-
sidebar.phpテンプレートファイルのカスタマイズ
コンテンツ部
- ループ 基礎
- テンプレートファイルの中でコンテンツ部を生成する WordPressループの説明。ループの基礎、複数ループについて
- WordPress ループ
- Wordpress ループの詳細、各種の実践例・小技
- テンプレートタグ query_posts()
- ループの前に書くことで、ページに表示する記事をコントロールできるテンプレートタグ
query_postsの説明 - Displaying Posts Using a Custom Select Query /en
- SELECT文などでページに表示する記事を変える方法
- 「続きを読む」のカスタマイズ /en
- 抜粋文につける「続きを読む（Read More）」リンクの見た目のカスタマイズ
- Customizing the Login Form /en
- 改ページリンクの表示方法 /en
- 一つの記事の表示を複数ページに分割したときの、ページリンクのカスタマイズ
- 投稿メタデータセクション /en
- 記事のメタデータ（投稿日・著者・カテゴリなど）の表示
- Separating Categories /en
- 各記事に表示するカテゴリリストの区切り文字の変え方（＝
the_category()のセパレータの話） - カスタムフィールドの使い方
- 投稿記事へのカスタム・メタデータの追加、表示方法
その他
- 入力フォームのスタイリング /en
- コメント・検索等の入力フォームの作り方
- Good Navigation Links /en
- 前・次ページへのリンク
- 次／前の記事・ページへのリンクの見た目のカスタマイズ
- How to Use Gravatars in WordPress /en
- Adding Asides /en
- How to add side notes to your blog posts
- ポップアップコメント /en
- コメントをポップアップウィンドウに表示させる方法
各種ページのデザイン（アーカイブ・カテゴリ・特別ページ）
- 静的トップページの作成
- サイトの静的トップページやスプラッシュ・ページ（本でいう表紙のような入り口ページ）の作り方
- 著者テンプレート /en
- 著者とその投稿記事を表示する
author.phpテンプレートファイルのカスタマイズ - カテゴリーテンプレート
- 様々なカテゴリーアーカイブのためのテンプレートの定義・カスタマイズ
- 記事のアルファベット順表示 /en
- カテゴリページの表示順を時系列ではなくアルファベット順にする方法
- アーカイブ・インデックスの作成 /en
- 日付単位で投稿記事一覧を表示するアーカイブ・インデックスページの作成方法（注：
archive.phpではなく、デフォルトテーマのarchives.phpのようなページ） - 検索結果ページの作成
- 検索結果を表示する
search.phpテンプレートファイルのカスタマイズ - 404エラーページの作成
- アクセスしたページが存在しないときに表示される 404エラー ページをカスタムできるテンプレートファイルの作り方
外部資料：
WordPressページ
- WordPressページ 基礎
- 「ページ」とは何か、使い方、「ページ」の表示フォーマットを指定する「ページテンプレート」の説明など
- テンプレートタグ wp_list_pages()
- WordPressページの一覧を作成するテンプレートタグ
wp_list_pages()の説明
テンプレートタグ
テンプレートタグの書き方、オプションの指定方法、各テンプレートタグの詳細説明・用例
- テンプレートタグ入門 /en
- テンプレートタグとは何か、使い方
- テンプレートタグ 基礎
- テンプレートタグ一覧と各タグの説明ページへのリンク
- テンプレートタグ大解剖
- テンプレートタグの構造・使用法・パラメータの理解
- インクルードタグ 基礎
- テンプレートファイルに WordPress の基本テンプレート（サイドバーなど）を読み込むときに利用できるタグの説明
- 条件分岐タグ 基礎
- このタグ（
is_home()のように いずれもis_xxxx()という形式）は、表示中のページの種類（例: メインページ、カテゴリアーカイブ等）を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。
外部資料：
- Templates and "is" functions, by Ryan
- Theme cheatsheet
- Using the_content and the_excerpt tags within the Loop at the same time.
CSS・デザイン・レイアウト・画像
- CSS
- How to integrate CSS into WordPress, with list of other WordPress CSS references
- CSS Shorthand /en
- Finding Your CSS Styles /en
- Creating Horizontal Menus /en
- サイトのメニューを水平に並べる方法
- メニューの動的ハイライト
- 表示中のページをメニュー・バー上でハイライトさせる
- Styling Lists with CSS /en
- CSS による箇条書きリストのスタイリング
- 見出しのデザイン /en
- 見出し要素（hn）のデザイン
- Playing With Fonts /en
- フォント
- 画像の利用 /en
- サイトへの画像の取り入れ方・表示の工夫
- Wrapping Text Around Images /en
- 画像を囲むようにテキストを配置する方法
- フォトログとギャラリー /en
- favicon.ico /en
- Gravatar の使い方
- Gravatar をコメント欄などに表示する
- ギャラリーショートコードの使い方
- Styling for Print /en
- 印刷用スタイリング
- Styling for Mobile /en
- モバイル用スタイリング
ツール・テスト・検証
- CSS Fixing_Browser Bugs /en
- CSS の実装に関するブラウザのバグへの対処
- ウェブサイトの検証 /en
- テキストエディタ
- 各 OS 対応のテキストエディタ一覧
- ファイルの編集 /en
- Lessons: Customizing Template Files /en
- WordPress Site Reviews /en
FAQ・トラブルシューティング
資料集
- Know Your Sources /en
- (x)HTML、PHP、CSS 一般についての外部資料。リンク集にも日本語資料へのリンクがあります。
- CSS Coding Standards /en - Best practices for coding CSS
- CSS Troubleshooting /en - Examining and debugging CSS
- Right-to-Left Language Support /en - Working with RTL text using CSS
未分類
- ナビゲーションメニュー
- Developing a Colour Scheme /en
- 日時の表示形式
- 投稿日時の設定と表示形式のカスタマイズ
- Fun Character Entities /en
- 文字実体参照を使って » などの特殊記号を表示してみよう
- スマイリーの使い方
- 「:-)」などの顔文字をスマイリー画像で表示するには。投稿の分野かなあ。
- Protection From Harvesters /en
- メールアドレスを収集ロボットに盗まれないように表示する
- テーマの作成
- テーマレビュー
- Theme Functions File Explained /en
- Theme Switching /en
- WordPress 用語 /en
- Commenting Code /en
- 関数リファレンス/wpdb Class
- Integrating Wordpress with Your Website /en
- Writing Code in Your Posts /en
外部資料
- Standing Tall » WordPress テーマの詳説 -- John Godley 氏による「UrbanGiraffe » WordPress Theme Guide」の和訳。デフォルトテーマを分解して、構造や仕組みを学びながら再構築していく。(taiさん)
- WordPressテーマ：作成＆カスタマイズ -- WordPressテーマの作り方、カスタマイズのポイントやアイデア等を集めたガイド (Toruさん)
最新英語版： WordPress Codex » Templates （最新版との差分）
