第18回 WordBench神戸 - パーフェクト functions.php - 作成日: 2012/12/1 作成者: @bren_boss, @HissyNC
このドキュメントについてテーマの拡張機能を組み込むさいに必須の functions.php の内容を解説するとともに、もうすぐリリースされる WordPress 3.5のリリース候補版を紹介します。
子テーマから上書きできるものの見分け方if ( ! isset( $hogehoge ) )if ( ! function_exists( hogehoge ) )
$content_width大サイズで画像を挿入する際に、img タグの width 属性値が、$content_width を最大値として縮小されます。テーマ作成の際は必須項目なので、必ずメインカラムの幅を指定するようにしよう。子テーマから書...
function twentytwelve_setup()● load_theme_textdomain()  テーマ用翻訳ファイルを読み込むよう設定する(英語/日本  語両対応など)。● add_editor_style()  記事編集時に使...
● add_theme_support( post-formats )  投稿フォーマット(記事の表示方法)を使えるよう設定する。● register_nav_menu( primary )  カスタムメニュー内のグローバルメニューを設定可能に...
● add_theme_support( post-thumbnails )  投稿サムネイルを設定可能にする● set_post_thumbnail_size()  投稿サムネイルの大きさを設定
custom-header.php● require( get_template_directory() . /inc/custom-header.   php )   カスタムヘッダー(ヘッダーの表示をカスタムできる機能)の   ソースコード...
functiontwentytwelve_scripts_styles()<head></head> 内で読み込む Javascript/CSS について、ファイルの追加/削除/読み込む優先順位の設定を行う。● wp_enqueue_scrip...
次の場合に有効なため、<head></head> 内に直接書くより、こちらの処理が推奨されている。● jQuery など前後の依存関係が強いものを明確にする● プラグインなど外部から操作できる
function twentytwelve_wp_title()<title></title> 内を出力する処理。以前は header.php に記述していたものがフィルター処理に置き換わり、テーマ外からも操作可能になった。一見めんどくさくなっ...
functiontwentytwelve_page_menu_args()メニューの先頭に"ホーム"を追加する。それだけ。Codex: テンプレートタグ/wp page menu
function twentytwelve_widgets_init()サイドバーの登録。Codex : 関数リファレンス/register_sidebar
function twentytwelve_content_nav()次へ/前へのナビゲーションを出力する独自テンプレートタグの定義。子テーマから書き換えられるようになっています。
function twentytwelve_comment()コメント欄の表示のカスタマイズ。子テーマから書き換えられるようになっています。
function twentytwelve_entry_meta()投稿のメタ情報(公開日、作成者、タグ、カテゴリー)を表示するテーマ独自テンプレートタグの定義。microformats 対応子テーマから書き換えられるようになっています。
function twentytwelve_body_class()サイドバーが無いとき、背景色のカスタマイズがされているとき、Google Font が読み込まれているとき、などの条件でbody_class に独自クラスを追加しています。実際...
function twentytwelve_content_width()固定ページの表示で full-width.php ページテンプレートを使っているか、attachment ページを表示しているか、またはサイドバーが無いときに、 $con...
function twentytwelve_customize_register()テーマカスタマイザーの設定(よくわかりませんが3.4から変わってます)Codex(英語) : Class Reference/WP Customize Mana...
function twentytwelve_customize_preview_js()テーマカスタマイザーのプレビュー表示で、非同期(リアルタイム)に変更内容を反映させるJavasciptを読み込んでいますでも、3.4でも非同期で変わってた…...
wp_titleの子テーマからの書き換え例function my_wp_title( $title, $sep ) {    global $paged, $page;    // 好きな処理    return $title;}functio...
Twenty TwelveとTwenty Elevenでは  ココが違う!  - 菱川さんヨロシク -
incフォルダの中身がすっきり2011 は独自ウィジェットやテーマオプション画面のために incフォルダで色々読み込んでいました。2012 では custom-header.php だけ。
Google Fonts APIを使ってる!// httpsかhttpか判断してる$protocol = is_ssl() ? https : http;// なんかオシャレな書き方…別にこんな書き方しなくても$query_args = arr...
ページテンプレートがフォルダにまとまっているpage-templatesフォルダにまとめて格納。これは便利。
WordPressお悩み相談室     なんでも聞いてね!  でも、わからないこともあるよ!
質問タイム!WordPress3.5, Twenty Twelve, 今日の内容、その他の疑問を解消して年越ししましょう質問はハッシュタグ #wbkobe からもどうぞ
質問タイム!Q. $content_width の数値を変えると画像の最大値が変わる。管理画面のメディアの設定とどっちが優先される?A. 実際の画像サイズは管理画面のメディアの設定でリサイズされている。投稿画面で挿入する際にimgタグの属性で$...
質問タイム!Q. ユーザーごとに投稿できるカテゴリーや投稿タイプを制限したいA. Adminize, Category Limitation(更新されてなさげ), User Role EditorTypesでできます!×3 有料だったorzRo...
質問タイム!Q. editor_style.css を、カテゴリーごと?に分けたいA. 投稿タイプなら可能みたいです。TinyMCEのiframe内のbody要素のclass属性にクラス名が書いてあるので。↓<body id="tinymce"...
質問タイム!Q. IE対応A. headのクラスをIEコンディショナルコメントで仕込んでおくのは流行ってますねTwenty Elevenでは使ってない<!DOCTYPE html><!--[if IE 7]><html class="ie ie...
質問タイム!Q. Twenty Eleven のカスタマイズでテーマを作ってた人が Twenty Twelve に移行するには?A. 完全に別モノなので難しいかも。作りなおすほうがいいテーマ開発者も違う人らしいですよ(naoさん情報)
質問タイム!Q. functions.phpをカスタマイズは、ソースを末尾にコピペでいいのか?A. 動きますが、子テーマの場合は実行順に注意。子テーマのfunctions.phpが先、親テーマのfunctions.phpがあと。自作テーマならコ...
質問タイム!Q. functions.phpを書き換えるとWarningとか出るんですが…A. Warningはエラーの内容が分かれば修正できる。コードを送ってください(by bren)フォーラムもあるよ
質問タイム!Q. 多言語化プラグインのベストプラクティスA. qTranslate, WPML(有償), Bogo(開発中ぽい)
質問タイム!Q. 投稿画面が明朝になるのをゴシックに変えたいA. editor-style.cssで変更できますよ。
Upcoming SlideShare
Loading in …5
×

Word press 3.5RC2 - パーフェクト functions.php -

12,043 views
11,979 views

Published on

Published in: Technology

Word press 3.5RC2 - パーフェクト functions.php -

  1. 1. 第18回 WordBench神戸 - パーフェクト functions.php - 作成日: 2012/12/1 作成者: @bren_boss, @HissyNC
  2. 2. このドキュメントについてテーマの拡張機能を組み込むさいに必須の functions.php の内容を解説するとともに、もうすぐリリースされる WordPress 3.5のリリース候補版を紹介します。
  3. 3. 子テーマから上書きできるものの見分け方if ( ! isset( $hogehoge ) )if ( ! function_exists( hogehoge ) )
  4. 4. $content_width大サイズで画像を挿入する際に、img タグの width 属性値が、$content_width を最大値として縮小されます。テーマ作成の際は必須項目なので、必ずメインカラムの幅を指定するようにしよう。子テーマから書き換えられるようになっています。
  5. 5. function twentytwelve_setup()● load_theme_textdomain() テーマ用翻訳ファイルを読み込むよう設定する(英語/日本 語両対応など)。● add_editor_style() 記事編集時に使うエディタ用CSS(editor-style.css)を使用 するよう設定する。● add_theme_support( automatic-feed-links ) 通常の記事のフィードに追加し、ページ全体と記事コメント のフィードを書き出すよう設定する。
  6. 6. ● add_theme_support( post-formats ) 投稿フォーマット(記事の表示方法)を使えるよう設定する。● register_nav_menu( primary ) カスタムメニュー内のグローバルメニューを設定可能にす る。● add_theme_support( custom-background ) テーマの背景色を設定。
  7. 7. ● add_theme_support( post-thumbnails ) 投稿サムネイルを設定可能にする● set_post_thumbnail_size() 投稿サムネイルの大きさを設定
  8. 8. custom-header.php● require( get_template_directory() . /inc/custom-header. php ) カスタムヘッダー(ヘッダーの表示をカスタムできる機能)の ソースコードを読み込んで挿入する。 テーマカスタマイザー(※後述)にも影響する。
  9. 9. functiontwentytwelve_scripts_styles()<head></head> 内で読み込む Javascript/CSS について、ファイルの追加/削除/読み込む優先順位の設定を行う。● wp_enqueue_script() 指定したJavascriptファイルを読み込むよう設定● wp_enqueue_style() 指定したCSSファイルを読み込むよう設定
  10. 10. 次の場合に有効なため、<head></head> 内に直接書くより、こちらの処理が推奨されている。● jQuery など前後の依存関係が強いものを明確にする● プラグインなど外部から操作できる
  11. 11. function twentytwelve_wp_title()<title></title> 内を出力する処理。以前は header.php に記述していたものがフィルター処理に置き換わり、テーマ外からも操作可能になった。一見めんどくさくなった印象があるが、WordPressとしては可能な限りアクション/フィルターで処理してもらいたいらしく、その象徴のようなもの。
  12. 12. functiontwentytwelve_page_menu_args()メニューの先頭に"ホーム"を追加する。それだけ。Codex: テンプレートタグ/wp page menu
  13. 13. function twentytwelve_widgets_init()サイドバーの登録。Codex : 関数リファレンス/register_sidebar
  14. 14. function twentytwelve_content_nav()次へ/前へのナビゲーションを出力する独自テンプレートタグの定義。子テーマから書き換えられるようになっています。
  15. 15. function twentytwelve_comment()コメント欄の表示のカスタマイズ。子テーマから書き換えられるようになっています。
  16. 16. function twentytwelve_entry_meta()投稿のメタ情報(公開日、作成者、タグ、カテゴリー)を表示するテーマ独自テンプレートタグの定義。microformats 対応子テーマから書き換えられるようになっています。
  17. 17. function twentytwelve_body_class()サイドバーが無いとき、背景色のカスタマイズがされているとき、Google Font が読み込まれているとき、などの条件でbody_class に独自クラスを追加しています。実際の案件でも使えるとかなり便利なテク。body_class … 表示しているページによって<body>タグのclass属性に自動的にクラスが入る。Codex: テンプレートタグ/body_class
  18. 18. function twentytwelve_content_width()固定ページの表示で full-width.php ページテンプレートを使っているか、attachment ページを表示しているか、またはサイドバーが無いときに、 $content_width を 960 に変更しています。 これは結構使えるかも!
  19. 19. function twentytwelve_customize_register()テーマカスタマイザーの設定(よくわかりませんが3.4から変わってます)Codex(英語) : Class Reference/WP Customize Manager/getsetting
  20. 20. function twentytwelve_customize_preview_js()テーマカスタマイザーのプレビュー表示で、非同期(リアルタイム)に変更内容を反映させるJavasciptを読み込んでいますでも、3.4でも非同期で変わってた…なぜ必要になったのか???
  21. 21. wp_titleの子テーマからの書き換え例function my_wp_title( $title, $sep ) { global $paged, $page; // 好きな処理 return $title;}function adjust_twentytwelvechild_wp_title() { add_filter( wp_title, my_wp_title, 10, 2 ); remove_filter( wp_title, twentytwelve_wp_title, 10, 2 );}add_action(after_setup_theme,adjust_twentytwelvechild_wp_title);
  22. 22. Twenty TwelveとTwenty Elevenでは ココが違う! - 菱川さんヨロシク -
  23. 23. incフォルダの中身がすっきり2011 は独自ウィジェットやテーマオプション画面のために incフォルダで色々読み込んでいました。2012 では custom-header.php だけ。
  24. 24. Google Fonts APIを使ってる!// httpsかhttpか判断してる$protocol = is_ssl() ? https : http;// なんかオシャレな書き方…別にこんな書き方しなくても$query_args = array( family => Open+Sans:400italic,700italic,400,700, subset => $subsets,);wp_enqueue_style( twentytwelve-fonts, add_query_arg( $query_args,"$protocol://fonts.googleapis.com/css" ), array(), null );
  25. 25. ページテンプレートがフォルダにまとまっているpage-templatesフォルダにまとめて格納。これは便利。
  26. 26. WordPressお悩み相談室 なんでも聞いてね! でも、わからないこともあるよ!
  27. 27. 質問タイム!WordPress3.5, Twenty Twelve, 今日の内容、その他の疑問を解消して年越ししましょう質問はハッシュタグ #wbkobe からもどうぞ
  28. 28. 質問タイム!Q. $content_width の数値を変えると画像の最大値が変わる。管理画面のメディアの設定とどっちが優先される?A. 実際の画像サイズは管理画面のメディアの設定でリサイズされている。投稿画面で挿入する際にimgタグの属性で$content_widthの数値が使われる。
  29. 29. 質問タイム!Q. ユーザーごとに投稿できるカテゴリーや投稿タイプを制限したいA. Adminize, Category Limitation(更新されてなさげ), User Role EditorTypesでできます!×3 有料だったorzRoleを増やして…なんかプラグインありそうですね
  30. 30. 質問タイム!Q. editor_style.css を、カテゴリーごと?に分けたいA. 投稿タイプなら可能みたいです。TinyMCEのiframe内のbody要素のclass属性にクラス名が書いてあるので。↓<body id="tinymce" class="mceContentBodycontent post-type-post wp-editor"></body>
  31. 31. 質問タイム!Q. IE対応A. headのクラスをIEコンディショナルコメントで仕込んでおくのは流行ってますねTwenty Elevenでは使ってない<!DOCTYPE html><!--[if IE 7]><html class="ie ie7" <?php language_attributes(); ?>><![endif]--><!--[if IE 8]><html class="ie ie8" <?php language_attributes(); ?>><![endif]--><!--[if !(IE 7) | !(IE 8) ]><!--><html <?php language_attributes(); ?>><!--<![endif]-->
  32. 32. 質問タイム!Q. Twenty Eleven のカスタマイズでテーマを作ってた人が Twenty Twelve に移行するには?A. 完全に別モノなので難しいかも。作りなおすほうがいいテーマ開発者も違う人らしいですよ(naoさん情報)
  33. 33. 質問タイム!Q. functions.phpをカスタマイズは、ソースを末尾にコピペでいいのか?A. 動きますが、子テーマの場合は実行順に注意。子テーマのfunctions.phpが先、親テーマのfunctions.phpがあと。自作テーマならコピペ祭りでいけますよ〜子テーマとは…既存のテーマを親として、一部だけカスタマイズできるしくみ。
  34. 34. 質問タイム!Q. functions.phpを書き換えるとWarningとか出るんですが…A. Warningはエラーの内容が分かれば修正できる。コードを送ってください(by bren)フォーラムもあるよ
  35. 35. 質問タイム!Q. 多言語化プラグインのベストプラクティスA. qTranslate, WPML(有償), Bogo(開発中ぽい)
  36. 36. 質問タイム!Q. 投稿画面が明朝になるのをゴシックに変えたいA. editor-style.cssで変更できますよ。

×