2008-05

世界のナベアツ（リンク先は wikipedia）がじわじわ熱いですね。去年の暮れくらいから言及されているようなので、流行としては乗り遅れた感がいっぱいですが、ネタということでひとつｗ

実は現在のプロジェクトのメンバーに楽しんで勉強してもらうにはどうしたらいいか、ということを考えていたところ、mixi の某コミュニティにおいて MT のテンプレートで世界のナベアツをやる、というのがあって、WP でもやってみようと1人で考えていたところ、WP って php なんだから何でもできちゃうし、それってタダのプログラムじゃん、とゆうところに落ち着き、これをやらせてみたら面白いんじゃないか、と思って、プロジェクトメンバーへの宿題にしてみたのです。

「3の倍数と3の付く数字だけアホになり、5の倍数だけ犬っぽくなります」っていう、条件だけを出して、後はどうつくるか、どう見せるか、も含めて、全て自由、という感じで出題しました。要はそのアウトプットでもって、そのメンバーの技術レベル、取り組み姿勢、ものの考え方などなどを計って、今後の学習プランを作ろうかなってことです。それに対してこちらから何も出さないのもアレなんで、作ってみたって感じです。

とりあえず、どんなもんか見てやるぜ、という方はどうぞ。世界のナベアツ php で作る html & CSS 的回答

向こうに書ききれなかった注意点とかもろもろは以下。

• うちの若いプロジェクトメンバー向けの宿題（に対する回答例）です。あんまり細かいつっこみは勘弁してくださいｗ
• CSSは手抜きしてます。8h 以上時間割きたくなかったので、Mac での検証サボりましたｗ なんか問題あったら教えてください。
• でも NabeAzz を名乗るネタは CSS にあります。以下ネタばれ
  • アホっぽくなる CSS は、class に aho （アホ）を指定し、color:#af0af0;（アフォアフォ） にしています。ちなみに、color:#af0; だと読みにくいんですｗ
  • 犬っぽくなる CSS は、class に bow （犬の鳴き声）を指定し、font-size:11pt;（わんわん）にしています。ちなみに、見た目の差をつけるのが難しかったので、下線も引きました
  • ダンディになる CSS は、class に dad （父：ささやかに自尊心を満足させた！）を指定し、font-style:italic;（イタリック：いや、イタリアとは関係ない：タダのオヤジギャグｗ）にしています。
• html は xhtml 1.0 Transitional にしてみました。本当は strict にしようと思ったんだけど、どうせなら宿題の再提出用にしたほうが、みんな（主に俺かｗ）ハッピーかな、とか。
• table のアクセシビリティについて再考するきっかけになりました。caption の UA 毎の挙動も久しぶりに思い出したり、結局自分もいい勉強したな、とか。
• html も CSS も、W3C のバリデータでチェックして、問題ないことを確認してます。html-lint はあまりこだわりたくないけど、とりあえずエラー０にしてみた。自分たちが同じようなものを作るときに、どうしてそうしなければいけないか、どうすれば同じように（１から）作れるか、を考えるきっかけになるといいと思う。

思いつきで、勉強用に使えるポインタとか以下。

• W3C Markup Validation Service　正しい html を書くときは必須でチェックすること。
• W3C CSS Validation Service 正しい CSS を書くときは必須でチェックすること。
• Another HTML-lint どうしたら正しい html が書けるようになるかはこのツールのお世話になるといい。
• CSS Zen Garden CSS の可能性にインスピレーションを受けたくなったら見るといい。
• CSS Table Gallery CSS でデータテーブルのインスピレーションが欲しいとき。
• 47+ Excellent Ajax CSS Forms　Form のビジュアルを考えるときのインスピレーションもらったり。
• Web Content Accessibility Guidelines 出現順序の賛否両論はあるかもしれないけど、余力が出来たらアクセシビリティに関しては必ず勉強しておくといい。
• Dive Into Accessibility（の日本語訳） かなり古いネタになるけど、これはとても重要なこと。例えば明日、自分が光を失ったらどうなるかを考えたら、制作者として決してアクセシビリティは他人事じゃなくなる。

