Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第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' )
   カスタムヘッダー(ヘッダーの表示をカスタムできる機能)の
   ...
function
twentytwelve_scripts_styles()
<head></head> 内で読み込む Javascript/CSS について、
ファイルの追加/削除/読み込む優先順位の設定を行う。


● wp_enqueue...
次の場合に有効なため、<head></head> 内に直接書くより、こ
ちらの処理が推奨されている。


● jQuery など前後の依存関係が強いものを明確にする
● プラグインなど外部から操作できる
function twentytwelve_wp_title()
<title></title> 内を出力する処理。
以前は header.php に記述していたものがフィルター処理に置き
換わり、テーマ外からも操作可能になった。


一見めん...
function
twentytwelve_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 ページを表示しているか、またはサイド
バーが無いときに、 ...
function twentytwelve_customize_register()

テーマカスタマイザーの設定(よくわかりませんが3.4から変わっ
てます)


Codex(英語) : Class Reference/WP Customiz...
function twentytwelve_customize_preview_js()

テーマカスタマイザーのプレビュー表示で、非同期(リアルタイ
ム)に変更内容を反映させるJavasciptを読み込んでいます


でも、3.4でも非同期で...
wp_titleの子テーマからの書き換え例
function my_wp_title( $title, $sep ) {
    global $paged, $page;
    // 好きな処理
    return $title;
}

...
Twenty Twelveと
Twenty Elevenでは
  ココが違う!
  - 菱川さんヨロシク -
incフォルダの中身がすっきり
2011 は独自ウィジェットやテーマオプション画面のために inc
フォルダで色々読み込んでいました。
2012 では custom-header.php だけ。
Google Fonts APIを使ってる!
// httpsかhttpか判断してる
$protocol = is_ssl() ? 'https' : 'http';
// なんかオシャレな書き方…別にこんな書き方しなくても
$query_ar...
ページテンプレートがフォルダにまとまっ
ている
page-templatesフォルダにまとめて格納。これは便利。
WordPressお悩み相談室
     なんでも聞いてね!
  でも、わからないこともあるよ!
質問タイム!

WordPress3.5, Twenty Twelve, 今日の内容、そ
の他の疑問を解消して年越ししましょう

質問はハッシュタグ #wbkobe からもどうぞ
質問タイム!

Q. $content_width の数値を変えると画像の最大
値が変わる。管理画面のメディアの設定とどっちが
優先される?

A. 実際の画像サイズは管理画面のメディアの設
定でリサイズされている。投稿画面で挿入する際
にim...
質問タイム!

Q. ユーザーごとに投稿できるカテゴリーや投稿タ
イプを制限したい

A. Adminize, Category Limitation(更新されてな
さげ), User Role Editor
Typesでできます!×3 有料だ...
質問タイム!

Q. editor_style.css を、カテゴリーごと?に分けた
い

A. 投稿タイプなら可能みたいです。TinyMCEの
iframe内のbody要素のclass属性にクラス名が書い
てあるので。↓

<body id=...
質問タイム!

Q. IE対応
A. headのクラスをIEコンディショナルコメントで仕
込んでおくのは流行ってますね
Twenty Elevenでは使ってない
<!DOCTYPE html>
<!--[if IE 7]>
<html clas...
質問タイム!

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
×

of

Word press 3.5RC2   - パーフェクト functions.php -  Slide 1 Word press 3.5RC2   - パーフェクト functions.php -  Slide 2 Word press 3.5RC2   - パーフェクト functions.php -  Slide 3 Word press 3.5RC2   - パーフェクト functions.php -  Slide 4 Word press 3.5RC2   - パーフェクト functions.php -  Slide 5 Word press 3.5RC2   - パーフェクト functions.php -  Slide 6 Word press 3.5RC2   - パーフェクト functions.php -  Slide 7 Word press 3.5RC2   - パーフェクト functions.php -  Slide 8 Word press 3.5RC2   - パーフェクト functions.php -  Slide 9 Word press 3.5RC2   - パーフェクト functions.php -  Slide 10 Word press 3.5RC2   - パーフェクト functions.php -  Slide 11 Word press 3.5RC2   - パーフェクト functions.php -  Slide 12 Word press 3.5RC2   - パーフェクト functions.php -  Slide 13 Word press 3.5RC2   - パーフェクト functions.php -  Slide 14 Word press 3.5RC2   - パーフェクト functions.php -  Slide 15 Word press 3.5RC2   - パーフェクト functions.php -  Slide 16 Word press 3.5RC2   - パーフェクト functions.php -  Slide 17 Word press 3.5RC2   - パーフェクト functions.php -  Slide 18 Word press 3.5RC2   - パーフェクト functions.php -  Slide 19 Word press 3.5RC2   - パーフェクト functions.php -  Slide 20 Word press 3.5RC2   - パーフェクト functions.php -  Slide 21 Word press 3.5RC2   - パーフェクト functions.php -  Slide 22 Word press 3.5RC2   - パーフェクト functions.php -  Slide 23 Word press 3.5RC2   - パーフェクト functions.php -  Slide 24 Word press 3.5RC2   - パーフェクト functions.php -  Slide 25 Word press 3.5RC2   - パーフェクト functions.php -  Slide 26 Word press 3.5RC2   - パーフェクト functions.php -  Slide 27 Word press 3.5RC2   - パーフェクト functions.php -  Slide 28 Word press 3.5RC2   - パーフェクト functions.php -  Slide 29 Word press 3.5RC2   - パーフェクト functions.php -  Slide 30 Word press 3.5RC2   - パーフェクト functions.php -  Slide 31 Word press 3.5RC2   - パーフェクト functions.php -  Slide 32 Word press 3.5RC2   - パーフェクト functions.php -  Slide 33 Word press 3.5RC2   - パーフェクト functions.php -  Slide 34 Word press 3.5RC2   - パーフェクト functions.php -  Slide 35 Word press 3.5RC2   - パーフェクト functions.php -  Slide 36
Upcoming SlideShare
WordPress 3.8 RC1
Next
Download to read offline and view in fullscreen.

6 Likes

Share

Download to read offline

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

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. function twentytwelve_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. function twentytwelve_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/get setting
  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 Editor Typesでできます!×3 有料だったorz Roleを増やして…なんかプラグインありそうですね
  30. 30. 質問タイム! Q. editor_style.css を、カテゴリーごと?に分けた い A. 投稿タイプなら可能みたいです。TinyMCEの iframe内のbody要素のclass属性にクラス名が書い てあるので。↓ <body id="tinymce" class="mceContentBody content 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で変更できますよ。
  • estmsk

    Apr. 15, 2013
  • kimionakanishi

    Jan. 4, 2013
  • taiyougemini

    Dec. 25, 2012
  • yoshikosarakai

    Dec. 21, 2012
  • seiichio

    Dec. 10, 2012
  • YasunoriSuzuki

    Dec. 5, 2012

Views

Total views

12,737

On Slideshare

0

From embeds

0

Number of embeds

280

Actions

Downloads

9

Shares

0

Comments

0

Likes

6

×