テーマ

の記事

  • テーマ再申請

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

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

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

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

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

    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も?)いいかんじ!

  • 複数のサイドバーを作成する

    本ブログは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);

    キー名が不特定多数であるかないか分からない場合もある。そんなときは、以下の方法で任意の投稿に関するすべてのカスタムフィールドを取得することができる。

  • JavaScriptからホームURLを知りたい

    現在のブログのホームURLを知るには、テンプレートタグのhome_url()である。これをJavaScriptから知るにはどうしたらよいのか?JavaScriptから動的に画像を差し替えたり、ajaxを使う際にはホームURLがわからないと困るのだ。
    このようなときはあらかじめテーマに、hidden属性で home_url() を掃き出しておくことにしている。例えば、
    [PHP]

    のようにホームURLが分かる。

    ただしHTML上ではどうしてこんなところにhiddenがあるのか、ということになるため収まりが悪い。もう少しスマートな方法はないものか。

  • 親ブログの情報を取得する

    マルチサイトにかかわっているため、親ブログ子ブログに関するメモが続く。
    さて、子ブログから親ブログの情報を取得するには、
    [PHP]
    switch_to_blog(ブログID);
    //なにか処理
    restore_current_blog();
    [/PHP]
    こうすることで、親ブログの情報を取得することができる。
    例えば処理でget_categories()を行えば、親ブログのカテゴリ一覧を取得する。ブログIDを指定すればよいので、もちろん親子にかかわることはない。マルチサイトでの他ブログの情報、という意味である。

  • 子テーマで親テーマのディレクトリを知る

    WordPressで構築しているポータルサイトに記事コンテンツ(いわゆるブログ)を設置することになった。ここで同じブログ内の別カテゴリとしてやるか、子ブログでやるかで悩むところだ。管理者が別ということもあって、記事が混在しないほうがよいかと子ブログを採用した。

    デザインも似ているため子テーマでやってみようしたら、困ったことがあった。テーマ配下にある画像やJavaScriptのパスである。画像のパスを取得する際に親テーマのディレクトリにあるのか、子テーマのディレクトリにあるのかで区別する必要があったのだ。以下で区別できるとすぐに分かった。

    子テーマの場合親テーマのURLは、
    bloginfo('template_url');

    子テーマの場合子テーマのURLは、
    bloginfo('stylesheet_directory');

    通常は同じ値が返るため区別のつかなかったこのコードを子テーマで使うと、違いがあった。

  • カテゴリ一覧の次ページでNotFound

    カテゴリ一覧でページネーションできなくなる場合がある。例えば、
    http://example.com/category/sample/
    というカテゴリ一覧のページがあった際、次ページとなるはずの
    http://example.com/category/sample/page/2/
    がNot Foundになる。
    いくつかのページ系プラグインで試したので、プラグインの問題というわけではなさそうだ。
    このときカテゴリの一覧では、
    query_posts($query_string .'&showposts=3');
    というふうに表示件数を指定している。これが原因のようだった。showpostsで指定した件数が、ダッシュボードで設定している件数よりも少ない場合に発生する。