WordPress の投稿画面は、TinyMCE などによりとても高度なエディタになっています。ただ、タグ入力を手打ちで出来る場合には、若干というか、かなりいただけない仕様があります。それが wpautop フィルターです。

wpautop フィルターは、投稿内容などを整形し、p 要素でマークアップしたり、改行を br 要素に置換するなど、ただのテキストを入力している分には（たぶん）便利なものですが、不用意に改行すると悲しいことになったり、ともかく、投稿内容をそのまま出してよ！という要求をあっさり無視してくれます。

そこで、このフィルターを処理しないようにするために、remove_filter ('the_content', 'wpautop');などを function.php に記述しておくことで対処可能、のはずだったのですが、なぜかWP2.5 日本語版でうまくいきません。未検証なのですが、どこかで何かが悪さをしていて、removeできないようです。このままでは valid かつクリーンなコードが書けない！

というわけで、根本的に処理を止めてしまえ、というわけで、wp-dir/wp-includes/default-filters.php をいじります。

// 110行目付近
add_filter('the_content', 'wpautop');

add_filter('the_excerpt', 'wpautop');

// 上記２つをコメントアウト
// add_filter('the_content', 'wpautop');

// add_filter('the_excerpt', 'wpautop');

これで投稿内容に wpautop フィルターがかからなくなり、投稿（と抜粋）に入力したテキストが、そのまま使われるようになります。当サイトのように、pre 要素などでコードを多く書くとか、タグは手打ち、と考えている人で、同じように remove filter がうまくいかない、という場合に試してみてください。

WordPress Theme Hack と WordPress Core Hack のエントリーのタイトルを、後で見やすいようにつけかえました。旧来温めてきたネタなので、すでにいくつか採番されていたのをそのまま適用していましたが、ふとこれが並ぶとどれがどれだかわかりにくいな、ということで。

追記：同時にカテゴリ名も、s をつけて複数系にしようと思います。。。

WordPress は様々な動作を、テーマやウィジェットなどに記述することで拡張することができます。ただ、ほんのちょっとのことだったり、こうだと便利なのに！と思う部分を、全部テーマやウィジェットで書き直すのはまず面倒ですし、最終的に全体のパフォーマンスに影響を与えます。

というわけで、新しいウィジェットを書いたり、テーマファイルに特別な記述をしたりするよりも、ほんのちょっとだけコアのプログラムに手を入れて、ほんのちょっとだけ楽したり、自己満足したりするカテゴリーを立ててみました。

第一弾として、多くの人がブログとして使う際に利用しているであろう、タグクラウドの並び順を変更してみます。
ファイルは、wp-dir/wp-includes/widgets.php です。

// 1340行目付近

function wp_widget_tag_cloud($args) {
	extract($args);
	$options = get_option('widget_tag_cloud');
	$title = empty($options['title']) ? __('Tags') : $options['title'];

	echo $before_widget;
	echo $before_title . $title . $after_title;
// wp_tag_cloud 並び順変更（デフォルトは名前の昇順。カウントの降順にする）
//	wp_tag_cloud(); // この行をコメントし、下のようにする
	wp_tag_cloud(array('orderby' => 'count', 'order' => 'DESC'));
	echo $after_widget;
}

上記のように、wp_tag_cloud();を、wp_tag_cloud(array('orderby' => 'count', 'order' => 'DESC'));にすることで、使用頻度(count)の高い順(DESC)に出力させることができます。

function wp_tag_cloud()は、wp-dir/wp-includes/category-template.phpにあって、以下のように書かれています。

// category-template.php function wp_tag_cloud() 内

	$defaults = array(
		'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
		'format' => 'flat', 'orderby' => 'name', 'order' => 'ASC',
		'exclude' => '', 'include' => ''
	);

というわけなので、これは次のように設定できることがわかります。

