WordPress.orgにテーマを再申請した。
前回のレビューを反映するのに、数週間かかってしまった。ネックはドキュメントだった。英文法のダメだしがあったため、他のテーマのreadmeをいくつか参考にしながらなんとか作成した。
テーマレビューが急に厳しくなった思ったら、前回の申請中にガイドラインが更新されていた。そこに以下の明記があった。
- テーマURIはテーマに関するサイトか、記事であること
- ライセンスの表記方法
- ドキュメントは必須
- 名前空間は小文字
さて、いつ戻ってくるかなぁ。
TORIYAMAHONPOS WordPressのまめ知識
の記事
TORIYAMA Yuko
テーマを作成する際のオプション的なテンプレートのひとつに、image.phpがある。添付画像を単独で表示するものだ。
例えばWordPressのデフォルト機能であるショートコードgalleryは、投稿ページの画像一覧をクリックすると画像ごとの詳細ページを見ることができる。とりあえずはsingle.phpが使用されるので、image.phpを用意することで単独画像のタイトル、キャプション、説明、コメントなど詳細を表示することができる。
bodyタグには”.single-attachment”などのクラスが付加される。これを利用してスタイルを変えることもできる。せっかくだからサイドバーを取り払って、画像を大きく見せるのもよい。
つくってみたのがこのページ。
TORIYAMA Yuko
WordPress.orgに申請していたテーマの審査結果が、今朝方戻ってきた。
提出から3週間もたっているので通過かと思ったら、11項目もの指摘で「不承認」だった。テーマの申請は2回目だし、最新規約も熟読したしたつもりだったから落ち込んでしまう。レビューコメントを読むと、いつのまにそんなに厳しくなっていたの?と泣きたくなったり、必須なら規約に明記して欲しいとむくれたり・・・でもここまで細かくレビューしていただけるのは、やはりありがたい。
TORIYAMA Yuko
レスポンシブ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も?)いいかんじ!
TORIYAMA Yuko
本ブログは3カラムのデザインでサイドバーが2つある。現状、sidebar.phpにまとめて記述してしまっているが、左と右をそれぞれのテーマファイルに分けることもできる。例えば、
・sidebar-left.php
・sidebar-right.php
の2ファイルに分けて記述し、index.phpなどからは以下のように呼ぶ。
get_sidebar('left');
get_sidebar('right');
TORIYAMA Yuko
例えば”hoge”というキー名のカスタムフィールドの値を取得するには、以下となる。get_post_meta($post->ID, "hoge", true);
キー名が不特定多数であるかないか分からない場合もある。そんなときは、以下の方法で任意の投稿に関するすべてのカスタムフィールドを取得することができる。
|
1 2 3 4 |
$custom_field_keys = get_post_custom_keys(); foreach ( $custom_field_keys as $key => $keyname ) { $value = get_post_meta($id, $keyname, true); } |
TORIYAMA Yuko
現在のブログのホームURLを知るには、テンプレートタグのhome_url()である。これをJavaScriptから知るにはどうしたらよいのか?JavaScriptから動的に画像を差し替えたり、ajaxを使う際にはホームURLがわからないと困るのだ。
このようなときはあらかじめテーマに、hidden属性で home_url() を掃き出しておくことにしている。例えば、
[PHP]
のようにホームURLが分かる。
ただしHTML上ではどうしてこんなところにhiddenがあるのか、ということになるため収まりが悪い。もう少しスマートな方法はないものか。
TORIYAMA Yuko
マルチサイトにかかわっているため、親ブログ子ブログに関するメモが続く。
さて、子ブログから親ブログの情報を取得するには、
[PHP]
switch_to_blog(ブログID);
//なにか処理
restore_current_blog();
[/PHP]
こうすることで、親ブログの情報を取得することができる。
例えば処理でget_categories()を行えば、親ブログのカテゴリ一覧を取得する。ブログIDを指定すればよいので、もちろん親子にかかわることはない。マルチサイトでの他ブログの情報、という意味である。
TORIYAMA Yuko
WordPressで構築しているポータルサイトに記事コンテンツ(いわゆるブログ)を設置することになった。ここで同じブログ内の別カテゴリとしてやるか、子ブログでやるかで悩むところだ。管理者が別ということもあって、記事が混在しないほうがよいかと子ブログを採用した。
デザインも似ているため子テーマでやってみようしたら、困ったことがあった。テーマ配下にある画像やJavaScriptのパスである。画像のパスを取得する際に親テーマのディレクトリにあるのか、子テーマのディレクトリにあるのかで区別する必要があったのだ。以下で区別できるとすぐに分かった。
子テーマの場合親テーマのURLは、
bloginfo('template_url');
子テーマの場合子テーマのURLは、
bloginfo('stylesheet_directory');
通常は同じ値が返るため区別のつかなかったこのコードを子テーマで使うと、違いがあった。
TORIYAMA Yuko
カテゴリ一覧でページネーションできなくなる場合がある。例えば、
http://example.com/category/sample/
というカテゴリ一覧のページがあった際、次ページとなるはずの
http://example.com/category/sample/page/2/
がNot Foundになる。
いくつかのページ系プラグインで試したので、プラグインの問題というわけではなさそうだ。
このときカテゴリの一覧では、
query_posts($query_string .'&showposts=3');
というふうに表示件数を指定している。これが原因のようだった。showpostsで指定した件数が、ダッシュボードで設定している件数よりも少ない場合に発生する。