Embed Size (px)
Citation preview
第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()
記事編集時に使うエディタ用CSS（editor-style.css）を使用
するよう設定する。
● add_theme_support( 'automatic-feed-links' )
通常の記事のフィードに追加し、ページ全体と記事コメント
のフィードを書き出すよう設定する。
● add_theme_support( 'post-formats' )
投稿フォーマット（記事の表示方法）を使えるよう設定する。
● register_nav_menu( 'primary' )
カスタムメニュー内のグローバルメニューを設定可能にす
る。
● add_theme_support( 'custom-background' )
テーマの背景色を設定。
● 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_script()
指定したJavascriptファイルを読み込むよう設定
● wp_enqueue_style()
指定したCSSファイルを読み込むよう設定
次の場合に有効なため、<head></head> 内に直接書くより、こ
ちらの処理が推奨されている。
● jQuery など前後の依存関係が強いものを明確にする
● プラグインなど外部から操作できる
function twentytwelve_wp_title()
<title></title> 内を出力する処理。
以前は header.php に記述していたものがフィルター処理に置き
換わり、テーマ外からも操作可能になった。
一見めんどくさくなった印象があるが、WordPressとしては可能
な限りアクション／フィルターで処理してもらいたいらしく、その
象徴のようなもの。
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 に独自クラスを追加しています。実際の案件でも使
えるとかなり便利なテク。
body_class … 表示しているページによって<body>タグのclass
属性に自動的にクラスが入る。
Codex: テンプレートタグ/body_class
function twentytwelve_content_width()
固定ページの表示で full-width.php ページテンプレートを使って
いるか、attachment ページを表示しているか、またはサイド
バーが無いときに、 $content_width を 960 に変更しています。
これは結構使えるかも！
function twentytwelve_customize_register()
テーマカスタマイザーの設定（よくわかりませんが3.4から変わっ
てます）
Codex（英語） : Class Reference/WP Customize Manager/get
setting
function twentytwelve_customize_preview_js()
テーマカスタマイザーのプレビュー表示で、非同期（リアルタイ
ム）に変更内容を反映させるJavasciptを読み込んでいます
でも、3.4でも非同期で変わってた…なぜ必要になったの
か？？？
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');
Twenty Twelveと
Twenty Elevenでは
ココが違う！
- 菱川さんヨロシク -
incフォルダの中身がすっきり
2011 は独自ウィジェットやテーマオプション画面のために inc
フォルダで色々読み込んでいました。
2012 では custom-header.php だけ。
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 );
ページテンプレートがフォルダにまとまっ
ている
page-templatesフォルダにまとめて格納。これは便利。
WordPressお悩み相談室
なんでも聞いてね！でも、わからないこともあるよ！
質問タイム！
WordPress3.5, Twenty Twelve, 今日の内容、その他の疑問を解消して年越ししましょう
質問はハッシュタグ #wbkobe からもどうぞ
質問タイム！
Q. $content_width の数値を変えると画像の最大値が変わる。管理画面のメディアの設定とどっちが優先される？
A. 実際の画像サイズは管理画面のメディアの設定でリサイズされている。投稿画面で挿入する際にimgタグの属性で$content_widthの数値が使われる。
質問タイム！
Q. ユーザーごとに投稿できるカテゴリーや投稿タイプを制限したい
A. Adminize, Category Limitation（更新されてなさげ）, User Role EditorTypesでできます！×3 有料だったorz
Roleを増やして…なんかプラグインありそうですね
質問タイム！
Q. editor_style.css を、カテゴリーごと？に分けたい
A. 投稿タイプなら可能みたいです。TinyMCEのiframe内のbody要素のclass属性にクラス名が書いてあるので。↓
<body id="tinymce" class="mceContentBody content post-type-post wp-editor"></body>
質問タイム！
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]-->
質問タイム！
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で変更できますよ。
