2010-10-09, WordPress 3.0 会議で話します。

WordPress 3.0 会議

WordPress 3.0 の新機能を紹介するセミナーイベントです。

日時 / DATE :
2010/10/09 15:00 to 18:00
定員 / LIMIT :
60 人
会場 / PLACE :
AQUA博多 B会議室 (福岡県福岡市博多区中洲5丁目3-8 AQUA博多 3F)
URL / URL :
http://wordbench.org/groups/fukuoka

2010/10/9 AQUA博多 15:00 ~ 18:00 で行われる「WordPress 3.0 会議」話します。
「WordPress 3.0 会議」はWordPress 3.0の新機能をコードを追いながら勉強会で行っていた内容をお披露目するものです。
あ〜だ、こ〜だ言いながらできると良いのですが、時間の制約もありそこまでできるのかは分かりませんがセミナーや勉強会よりも敷居は低く、しかも内容は初心者の方から中級・上級な方にも楽しんでもらえるようにと欲張りな内容になっています。

WordPress 3.0 で追加された新機能のうち以下の4項目についてお話しすることになります。

Twenty Ten テーマ
カスタムメニュー
カスタムタイプ投稿
マルチサイト

私はその内「カスタムメニュー」についてお話しします。

このブログにもいくつかエントリーしていますが、勉強会であれこれあれこれ勉強をしたものばかりです。
後日、作成したスライドも公開する予定です。

いよいよ、明日に迫りました。
すでに定員一杯のお申し込みがあるようです。
多くの人との出会いを楽しみにしています。

*補欠のお申し込みはまだ可能です。
当日のキャンセルが出るかもしれません。
ご興味のある方はあきらめずにお申し込み下さい。

ATND
http://atnd.org/events/8285

WordPress, Useragentなグローバル変数

WordPressはUseragentに関するグローバル変数を持っています。

$is_lynx
$is_gecko
$is_IE
$is_winIE
$is_macIE
$is_opera
$is_NS4
$is_safari
$is_chrome
$is_iphone

ブラウザーに合わせた設定を加えたい時とかに便利です。
もとネタ、
10 useful new WordPress hacks
Detect the visitor browser within WordPress

さらにもとネタ
Browser Detection and the body_class() Function

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
 
	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';
 
	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

body_classの出力するクラスへUseragentを入れとこうぜ、な関数ですよね。

/wp-includes/ -> vars.php (source)

WordPress, テーマの選び方

簡単にインストールできるWordPress。
あっという間に終わるインストールのあとはテーマをどうするか決めないといけません。
ガリゴリとゼロから作ってみるのも楽しいけど、色々な人が作ったテーマを試してみるのも勉強になります。

WordPress 3 からは子テーマが作れるので、子テーマで自分なりの改造を施すと何もかも自分で作るより時間の短縮にもなります。

星の数ほどあるテーマの中から選ぶのが大変、あとで泣きをみないように改造しやすくてイケテルテーマを探さなくては・・・

どこで選ぶ

無難に公式テーマ配布ディレクトリでしょうか。
Free Themes Directory

公式ディレクトリ以外でも優れたテーマが配布されていたりしますが、リスクはそれなりに高くなると覚悟した方が良いかもしれません。
テーマのソースを見ることができるスキルは必要になると思います。
悪質な難読化コードを埋め込んでいる例もあるようですから。

何を基準に選ぶ

見た目(外観・デザイン)はCSSなどのスキルがあればどうとでもなるので配布されている時の見た目は関係ない気がします。

それよりも・・・

1.CSS(style.css)を見ましょう
CSSのでき(精度)が低いとあとで泣く目にあいます。

■ グローバルリセットが入っている

* {
	padding:0;
	margin:0;
	outline:0;
}

上側に空く余白がデザイン上不自然になるのを防ぐためWeb デザインでは広く使われている手法でもあるのですが、WordPressではリセットしこのままにしておくと困ったことが起こります。
ビジュアルエディタ上の1行空きが、ブラウザ出力時に反映されなくなります。
WordPressはビジュアルエディタ上の1行空きは、ブラウザ出力時にpタグで囲むことにより表現しようとします。
リセットされたままだと自分が入力した文章が入力時の見た目と出力時では違う矛盾が生じてしまいます。
さらに、入力者から1行空ける方法を奪い取ってしまいます。

