TORIYAMAHONPOS WordPressのまめ知識
先週末の4/21(土)、WordBench埼玉の勉強会に参加した。
今回のお題は「WordPressマルチサイト」ということで、
・ざっくり判るDNSの基礎
・速習マルチサイト
・できることから始めるWordPress高速化
DNSはWordPressに限った話ではないとはいえ、サブドメイン型マルチサイトの設定にかかわってくる。ぜひ理解したい内容だった。デモや図を加えて初心者に説明してくれているものの、やっぱり難しい。
最後の30分ほど6名のライトニングトークでは、マルチサイトでブログポータルをつくったころぐが印象的だった。昨年のWordCampのライトニングトークで紹介していたサービスが開始した、という報告だ。やってるな！という感じがするし、WordPressでこういうことができるんだと知るのは嬉しい。
公式テーマが登録された勢いがあったので、私もここで話す機会を戴いた。聞いてくださった皆様ありがとうございます！
»「公式テーマ登録への道」の資料はこちら
WordPress.orgに申請していたテーマ「BirdTIPS」がテーマディレクトリに登録された。実は前回のテーマレビューは申請の翌日に戻っており、依然として数か所の問題が指摘されていた。そのときのメールの内容では、「これらの問題に対応したのち公開します」ということだったので、のんきに修正していた最中だったのだ。
公開を知らせるメールがさきほど届いて、嬉しいような恥ずかしいような。こうなったら残りのフィードバックに、できるだけ早く応えるしかない。当然ながら、公開を知らせるメールにもそのむね追伸があった。ダウンロードが始まってしまったのだから、放っておくわけにはいくまいということか。
「BirdTIPS」は、このブログで使用しているシンプルなテーマである。それでいて申請開始から登録までに2ヵ月かかった。テーマレビューがいかに丁寧なものか分かる。Tracを使ったフィードバックは、英語に不慣れでも分かりやい箇条書きで、どんな場合に不具合が出るかなどのスクリーンショットも添付される。WordPressの最新仕様を取り入れつつ、前バージョンにも対応するよう求められる。ひごろ勉強不足のため、この機会に知った機能も少なくない。
さて、未完成ながらBirdTIPSはこちら！
<head>内のtitleタグはwp_title()でカスタマイズする。
百も承知といいたいところ、その使い方を今まで間違っていた。サイトのtitleタグを出力する際にはheader.phpにて、
wp_title( '|', true, 'right' );
とする。これだとサイトのタイトルのみなので、SEO的にはこれに続けて投稿タイトルやページ番号などを付けたい。その際にコードの流れにまかせてheader.phpに記述していた。デフォルトテーマのtwentytenやtwentyelevenなどもそうしているので、なんの疑問も持っていなかった。
テーマレビューで、titleタグをカスタマイズする場合にはwp_titleフィルタを使うように指摘があった。つまりheadタグ内に記述してよいのはwp_title()のみである。キャッチフレーズや投稿タイトルなど追加したい場合はフィルタで行う必要があるため、functions.phpで処理するのが正しいのだ。
function my_title( $title ) {
global $page, $paged;
$title .= get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description & ( is_home() || is_front_page() ) )
$title .= " | $site_description";
if ( $paged >= 2 || $page >= 2 )
$title .= ' | ' . sprintf( __( 'Page %s', 'birdtips' ), max( $paged, $page ) );
return $title;
}
add_filter( 'wp_title', 'my_title' );
twentyeleven以上のクオリティを求められるテーマレビュー、やはり厳しい。
WordPress.orgにテーマを再申請した。
前回のレビューを反映するのに、数週間かかってしまった。ネックはドキュメントだった。英文法のダメだしがあったため、他のテーマのreadmeをいくつか参考にしながらなんとか作成した。
テーマレビューが急に厳しくなった思ったら、前回の申請中にガイドラインが更新されていた。そこに以下の明記があった。
さて、いつ戻ってくるかなぁ。
2012年3月11日、マイクロソフト品川本社のセミナールームをお借りして開かれたWordCrab Tokyoに参加してきた。アジェンダは、
に加えてライトニングトークという濃い内容だった。
来月には出てきそうな新バージョンは、テーマプレビューやテーマ検索が改良されている。テーマレビューが急に厳しくなったのはこのためだろうか？デフォルトテーマはミニマルでカスタマイズしやすそうなTwenty Twelveとなる。また翻訳機能が改善されて、フロント側とadmin側で翻訳ファイルが分かれるそうだ。早く使ってみたい！
さて、いつもの勉強会であるところのWordBench Tokyoと見せかけて、今回の目的はカニを食べる会だった。同会場で行われた懇親会は福井直送のカニに湧き上がった。越前カニおいしい～行ってよかった！
テーマを作成する際のオプション的なテンプレートのひとつに、image.phpがある。添付画像を単独で表示するものだ。
例えばWordPressのデフォルト機能であるショートコードgalleryは、投稿ページの画像一覧をクリックすると画像ごとの詳細ページを見ることができる。とりあえずはsingle.phpが使用されるので、image.phpを用意することで単独画像のタイトル、キャプション、説明、コメントなど詳細を表示することができる。
bodyタグには”.single-attachment”などのクラスが付加される。これを利用してスタイルを変えることもできる。せっかくだからサイドバーを取り払って、画像を大きく見せるのもよい。
つくってみたのがこのページ。
WordPress.orgに申請していたテーマの審査結果が、今朝方戻ってきた。
提出から3週間もたっているので通過かと思ったら、11項目もの指摘で「不承認」だった。テーマの申請は2回目だし、最新規約も熟読したしたつもりだったから落ち込んでしまう。レビューコメントを読むと、いつのまにそんなに厳しくなっていたの？と泣きたくなったり、必須なら規約に明記して欲しいとむくれたり・・・でもここまで細かくレビューしていただけるのは、やはりありがたい。
レスポンシブWebデザインを知ったのは2011年秋ごろ、WordBench埼玉での勉強会だ。それまでは通常のテーマの他に、携帯向けにはKtai Style、スマホ向けにはWPTouchというプラグインを使用して表示を切り替える手法を取っていた。WordPressとしてはスタンダードといえども、デバイス別に3種類のテーマを作成する必要がありメンテナンスがおっくうになりがちだ。プラグイン独自の仕様や相性に泣かされることもあった(英語が分からないだけだけど・・・)
レスポンシブWebの考えをWordPressに取り入れれば、ひとつのPC用テーマで複数デバイスへの対応が可能になる。WordPressでは最新テーマ「TwentyEleven」が対応しているという。表示幅をどんなに変えようとも、コンテンツは常に画面内にきれいに流し込まれ読みやすい。そういうことだったのか！とすぐに飛びついたものの、テーマとして完成させるには半年ほどかかってしまった。
Media Queries
レスポンシブWebを実現するにはCSS3でMedia Queries という手法を使う。完成形のCSSを定義した後に、画面幅が一定ピクセル以下になったらカラムを減らしたり、余白や文字を小さくしたりと、HTMLを変更しないままCSSだけで段階的に適応していく。具体的には公式テーマの「TwentyEleven」の動作やコードを観察するのがよい。
IE対応
IE8以下ではMedia Queriesが使えない。その場合でも以下のJavaScriptライブラリを使うとよい。なんとIE6まで対応できてしまう。
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
スマホ対応
レスポンシブWebなテーマが完成したので本ブログに適用した。さっそくスマホから確認してみると、なんということかPCとあまり変わらない表示！？わざわざ幅1000px、800px、650px、450pxと4段階も対応したというのにトホホ・・・。Twenty Elevenとの違いをチェックにかかったところ、HTMLのhead内に記述忘れがあった。レスポンシブとかいう前にこれ重要！
<meta name="viewport" content="width=device-width" />
晴れて、PCから見てもスマホから見ても(たぶんiPadも？)いいかんじ！
本ブログは3カラムのデザインでサイドバーが2つある。現状、sidebar.phpにまとめて記述してしまっているが、左と右をそれぞれのテーマファイルに分けることもできる。例えば、
・sidebar-left.php
・sidebar-right.php
の2ファイルに分けて記述し、index.phpなどからは以下のように呼ぶ。
get_sidebar('left');
get_sidebar('right');
例えば”hoge”というキー名のカスタムフィールドの値を取得するには、以下となる。
get_post_meta($post->ID, "hoge", true);
キー名が不特定多数であるかないか分からない場合もある。そんなときは、以下の方法で任意の投稿に関するすべてのカスタムフィールドを取得することができる。
$custom_field_keys = get_post_custom_keys();
foreach ( $custom_field_keys as $key => $keyname ) {
$value = get_post_meta($id, $keyname, true);
}
