- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細)
「WordPress サイトデザイン リファレンス」の版間の差分
提供: WordPress Codex 日本語版
(新しいページ: 'WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。(まだドラフト) 主に Codex の en:Blog Design and Layout...') |
細 (メタ編集のみ) |
||
1行目: | 1行目: | ||
− | + | {{Notice|提案|テーマ・デザイン関係のページ編成について、||ページ編成の検討}} | |
− | + | {{スタートガイド|デザイン}} | |
+ | WordPress サイトのデザインとレイアウトに関するドキュメントの総覧です。 | ||
+ | |||
+ | テーマ・デザイン・レイアウトに関する全てのページを概要付きで紹介。日本語ユーザによる外部ドキュメントも追加していきます。 | ||
__TOC__ | __TOC__ | ||
182行目: | 185行目: | ||
[[en:Templates]] | [[en:Templates]] | ||
[[en:Category:Design and Layout]] | [[en:Category:Design and Layout]] | ||
+ | [[ja:Blog Design and Layout]] | ||
+ | [[es:Blog Design and Layout]] | ||
+ | [[fr:StyleDisposition]] | ||
+ | [[it:Blog Design]] | ||
+ | [[ko:Blog Design and Layout]] | ||
+ | [[ru:Blog Design and Layout]] |
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エラー ページをカスタムできるテンプレートファイルの作り方
外部資料:
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)