WordPressのテーマ開発におけるテストツールまとめ
2020/11/06 / 2023/04/24
WordPressのテーマ開発のテストツールを紹介します。
テストツールは、「自動でWordPressのテーマのテストをしてくれるツール」のことです。
例えばこんなことをしてくれます。
- HTMLやCSSの整合性は取れているか
- パンくずリストや記事の構造化マークアップはエラーなく実装できているか
- 正しくOGP設定がされているか
- AMPは正しく実装できているか
- サイトパフォーマンスやSEOの対策は効果的にできているか
テストツールで検証したテスト結果を公開することで、品質が最低限担保していることをユーザに伝えることができます。
目次
[非表示]
標準機能：デバッグモードについて
WordPressをインストールしたら、直下にあるwp-config.phpを開き、WP_DEBUGをtrueにすると、WordPressにエラーが発生したときに画面にエラーログが表示されるようになります。
define('WP_DEBUG', true);テストプラグインについて
テスト中のテーマにTheme Checkを導入してください。
導入後、プラグインの説明に従い、wp-config.phpに下記のコードを追加してください。
define( 'TC_POST', 'Feel free to make use of the contact details below if you have any questions,
comments, or feedback:[[br]]
[[br]]
* Leave a comment on this ticket[[br]]
* Send an email to the Theme Review email list[[br]]
* Use the #wordpress-themes IRC channel on Freenode.' );次に、外観>Theme checkを開いて、「テスト実行！」をクリックしてください。
このように、エラーを検出してくれます。
下の方にスクロールすると、何が足りていないか、説明されています。
エラーがなくなるまで、修正しましょう。
readme.txtの構文チェックについて
作成したテーマやプラグインを公式リポジトリに登録する場合は以下のツールでreadme.txtが正しく記載されているかチェックしてください。
フロントエンド側のテストについて
HTML、CSS、JavaScriptのテストについてです。
- HTMLの構文チェック
⇒ Markup Validation Service - CSSの構文チェック
⇒ CSS Validation Service - JavaScriptのエラーチェック
⇒ ブラウザの開発者モードなど
速度について
サイトの速度は以下を使用しましょう。
構造化マークアップの動作確認について
構造化マークアップのテストは下記を使用しましょう。
２つありますが、好きな方で大丈夫だと思います。
OGPの動作確認について
OGPのテストは以下を使用しましょう。
AMPについて
AMPのテストは、AMPテストを使用しましょう。
URLを入力するとテストできます。
【Lighthouse】SEOやパフォーマンスについて
ChromeでF12ボタンを押下し、デバッグモードを開いて下さい。
Lighthouseをクリックした後、Generate reportをクリックしてください。
SEOやパフォーマンスなどの検証結果が100点満点で表示されます。スクロールすると、なぜこの点数になったのか？、改善点は何か？などアドバイスが表示されるので、修正していきましょう。
モバイルフレンドリーテストについて
スマートフォンでページを開いて、使いやすいページになっているかをテストします。
2021年にモバイルファーストインデックスという、スマホサイトを優先してインデックスを行うアルゴリズム？をすべてのWebページに適用すると発表しています。
したがって、2021年3月時点までにすべてのページでモバイルフレンドリーテストに合格している必要があります。
まとめ
テストツールで以下のことが担保できます
- 構文エラーがないこと
- 構造化マークアップにエラーがないこと
- OGPの設定が正しいこと
- AMPの設定が正しいこと
- 速度チェック
- SEOチェック
WordPressのテーマ開発している人や、受託開発をしている人は、テストツールで最低限の品質を担保しましょう。
ほかにもおすすめのツールがあれば、コメントなどで教えてください！