*リセット後にp, h1~h6タグなどのもともと行を空けるブロック要素へ bottom プロパティの再設定がされていれば◯
Twenty Tenはグロバールリセットに近い形でほぼ全てのタグの padding, margin を 0 にしていますが再度設定しなおしています。

グローバルリセットをしそのまま放置しているテーマはWordPressへの理解度が低いと思わずにいられません。

■ ループ出力の Class, ID の設定の仕方

/* × */
.alignleft {
}
/* ◯ */
#content .alignleft {
}

CSSスキルに疑念が生じます。

2.Javascriptの読み込み
■ Javascriptの読み込みがハードコードされている。
Javascriptの読み込みはテンプレートタグ wp_enqueue_script でするべきであり、ハードコードしているテーマは他の部分でも信用度は低くせざるを得ません。
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

■ jQueryを “no conflict” mode で使用していない。
WordPress添付のjQueryは “no conflict” mode で提供されています。
ほとんどのプラグイン、テーマはそれに従っています。
そんなことも知らないなら、他もどうなのと考えちゃいます。

3.custom-menuが使える
カスタムメニューはWordPRess 3 から追加された機能です。
グローバルナビやサイドメニュー、フッターナビなどを自在に作れるとても便利な便利な機能です。
この機能が使えないテーマは選択する意味がないように思えます。

4.$wpdbを使ったSQLが使われてたら△
テンプレートタグ、関数で対応していないことをデータベースを直接操作してしまおうとする高度なワザなのですが……..
将来のWordPressのアップグレードでDB構造が変わったりすると困ることがあります。
素早く対応してくれたら良いのですが・・・
いざとなったら自分でメンテナンスしますな覚悟は必要だと思います。

WordPress, 親テーマfunctions.phpのaction, filterを子テーマでremove

WordPress3.0から使える親テーマ機能。
便利なんだけど、親テーマのfunctions.phpで設定されているactionやfilterを子テーマでremoveする方法が分からず悶々としてたけど、ようやく方法が分かりました。

本家Forum : [resolved] can i create child functions.php file for twentyten?
http://wordpress.org/support/topic/can-i-create-child-functionsphp-file-for-twentyten?replies=26

Adeptris さんによれば
after_setup_themeを使えば良いらしい。

/** Tell WordPress to run child_theme_setup()
when the 'after_setup_theme' hook is run.
*/
add_action( 'after_setup_theme', 'child_theme_setup' );
 
/** This function will hold our new calls and over-rides */
if ( !function_exists( 'child_theme_setup' ) ):
function child_theme_setup() {
 
}
endif;

関数 child_theme_setup にremoveを書けば対応できました。
感謝感謝です。

WordPress, 子テーマのための親テーマ作成の心構え – functions.php その2

親テーマ functions.php に add_filter されている関数を子テーマで変更することは困難を極めます。

読み込む順序が
1.子テーマ functions.php
2.親テーマ functions.php
になるからです。

これだと、いくら子テーマ functions.php で remove_filter しても意味がありません。
理論的には何らかの hook を使い最後の最後に remove_filter することは可能かもしれませんが、ワンクリック・インストールのWordPressらしくない解決方法に思えます。

親テーマの functions.php の関数は 全て functions_exists 判定 を入れることを必須条件にしてもらいたいものです。
そうすれば、子テーマでの変更はあっけないほど簡単にできます。
同名の関数を書けば良いだけですから。

Twenty Ten も一部の関数にしか判定が入っておらず不満が残ります。
というか、3.0対応テーマ作成の見本となるべきテーマなので早急に改善して欲しいです。

子テーマの子、孫テーマもありかな。

そうなると、配布テーマの functions.php の関数も 全て functions_exists 判定 が必須ですね。

update 2010-09-22
子テーマでremoveする方法があるので functions_exists が必須という訳では無さそうです。
でも、用意してくれてるとかなり嬉しい。

WordPress, 親テーマfunctions.phpのaction, filterを子テーマでremove

WordPress, wp_nav_menuのbefore, after と link_before, link_after

wp_nav_menuのbefore, after と link_before, link_after 用法が誤解を生みそうな件。

$before
(文字列) (オプション) リンクテキストの前のテキスト
初期値: なし

$after
(文字列) (オプション) リンクテキストの後のテキスト
初期値: なし

$link_before
(文字列) (オプション) リンクの前のテキスト
初期値: なし

