カスタムヘッダー

headerカスタムヘッダーとは、ブログのヘッダー画像を差し替える機能である。あらかじめ用意された画像から選択したり、好きな画像をアップロードして設定することができる。以前からあった機能のようだが、配布テーマを作る上では推奨と知り使ってみた。

WordPress3.0の場合は、after_setup_theme フックでカスタムヘッダーの登録を行う。
[PHP]

function my_setup() {

add_custom_background();

define( ‘HEADER_TEXTCOLOR’, ’06C’ );
define( ‘HEADER_IMAGE’, ‘%s/images/headers/buna.jpg’ );
define( ‘HEADER_IMAGE_WIDTH’, apply_filters( ‘my_header_image_width’, 610 ) );
define( ‘HEADER_IMAGE_HEIGHT’, apply_filters( ‘my_header_image_height’, 200 ) );

add_custom_image_header( ‘my_header_style’, ‘my_admin_header_style’ );

register_default_headers( array(
‘example’ => array(
‘url’ => ‘%s/images/headers/example.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/example-thumbnail.jpg’,
‘description’ => ‘Eexample’
),
) );

}

add_action( ‘after_setup_theme’, ‘my_setup’ );

[/PHP]

まずヘッダーのサイズやデフォルトの背景、文字色を指定しておく。そして、add_custom_image_header()で、ブログとダッシュボード用のコールバックをそれぞれ指定する。このコールバックでは、ヘッダーの文字色や背景色を再設定する。register_default_headers()では、あらかじめ添付しておく画像を何枚か配列で指定する。
add_custom_background()はブログ全体の背景色の設定だ。これも推奨されている。

配布テーマを使う場合にこれだけでもユーザが設定できれば、そこそこ雰囲気が出せる。

アイキャッチ画像

WordPress 2.9よりアイキャッチ画像という機能が加わっている。投稿に添付した画像のなかから、トップページなどでサムネイル的に表示する画像を1枚選択できるのだ。アイキャッチ画像を使用するには、テーマのafter_setup_theme フックでそのむね宣言しておく必要がある。functions.php に以下を記述しておけばよい。

[PHP]
function mysetup() {
add_theme_support( ‘post-thumbnails’ );
}

add_action( ‘after_setup_theme’, ‘mysetup’ );
[/PHP]

これで投稿画面の右下あたりにアイキャッチ画像の項目が表示される。テーマを作成するうえで必須の処理となっている。
設定したアイキャッチ画像は、以下の一行でサムネイルとして表示することができる。

[PHP]

[/PHP]

eye今までは、投稿記事に添付した画像からget_children()で抽出した画像を表示するために長々とコードを書いていた。こんな便利になっていたとは知らなかった。

カスタムメニュー

menuWordPress3.0よりカスタムメニューという機能が追加された。これもテーマレビューで指摘されるまで気がつかなかった。カスタムメニューに対応しているテーマでは、管理画面の[外観]-[メニュー]でグローバルナビゲーションやサイドバーに表示するメニューを作成することができる。地味ながら「これは使える！」といいたい機能だ。

さてテーマでカスタムメニューに対応するには、after_setup_theme フックでメニュー登録を行う。例えばグローバルナビゲーションをカスタマイズしたい場合は、functions.php に以下を記述しておけばよい。

[sourcecode language=’php’]
function mysetup() {
register_nav_menus( array(
‘primary’ => ‘Primary Navigation’),
));
}

add_action( ‘after_setup_theme’, ‘mysetup’ );
[/sourcecode]

これで管理画面に「ご利用中のテーマは1個のメニューに対応しています。」と表示され、メニューの編集が可能となる。
作成したメニューはheader.phpなどで表示する。

[sourcecode language=’php’]
‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
[/sourcecode]

コメントフォーム

commentテーマレビューで指摘があったように、3.0からコメントフォームは comment_form()で表示することになっている。single.phpなど表示したい箇所で呼べば、Twenty Ten テーマに似たものがデフォルトで表示される。
カスタマイズしたい場合は、パラメータにオプションを指定する。このオプションがほとんどHTMLであるため、まわりくどい。翻訳コードを入れると再読も難しい。
ハードコーディングをなくす方向というのはわかるものの、便利なのか不便なのかわからない。

テーマレビュー(2)

reviewテーマレビューがまた 「not-accepted」だった。3.0になってからの必須関数や非推奨関数があるため、Theme Review « WordPress Codex をよく見るように、とのこと。

必須関数で足りないのは、
・wp_nav_menu()
　グローバルナビゲーションを表示する。ハードコーディングはNG。
・comment_form()
　コメントフォームを表示する。パラメータでカスタマイズ可能。

メジャーアップデートの直後ということもあり、初心者にはつらいタイミングだったのか。くわえて英語の壁もある。スタッフの方にはお手数かけて申し訳ないけど、コツコツやろう。

jQueryクックブック

feedWordPressとは切っても切れないjQueryである。これといった参考書が見つからないままWebの情報で済ませてたところ、オライリーから真打ち登場だ。
新宿のブックファースト(コクーンタワー)で買ったところ、オライリー謹製ブックカバーが付いてきた。ちょっと嬉しいけど、表紙のイタチっぽいやつがかわいすぎちゃうからカバーはしない。(虫とか爬虫類のときに使うことにする)

