twenty eleven 詳説 wordbench osaka #02
TRANSCRIPT
![Page 1: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/1.jpg)
Twenty Eleven 詳説~WordPressテーマの基礎~
WordBench Osaka #02
Takuro Hishikawa(@HissyNC)
![Page 2: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/2.jpg)
自己紹介
菱川拓郎/ノットニル・クリエイティブ
神戸・大阪を拠点に活動するフリーランスのWebエンジニア。
お仕事は主にオープンソースCMSを使ったウェブサイト構築。
Twitter: @HissyNC
![Page 3: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/3.jpg)
WordPressコミュニティでの活動
❏フォーラム最近のフォーラムでの協力者として公式ブログでアカウントが紹介されました!(結構うれしかったです)http://ja.wordpress.org/2012/01/18/wordpress-forum-documentation-contributor/http://ja.forums.wordpress.org/profile/7391685
❏WordCamp KOBE 2011実行委員・スピーカー
❏WordBench KOBE普段はこっちにいます。
![Page 4: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/4.jpg)
Twenty Eleven
![Page 5: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/5.jpg)
Twenty ElevenとはWordPressに同梱されるデフォルトテーマレスポンシブ・レイアウトライト・ダークの2色のバリエーション1カラム&2カラム(左右サイドバー)のレイアウトショーケース固定ページテンプレートアイキャッチ画像に対応6つの投稿フォーマットに対応背景画像・ヘッダー画像に対応
![Page 6: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/6.jpg)
Twenty ElevenとはWordPressに同梱されるデフォルトテーマレスポンシブ・レイアウトライト・ダークの2色のバリエーション1カラム&2カラム(左右サイドバー)のレイアウトショーケース固定ページテンプレートアイキャッチ画像に対応6つの投稿フォーマットに対応背景画像・ヘッダー画像に対応
WordPressのテーマでできることの見本!
![Page 7: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/7.jpg)
テーマファイルの位置
/wp-content/themes/twentyeleven
![Page 8: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/8.jpg)
スタイルシートstyle.css - Eric MeyerのリセットCSSを含むメインのCSS
editor-style.css - TinyMCEエディタ用rtl.css / editor-style-rtl.css - 右から左に書く言語用color/dark.css - カラーバリエーション
![Page 9: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/9.jpg)
画像・JS
screenshot.png - 管理画面用テーマのスクリーンショットjs/html5.js - HTML5に対応するjs/showcase.js - ショーケースレイアウト用
![Page 10: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/10.jpg)
テキスト・言語readme.txt - リードミー
license.txt - GNUライセンス条項
languages/twentyeleven.potlanguages/ja.polanguages/ja.mo - 変更するにはpoeditなど
![Page 11: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/11.jpg)
PHPは4種類初期設定・機能拡張テンプレート→テンプレート階層ルールに従うパーツ(共通)→ヘッダー・サイドバー etc.
パーツ(条件付き)→テーマごとのルールに従う
![Page 12: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/12.jpg)
初期設定・機能拡張functions.php(標準機能)inc/theme-options.php(テーマ独自拡張)→テーマ独自のオプション関連inc/widgets.php(テーマ独自拡張) →テーマ独自のウィジェット(短冊)
![Page 13: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/13.jpg)
テンプレートWordPressがURLから何のページを表示しようとしているのかを判断し、自動的に適切なテンプレートを読み込むCodexのテンプレート階層ページを見ようhttp://wpdocs.sourceforge.jp/テンプレート階層
![Page 14: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/14.jpg)
テンプレートWordPressがURLから何のページを表示しようとしているのかを判断し、自動的に適切なテンプレートを読み込むCodexのテンプレート階層ページを見ようhttp://wpdocs.sourceforge.jp/テンプレート階層
![Page 15: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/15.jpg)
テンプレートWordPressがURLから何のページを表示しようとしているのかを判断し、自動的に適切なテンプレートを読み込むCodexのテンプレート階層ページを見ようhttp://wpdocs.sourceforge.jp/テンプレート階層
![Page 16: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/16.jpg)
アーカイブ系404.phparchive.phpauthor.phpcategory.phpindex.phpsearch.phptag.php
![Page 17: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/17.jpg)
個別ページ系page.phpsingle.php
![Page 18: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/18.jpg)
ページテンプレートshowcase.php →トップページ用ショーケース表示sidebar-page.php →サイドバーありの固定ページ先頭のコメントに「Template Name:」が入ってるのがポイント
![Page 19: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/19.jpg)
パーツ(共通)header.php - HTML5!footer.php - なぜかアクションフック…
sidebar.php - サイドバーなしだと出ないsidebar-footer.php - フッターのウィジェット× sidebar-page.php - 紛らわしい
![Page 20: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/20.jpg)
パーツ(共通)searchform.php →検索フォームcomments.php →コメントフォーム
![Page 21: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/21.jpg)
パーツ(条件付き)content.php / content-xxx.php get_template_part() で呼び出される呼び出す条件はテーマによるTwentyElevenでは、投稿フォーマットごとに呼び出される
![Page 22: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/22.jpg)
パーツ(条件付き)content.php / content-xxx.php get_template_part() で呼び出される呼び出す条件はテーマによるTwentyElevenでは、投稿フォーマットごとに呼び出される
get_template_part( 'content', get_post_format() );
![Page 23: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/23.jpg)
独自テンプレートタグに注意twentyeleven_content_nav() →functions.phpに書いてあります→子テーマで変更可能
![Page 24: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/24.jpg)
多言語対応に注意__() , _e() 関数は表示言語によって文字列を切り替えるどうやってこの部分の文字を変えたらいいのかわからないというフォーラム投稿が時々…
poeditを使うか、諦めて書き換えよう
![Page 25: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/25.jpg)
今日のまとめ
![Page 26: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/26.jpg)
今日のまとめテーマが定義したルールとWordPressのルールが混じってるので注意
![Page 27: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/27.jpg)
今日のまとめテーマが定義したルールとWordPressのルールが混じってるので注意テーマが定義した関数とWordPressが定義した関数、PHPに元からある関数が混じってるので注意
![Page 28: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/28.jpg)
今日のまとめテーマが定義したルールとWordPressのルールが混じってるので注意テーマが定義した関数とWordPressが定義した関数、PHPに元からある関数が混じってるので注意ソース嫁日本語ドキュメントの充実にも貢献しよう
![Page 29: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/29.jpg)
今日のまとめテーマが定義したルールとWordPressのルールが混じってるので注意テーマが定義した関数とWordPressが定義した関数、PHPに元からある関数が混じってるので注意ソース嫁日本語ドキュメントの充実にも貢献しよう
Twenty Twelveに期待しよう!
![Page 30: Twenty Eleven 詳説 WordBench Osaka #02](https://reader033.vdocuments.us/reader033/viewer/2022052823/5555f8e1d8b42a8a5f8b5005/html5/thumbnails/30.jpg)
ご清聴ありがとうございました。
Twenty Eleven 詳説~WordPressテーマの基礎~
WordBench Osaka #02
Takuro Hishikawa(@HissyNC)