ゆるゆるカフェ「そのWeb 活用されていますか？」

2012年7月7日(土) 以前から気になっていた「ゆるゆるカフェ」に初めて参加した。
前週のWordBenchでのライトニングトークに主催の義一さんが登場したことで、一気にハードルが下がったのだ。川崎市武蔵新城のメサ・グランデにて、今回のテーマは「そのWeb 活用されていますか？」と題されたWordPressを語ろう Vol.8。

壇上で誰かが話すいつもの勉強会とは違って、お互いにテーマを提供し語り合うスタイルで進められる。まずは2人組みになり、今朝起きて考えたことと今日ここへきた目的を話す。1分話したらまた別の人と…を繰り返すうちに、すぐに顔見知りになれてしまうというのがいい。次に4人組みになって、もう少しテーマを掘り下げていく。

…Continue reading

WordBench東京 at GMO

2012年7月1日(日)渋谷はセルリアンタワーのGMOにて開催されたWordBench東京に参加した。セッションが盛りだくさんだったので、気になったものをメモ。

「VPSサーバでのWordPress運用のススメ」稲守貴久
あこがれるものの踏み入れない、苦手な領域。

「PHPがわからないデザイナーでもできる、簡単カスタマイズ術」さわだえり
大丈夫、できるよ！！ってスタンスがとてもいい。

「WordPress 3.4の新機能」おでっせい @odyssey
テーマカスタマイザーについてチェック！

恒例のお楽しみコーナーとなっているライトニングトークのなかで WordCamp Tokyo 2012 の発表があった。今年は文化祭！？

WordPressを使い始めた3年前に、やはり渋谷で行われたWordBenchに参加したことがある。その際には20人ほどしかいなかったのが、今回は200人もの参加者となった。すでにWordPressを使っているエンジニアやブロガーはもちろん、これから使ってみたいという方もいたりと着実に人気を集めている。
GMOスポンサーによる懇親会もにぎわい、たくさんの方とお話できました。

WordBench埼玉 勉強会

先週末の4/21(土)、WordBench埼玉の勉強会に参加した。
今回のお題は「WordPressマルチサイト」ということで、
・ざっくり判るDNSの基礎
・速習マルチサイト
・できることから始めるWordPress高速化
DNSはWordPressに限った話ではないとはいえ、サブドメイン型マルチサイトの設定にかかわってくる。ぜひ理解したい内容だった。デモや図を加えて初心者に説明してくれているものの、やっぱり難しい。

最後の30分ほど6名のライトニングトークでは、マルチサイトでブログポータルをつくったころぐが印象的だった。昨年のWordCampのライトニングトークで紹介していたサービスが開始した、という報告だ。やってるな！という感じがするし、WordPressでこういうことができるんだと知るのは嬉しい。
公式テーマが登録された勢いがあったので、私もここで話す機会を戴いた。聞いてくださった皆様ありがとうございます！
»「公式テーマ登録への道」の資料はこちら

BirdTIPSがテーマディレクトリに登場！

WordPress.orgに申請していたテーマ「BirdTIPS」がテーマディレクトリに登録された。実は前回のテーマレビューは申請の翌日に戻っており、依然として数か所の問題が指摘されていた。そのときのメールの内容では、「これらの問題に対応したのち公開します」ということだったので、のんきに修正していた最中だったのだ。
公開を知らせるメールがさきほど届いて、嬉しいような恥ずかしいような。こうなったら残りのフィードバックに、できるだけ早く応えるしかない。当然ながら、公開を知らせるメールにもそのむね追伸があった。ダウンロードが始まってしまったのだから、放っておくわけにはいくまいということか。

「BirdTIPS」は、このブログで使用しているシンプルなテーマである。それでいて申請開始から登録までに2ヵ月かかった。テーマレビューがいかに丁寧なものか分かる。Tracを使ったフィードバックは、英語に不慣れでも分かりやい箇条書きで、どんな場合に不具合が出るかなどのスクリーンショットも添付される。WordPressの最新仕様を取り入れつつ、前バージョンにも対応するよう求められる。ひごろ勉強不足のため、この機会に知った機能も少なくない。

さて、未完成ながらBirdTIPSはこちら！

titleタグをカスタマイズ

<head>内のtitleタグはwp_title()でカスタマイズする。
百も承知といいたいところ、その使い方を今まで間違っていた。サイトのtitleタグを出力する際にはheader.phpにて、
wp_title( '|', true, 'right' );
とする。これだとサイトのタイトルのみなので、SEO的にはこれに続けて投稿タイトルやページ番号などを付けたい。その際にコードの流れにまかせてheader.phpに記述していた。デフォルトテーマのtwentytenやtwentyelevenなどもそうしているので、なんの疑問も持っていなかった。

