_s（underscores）を読む

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

Automattic/_s
megumiteam/iemoto

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

Contents

ファイルレイアウト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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