WPTouchがPCでモバイル表示されてしまう

WPTouchWordPressを使ってAndroid向けコンテンツを作成した。
スマートフォンでの表示はWPTouchに頼ればよいと気軽に取り組んだものの、テーマのカスタマイズに思った以上に手間取った。WPTouchはダッシュボードからロゴ画像やリンク色はじめ様々なオプションを選択できて、かっこよくモバイル表示ができるようになっている。ここに自社のデザインをあてはめようした場合にはそれらのオプションはあまり意味をなさず、WPTouch独自の関数を理解せねばならないところから始まる。

それでもなんとかデザインチームから出てきたHTMLを反映することができた。リリース後しばらくして、PC閲覧時にたまにモバイル表示になってしまうことが発覚した。フォーラムなどを調べていて逆の例(モバイルなのにPC表示)は対応策が述べられているなか、PCなのにモバイル表示という例は見つからず、1週間ほどが過ぎた。

WPTouchの動作を見ていたところ、UserAgentは正しく取得できているもののテーマの振り分けがうまく行かない場合がごくまれにあるようだった。テーマの構成としては、
PC用 /themes/mytheme
モバイル用 /plugins/wptouch/themes/mytheme
のようにしていた。
そしてWPTouchが無料版であるため、モバイルテーマのディレクトリを”default”ではなく”mytheme”を参照するように、wptouch.phpを修正してもいた。結論としてはそれがダメだった。

wptouch.phpをもとに戻した。つまりモバイル用テーマのディレクトリを
/plugins/wptouch/themes/default
に戻して、中身には自作のmythemeをコピーした。再現しなくなったようだ。とすると、PC用とモバイル用でテーマ名が同じだったのが原因か。かならず発生するわけではないのでなんともいえない。ともかく無料版ではモバイルテーマのディレクトリはdefaultのままにしておくのが無難としておく。

WP-Cronが9時間遅れる

WordPress 3.0にしてから WP-Cron が9時間遅れていることに気が付いた。1日1回の処理をwp_schedule_event()で午前2時に設定してあり、毎日実行されているようなのであまり気にしていなかったのだ。ある朝処理されていないことに気がつき、それが昼の11時ぐらいなると動くことが分かった。

ちょうど9時間だからタイムゾーンの設定かサーバの設定がおかしいに違いない。まずWordPressでのタイムゾーンの設定は「UTC +9」で、投稿時間が正常であることを確認した。WP-Cron Dashboard というプラグインで予定を確認したところ、午前2時に設定されている。同じサーバに稼働している他のサイトで、似た処理があるものの正常だ。どうもWordPress 3.0のサイトだけが遅れると分かった。

WordPressフォーラムで質問したところ、

date_default_timezone_set('Asia/Tokyo');

を設定するとよいとの回答を得たので、仕込んでみた。
今後、時間を扱うテーマやプラグインでは この設定が必要になるのだろうか。
バージョンアップ時の対応しわすれでは？という気がするものの、解決したのでよいか。

管理画面にJavaScriptを追加する

テーマやプラグインでJavaScriptを追加したい場合は、アクションフックのwp_print_scriptsを利用する。管理画面の場合は admin_print_scripts になる。ただしここでやると、管理画面のすべてのページで読み込まれてしまう。これを、たとえば新規投稿画面のみで宣言したい場合には、以下のようなフックを利用するとよい。
[PHP]
add_action(‘admin_head-post-new.php’, ‘my_admin_script’);
[/PHP]

admin_head- に その画面のphpファイル名をつなげたフックが発生するのだ。似たようなことで、自作したプラグインの設定画面では、以下のようなフックが発生する。設定画面がmypluginというプラグインのmy_main.phpというファイルの例だ。
プラグインの設定画面だけで使いたいCSSやJavaScriptがある場合は、ここで追加するとよい。
[PHP]
add_action(‘admin_head-toplevel_myplugin/my_main’, ‘my_admin_script’);
[/PHP]

予約投稿に失敗する場合

