[WP Theme Dev] _s(underscores)を読む

iemoto を通してさわる予定だけれども、_s に関する以前に調べた記事を眺めておきます。

ファイルの内容を読んだり、照らし合わせたりといった事まではしていないですが、iemoto でどのようになっているかを意識しつつ予習。
詳解されている記事があってありがたいです。

ファイルレイアウト

プロジェクトの作成にあたる部分。

スターターテーマ _s を使ってWordPressのテーマをつくる(準備編) | Gatespace’s Blog

  • 公式サイトのジェネレーターの入力項目は、grunt-init iemoto 実行時に入力できる。
  • もろもろファイル構成が違うので、iemoto では手が入っているよう。
  • コメントアウトを外すと、各機能が有効になるよう設定されている。
  • iemoto では、翻訳ファイル日本語版も設定済のよう。

スターターテーマ _s を使ってWordPressのテーマをつくる(準備編・補足) | Gatespace’s Blog

テスト環境

環境の用意は、VCCW を利用することでもろもろカバーできそう。

  • WordPressのデバッグモードも有効化されていたはず。
  • テストデータをインポートしておく。
    • テストデータ xml ファイルをダウンロードする。
    • ダッシュボードの「ツール」→「インポート」で、「Import Attachments」の「Download and import file attachments」にチェックをいれてインポートする。
    • VCCW のサイトをのぞいたら、Theme unit test ready な表記があったので、また確認する。
  • テーマチェックプラグインについても、VCCW に設定されている。
    • theme-check plugin-check dynamic-hostname # default plugins

ユニットテストの概要は、こちらの記事に。

WordPressでテーマを作る際のテーマユニットテストのススメ | firegoby

テーマチェックの概要は、こちらの記事に。

信頼性の高いWordPressテーマを作るためのTheme-Checkのすすめ | firegoby

スタイルシート

スターターテーマ _s を使ってWordPressのテーマをつくる(スタイルシート編) | Gatespace’s Blog

  • _s の HTML構造
    • _s 有効化時のマークアップ(ワイヤーフレーム)の図解
    • <body <?php body_class(); ?>> といった形で使われている body_class() の Codex
    • <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> といった形で使われている body_class() の Codex
  • style.css に必ず記載するコメント
    • sass/style.scss
  • 必ず指定(記述)すべきクラス
    • sass/modules/_alignments.scss
    • sass/media/_captions.scss
    • sass/media/_galleries.scss
    • sass/site/primary/_posts-and-pages.scss
    • sass/site/primary/_comments.scss
  • 付属のレイアウトサンプル CSS を使ってみる
    • sass/layout/_content-sidebar.scss
    • sass/layout/_sidebar-content.scss
    • 現バージョンでは数が減っているようなので方針変更があったのかもしれない。
  • マークアップのポイント
    • 「style.css では既にタグのリセットや必要なクラスへの指定が済んでいますので、追記する形でマークアップすることをおすすめします。」
    • 「HTMLタグにはIDまたはクラスが付与されていますので、前述のHTMLマークアップの図やブラウザの開発ツールなどでクラスやIDを確認しながらマークアップしていくと良いでしょう。」
  • WordPress が自動で付与するクラスを把握していくと効率的にマークアップや設計ができるようになりそう。

テンプレート

スターターテーマ _s を使ってWordPressのテーマをつくる(テンプレート階層とモジュールテンプレートファイル) | Gatespace’s Blog

  • WordPressテーマのテンプレート階層
  • モジュールテンプレートファイルとそのインクルード
    • ファイル名の命名ルールや優先順位が使っていないので理解できていない。
    • iemoto では content-{name}.php というファイルがあるので、追いかけてみる必要がありそう。
    • get_template_part() あたりも。
  • _s のテンプレートファイルとモジュールテンプレートファイルのおさらい
    • と思ったら解説されていて助かります。
    • Automattic/_s を見ると少し構成が変わっているようなので、その辺は実ファイルを見て追いかける。

URL取得関数とエスケープ処理

スターターテーマ _s を使ってWordPressのテーマをつくる(ファイルパスとブログ情報編) | Gatespace’s Blog

  • get_stylesheet_directory_uriget_template_directory_uri の違いは、子テーマで使われた時に返すURIが異なる。
  • この辺の関数は覚えきれないな。
  • ブログ情報に関連する関数のチートシート。

こちらの記事も紹介されていました。

WordPressでURLを取得する関数あれこれをまとめた。 | firegoby

  • エスケープ処理として esc_html, esc_attr, esc_url

こちらの記事も紹介されていました。

WordPress を扱う上で憶えておいて欲しい3つのesc #wacja2012 | Simple Colors
データ検証 – WordPress Codex 日本語版

シリーズとして今後も続くようなのでチェックする。

翻訳ファイル

テーマやプラグインを各国語対応する時に利用する何か。
さわったことないので分かりません。

スターターテーマ _s をフォークして翻訳ファイル対応 | Gatespace’s Blog

  • folk したブランチが紹介されていましたが、今はおそらく iemoto を見てくださいという感じか。
    具体的なところは、こちらで紹介されていました。

イケメンのためのWordPress翻訳環境構築方法 | firegoby

  • VCCW のサイトをのぞいたら、WordPress i18n Tools ready な表記がありました。

Sass 対応

_S は、2014年夏に Sass ファイルに対応したとのこと。

WordPressスターターテーマ _s の Sassオプション | Gatespace’s Blog

  • 変数類は sass/variables-site/ にまとめられている。
  • その他は style.scss から読み取るとのこと。