// 先の wp_tag_cloud()の呼び出し箇所

	wp_tag_cloud(array(
		'smallest' => 8,	// styleで定義されるフォントサイズ（小さい）
		'largest' => 22,	// 同上（最も大きい）
		'unit' => 'pt',		// フォントサイズのユニット（ex:pt,em,px）
		'number' => 45,		// リミッター（SQL の LIMIT 句に使われるので、多くのタグを使う場合増やすこと。）
		'format' => 'flat',	// 出力形式。list（デフォルト） と flat(内部的なデフォルト)が使える。array は未調査。
		'orderby' => 'name',	// ソートキー。name と count(内部的なデフォルト) が使える
		'order' => 'ASC',	// ソート順。DESC（降順） と RAND（ランダム） が使える。ASC（昇順）はデフォルト。
		'exclude' => '',	// 含まないタグＩＤ（未検証）
		'include' => ''		// 含みたいタグＩＤ（未検証）
	);

や、ぶっちゃけ、FC2ブログが同じようにできるらしくて、WPでもできない？って聞かれただけなんですけどね。

注：この情報は、WordPress 2.5 をベースに書かれています。また、WP自体をバージョンアップする場合に、ヘタに上書きしたり、逆に反映し忘れたりしないように、サブバージョン等でのファイル管理をお勧めします。

日本国内の携帯電話３キャリア(ただし3Gのみ)に対応した WordPress Theme 記述の手抜き版。既存の携帯プラグインは多機能なため、自分でテーマを管理できる場合や、要求精度が低い場合には冗長すぎるので、プラグインなしでPC用と同一テンプレートで処理するには？ということで書いてみた。

アウトプットはPC版の文字コードに依存する。ME では検証していない（たぶん問題なく動く）。UTF-8 以外の文字コードで動作確認をしていないが、変更する場合は記述も変えないといけないことに注意。動作確認は、テストサイト漢字読めるかな？（QRから携帯で確認可能）にて行っている。各々の環境で確認してみて、不具合などあれば教えていただけると非常にありがたい。

<?php
	$agent = $_SERVER['HTTP_USER_AGENT'];
	$isPC  = 1;
	if(ereg("^DoCoMo", $agent)){
		header("Content-Type:application/xhtml+xml");
		$isPC  = 0;
		$xml=<<<EOF
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){
		$isPC  = 0;
		$xml=<<<EOF
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}else if(ereg("^UP.Browser|^KDDI", $agent)){
		$isPC  = 0;
		$xml=<<<EOF
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}else{
		$xml=<<<EOF
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
	}
	echo $xml;
?>
<head>

中略

<?php if ( $isPC != 1 ){ ?>
<style type=text/css">
<!--
// 携帯用にCSSを記述。利用可能範囲に注意。
//-->
</style>
<?php } ?>

漢字読めるかな？の環境まわりは次のとおり。

• WordPress 日本語版 2.5
• DB は MySQL 5
• 文字コードはUTF-8
• docomo は 705,905 など多数の機種で確認（自前ではないので正確な表示確認はしていない）
• au は W43SA INFOBAR2 などの機種で確認
• SoftBank は、911SH 920T などの機種で確認

WordPress の Theme ファイルのうち、header.php でよく使う書き方を備忘的にメモ。まだ検証途中であり、後々まとめを作成する予定。将来的に汎用的に使いまわせるようにできるといいと思う。

title

<title><?php
    wp_title(' | ',true,'right');
    bloginfo(’name’);
    if(is_home()){
        echo ' | ';
        bloginfo('description');
    }
?></title>

description

<?php if ( $description = get_bloginfo('description') ) { ?><meta name="description" content="<?php bloginfo('description'); ?>" /><?php } ?>

CSS

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

link (ナビゲーション) home へのリンク用

<?php if (!is_home()) { ?><link rel="start" href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?> Home" /><?php } ?>

link (ナビゲーション) アーカイブへのリンク用

<?php wp_get_archives('type=monthly&format=link'); ?>