$link_after
(文字列) (オプション) リンクの後のテキスト
初期値: なし

before と link_before の説明がどうもすっきりしない。

Usage:

<?php wp_nav_menu( array(
    'link_before' => '<span class="link_before">', 
    'link_after' => '</span>', 
    'before' => '<span class="before">', 
    'after' => '</span>', 
    'theme_location' => 'primary', 
    'depth' => '1' )
 );

Output:

<div class="menu">
    <ul>
        <li>
            <span class="before">
                <a href="/"><span class="link_before">Home</span></a>
            </span>
        </li>
    </ul>
</div>

出力結果をみても逆な気がしてしょうがない。

Safari, ユーザーエージェント・スタイルシート

Safari, headline tags の Useragent Stylesheet オレメモ。

h1 {
	font-size:2em;/* 32px */
	margin: 0.67em 0;/* 21px */
}
 
h2 {
	font-size: 1.5em;/* 24px */
	margin: 0.83em 0;/* 20px */
}
h3 {
	font-size: 1.17em;/* 19px */
	margin: 1em 0;/* 19px */
}
h4 {
	margin: 1.33em 0;/* 21px */
}

WordPress, 子テーマのための親テーマ作成の心構え – functions.php

子テーマは親テーマ設定をオーバーライドしながらカスタムできます。
テンプレートもCSSもこれで設定可能です。

ただ、現在の仕組みでは functions.php はオーバーライドはできず、子テーマの functions.php include の後に、親テーマの functions.php が include されます。

CodeX : 子テーマ

functions.php の使用方法

style.css と違い、functions.php は同名ファイルでオーバーライドできません。その代わり、親の functions.php に追加して読み込まれます。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。

この説明だと足りない気がするんだよなぁ。

もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。

これだけだと誤解をうみそうな気がする…

関数が二重定義にならないように

同名関数を子テーマで設定すると、親テーマの functions.php のデキが悪いと PHP エラーになるはず。
エラーが出ないようにするには、親テーマの関数設定には if (function_exists()) {} をしてもらわなければなりません。

カスタムメニューの準備

WordPress 3.0 対応を謳うテーマは「親テーマ」として機能するような配慮が必要になります。
カスタムメニュー対応のための

register_nav_menus( array(
	'primary' => __( 'Primary Navigation', 'TEMPLATE名' ),
) );

を入れておいた方が親切でしょう。
その時は、グローバルナビに wp_nav_menu を使いましょう。

wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

カスタムメニュー、カスタム投稿タイプ、子テーマなど機能が増えたWordPressへの配布テーマ作成は今まで以上の困難が待ち受けていると想像されます。

CSS で抜かり無く設定するのは大変そう。

親テーマ / 子テーマ は新しく始まった機能なので、ドキュメントが充分とは言えない気がします。
これからノウハウがたまっていくのでしょう。

これって親テーマ作る時の常識だよね、が出そろうのはこれからなんでしょうねぇ。

WordPress, wp_nav_menu+カスタムメニューのCSS設定

wp_nav_menu+カスタムメニューがナビゲーション・メニューを作るのに便利なことが分かってきた。
前回のPost : WordPress 3.x, wp_nav_menu コードを追ってみた

.menu の位置が状況によって変わるのでCSSの設定には注意が必要です。

Twentyten では次のように使われています。
header.php

wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

この時のHTML出力は以下のようになります。

カスタムメニューを使用しない場合

Output(1行で出力されているのをインデントを付けています)

<div class="menu">
    <ul>
        <li >
            <a href="http://me.beginsprite.com/" title="ホーム">ホーム</a>
        </li>
    </ul>
</div>

menu オプションを指定していないので、ulwrap する div には class='menu' が設定されます。

Twentyten はデフォルトのページメニューを使用する場合 functions.php で 「ホーム」へのリンクを出力するように設定されています。

function twentyten_page_menu_args( $args ) {
	$args['show_home'] = true;
	return $args;
}
add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

カスタムメニューを設定した場合

<div class="menu-header">
    <ul id="menu-カスタムメニュー名" class="menu">
        <li >
            <a href="http://me.beginsprite.com/" title="ホーム">ホーム</a>
        </li>
    </ul>
</div>

class='menu' の位置が「カスタムメニュー」を使うと container タグ内 ul タグに設定されます。

