Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. WordPress

WordPressのテーマを自作する(6)

2021年7月22日 WordPress, プログラミング テーマ自作

 前回の続きです。
環境整備が済んだので、ようやく実際の作業に移るわけですが、
ネットで調べている際に「WordPress コーディング規約」というのがあるのを見つけました。
CSS、HTML、JavaScript、PHPのコーディング規約がそれぞれ設けられています。

 ざっと読んでみましたが、
空白、インデント、改行の入れ方とか結構細かく書いてありますね。
CSSやJavaScriptはどうせ minify してしまうので、どうでも良かったりします(^_^;)
PHPのコードを良さげに minify してくれるのは、npm では見つからない感じでした。
PHPなコードにはHTMLやJavaScriptのコードとか混在したりするので、やっかいなのかも(^_^;)
自作したテーマのコードを公開するわけでもないし、コーディング規約に則ってやる必要は無いのですが、
規約の整合性をチェックしたり整形したりするツールがあるようなので、一応試してみることにしました。

 こちらやこちらを参考にやってみます。
いずれも、PHPのライブラリ管理ツールである「Composer」なるものを導入してやっています。
PHPの世界における npm のようなものなのかな? 実は初めて知りました(^_^;)
PHPなフレームワークを使うわけでもないので、Composerを導入してもあまり意味がありません。
なので、PHP_CodeSnifferを直にGitからcloneしてやってみることにします。
どこか適当なフォルダで以下のようにやります。なお、Gitな環境は既に出来ているものとします。

$ git clone https://github.com/squizlabs/PHP_CodeSniffer.git

 そうすると、
PHP_CodeSniffer というフォルダが作られ、その下にある bin/phpcs と bin/phpcbf がツール本体になります。
Windowsの場合は bat になってました。
実行するには、5.4.0以上のPHP本体が必要なので、前回導入したXAMPP配下のPHPに対してパスを通しておきます。
さらに、インストールしたフォルダ/PHP_CodeSniffer/bin についても、同様にパスを通しておきます。

 コマンドを使うには、まずどの規約に対応させるかを指定する必要があるようです。
例えば以下のような感じ。

$ phpcs --config-set default_standard PSR2

ちなみに PSR2 っていうのはPHPにおける一般的なコーディング規則のようです。
これについても自分は初耳だったりします(^_^;)

 どんな規約に対応可能かは以下のようにやると出てくるそうです。

$ phpcs -i

 ↓こんな感じに出力されました。

The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz and Zend

 デフォルトではWordPressのコーディング規約は入っていないので、これも git から clone します。

$ git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git

 そうすると、WordPress-Coding-Standards というフォルダが出来ているので、
以下のようにやって規約を登録します。

$ phpcs --config-set installed_paths "インストールしたフォルダ/WordPress-Coding-Standards"

 phpcs -i すると、以下のように登録されているのが確認できます。

The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra

 ということで、WordPress をデフォルト規約として設定します。

 $ phpcs --config-set default_standard WordPress

 ふぅ、ようやく準備が整いました(^_^;)
あとは、phpcs ファイルまたはフォルダ名、phpcbf ファイルまたはフォルダ名 とやれば、
それぞれ規約に対する判定と整形を行うことができます。
フォルダを指定すると、配下の対象ファイルについて全部やってくれるようです。
ただし、整形は元のファイルを書き換えてしまうので要注意です。

 さっそく試してみました・・・ものすごい数のエラーが出ました(^_^;)
それじゃあ整形すればOKになるだろうとやってみたら、全部はやってくれない・・・(T_T)
というか自動ではうまくやれない場合があるっぽいようです。やれやれ。
エラーのメッセージは全部英語だし、何を直せばよいのか分からないのとかあるし・・・。
個人的には激しくウザくてイライラします(^_^;)

 結論、
コーディング規約とかどうでもよいです。
そういうのに時間や手間を取られるのは何か馬鹿らしい。
最終的にちゃんと動けばよいのです!(^_^;)

 次回に続きます。

関連記事
WordPressのテーマを自作する(23) WordPressのテーマを自作する(22) WordPressのテーマを自作する(21) WordPressのテーマを自作する(20) WordPressのテーマを自作する(19) WordPressのテーマを自作する(18) WordPressのテーマを自作する(17) WordPressのテーマを自作する(16) WordPressのテーマを自作する(15) WordPressのテーマを自作する(14) WordPressのテーマを自作する(13) WordPressのテーマを自作する(12) WordPressのテーマを自作する(11) WordPressのテーマを自作する(10) WordPressのテーマを自作する(9) WordPressのテーマを自作する(8) WordPressのテーマを自作する(7) WordPressのテーマを自作する(5) WordPressのテーマを自作する(4) WordPressのテーマを自作する(3) WordPressのテーマを自作する(2) WordPressのテーマを自作する

コメントする キャンセル

アドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

WordPressのテーマを自作する(5)
WordPressのテーマを自作する(7)

カテゴリー

WordPress つぶやき トピック プログラミング

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote notifier.js OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::