開発したサービスをサーバに設置してからリリース日までは、IPによるアクセス制限をかけて社内からしか参照できないようにしておく、というのはよくあることだ。その状況で動作確認をしていると、毎朝実行するように設定したwp_schedule_event()が動かなかった。もしやと思って試してみると予約投稿にも失敗する。ローカル環境ではうまくいくのになぜかと思ってちょっと調べた。
指定の時間になったら実行する、というような処理はWordPressの擬似cronで行われる。このときWordPress自身が自分のURLを参照するため、アクセス制限があると解決できないということらしい。.htaccessに記述しているアクセス可能IPに社内のIPのほか、サーバ自身のIPを追加するとうまくいった。

これまでも、テスト環境では予約投稿できないんだよなぁ…とずっと思っていたので、原因がわかってよかった。

カスタムフィールドでソート

記事一覧の並び順はデフォルトで日付が新しい順になっている。
これを変更するには、ループの直前でquery_posts()を使いorderbyパラメータを指定する。記事タイトルやコメント数のほか、カスタムフィールドの値によって並び替えることでもできる。カスタムフィールドでソートする場合には、orderby=meta_value の他に meta_key=’キー名’ を指定する。

[PHP]


// 表示


[/PHP]

ただしカスタムフィールドは文字型のため、数値としてソートしたい場合はアクションフックの posts_orderby を併用するとよい。

[PHP]
function my_orderby($orderby) {

global $wpdb;

if (get_query_var(‘meta_key’) == ‘キー名’) {
$orderby = “CAST($wpdb->postmeta.meta_value AS UNSIGNED) ASC”;
}

return $orderby;
}

add_filter(‘posts_orderby’, ‘my_orderby’);

[/PHP]

フォトログテーマ「BirdSITE」がテーマディレクトリに登場

birdsiteフォトログ用のテーマ「BirdSITE」が、WordPressテーマディレクトリに登録されました！
WordPress.orgからのテーマレビューで何度もダメだしされながら、英語も苦手なために挫折しそうになったものの、晴れて公式テーマは嬉しい。
http://wordpress.org/extend/themes/birdsite

これまれの経過
・8/11 WordPress.orgに登録申請
・8/13 1回目のテーマレビュー「DEBUGモードで開発せよ」
・8/17 再申請
・8/24 ２回目のテーマレビュー「WordPress 3.0に対応せよ」
・9/8 再々申請
・9/16 3回目のテーマレビュー「Very good work.」
・9/18 テーマディレクトリに掲載

テーマの原案は昨年末に赤羽で行われたWordBench東京もくもく部(みんなで集まってもくもくと何かを作る会)をきっかけに出たもの。そこでアドバイスを受けテーマディレクトリへの登録を目標とし、ウィジェット対応や多言語対応などしてやっと8月に申請。その間WordPressは3.0へのメジャーアップデートがあったためカスタムメニューやアイキャッチなど開発要件が増えているのに気付かなかった。そのあたりテーマレビューで指摘を受け、3度めの提出で登録された。最初に申請を行ってから1ヵ月かかっているものの、自分にはムリ・・・と何度も思ったので本当に嬉しい！
WordPress.orgのスタッフはこれを手作業で行っている。初歩的なミスにも丁寧にフィードバックしてくれるのはありがたく申し訳ない気持ちだ。

作ったのはごくシンプルなテーマだけど、この作業は勉強になったしWordPressを使って仕事をするうえでの自信にもつながる。
BirdSITEのテーマを使った私のフォトログは、
BirdSITE -TORIYAMAHONPOS Photo Gallery-

すべての記事を表示

トップページやアーカイブなど記事の一覧で表示される件数は、デフォルトで10件。これを[表示設定]-[1ページに表示する最大投稿数]で変更することができる。また、ループ直前でquery_posts(“showposts=表示件数”)することで一時的に変更することもできる。
すべての記事を表示したい場合は、showposts=-1とするとよい。

[PHP]
query_posts(‘&showposts=-1’);
[/PHP]

条件にカテゴリーや年次を追加することもできるので、あるカテゴリの記事すべてや、2010年の記事すべて、といった一覧を表示することができる。

カスタムヘッダー

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()で抽出した画像を表示するために長々とコードを書いていた。こんな便利になっていたとは知らなかった。