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

2010-10-09 AQUA博多 B会議室で開催された「WordPress 3.0 会議(仮)」で話しました。
結局、最後までタイトルに(仮)がついたままでした。
当日は定員の60人近い方にお越しいただき満席となり盛況に終わることができました。
ありがとうございました。

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

と旬の WordPress 3.0 の新機能について各スピーカーがお話しさせていただきました。

私の担当は「カスタムメニュー」でした。
当日の発表資料をアップいたします。
ご覧下さい。

acrobat.com

上記データが表示されないときはリロードするかリンクをクリックして下さい。

懇親会にもたくさんの方に参加していただき、楽しい夜を過ごしました。
思いもかけないゲストにもきていただきました。

め組の組長さんをはじめとするめ組の皆様。
日本語WordPress草創期に多大な貢献をされたtaiさん。
HTML, CSS 辞典シリーズでおなじみの大藤幹さん。
大藤さんの新著は WordPress 3.0 についてです。

スピーカー、スタッフの1人として関われたことを誇りに思います。
こう言えるのもご参加いただいた方がいたからこそです。
至らないところも多々あったのでは無いかと思いますが、ご意見をお寄せいただければ今後の参考にさせていただきます。

繰返しになりますが、本当にありがとうございました。

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, テーマの選び方

簡単にインストールできる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, 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">', 'link_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>

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

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