jQueryでJSONPを扱う

jQueryでJSONPを扱うのに、ちょっとはまったのでメモ。

jQueryでJSONP形式のWeb APIを利用する場合は、$.ajaxか $.getJSONメソッドで処理を行う。URLパラメータに渡すcallback=? という記述がミソで、このときWeb API側がどのようなコールバックの名前を設定しようとも 自動的に function(data){ のところに返ってくる。

[sourcecode language=’php’]
$.getJSON( “http://example.com/service/?callback=?”,
null,
function(data){
// 処理
});
[/sourcecode]

さて、はまったのはWeb上に用意されているJSONP形式のファイルを扱う場合だ。データの更新頻度が少ない場合は、たまに更新される静的なJSONPファイルを扱うほうがだんぜん早い。
…ということでやってみると、ファイルの中にあらかじめコールバック(“mycallback”とする)の名前が埋め込まれているためか、上記のスクリプトではレスポンスがない。正しくは 「ない」のではなくて 別関数として function mycallback() を用意しておけば、そこに返ってくる。function(data){ へは返ってこない。当然といえば当然なのか。しかし、せっかくjQueryなんだからあくまでもスマートに記述したいのだ。いろいろやってみて以下のようなスクリプトに到達した。

[sourcecode language=’php’]
$.getJSON( “http://example.com/service/example.json?callback=?”,
null,
mycallback = function(data){
// 処理
});
[/sourcecode]

Webや書籍でこのような例が見つからない。あまりやらない方法なのかな？

テーマ再提出

WordPress.orgよりテーマ審査のレスポンスがあった。
結果は”Cannot review theme” で、つまり通過しなかった。指摘として以下の2点。

・automatic_feed_links()が非推奨API
・mb_strimwidth（）が未定義

wp-config.phpで、
[sourcecode language=’php’]
define(‘WP_DEBUG’, true);
[/sourcecode]
にして警告やエラーをチェックせよとのこと。レビュー以前の問題だ。wp-config.phpをよく見ると、「テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。」と記述されている。デバッグモードにすると、いろいろ警告がでてきた。
非推奨APIのautomatic_feed_links()については、自分でも 「ブラウザにフィードアイコンを表示するには」 でメモしたばかりだった。実践できてない。mb_strimwidth()は致命的なエラーだ。PHPの関数なのでどうして？と思ったら、環境設定に依存する関数らしい。自分のサーバーでは動いても、他のユーザに使ってもらおうとしたらこのようなことにも気を使う必要があるのか。テーマやプラグインを作るうえでは、基本中の基本なんだろうな。
こういうこと見直す機会にもなった。

WordPress.orgにテーマを申請

themeWordPress.orgにテーマを投稿し、ただいま審査中となっている。
業務や趣味でいくつかのテーマを作ってきたとはいえ、WordPress.orgに登録するには自分だけで使うのとは違った対応が必要になる。これまで作ったなかでも気に入っているフォトログのテーマについて、「WordPress.orgにテーマを登録する方法」を参照しながら、ちょこちょこと対応してみた。

まずは、GPLライセンス含め、テーマの概要、タグ、自己紹介をstyle.cssに明記する。それからウィジェット、ログイン有無での表示の違い、さまざまなアーカイブ表示など、ふだん自分に必要ない機能にもきっちり対応する。最後に言語対応。すべてのメッセージを英語で記述して、PoEditで作成した日本語ファイルを添付する。

ZIPに固めていざ投稿すると、すぐに警告がでた。単純なチェックはその場で行われるようだ。以下は警告された順。
(1)まず指定外のタグが記述されている。タグは決まったものからえらばなければならない。
(2)次に、<?php と<? の表記が混在している。<?php に統一せよとのこと。
(3)次に、wp_link_pages()がない。シングルページでの複数ページに対応していなかったので、修正した。
(4)さらに、visual editorが使用するCSSが定義されていない。そんなの知らなかったと思いつつ、示されたサンプルをstyle.cssに追加した。

警告はひとつづつでるので、直してはアップロードする。計5回のアップロードを繰り返したとことでようやく受理された。ほんとの審査はこれからだ。
どうなるのかなぁ…

カテゴリ別に年別アーカイブを表示するには

カテゴリ別に年別アーカイブを表示したいとの依頼があり、いろいろやってみた。
例えばプレスリリースの2010年の一覧を表示したい場合、
http://XXXXXX.jp/2010/category/release/
http://XXXXXX.jp/category/release/2010/
のようなURLで表示できると予測したものの、どちらもダメだった。前者はすべてのプレスリリースが表示されてしまい、後者は404となる。

そうこうしているうちに、
http://XXXXXX.jp/2010/?category_name=release
のURLでプレスリリースの2010年の一覧を表示することができた。

2ページ目移行は次のようなURLになる。
http://XXXXXX.jp/2009/page/2/?category_name=release

archiveせっかくパーマリンクを設定しているのにパラメータがついてしまって、ちょっとカッコ悪い。この場合テンプレートは、category-release.phpになる。年別表示をしているかどうかはis_year()で判断できる。

プラグインを使うとよいのだろうか？