テーマレビューで、titleタグをカスタマイズする場合にはwp_titleフィルタを使うように指摘があった。つまりheadタグ内に記述してよいのはwp_title()のみである。キャッチフレーズや投稿タイトルなど追加したい場合はフィルタで行う必要があるため、functions.phpで処理するのが正しいのだ。

[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’ );
[/PHP]

twentyeleven以上のクオリティを求められるテーマレビュー、やはり厳しい。

テーマ再申請

WordPress.orgにテーマを再申請した。
前回のレビューを反映するのに、数週間かかってしまった。ネックはドキュメントだった。英文法のダメだしがあったため、他のテーマのreadmeをいくつか参考にしながらなんとか作成した。

テーマレビューが急に厳しくなった思ったら、前回の申請中にガイドラインが更新されていた。そこに以下の明記があった。

  • テーマURIはテーマに関するサイトか、記事であること
  • ライセンスの表記方法
  • ドキュメントは必須
  • 名前空間は小文字

さて、いつ戻ってくるかなぁ。

WordCrab Tokyo 2012

wordcrab2012年3月11日、マイクロソフト品川本社のセミナールームをお借りして開かれたWordCrab Tokyoに参加してきた。アジェンダは、

  • 新作スクープ！WordPress 3.4
  • WordPressでYahoo!APIを使ってみよう！
  • プラグインカスタマイズを始めた理由、カスタマイズで良かった点・苦労した点
  • 【漫談】PHP Ninja開発の裏側＋α

に加えてライトニングトークという濃い内容だった。
来月には出てきそうな新バージョンは、テーマプレビューやテーマ検索が改良されている。テーマレビューが急に厳しくなったのはこのためだろうか？デフォルトテーマはミニマルでカスタマイズしやすそうなTwenty Twelveとなる。また翻訳機能が改善されて、フロント側とadmin側で翻訳ファイルが分かれるそうだ。早く使ってみたい！

さて、いつもの勉強会であるところのWordBench Tokyoと見せかけて、今回の目的はカニを食べる会だった。同会場で行われた懇親会は福井直送のカニに湧き上がった。越前カニおいしい～行ってよかった！

画像のためのテンプレート

imageテーマを作成する際のオプション的なテンプレートのひとつに、image.phpがある。添付画像を単独で表示するものだ。
例えばWordPressのデフォルト機能であるショートコードgalleryは、投稿ページの画像一覧をクリックすると画像ごとの詳細ページを見ることができる。とりあえずはsingle.phpが使用されるので、image.phpを用意することで単独画像のタイトル、キャプション、説明、コメントなど詳細を表示することができる。
bodyタグには”.single-attachment”などのクラスが付加される。これを利用してスタイルを変えることもできる。せっかくだからサイドバーを取り払って、画像を大きく見せるのもよい。

つくってみたのがこのページ。

テーマレビュー

WordPress.orgに申請していたテーマの審査結果が、今朝方戻ってきた。
提出から3週間もたっているので通過かと思ったら、11項目もの指摘で「不承認」だった。テーマの申請は2回目だし、最新規約も熟読したしたつもりだったから落ち込んでしまう。レビューコメントを読むと、いつのまにそんなに厳しくなっていたの？と泣きたくなったり、必須なら規約に明記して欲しいとむくれたり・・・でもここまで細かくレビューしていただけるのは、やはりありがたい。

  1. テーマURIが不適切。デモサイトが日本語だから？？？ではないだろうけど、分からない。
  2. 説明文でスペルと文法に問題がある。き、きびしぃ・・・grammarなどいまさらどうすれというのだ？
  3. ライセンスの表記が足りない。以前は「WordPressに準ずる」でよかったが。
  4. 翻訳に使用するテキストドメインは小文字の必要がある。そ、そうなの！？
  5. ドキュメントファイルがない。推奨とあるけど、必須らしい。
  6. テーマで使用している画像のライセンス表記も必要とのこと
  7. h1とh2が同じ文字サイズではだめ。
  8. 記事内のページリンクでフロートをクリアすべき。
  9. 最大幅の定義が実際と異なる。適当だった
  10. タイトルがない記事で一覧からページに移動できない。ごもっとも
  11. function.phpで定義する関数の接頭語は、小文字が望ましい。

レスポンシブWebデザインに挑戦

レスポンシブ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も？)いいかんじ！