当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムや WordSlack #docs チャンネルでお知らせください。</p>

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

提供: WordPress Codex 日本語版
移動先: 案内、 検索
(新しいページ: 'WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。（まだドラフト） 主に Codex の en:Blog Design and Layout...')
 
(リンク切れを修正。)
 
(3人の利用者による、間の8版が非表示)
1行目: 1行目:
−
WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。（まだドラフト）
+
{{スタートガイド|デザイン}}
−
 
+
WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。
−
主に Codex の [[:en:Blog Design and Layout|Blog Design and Layout]]・[[:en:Templates|Templates]]・[[:en:Category:Design and Layout|Category:Design and Layout]] を再構成し、テーマ・デザイン・レイアウトに関する全てのページを概要付きで紹介。日本語ユーザによる外部ドキュメントも追加していきたいと思っています。
+
テーマ・デザイン・レイアウトに関する全てのページを概要付きで紹介。日本語ユーザーによる外部ドキュメントも追加していきます。
  
 
__TOC__
 
__TOC__
  
−
用語説明：
+
=== 用語 ===
−
; テーマ  
+
; [[#WordPress テーマ|テーマ]]
−
: サイトの外観を変えるいわゆる「スキン」のようなもので、WordPress サイトの表示の一切を受け持ちます。多彩なデザインの「テーマ」が数多く配布されていて、管理パネルから 1クリックで簡単に切り替えられます。
+
: サイトの外観を変えるいわゆる「スキン」のようなもので、WordPress サイトの表示の一切を受け持ちます。多彩なデザインの「テーマ」が数多く配布されていて、管理画面から 1クリックで簡単に切り替えられます。
 
: レイアウトや装飾を行なう「CSS」＋どこにどのような情報を表示するかの「(x)HTML」＋テーマ独自のオプション機能などのセットで、WordPress 本体を触ることなく、サイトデザインを自由自在にカスタマイズできます。
 
: レイアウトや装飾を行なう「CSS」＋どこにどのような情報を表示するかの「(x)HTML」＋テーマ独自のオプション機能などのセットで、WordPress 本体を触ることなく、サイトデザインを自由自在にカスタマイズできます。
−
; テンプレート  
+
; [[#テンプレートファイル|テンプレート]]
 
: CSS とともにテーマを構成するファイルで、サイト内の各ページに表示する内容（XHTML）を記述します。メインページ・カテゴリページなど各ページの土台となるテンプレートファイルに、ヘッダ・サイドバー・フッタなどのパーツ用テンプレートファイルを読み込むことで、1ページを表示します。XHTMLタグと PHP を組み合わせて書きます。
 
: CSS とともにテーマを構成するファイルで、サイト内の各ページに表示する内容（XHTML）を記述します。メインページ・カテゴリページなど各ページの土台となるテンプレートファイルに、ヘッダ・サイドバー・フッタなどのパーツ用テンプレートファイルを読み込むことで、1ページを表示します。XHTMLタグと PHP を組み合わせて書きます。
−
; テンプレートタグ  
+
; [[#テンプレートタグ|テンプレートタグ]]
−
: データベースから投稿データ・設定情報などを取得してウェブ上に表示するための関数群で、テンプレートファイル上で使われます。例えば、記事の本文はテンプレートタグ <tt>[[テンプレートタグ/the_content|the_content()]]</tt> によって表示されます。括弧内にパラメータを書くことで、表示する値や表示フォーマットなどのオプションを指定できます。
+
: データベースから投稿データ・設定情報などを取得してウェブ上に表示するための関数群で、テンプレートファイル上で使われます。例えば、記事の本文はテンプレートタグ <code>[[テンプレートタグ/the_content|the_content()]]</code> によって表示されます。括弧内にパラメータを書くことで、表示する値や表示フォーマットなどのオプションを指定できます。
 
; CSS（スタイルシート）  
 
; CSS（スタイルシート）  
−
: ページのレイアウト・装飾はスタイルシートで行います（色やサイズの指定だけでなく、サイドバーをどこに配置するか等も）。テーマの中にある style.css ファイルで定義します。
+
: ページのレイアウト・装飾はスタイルシートで行います（色やサイズの指定だけでなく、サイドバーをどこに配置するか等も）。テーマの中にある <code>style.css</code> ファイルで定義します。
  
−
以下のリンク先について：
+
記号：
−
* ps*wiki で和訳済み or 予定のページ → ps*wiki＋未作成のときは本家も
+
* <span class="attn">基礎</span> マーク： ちょっとカスタマイズしてみようかなあ、という時に、さくっと目を通すとよさそうなページに印を付けています。
−
* WPJ Codex で和訳済み or かなり進行中のページ → WPJ Codex＋本家
+
−
* 当面和訳できそうにないページ → 本家(en)
+
  
−
* <span class="attn">基礎</span> マーク： ちょっとカスタマイズしてみようかなあというときに、さくっと目を通すとよさそうなページに印を付けてみた。ページが多いので。
+
<div id="Basics of WordPress Theme Design">
−
 
+
== WordPress テーマデザインの基礎 ==
−
== WordPress テーマ ==
+
</div>
  
 
テーマの基礎・使い方・仕組み・構成ファイルなど、テーマ全体についてのドキュメント
 
テーマの基礎・使い方・仕組み・構成ファイルなど、テーマ全体についてのドキュメント
 +
; [[First Steps With WordPress]]
 +
; [[Using Themes|テーマの使い方]]<!-- Using Themes --> <span class="attn">基礎</span> : テーマについての基本情報。テーマとは何か、テーマの入手、切り替え方法
 +
; [[テーマの作成]]<!-- Theme Development --> <span class="attn">基礎</span> : テーマの構造と作り方。テーマの仕組み・テーマを構成するファイルの種類、プラグインとの連携などについて説明。配布されているテーマを自分でカスタマイズしたいときにも。
 +
; [[Designing Themes for Public Release|一般公開用テーマの設計・作成方法]]
 +
; [[プラグインとテーマの移行]]<!-- Migrating Plugins and Themes --> : テーマを新バージョンに対応させる方法についての情報。メジャーバージョンの変更点について。
  
−
; [[:ja:Using Themes|テーマの使い方]] <span class="attn">基礎</span> : テーマについての基本情報。テーマとは何か、テーマの入手、切り替え方法 ([[:en:Using Themes|Using Themes]])
+
; [[Creating Admin Themes|管理画面用テーマの作成]] : 管理画面の外観を変えるテーマ（プラグインとして動作する）の作り方。<del>配布されている既存テーマを使いたいときは [[:en:Using Themes/Theme List#Admin Themes|管理テーマリスト]](en) より入手できる。</del>（無くなってしまった）（→ 作った） 
−
; [[テーマの作成]] <span class="attn">基礎</span> : テーマの構造と作り方。テーマの仕組み・テーマを構成するファイルの種類、プラグインとの連携などについて説明。配布されているテーマを自分でカスタマイズしたいときにも。 ([[:en:Theme Development|Theme Development]])
+
−
; [[:en:Designing Themes for Public Release|Designing Themes for Public Release]](en) : 一般公開用テーマの設計・作成方法
+
−
; [[プラグインとテーマの 2.1 への移行]] : テーマを WordPress 2.1 以上に対応させる方法についての情報。2.0.x 系と 2.1 以上の変更点について。
+
−
; [[:en:Themes/Theme_Compatibility/2.2|Version 2.2 互換テーマリスト]](en) : WordPress 2.2 に対応しているテーマの一覧
+
−
; [[:en:Site Architecture 1.5|Site Architecture 1.5]](en) : あなたのテーマでも倣うことが推奨される、デフォルトテーマ・クラシックテーマの標準サイト構造
+
−
; [[:en:Creating Admin Themes|管理パネル用テーマの作成]](en) : 管理パネルの外観を変えるテーマ（プラグインとして動作する）の作り方。配布されている既存テーマを使いたいときは [[:en:Using_Themes/Theme_List#Admin_Themes|管理テーマリスト]](en) より入手できる。
+
−
; [[:en:Upgrade 1.2 to 1.5|Upgrade 1.2 to 1.5]](en) : WordPress 1.2 の「テンプレート」から 1.5 の「テーマ」へアップグレードするための情報あり
+
  
−
外部資料：
 
−
* [http://tekapo.com/st/wp/ Standing Tall » WordPress テーマの詳説] -- [http://www.urbangiraffe.com/ John Godley] 氏による[http://www.urbangiraffe.com/themes/guides 「UrbanGiraffe » WordPress Theme Guide」]の和訳。デフォルトテーマを分解して、構造や仕組みを学びながら再構築していく。(taiさん)
 
−
* [http://waviaei.com/files/wptgj/index.html WordPressテーマ：作成＆カスタマイズ] -- WordPressテーマの作り方、カスタマイズのポイントやアイデア等を集めたガイド (Toruさん)
 
−
* [http://www.cypherhackz.net/archives/2006/12/13/make-your-own-wordpress-theme-part-1/ Make your Own Wordpress Theme by Fauzi Mohd Darus]
 
−
*[http://boren.nu/archives/2004/11/10/anatomy-of-a-wordpress-theme/ Ryan Boren's Anatomy of a Theme]
 
−
*[http://www.transycan.net/blogtest/2005/03/31/visual-anatomy-of-a-wp-15-theme/ Moshu's Visual Anatomy of a WP v1.5 Theme]
 
−
*[http://www.chrisjdavis.org/2005/05/26/secrets-of-wp-theming-part-1/ Chris J. Davis' Secrets of  WP Theming, Part 1]
 
−
*[http://www.chrisjdavis.org/2005/06/02/secrets-pt-2/ Chris J. Davis' Secrets of  WP Theming, Part 2]
 
−
*[http://www.chrisjdavis.org/2005/06/13/secrets-pt-3/ Chris J. Davis' Secrets of  WP Theming, Part 3]
 
−
* [http://www.urbangiraffe.com/2005/04/12/themeguide1/ Dissection of a WordPress Theme]
 
−
*[http://www.codescheme.net/how-to-design-a-wordpress-theme/ Design your First WordPress Theme]
 
−
* [http://www.anekostudios.com/2006/09/21/how-to-create-a-wordpress-template-or-theme/ How to create a WordPress Template or Theme tutorial]
 
−
*  [http://mattread.com/archives/2005/04/wordpress-is-not-php/ WordPress is Not PHP - Template Files]
 
−
* [http://mattread.com/archives/2005/04/wordpress-is-not-php/#comment-1846 WordPress is PHP]
 
  
 +
<div id="Theme Design">
 
== テンプレートファイル ==
 
== テンプレートファイル ==
 +
</div>
  
−
[[:ja:Using Themes|テーマ]]の構成要素である「テンプレート・ファイル」の仕組み、ページ内の各パーツや各種ページの作り方・カスタマイズ
+
[[Using Themes|テーマ]]の構成要素である「テンプレート・ファイル」の仕組み、ページ内の各パーツや各種ページの作り方・カスタマイズ
  
 +
<div id="General_References">
 
=== 基礎・全般 ===
 
=== 基礎・全般 ===
 +
</div>
  
−
; [[テンプレート]] : テンプレートとは <!-- こちらに持ってきたリファレンス部分を削除すると、あまり存在価値がないかも -->
+
; [[テンプレート]]<!-- Templates --> : テンプレートとは <!-- こちらに持ってきたリファレンス部分を削除すると、あまり存在価値がないかも。テンプレート入門とマージするか？ -->
−
; [[:ja:Stepping Into Templates|Stepping Into Templates]]（和訳途中） <span class="attn">基礎</span> : テンプレートファイル入門。1つのウェブページを生成するためにテンプレートファイルがどのような働きをするか、あるテンプレートファイルへの別のテンプレートファイルの読み込み方など。 ([[:en:Stepping Into Templates|Stepping Into Templates]])
+
; [[テンプレート入門]]<!-- Stepping Into Templates --> <span class="attn">基礎</span> : テンプレートファイル入門。1つのウェブページを生成するためにテンプレートファイルがどのような働きをするか、あるテンプレートファイルへの別のテンプレートファイルの読み込み方など。
−
; [[:ja:Template Hierarchy|Template Hierarchy]] <span class="attn">基礎</span> : 各種ページを生成するためのテンプレートの優先順序についての説明。ウェブログで要求されたページを生成する過程で、WordPress がチェックするテンプレートファイル名のリスト。 ([[:en:Template Hierarchy|Template Hierarchy]])
+
; [[テンプレート階層]]<!-- Template Hierarchy --> <span class="attn">基礎</span> : 各種ページを生成するためのテンプレートの優先順序についての説明。ウェブログで要求されたページを生成する過程で、WordPress がチェックするテンプレートファイル名のリスト。
  
 +
<div id="Header.2C_Footer.2C_Sidebar.2C_and_Content_Sections">
 
=== ページ内の各ブロックのカスタマイズ ===
 
=== ページ内の各ブロックのカスタマイズ ===
 +
</div>
  
 
==== ヘッダ ====
 
==== ヘッダ ====
−
;[[:en:Designing Headers|ヘッダの設計]](en) : <tt>header.php</tt> テンプレートファイルのカスタマイズ
+
; [[Designing Headers|ヘッダの設計]] /[[:en:Designing Headers|en]] : <code>header.php</code> テンプレートファイルのカスタマイズ
−
;[[:en:Adding Post Feeds to the Header|Adding Post Feeds to the Header]](en) : ヘッダ・テンプレートファイルへの RSS フィードリンクの追加方法
+
; [[Adding Post Feeds to the Header]] /[[:en:Adding Post Feeds to the Header|en]] : ヘッダ・テンプレートファイルへの RSS フィードリンクの追加方法
  
 
==== サイドバー ====
 
==== サイドバー ====
−
;[[サイドバーのカスタマイズ]] : <tt>sidebar.php</tt> テンプレートファイルのカスタマイズ （[[:en:Customizing Your Sidebar|Customizing Your Sidebar]]）
+
; [[サイドバーのカスタマイズ]] /[[:en:Customizing Your Sidebar|en]] : <code>sidebar.php</code> テンプレートファイルのカスタマイズ
  
 
==== コンテンツ部 ====
 
==== コンテンツ部 ====
−
; [[:ja:The Loop|ループ]]（和訳途中） <span class="attn">基礎</span> : テンプレートファイルの中でコンテンツ部を生成する WordPressループの説明。ループの基礎、複数ループについて ([[:en:The Loop|The Loop]])
+
; [[The Loop|ループ]] <span class="attn">基礎</span> : テンプレートファイルの中でコンテンツ部を生成する WordPressループの説明。ループの基礎、複数ループについて
−
; [[:en:The Loop in Action|The Loop in Action]](en) : Wordpress ループの詳細、各種の実践例・小技
+
; [[The Loop in Action|WordPress ループ]] : Wordpress ループの詳細、各種の実践例・小技
−
; [[テンプレートタグ/query_posts|テンプレートタグ query_posts()]] : ループの前に書くことで、ページに表示する記事をコントロールできるテンプレートタグ <tt>query_posts</tt> の説明 （[[:en:Template_Tags/query_posts|Query Posts Template Tag]]）
+
; [[テンプレートタグ/query_posts|テンプレートタグ query_posts()]] : ループの前に書くことで、ページに表示する記事をコントロールできるテンプレートタグ <code>query_posts</code> の説明
−
; [[:en:Displaying Posts Using a Custom Select Query|Displaying Posts Using a Custom Select Query]](en) : SELECT文などでページに表示する記事を変える方法
+
; [[Displaying Posts Using a Custom Select Query]] /[[:en:Displaying Posts Using a Custom Select Query|en]] : SELECT文などでページに表示する記事を変える方法
−
;[[:en:Customizing the Read More|「続きを読む」のカスタマイズ]](en) : 抜粋文につける「続きを読む（Read More）」リンクの見た目のカスタマイズ
+
; [[「続きを読む」のカスタマイズ]] /[[:en:Customizing the Read More|en]] : 抜粋文につける「続きを読む（Read More）」リンクの見た目のカスタマイズ
−
;[[:en:Styling Page-Links|Styling Page-Links]](en) : 一つの記事の表示を複数ページに分割したときの、ページリンクのカスタマイズ
+
; [[Customizing the Login Form]] /[[:en:Customizing the Login Form|en]]
−
; [[:en:Post Meta Data Section|Post Meta Data Section]](en) : 記事のメタデータ（投稿日・著者・カテゴリなど）の表示
+
; [[Styling Page-Links|改ページリンクの表示方法]] /[[:en:Styling Page-Links|en]] : 一つの記事の表示を複数ページに分割したときの、ページリンクのカスタマイズ
−
; [[:en:Separating Categories|Separating Categories]](en) : 各記事に表示するカテゴリリストの区切り文字の変え方（＝ <tt>[[テンプレートタグ/the category|the_category()]]</tt> のセパレータの話）
+
; [[投稿メタデータセクション]] /[[:en:Post Meta Data Section|en]] : 記事のメタデータ（投稿日・著者・カテゴリなど）の表示
−
; [[カスタムフィールドの使い方]] : 投稿記事へのカスタム・メタデータの追加、表示方法 ([[:en:Using Custom Fields|Using Custom Fields]])
+
; [[Separating Categories]] /[[:en:Separating Categories|en]] : 各記事に表示するカテゴリリストの区切り文字の変え方（＝ <code>[[テンプレートタグ/the category|the_category()]]</code> のセパレータの話）
 +
; [[Using Custom Fields|カスタムフィールドの使い方]] : 投稿記事へのカスタム・メタデータの追加、表示方法
  
 
==== その他 ====
 
==== その他 ====
−
; [[:en:Styling Theme Forms|入力フォームのスタイリング]](en) : コメント・検索等の入力フォームの作り方
+
; [[Styling Theme Forms|入力フォームのスタイリング]] /[[:en:Styling Theme Forms|en]] : コメント・検索等の入力フォームの作り方
−
; [[:en:Good Navigation Links|Good Navigation Links]](en)
+
; [[Good Navigation Links]] /[[:en:Good Navigation Links|en]] :
−
;[[:en:Next and Previous Links|次／前へのリンク]](en) : 次／前の記事・ページへのリンクの見た目のカスタマイズ
+
; [[Next and Previous Links|前・次ページへのリンク]] : 次／前の記事・ページへのリンクの見た目のカスタマイズ
−
;[[:en:Adding Asides|Adding Asides]](en) : How to add side notes to your blog posts
+
; [[How to Use Gravatars in WordPress]] /[[:en:How to Use Gravatars in WordPress|en]]
−
;[[:en:FAQ_Working_with_WordPress#Can_I_have_popup_comments.3F|ポップアップコメント]](en) : コメントをポップアップウィンドウに表示させる方法
+
; [[Adding Asides|Adding Asides]] /[[:en:Adding Asides|en]] : How to add side notes to your blog posts
 +
; [[FAQ/Working with WordPress#Can I have popup comments?|ポップアップコメント]] /[[:en:FAQ Working with WordPress#Can I have popup comments?|en]] : コメントをポップアップウィンドウに表示させる方法
  
 +
<div id="Archives.2C_Categories.2C_and_Special_Pages">
 
=== 各種ページのデザイン（アーカイブ・カテゴリ・特別ページ） ===
 
=== 各種ページのデザイン（アーカイブ・カテゴリ・特別ページ） ===
 +
</div>
  
−
; [[:en:Creating a Static Front Page|静的トップページの作成]](en) : サイトの静的トップページやスプラッシュ・ページ（本でいう表紙のような入り口ページ）の作り方
+
; [[Creating a Static Front Page|静的トップページの作成]] : サイトの静的トップページやスプラッシュ・ページ（本でいう表紙のような入り口ページ）の作り方
−
; [[:en:Author Templates|著者テンプレート]](en) : 著者とその投稿記事を表示する <tt>author.php</tt> テンプレートファイルのカスタマイズ
+
; [[Author Templates|著者テンプレート]] /[[:en:Author Templates|en]] : 著者とその投稿記事を表示する <code>author.php</code> テンプレートファイルのカスタマイズ
−
; [[:en:Category Templates|カテゴリ・テンプレート]](en) : 様々なカテゴリアーカイブのためのテンプレートの定義・カスタマイズ
+
; [[Category Templates|カテゴリーテンプレート]] : 様々なカテゴリーアーカイブのためのテンプレートの定義・カスタマイズ
−
; [[:en:Alphabetizing Posts|記事のアルファベット順表示]](en) : カテゴリページの表示順を時系列ではなくアルファベット順にする方法
+
; [[Alphabetizing Posts|記事のアルファベット順表示]] /[[:en:Alphabetizing Posts|en]] : カテゴリページの表示順を時系列ではなくアルファベット順にする方法
−
; [[:en:Creating an Archive Index|アーカイブ・インデクスの作成]](en) : 日付単位で投稿記事を表示する <tt>archives.php</tt> テンプレートファイルのカスタマイズ
+
; [[Creating an Archive Index|アーカイブ・インデックスの作成]] /[[:en:Creating an Archive Index|en]] : 日付単位で投稿記事一覧を表示するアーカイブ・インデックスページの作成方法（注： <code>archive.php</code> ではなく、デフォルトテーマの <code>archive'''s'''.php</code> のようなページ）
−
; [[:en:Creating a Search Page|検索結果ページの作成]](en) : 検索結果を表示する <tt>search.php</tt> テンプレートファイルのカスタマイズ
+
; [[Creating a Search Page|検索結果ページの作成]] : 検索結果を表示する <code>search.php</code> テンプレートファイルのカスタマイズ
−
; [[:en:Creating an Error 404 Page|404エラーページの作成]](en) : アクセスしたページが存在しないときに表示される 404エラー ページをカスタムできるテンプレートファイルの作り方
+
; [[Creating an Error 404 Page|404エラーページの作成]] : アクセスしたページが存在しないときに表示される 404エラー ページをカスタムできるテンプレートファイルの作り方
  
 
外部資料：
 
外部資料：
103行目: 95行目:
 
=== WordPressページ ===
 
=== WordPressページ ===
  
−
; [[:ja:Pages|WordPressページ]] <span class="attn">基礎</span> : 「ページ」とは何か、使い方、「ページ」の表示フォーマットを指定する「ページテンプレート」の説明など ([[:en:Pages|Pages]])
+
; [[Pages|WordPressページ]] <span class="attn">基礎</span> : 「ページ」とは何か、使い方、「ページ」の表示フォーマットを指定する「ページテンプレート」の説明など
−
;[[テンプレートタグ/wp_list_pages|テンプレートタグ wp_list_pages()]] : WordPressページの一覧を作成するテンプレートタグ <tt>wp_list_pages()</tt> の説明 ([[:en:Template_Tags/wp_list_pages|List Pages Template Tag]])
+
;[[テンプレートタグ/wp_list_pages|テンプレートタグ wp_list_pages()]] : WordPressページの一覧を作成するテンプレートタグ <code>wp_list_pages()</code> の説明
  
 +
<div id="Template_Tags_Articles">
 
== テンプレートタグ ==
 
== テンプレートタグ ==
−
(Template Tags Articles)
+
</div>
  
 
テンプレートタグの書き方、オプションの指定方法、各テンプレートタグの詳細説明・用例
 
テンプレートタグの書き方、オプションの指定方法、各テンプレートタグの詳細説明・用例
  
−
; [[:en:Stepping Into Template Tags|テンプレートタグをさわってみよう]](en) : テンプレートタグ入門
+
; [[テンプレートタグ入門]] /[[:en:Stepping Into Template Tags|en]] : テンプレートタグとは何か、使い方
−
; [[テンプレートタグ]] <span class="attn">基礎</span> : テンプレートタグ一覧と各タグの説明ページへのリンク ([[:en:Template Tags|Template Tags]])
+
; [[テンプレートタグ]]<!-- Template Tags --> <span class="attn">基礎</span> : テンプレートタグ一覧と各タグの説明ページへのリンク
−
; [[:en:Template_Tags/Anatomy_of_a_Template_Tag|テンプレートタグ大解剖]](en) : テンプレートタグの構造・使用法・パラメータの理解
+
; [[テンプレートタグ/Anatomy of a Template_Tag|テンプレートタグ大解剖]] : テンプレートタグの構造・使用法・パラメータの理解
−
; [[:ja:Include Tags|インクルードタグ]] <span class="attn">基礎</span> : テンプレートファイルに WordPress の基本テンプレート（サイドバーなど）を読み込むときに利用できるタグの説明 ([[:en:Include Tags|Include Tags]])
+
; [[インクルードタグ]]<!-- Include Tags --> <span class="attn">基礎</span> : テンプレートファイルに WordPress の基本テンプレート（サイドバーなど）を読み込むときに利用できるタグの説明
−
; [[:ja:Conditional Tags|条件分岐タグ]] <span class="attn">基礎</span> : このタグ（<tt>[[:ja:Conditional Tags#The Main Page|is_home()]]</tt> のように いずれも <tt>is_''something''()</tt> という形式）は、表示中のページの種類（例: メインページ、カテゴリアーカイブ等）を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。 ([[:en:Conditional Tags|Conditional Tags]])
+
; [[Conditional Tags|条件分岐タグ]] <span class="attn">基礎</span> : このタグ（<code>[[Conditional Tags#The Main Page|is_home()]]</code> のように いずれも <code>is_''xxxx''()</code> という形式）は、表示中のページの種類（例: メインページ、カテゴリアーカイブ等）を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。
  
 
外部資料：
 
外部資料：
−
* [http://wptags.com/ Wptags.com] -- テーマファイルをアレンジするうえで必要な「テンプレートタグ」の機能と使い方を説明。さらなる詳細や使用例は Codex 参照。
+
* [http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/ Templates and "is" functions, by Ryan]
−
*[http://boren.nu/archives/2004/10/16/templates-and-the-is-functions/ Templates and "is" functions, by Ryan]
+
 
* [http://www.headzoo.com/wptcs.png Theme cheatsheet]
 
* [http://www.headzoo.com/wptcs.png Theme cheatsheet]
 
* [http://florchakh.com/2007/04/17/mashup-of-posts-on-your-wordpress-homepage.html Using the_content and the_excerpt tags within the Loop at the same time].
 
* [http://florchakh.com/2007/04/17/mashup-of-posts-on-your-wordpress-homepage.html Using the_content and the_excerpt tags within the Loop at the same time].
  
−
== CSS・デザイン・レイアウト ==
+
<div id="CSS.2C_Design.2C_and_Layout">
−
(CSS, Design, and Layout)
+
== CSS・デザイン・レイアウト・画像 ==
 +
</div>
  
−
; [[:en:CSS|CSS]](en) : How to integrate CSS into WordPress, with list of other WordPress CSS references
+
; [[CSS]] : How to integrate CSS into WordPress, with list of other WordPress CSS references
−
; [[:en:CSS Shorthand|CSS Shorthand]]
+
; [[CSS Shorthand]] /[[:en:CSS Shorthand|en]]
−
; [[:en:Finding Your CSS Styles|Finding Your CSS Styles]]
+
; [[Finding Your CSS Styles]] /[[:en:Finding Your CSS Styles|en]]
−
; [[:en:Creating Horizontal Menus|Creating Horizontal Menus]](en) : サイトのメニューを水平に並べる方法
+
; [[Creating Horizontal Menus]] /[[:en:Creating Horizontal Menus|en]] : サイトのメニューを水平に並べる方法
−
; [[:en:Dynamic Menu Highlighting|Dynamic Menu Highlighting]](en) : 表示中のページをメニュー・バー上でハイライトさせる
+
; [[Dynamic Menu Highlighting|メニューの動的ハイライト]] : 表示中のページをメニュー・バー上でハイライトさせる
−
; [[:en:Styling Lists with CSS|Styling Lists with CSS]](en) : CSS による箇条書きリストのスタイリング
+
; [[Styling Lists with CSS]] /[[:en:Styling Lists with CSS|en]] : CSS による箇条書きリストのスタイリング
−
; [[:en:Wrapping Text Around Images|Wrapping Text Around Images]](en) : 画像を囲むようにテキストを配置する方法
+
; [[Designing Headings|見出しのデザイン]] /[[:en:Designing Headings|en]] : 見出し要素（hn）のデザイン
−
 
+
; [[Playing With Fonts]] /[[:en:Playing With Fonts|en]] : フォント
−
外部資料：
+
; [[Using Images|画像の利用]] /[[:en:Using Images|en]] : サイトへの画像の取り入れ方・表示の工夫
−
* [http://flumpcakes.co.uk/css/optimiser/ Flumpcakes CSS Optimizer] - Optimize your CSS file. ''Contains a possibly "not safe for work" header image.''
+
; [[Wrapping Text Around Images]] /[[:en:Wrapping Text Around Images|en]] : 画像を囲むようにテキストを配置する方法
−
*[http://creativecommons.org/image/ Creative Commons Images]:Search for Creative Commons images that are free to share and use online.
+
; [[Photoblogs and Galleries|フォトログとギャラリー]] /[[:en:Photoblogs and Galleries|en]]
−
*[http://www.imageafter.com/ Image * After]:A free stock image library for commercial and personal use.
+
; [[favicon.ico]] /[[:en:favicon.ico|en]]
−
*[http://www.sxc.hu/ stock.xchng]:Photographs available free of charge to the public.
+
; [[Gravatar の使い方]]: [http://site.gravatar.com/ Gravatar] をコメント欄などに表示する
−
*[http://www.freedigitalphotos.net freedigitalphotos.net]:Free photos for commercial and non-commercial use.
+
; [[ギャラリーショートコードの使い方]]
−
*[http://www.informaticafriuli.com/category/web-friuli/template-informatica-friuli/  informaticafriuli.com]:Free wordpress theme and template.
+
; [[Styling for Print]] /[[:en:Styling for Print|en]] : 印刷用スタイリング
 +
; [[Styling for Mobile]] /[[:en:Styling for Mobile|en]] : モバイル用スタイリング
  
 +
<div id="Tools.2C_Testing_and_Validating">
 
== ツール・テスト・検証 ==
 
== ツール・テスト・検証 ==
 +
</div>
  
−
; [[:en:CSS Fixing_Browser Bugs|CSS Fixing_Browser Bugs]](en) : CSS の実装に関するブラウザのバグへの対処
+
; [[CSS Fixing_Browser Bugs]] /[[:en:CSS Fixing_Browser Bugs|en]] : CSS の実装に関するブラウザのバグへの対処
−
; [[:en:Validating a Website|ウェブサイトの検証]](en)
+
; [[Validating a Website|ウェブサイトの検証]] /[[:en:Validating a Website|en]]
−
; [[用語集#Text_editor|テキストエディタ]] : 各 OS 対応のテキストエディタ一覧
+
; [[用語集#テキストエディタ|テキストエディタ]] : 各 OS 対応のテキストエディタ一覧
−
; [[:en:WordPress Site Reviews|WordPress Site Reviews]](en)
+
; [[Editing Files|ファイルの編集]] /[[:en:Editing Files|en]]
 +
; [[WordPress_Lessons#Template_Files|Lessons: Customizing Template Files]] /[[:en:WordPress_Lessons#Template_Files|en]]
 +
; [[WordPress Site Reviews]] /[[:en:WordPress Site Reviews|en]]
  
 
== FAQ・トラブルシューティング ==
 
== FAQ・トラブルシューティング ==
  
−
; [[:en:FAQ Layout and Design|FAQ レイアウト・デザイン]](en)
+
; [[FAQ/レイアウトとデザイン|FAQ サイトのレイアウトとデザイン]]
−
; [[:en:CSS Troubleshooting|CSS トラブルシューティング]](en)
+
; [[CSS Troubleshooting|CSS トラブルシューティング]] /[[:en:CSS Troubleshooting|en]]
−
; [[:en:I Make Changes and Nothing Happens|変更したのに何も変化しないときは]](en)
+
 
 +
== 資料集 ==
 +
 
 +
; [[Know Your Sources]] /[[:en:Know Your Sources|en]] : (x)HTML、PHP、CSS 一般についての外部資料。[[WordPress リンク集#関連知識|リンク集]]にも日本語資料へのリンクがあります。
 +
; [[CSS Coding Standards]] /[[:en:CSS Coding Standards|en]] - Best practices for coding CSS
 +
; [[CSS Troubleshooting]] /[[:en:CSS Troubleshooting|en]] - Examining and debugging CSS
 +
; [[Right to Left Language Support|Right-to-Left Language Support]] /[[:en:Right to Left Language Support|en]] - Working with RTL text using CSS
  
 
== 未分類 ==
 
== 未分類 ==
  
−
; [[:en:Know Your Sources|Know Your Sources]](en) : (x)HTML、PHP、CSS 一般についての外部資料。[[WordPress リンク集#関連知識|リンク集]] にも日本語資料へのリンクがあります。
+
; [[Navigation_Menus|ナビゲーションメニュー]]
−
; [[:en:Developing a Colour Scheme|Developing a Colour Scheme]](en)
+
; [[Developing a Colour Scheme]] /[[:en:Developing a Colour Scheme|en]]
−
; [[:en:Styling for Print|Styling for Print]](en)
+
; [[Formatting Date and Time|日時の表示形式]] : 投稿日時の設定と表示形式のカスタマイズ
−
; [[:en:Styling for Mobile|Styling for Mobile]](en)
+
; [[Fun Character Entities]] /[[:en:Fun Character Entities|en]] : 文字実体参照を使って &raquo; などの特殊記号を表示してみよう
−
; [[:en:Formatting Date and Time|投稿日時の表示形式]](en) : 投稿日時の設定と表示形式のカスタマイズ
+
; [[Using Smilies|スマイリーの使い方]] : 「:-)」などの顔文字をスマイリー画像で表示するには。投稿の分野かなあ。
−
; [[:en:Designing Headings|見出しのデザイン]](en) : 見出し要素（hn）のデザイン
+
; [[Protection From Harvesters]] /[[:en:Protection From Harvesters|en]] : メールアドレスを収集ロボットに盗まれないように表示する
−
; [[:en:Playing With Fonts|Playing With Fonts]](en)
+
; [[テーマの作成]]
−
; [[:en:Using Images|画像の利用]](en) : サイトへの画像の取り入れ方・表示の工夫
+
; [[Theme Review|テーマレビュー]]
−
; [[:en:Fun Character Entities|Fun Character Entities]](en) : 文字実体参照を使って &raquo; などの特殊記号を表示してみよう
+
; [[Functions_File_Explained|Theme Functions File Explained]] /[[:en:Functions_File_Explained|en]]
−
; [[:en:Using Smilies|スマイリーの利用]](en) : 「:-)」などの顔文字をスマイリー画像で表示するには。投稿の分野かなあ。
+
; [[Theme Switching]] /[[:en:Theme Switching|en]]
−
; [[:en:Using Gravatars|Using Gravatars]](en) : [http://site.gravatar.com/ Gravatar] をコメント欄などに表示する
+
; [[WordPress 用語]] /[[:en:WordPress Semantics|en]]
−
; [[:en:Protection From Harvesters|Protection From Harvesters]](en) : メールアドレスを収集ロボットに盗まれないように表示する
+
; [[Commenting Code]] /[[:en:Commenting Code|en]]
−
; [[:en:Theme Switching|Theme Switching]](en)
+
; [[関数リファレンス/wpdb Class]]
−
; [[:en:WordPress Semantics|WordPress Semantics]](en)
+
; [[Integrating Wordpress with Your Website]] /[[:en:Integrating Wordpress with Your Website|en]]
 +
<!-- ; [[Simple PHP Gallery]] /[[:en:Simple PHP Gallery|en]] -->
 +
; [[Writing Code in Your Posts]] /[[:en:Writing Code in Your Posts|en]]
  
−
{{DEFAULTSORT:*さいとてさいんりふあれんす}}
+
 
−
[[Category:WordPress]]
+
===外部資料===
 +
* [http://tekapo.com/st/wp/ Standing Tall » WordPress テーマの詳説] -- [http://www.urbangiraffe.com/ John Godley] 氏による[http://www.urbangiraffe.com/themes/guides 「UrbanGiraffe » WordPress Theme Guide」]の和訳。デフォルトテーマを分解して、構造や仕組みを学びながら再構築していく。(taiさん)
 +
* [http://waviaei.com/files/wptgj/index.html WordPressテーマ：作成＆カスタマイズ] -- WordPressテーマの作り方、カスタマイズのポイントやアイデア等を集めたガイド (Toruさん)
 +
 
 +
 
 +
 
 +
{{原文|Templates|56183}}<!-- 2008年4月10日 (木) 04:11 Jestro 版 ページ一覧部分 -->
 +
 
 +
{{原文|Site Design and Layout|142222}}<!-- 02:10, 29 March 2014‎ Ekajogja 版 -->
 +
 
 +
{{原文|Category:Design and Layout}}<!-- 2008-04-25 チェック -->
 +
 
 +
{{DEFAULTSORT:|*てさいんりふあれんす}}
 
[[Category:デザインとレイアウト]]
 
[[Category:デザインとレイアウト]]
−
[[Category:テーマ]]
 
 
[[Category:テンプレート]]
 
[[Category:テンプレート]]
 
[[Category:テンプレートタグ]]
 
[[Category:テンプレートタグ]]
  
−
[[en:Blog Design and Layout]]
 
 
[[en:Templates]]
 
[[en:Templates]]
 +
[[en:Blog Design and Layout]]
 
[[en:Category:Design and Layout]]
 
[[en:Category:Design and Layout]]
 +
[[es:Blog Design and Layout]]
 +
[[fr:StyleDisposition]]
 +
[[it:Blog Design]]
 +
[[ko:Blog Design and Layout]]
 +
[[ru:Blog Design and Layout]]

2015年10月25日 (日) 23:12時点における最新版

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() という形式）は、表示中のページの種類（例: メインページ、カテゴリアーカイブ等）を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。

外部資料：

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・トラブルシューティング

FAQ サイトのレイアウトとデザイン
CSS トラブルシューティング /en

資料集

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


外部資料


最新英語版： WordPress Codex » Templates （最新版との差分）

最新英語版： WordPress Codex » Site Design and Layout （最新版との差分）

最新英語版： WordPress Codex » Category:Design and Layout

「https://wpdocs.osdn.jp/wiki/index.php?title=WordPress_サイトデザイン_リファレンス&oldid=11959」から取得