WPの_sに関するメモ

Cat WEBサイト構築Tag by cubismer

しばらくぶりにダウンロードしましたらかなり変わっていたように思うのでメモ的に。私の記憶違いで前からこうだったかもしれませんが。

前提

  • 2021.6にダウンロードできるバージョン(バージョン数の記載が見当たらず)
  • テーマ名を_sから変更する
  • VScode使用

以前との違い

  • Node.jsとComposerを使用する前提
  • 環境構築用のcomposer.jsonやコーディング規約用のphpcs.xml.distなどの設定ファイルが含まれている
  • Jetpackやwoocommerce用のファイルがある(前からあったかも)
  • 狭い画面サイズ時にナビゲーションを畳むsitenavigation.jsなどのJSある(前からあったかも)
  • テーマ内のファイルでWPテーマ開発に必要な環境が整う反面、そこをこのテーマに求めていないという場合は不要なファイルが多くなるので困る

テーマ内ファイルの補足

以下は私見が入っていますので読まれる方はその点留意ください。

composer.json/package.json

コーディングルール準拠確認やリントやビルドなどを実行できるようにするための設定ファイル。エディタ側などすでに同種のことができる環境があるなら削除しても問題はないはず。
$ npm run bundleで削除される。

navigation.js

スマホサイズ時にグローバルナビを開閉式へと変更し、動作させるためのJS。

phpcs.xml.dist

コーディングルール準拠か否かのチェック用。整形まではしてくれないはず。
$ npm run bundleで削除される。

woocommerce.css/woocommerce.php

woocommerce用だが詳細は未確認。普通のサイトにはいらないので削除で問題ないはず。

wpcom.php

おそらくWordPres.comでサイトを運用する場合に、WordPres.comでしか使えない機能($themecolorsという変数を使っているので色設定関係のみ?)をテーマで有効にするためのファイルと思われる。WordPres.comと関係ないなら削除で問題ないはず。

コマンド一覧


composer lint:wpcs : checks all PHP files against PHP Coding Standards.
composer lint:php : checks all PHP files for syntax errors.
composer make-pot : generates a .pot file in the languages/ directory.
npm run compile:css : compiles SASS files to css.
npm run compile:rtl : generates an RTL stylesheet.
npm run watch : watches all SASS files and recompiles them to css when they change.
npm run lint:scss : checks all SASS files against CSS Coding Standards.
npm run lint:js : checks all JavaScript files against JavaScript Coding Standards.
npm run bundle : generates a .zip archive for distribution, excluding development and system files.

セットアップ方法

上記のGithubページ下部か、テーマ内のreadme.mdにテーマの名称を変更した上での開始手順が記載されています。

基本的にはターミナルなどを使い、テーマのディレクトリに移動して手順通りにすればcomposer installやnpm installで整えられるのであまり迷うことはありません。

composer lint:wpcでエラーがでる

手順通りに作業行なってから、composer lint:wpcでWP用のリントを実行すると以下のエラーが出ます。


Script @php ./vendor/squizlabs/php_codesniffer/bin/phpcs handling the lint:wpcs event returned with error code 1

出力内容を遡ると以下のエラーを確認できます。


Mismatched text domain. Expected '_s' but got '変更したテーマ名'.

翻訳部分のコードに問題があることがわかりますが、探す文字列が_sなので結構大変です。
具体的にはphpcs.xml.dist内の60行目付近などにある以下のようなvalue="_s"を書き換える必要がありました。


<rule ref="WordPress.WP.I18n">
  <properties>
    <property name="text_domain" type="array" value="_s"/>
  </properties>
</rule>
<!-- 上記の　value="_s"　を　value="変更したテーマ名" に書き換える -->

公式サイトでテーマ名を反映した場合でもこの問題は起こりますが、この件は以下で触れられています。

npm run bundleでディレクトリ名が_sになる

WPに実際にアップするファイルとしてはnode_modulesなど邪魔なファイルが多いので、以下のコマンドで不要なファイルを消した状態でzipにすることになると思います。


$ npm run bundle

ただこの状態ではzipと解凍後のディレクトリ名が_sになってしまいます。
変更後のテーマ名を設定するには、package.jsonの44行目あたりの以下を書き換えます。


"bundle": "dir-archiver --src . --dest ../public/_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map"

//上記の一部を下記に変更(「変更後のテーマ名」の部分のみ)
"bundle": "dir-archiver --src . --dest ../public/変更後のテーマ名.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map"

規約の設定

たまたま検索で見つけただけなので他にもあるとは思いますが、上記でコメントアウト時の調整を確認。

ただ、上記記事がというわけではありませんが、制限を外せるからと言って外しすぎると規約とは？という状態になりそうなので気をつけたいと思います。

結び

便利といえば便利なのですが、このテーマに求めていたのはこういうことではなかったといいますか、テーマが一部とは言え環境構築に関わる動作を持っていると設定の手間が増えて安定して使えないといいますか、デフォルトでエラーや意図しない状態が発生して不必要に手間がかかるといいますか、少々期待しているものとは変わってしまった印象です。

例えば今の形であれば、多人数がそれぞれに開発する場面を考えると有益ですが、各自がすでにリントなどをできる状態にしている可能性は高く、その場合はむしろ邪魔になるのではという感じです。

現状テーマがダメということではなく、以前のシンプルなバージョンもあるといいなと思いました。

2人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