- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細)
「WordPress サイトデザイン リファレンス」の版間の差分
提供: WordPress Codex 日本語版
(新しいページ: 'WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。(まだドラフト) 主に Codex の en:Blog Design and Layout...') |
(リンク切れを修正。) |
||
(3人の利用者による、間の8版が非表示) | |||
1行目: | 1行目: | ||
− | WordPress | + | {{スタートガイド|デザイン}} |
− | + | WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。 | |
− | + | テーマ・デザイン・レイアウトに関する全てのページを概要付きで紹介。日本語ユーザーによる外部ドキュメントも追加していきます。 | |
__TOC__ | __TOC__ | ||
− | + | === 用語 === | |
− | ; テーマ | + | ; [[#WordPress テーマ|テーマ]] |
− | : サイトの外観を変えるいわゆる「スキン」のようなもので、WordPress | + | : サイトの外観を変えるいわゆる「スキン」のようなもので、WordPress サイトの表示の一切を受け持ちます。多彩なデザインの「テーマ」が数多く配布されていて、管理画面から 1クリックで簡単に切り替えられます。 |
: レイアウトや装飾を行なう「CSS」+どこにどのような情報を表示するかの「(x)HTML」+テーマ独自のオプション機能などのセットで、WordPress 本体を触ることなく、サイトデザインを自由自在にカスタマイズできます。 | : レイアウトや装飾を行なう「CSS」+どこにどのような情報を表示するかの「(x)HTML」+テーマ独自のオプション機能などのセットで、WordPress 本体を触ることなく、サイトデザインを自由自在にカスタマイズできます。 | ||
− | ; テンプレート | + | ; [[#テンプレートファイル|テンプレート]] |
: CSS とともにテーマを構成するファイルで、サイト内の各ページに表示する内容(XHTML)を記述します。メインページ・カテゴリページなど各ページの土台となるテンプレートファイルに、ヘッダ・サイドバー・フッタなどのパーツ用テンプレートファイルを読み込むことで、1ページを表示します。XHTMLタグと PHP を組み合わせて書きます。 | : CSS とともにテーマを構成するファイルで、サイト内の各ページに表示する内容(XHTML)を記述します。メインページ・カテゴリページなど各ページの土台となるテンプレートファイルに、ヘッダ・サイドバー・フッタなどのパーツ用テンプレートファイルを読み込むことで、1ページを表示します。XHTMLタグと PHP を組み合わせて書きます。 | ||
− | ; テンプレートタグ | + | ; [[#テンプレートタグ|テンプレートタグ]] |
− | : データベースから投稿データ・設定情報などを取得してウェブ上に表示するための関数群で、テンプレートファイル上で使われます。例えば、記事の本文はテンプレートタグ < | + | : データベースから投稿データ・設定情報などを取得してウェブ上に表示するための関数群で、テンプレートファイル上で使われます。例えば、記事の本文はテンプレートタグ <code>[[テンプレートタグ/the_content|the_content()]]</code> によって表示されます。括弧内にパラメータを書くことで、表示する値や表示フォーマットなどのオプションを指定できます。 |
; CSS(スタイルシート) | ; CSS(スタイルシート) | ||
− | : ページのレイアウト・装飾はスタイルシートで行います(色やサイズの指定だけでなく、サイドバーをどこに配置するか等も)。テーマの中にある style.css ファイルで定義します。 | + | : ページのレイアウト・装飾はスタイルシートで行います(色やサイズの指定だけでなく、サイドバーをどこに配置するか等も)。テーマの中にある <code>style.css</code> ファイルで定義します。 |
− | + | 記号: | |
− | * | + | * <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 --> : テーマを新バージョンに対応させる方法についての情報。メジャーバージョンの変更点について。 | ||
− | ; [[ | + | ; [[Creating Admin Themes|管理画面用テーマの作成]] : 管理画面の外観を変えるテーマ(プラグインとして動作する)の作り方。<del>配布されている既存テーマを使いたいときは [[:en:Using Themes/Theme List#Admin Themes|管理テーマリスト]](en) より入手できる。</del>(無くなってしまった)(→ 作った) |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <div id="Theme Design"> | ||
== テンプレートファイル == | == テンプレートファイル == | ||
+ | </div> | ||
− | [[ | + | [[Using Themes|テーマ]]の構成要素である「テンプレート・ファイル」の仕組み、ページ内の各パーツや各種ページの作り方・カスタマイズ |
+ | <div id="General_References"> | ||
=== 基礎・全般 === | === 基礎・全般 === | ||
+ | </div> | ||
− | ; [[テンプレート]] : テンプレートとは <!-- | + | ; [[テンプレート]]<!-- Templates --> : テンプレートとは <!-- こちらに持ってきたリファレンス部分を削除すると、あまり存在価値がないかも。テンプレート入門とマージするか? --> |
− | ; [[ | + | ; [[テンプレート入門]]<!-- Stepping Into Templates --> <span class="attn">基礎</span> : テンプレートファイル入門。1つのウェブページを生成するためにテンプレートファイルがどのような働きをするか、あるテンプレートファイルへの別のテンプレートファイルの読み込み方など。 |
− | ; [[ | + | ; [[テンプレート階層]]<!-- Template Hierarchy --> <span class="attn">基礎</span> : 各種ページを生成するためのテンプレートの優先順序についての説明。ウェブログで要求されたページを生成する過程で、WordPress がチェックするテンプレートファイル名のリスト。 |
+ | <div id="Header.2C_Footer.2C_Sidebar.2C_and_Content_Sections"> | ||
=== ページ内の各ブロックのカスタマイズ === | === ページ内の各ブロックのカスタマイズ === | ||
+ | </div> | ||
==== ヘッダ ==== | ==== ヘッダ ==== | ||
− | ;[[:en:Designing Headers| | + | ; [[Designing Headers|ヘッダの設計]] /[[:en:Designing Headers|en]] : <code>header.php</code> テンプレートファイルのカスタマイズ |
− | ;[[ | + | ; [[Adding Post Feeds to the Header]] /[[:en:Adding Post Feeds to the Header|en]] : ヘッダ・テンプレートファイルへの RSS フィードリンクの追加方法 |
==== サイドバー ==== | ==== サイドバー ==== | ||
− | ;[[サイドバーのカスタマイズ]] | + | ; [[サイドバーのカスタマイズ]] /[[:en:Customizing Your Sidebar|en]] : <code>sidebar.php</code> テンプレートファイルのカスタマイズ |
==== コンテンツ部 ==== | ==== コンテンツ部 ==== | ||
− | ; [[ | + | ; [[The Loop|ループ]] <span class="attn">基礎</span> : テンプレートファイルの中でコンテンツ部を生成する WordPressループの説明。ループの基礎、複数ループについて |
− | ; [[ | + | ; [[The Loop in Action|WordPress ループ]] : Wordpress ループの詳細、各種の実践例・小技 |
− | ; [[テンプレートタグ/query_posts|テンプレートタグ query_posts()]] : ループの前に書くことで、ページに表示する記事をコントロールできるテンプレートタグ < | + | ; [[テンプレートタグ/query_posts|テンプレートタグ query_posts()]] : ループの前に書くことで、ページに表示する記事をコントロールできるテンプレートタグ <code>query_posts</code> の説明 |
− | + | ; [[Displaying Posts Using a Custom Select Query]] /[[:en:Displaying Posts Using a Custom Select Query|en]] : SELECT文などでページに表示する記事を変える方法 | |
− | ;[[:en:Customizing the Read More| | + | ; [[「続きを読む」のカスタマイズ]] /[[:en:Customizing the Read More|en]] : 抜粋文につける「続きを読む(Read More)」リンクの見た目のカスタマイズ |
− | ;[[:en:Styling Page-Links|Styling Page-Links]] | + | ; [[Customizing the Login Form]] /[[:en:Customizing the Login Form|en]] |
− | ; [[:en:Post Meta Data Section| | + | ; [[Styling Page-Links|改ページリンクの表示方法]] /[[:en:Styling Page-Links|en]] : 一つの記事の表示を複数ページに分割したときの、ページリンクのカスタマイズ |
− | ; [[:en:Separating Categories| | + | ; [[投稿メタデータセクション]] /[[:en:Post Meta Data Section|en]] : 記事のメタデータ(投稿日・著者・カテゴリなど)の表示 |
− | ; [[ | + | ; [[Separating Categories]] /[[:en:Separating Categories|en]] : 各記事に表示するカテゴリリストの区切り文字の変え方(= <code>[[テンプレートタグ/the category|the_category()]]</code> のセパレータの話) |
+ | ; [[Using Custom Fields|カスタムフィールドの使い方]] : 投稿記事へのカスタム・メタデータの追加、表示方法 | ||
==== その他 ==== | ==== その他 ==== | ||
− | ; [[:en:Styling Theme Forms| | + | ; [[Styling Theme Forms|入力フォームのスタイリング]] /[[:en:Styling Theme Forms|en]] : コメント・検索等の入力フォームの作り方 |
− | ; [[:en:Good Navigation Links| | + | ; [[Good Navigation Links]] /[[:en:Good Navigation Links|en]] : |
− | ;[[ | + | ; [[Next and Previous Links|前・次ページへのリンク]] : 次/前の記事・ページへのリンクの見た目のカスタマイズ |
− | ;[[:en:Adding Asides|Adding Asides]] | + | ; [[How to Use Gravatars in WordPress]] /[[:en:How to Use Gravatars in WordPress|en]] |
− | ;[[: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> | ||
− | ; [[ | + | ; [[Creating a Static Front Page|静的トップページの作成]] : サイトの静的トップページやスプラッシュ・ページ(本でいう表紙のような入り口ページ)の作り方 |
− | ; [[:en:Author Templates| | + | ; [[Author Templates|著者テンプレート]] /[[:en:Author Templates|en]] : 著者とその投稿記事を表示する <code>author.php</code> テンプレートファイルのカスタマイズ |
− | ; [[ | + | ; [[Category Templates|カテゴリーテンプレート]] : 様々なカテゴリーアーカイブのためのテンプレートの定義・カスタマイズ |
− | ; [[:en:Alphabetizing Posts| | + | ; [[Alphabetizing Posts|記事のアルファベット順表示]] /[[:en:Alphabetizing Posts|en]] : カテゴリページの表示順を時系列ではなくアルファベット順にする方法 |
− | ; [[:en:Creating an Archive Index| | + | ; [[Creating an Archive Index|アーカイブ・インデックスの作成]] /[[:en:Creating an Archive Index|en]] : 日付単位で投稿記事一覧を表示するアーカイブ・インデックスページの作成方法(注: <code>archive.php</code> ではなく、デフォルトテーマの <code>archive'''s'''.php</code> のようなページ) |
− | ; [[ | + | ; [[Creating a Search Page|検索結果ページの作成]] : 検索結果を表示する <code>search.php</code> テンプレートファイルのカスタマイズ |
− | ; [[ | + | ; [[Creating an Error 404 Page|404エラーページの作成]] : アクセスしたページが存在しないときに表示される 404エラー ページをカスタムできるテンプレートファイルの作り方 |
外部資料: | 外部資料: | ||
103行目: | 95行目: | ||
=== WordPressページ === | === WordPressページ === | ||
− | ; [[ | + | ; [[Pages|WordPressページ]] <span class="attn">基礎</span> : 「ページ」とは何か、使い方、「ページ」の表示フォーマットを指定する「ページテンプレート」の説明など |
− | ;[[テンプレートタグ/wp_list_pages|テンプレートタグ wp_list_pages()]] : WordPressページの一覧を作成するテンプレートタグ < | + | ;[[テンプレートタグ/wp_list_pages|テンプレートタグ wp_list_pages()]] : WordPressページの一覧を作成するテンプレートタグ <code>wp_list_pages()</code> の説明 |
+ | <div id="Template_Tags_Articles"> | ||
== テンプレートタグ == | == テンプレートタグ == | ||
− | + | </div> | |
テンプレートタグの書き方、オプションの指定方法、各テンプレートタグの詳細説明・用例 | テンプレートタグの書き方、オプションの指定方法、各テンプレートタグの詳細説明・用例 | ||
− | ; [[:en:Stepping Into Template Tags| | + | ; [[テンプレートタグ入門]] /[[:en:Stepping Into Template Tags|en]] : テンプレートタグとは何か、使い方 |
− | ; [[テンプレートタグ]] <span class="attn">基礎</span> : テンプレートタグ一覧と各タグの説明ページへのリンク | + | ; [[テンプレートタグ]]<!-- Template Tags --> <span class="attn">基礎</span> : テンプレートタグ一覧と各タグの説明ページへのリンク |
− | ; [[ | + | ; [[テンプレートタグ/Anatomy of a Template_Tag|テンプレートタグ大解剖]] : テンプレートタグの構造・使用法・パラメータの理解 |
− | ; [[ | + | ; [[インクルードタグ]]<!-- Include Tags --> <span class="attn">基礎</span> : テンプレートファイルに WordPress の基本テンプレート(サイドバーなど)を読み込むときに利用できるタグの説明 |
− | ; [[ | + | ; [[Conditional Tags|条件分岐タグ]] <span class="attn">基礎</span> : このタグ(<code>[[Conditional Tags#The Main Page|is_home()]]</code> のように いずれも <code>is_''xxxx''()</code> という形式)は、表示中のページの種類(例: メインページ、カテゴリアーカイブ等)を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。 |
外部資料: | 外部資料: | ||
− | + | * [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]. | ||
− | == | + | <div id="CSS.2C_Design.2C_and_Layout"> |
− | + | == CSS・デザイン・レイアウト・画像 == | |
+ | </div> | ||
− | ; [[ | + | ; [[CSS]] : How to integrate CSS into WordPress, with list of other WordPress CSS references |
− | ; [[:en:CSS Shorthand| | + | ; [[CSS Shorthand]] /[[:en:CSS Shorthand|en]] |
− | ; [[ | + | ; [[Finding Your CSS Styles]] /[[:en:Finding Your CSS Styles|en]] |
− | ; [[:en:Creating Horizontal Menus| | + | ; [[Creating Horizontal Menus]] /[[:en:Creating Horizontal Menus|en]] : サイトのメニューを水平に並べる方法 |
− | ; [[ | + | ; [[Dynamic Menu Highlighting|メニューの動的ハイライト]] : 表示中のページをメニュー・バー上でハイライトさせる |
− | ; [[ | + | ; [[Styling Lists with CSS]] /[[:en:Styling Lists with CSS|en]] : CSS による箇条書きリストのスタイリング |
− | ; [[:en:Wrapping Text Around Images | + | ; [[Designing Headings|見出しのデザイン]] /[[:en:Designing Headings|en]] : 見出し要素(hn)のデザイン |
− | + | ; [[Playing With Fonts]] /[[:en:Playing With Fonts|en]] : フォント | |
− | + | ; [[Using Images|画像の利用]] /[[:en:Using Images|en]] : サイトへの画像の取り入れ方・表示の工夫 | |
− | + | ; [[Wrapping Text Around Images]] /[[:en:Wrapping Text Around Images|en]] : 画像を囲むようにテキストを配置する方法 | |
− | + | ; [[Photoblogs and Galleries|フォトログとギャラリー]] /[[:en:Photoblogs and Galleries|en]] | |
− | + | ; [[favicon.ico]] /[[:en:favicon.ico|en]] | |
− | + | ; [[Gravatar の使い方]]: [http://site.gravatar.com/ Gravatar] をコメント欄などに表示する | |
− | + | ; [[ギャラリーショートコードの使い方]] | |
− | + | ; [[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 Fixing_Browser Bugs|en]] : CSS の実装に関するブラウザのバグへの対処 |
− | ; [[:en:Validating a Website| | + | ; [[Validating a Website|ウェブサイトの検証]] /[[:en:Validating a Website|en]] |
− | ; [[用語集# | + | ; [[用語集#テキストエディタ|テキストエディタ]] : 各 OS 対応のテキストエディタ一覧 |
− | ; [[:en:WordPress Site Reviews | + | ; [[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・トラブルシューティング == | ||
− | ; [[ | + | ; [[FAQ/レイアウトとデザイン|FAQ サイトのレイアウトとデザイン]] |
− | ; [[:en:CSS Troubleshooting| | + | ; [[CSS Troubleshooting|CSS トラブルシューティング]] /[[:en:CSS Troubleshooting|en]] |
− | ; [[: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 | ||
== 未分類 == | == 未分類 == | ||
− | ; [[ | + | ; [[Navigation_Menus|ナビゲーションメニュー]] |
− | + | ; [[Developing a Colour Scheme]] /[[:en:Developing a Colour Scheme|en]] | |
− | ; [[ | + | ; [[Formatting Date and Time|日時の表示形式]] : 投稿日時の設定と表示形式のカスタマイズ |
− | ; [[:en: | + | ; [[Fun Character Entities]] /[[:en:Fun Character Entities|en]] : 文字実体参照を使って » などの特殊記号を表示してみよう |
− | ; [[ | + | ; [[Using Smilies|スマイリーの使い方]] : 「:-)」などの顔文字をスマイリー画像で表示するには。投稿の分野かなあ。 |
− | ; [[:en: | + | ; [[Protection From Harvesters]] /[[:en:Protection From Harvesters|en]] : メールアドレスを収集ロボットに盗まれないように表示する |
− | ; [[ | + | ; [[テーマの作成]] |
− | ; [[:en: | + | ; [[Theme Review|テーマレビュー]] |
− | ; [[:en: | + | ; [[Functions_File_Explained|Theme Functions File Explained]] /[[:en:Functions_File_Explained|en]] |
− | ; [[:en: | + | ; [[Theme Switching]] /[[:en:Theme Switching|en]] |
− | ; [[:en: | + | ; [[WordPress 用語]] /[[:en:WordPress Semantics|en]] |
− | ; [[:en: | + | ; [[Commenting Code]] /[[:en:Commenting Code|en]] |
− | ; [[:en: | + | ; [[関数リファレンス/wpdb Class]] |
− | ; [[: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]] | ||
− | {{ | + | |
− | + | ===外部資料=== | |
+ | * [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:テンプレートタグ]] | ||
− | |||
[[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()
という形式)は、表示中のページの種類(例: メインページ、カテゴリアーカイブ等)を判定します。このタグの返す値に応じてテンプレートの出力を制御したいときに、テンプレート内で使えます。
外部資料:
- 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 (最新版との差分)