WordPressのブランクテーマである_s(underscores)。
AkismetやWoocommerceなどでおなじみのAutomattic社製のスターターテーマ。
README.mdの日本語訳が見当たらなかったので作ってみた。
原文は Underscores on GitHub (2021年4月時点)。
_S(アンダースコア)
やぁ、私は「_s」(アンダースコア)と呼ばれるスターターテーマです。私はカスタマイズのためのテーマなので、親テーマとしては使わないでください。代わりに私を次の、最も素晴らしい、WordPressのテーマに変えてみてください。そのために私はあるのです。
私の超小型のCSSは、まるでテーマのタルタルソースのように見えるかもしれませんが、それはあなたが素晴らしいテーマをデザインする際に、邪魔になるものが少ないということです。きっと他にも多くの楽しみがありますよ。
- あらかじめ用意されたコマンドラインインターフェイスによる最新のワークフローで、あなたのプロジェクトをより快適なものに変えます。
- 無駄が無い軽さでコメントも整った、モダンなHTML5テンプレートです。
- inc/custom-header.phpでカスタムヘッダーを実装しています。inc/custom-header.phpのコメントにあるコードスニペットをheader.phpテンプレートに追加するだけです。
- inc/template-tags.phpのカスタムテンプレートタグは、テンプレートをすっきりとさせ、コードの重複を防ぎます。
- inc/template-functions.phpには、テーマの使用感を向上させるためのちょっとした工夫が施されています。
- js/navigation.jsにあるスクリプトで、小さな画面(携帯電話など)でもメニューをトグル式のドロップダウンにして、CSSのアートワークに対応します。このスクリプトはfunctions.phpに格納されています。
- sass/layouts/にある2つのサンプルレイアウトは、CSS Gridを使ってコンテンツの両側にサイドバーを配置しています。お好みのレイアウトをsass/style.scssでアンコメントしてください。注意:.no-sidebarスタイルは自動的に読み込まれます。
- style.cssにスマートにまとめられたスターターCSSは、デザインを素早く軌道に乗せるのに役立ちます。
- WooCommerceプラグインの統合に完全対応。inc/woocommerce.phpにフックを設置し、製品ギャラリー機能(ズーム、スワイプ、ライトボックス)を有効にした状態でwoocommerce.cssをオーバーライドするスタイリングを実現。
- GPLv2またはそれ以降でライセンスされています 🙂 クールなものを作るのに使ってください。
インストール
要件
_sのインストールには、以下が必要です。
クイックスタート
このリポジトリをクローンするかダウンロードして、名前を何か別のものに変えてください(例では megatherium-is-awesome )。そして、すべてのテンプレートの名前を6段階で検索・置換する必要があります。
- ‘_s'(シングルクォーテーションの内側)を検索してテキストドメインを取得し megatherium-is-awesome に置き換えます。
- s_をすべての関数名から探し出し Megatherium_is_awesome_ に置き換えます。
- テキストドメインを検索します。_sをstyle.cssで検索して megatherium-is-awesome に置き換えます。
- s(前にスペースがある)をDocBlockから検索して見つけ出し Megatheriumis_Awesome に置き換えます。
- 前置詞から_s-を検索し megatherium-is-awesome- に置き換えます。
- S_(大文字)で検索して定数を見つけ出し、
MEGATHERIUM_IS_AWESOME_
. に置換します。
そして、style.cssのスタイルシートヘッダーとfooter.phpのリンクを自分の情報で更新し、languagesフォルダの_s.potの名前をテーマのスラッグを使うように変更します。次に、このReadmeを更新または削除します。
セットアップ
_sに付属するすべてのツールを使い始めるには、必要なNode.jsとComposerの依存関係をインストールする必要があります。
$ composer install
$ npm install
利用可能なCLIコマンド
_sには、WordPressのテーマ開発に適したCLIコマンドが搭載されています。
- composer lint:wpcs : すべての PHP ファイルを PHP Coding Standards に照らしてチェックします。
- composer lint:php : すべての PHP ファイルの構文エラーをチェックします。
- composer make-pot : languages/ディレクトリに.potファイルを生成します。
- npm run compile:css : SASSファイルをcssにコンパイルします。
- npm run compile:rtl : RTLスタイルシートを生成します。
- npm run watch : すべてのSASSファイルを監視し、変更があったときにcssに再コンパイルします。
- npm run lint:scss : すべてのSASSファイルをCSS Coding Standardsに照らしてチェックします。
- npm run lint:js : すべてのJavaScriptファイルをJavaScript Coding Standardsに照らしてチェックします。
- npm run bundle : 開発ファイルとシステムファイルを除いた配布用の.zipアーカイブを生成します。
これで準備は完了です!次のステップは、言うは易し、行う(素晴らしいWordPressテーマを作ること)は難しです(^^)
グッドラック!