配布テーマを作成する時は CSS 設定に充分な注意と配慮が必要になるでしょう。

WordPress 3.x, wp_nav_menu コードを追ってみた

WordPress 3.0 から追加された wp_nav_menu のコードを追ったオレメモ。
多分「カスタムメニュー」に関係あるはず。

WordPress.com 日本語ブログ : 新カスタムメニュー機能 (など)
WordPress.com Support : Menus

Function Reference/wp nav menu
trac : nav-menu-template.php

$defaults = array(
'menu'            => ,
'container'       => 'div',
'container_class' => ,
'container_id'    => ,
'menu_class'      => 'menu',
'menu_id'         => ,
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => ,
'after'           => ,
'link_before'     => ,
'link_after'      => ,
'depth'           = 0,
'walker'          => ,
'theme_location'  => );

wp_nav_menufallback_cb の設定をしない時は wp_page_menu を使って出力するので Parameter は wp_page_menu の Parameter を追加して設定できます。

fallback_cb => wp_page_menu のデフォルト時は wp_nav_menu の Parameter で次のものは設定しても無視されるようです。
container_class, container_id, before, after, link_before, link_after, menu_id.

wp_nav_menu は「カスタムメニュー」を使用しない時は wp_page_menu を出力します。
このとき出力される ul タグを container オプションのデフォルト div でwrapします。
この div には menu_class オプションのデフォルト class='menu' が設定されます。
menu_class オプションは wp_page_menu を使っているときでも設定可能です。
複数のクラスを設定したい時は半角スペースを使い設定します。
Usage :
'menu_class' => 'menu main-menu navigation'

theme_location が重要なようですが、さてこれは何を指定すれば良いのでしょう?
コードを追っていくと

// nav-menu.php
function get_nav_menu_locations() {
	return get_theme_mod( 'nav_menu_locations' );
}
 
// theme.php
function get_theme_mod($name, $default = false) {
	$theme = get_current_theme();
 
	$mods = get_option( "mods_$theme" );
 
	if ( isset($mods[$name]) )
		return apply_filters( "theme_mod_$name", $mods[$name] );
 
	return apply_filters( "theme_mod_$name", sprintf($default, get_template_directory_uri(), get_stylesheet_directory_uri()) );
}

ということはこんな感じかなぁ。

apply_filters(theme_mod_nav_menu_locations, $mods['nav_menu_locations']);

で、何をやってるのかは???
おしえて、わかる人。

update

2010-08-25

コードの意味は良くわかりませんが、、、
カスタムメニューで登録したメニューをデフォルト設定にした時、”primary” にすることで wp_nav_menu で出力できるようです。

“primary” のほかにどんな設定値があるのかは以前不明です。

wp_nav_menumenu オプションを設定すると「カスタムメニュー」で登録したメニューを呼び出せます。
カスタムメニューを使うとタイトルへのリンクをパーマリンクを変更せずに名称を変更できます。

カスタムメニューはページ、カテゴリー、タグなどを混在させたメニューを簡単に作成できます。
テンプレート・タグを駆使してグローバル・ナビゲーションを作成したことのある方にはありがたい機能です。

Usage:

 'menu-header',
    'menu' => 'gnavi',
    'container_id' => 'menu-main-menu',
    'menu_class' => 'inazumatv-menu inazumatv',
    'link_before' => '<span>', 'link_after' => '</span>',
    'menu_id' => "menu-main-menu-nav",
    'theme_location' =>; 'primary', 'depth' => '1' )
 );

Output:

<div id="menu-main-menu" class="menu-header">
<ul id="menu-main-menu-nav" class="inazumatv-menu inazumatv">
	<li id="menu-item-ID" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-ID">
            <a href="/"><span>Home</span></a></li>
	<li id="menu-item-ID2" class="menu-item menu-item-type-post_type menu-item-ID2">
            <a href="URL"><span>Title</span></a></li>
</ul>
</div>

外観 -> メニュー
で “gnavi” という名称のカスタムメニューを登録しています。

これはかなり便利そうです。
カスタムメニューは複数登録できそうなので、これからメニューを作る時は「カスタムメニュー」+ wp_nav_menu の組み合わせがステキです。

update 2010-08-25
タグに関してはカスタムリンクを使えばメニューに加えることも可能ですが、他と比べて「簡単に」ではないので削除しました。