テスト環境

テーマを構築する際には、何らかの開発環境内でテストを行うことが良いプラクティスです。このセクションでは、さらに自分で探求できるいくつかの方法の概要を紹介します。

ローカル環境

ローカル開発環境は、ライブサイトに影響を与えることなく、テーマの開発とテストを行うための制御されたスペースを提供します。利用可能なオプションのいくつかは、ツールとセットアップのドキュメントに記載されています。

ローカルで開発する際は、常にデバッグを有効にしておくべきです。エラーを処理し、テーマ開発プロセスを最適化するためのデバッグ技術やツールに関する情報は、デバッグのドキュメントを参照してください。

WordPress Playground

WordPress Playgroundは、テストのための別のオプションです。これは完全にブラウザ内で動作し、テストのための制御されたスペースを提供します。

ここでは、Playgroundで実行されているデフォルトのTwenty Twenty-Fourテーマの様子を見てみましょう:

WordPress Playgroundのデフォルトセットアップのスクリーンショット、Twenty Twenty-Fourテーマのホームページを表示しています。セットアップを管理するための上部バーがあります。

このプラットフォームの使用に慣れるためには、公式のWordPress Playgroundドキュメントを参照してください。

テーマユニットテストデータ

WordPressテーマを開発する際には、さまざまなコンテンツを処理できることが基本です。このプロセスを支援するために、WordPressはインポート可能なXMLファイルを介してテーマユニットテストデータのセットを提供します。これは、より大きなテーマテストプロセスの一部に過ぎません。

テストデータは、投稿、ページ、コメント、メディアのコレクションであり、これをWordPressインストールにインポートできます。このデータを使用してテストすることで、テーマが極端に長いタイトル、さまざまなサイズの画像、ネストされたコメント、HTML要素の混合などのエッジケースをどのように処理するかを確認できます。

テーマユニットテストデータでテーマをテストするには、次の手順を実行する必要があります:

  • データをダウンロード: GitHubリポジトリから最新バージョンを取得します。
  • データをインポート: WordPressインポーターツールを使用して、データをWordPress環境にインポートします。

テストインストールにコンテンツをインポートしたら、各コンテンツがどのように表示されるかを確認します。テーマが問題を起こしやすい領域に特に注意を払ってください。また、さまざまなデバイスや画面サイズでテーマを表示して、コンテンツが期待通りに表示されることを確認してください。

ツールとリソース

テーマをテストする際には、テーマの潜在的な問題をチェックするためのツールを使用することが重要です。

テーマチェックプラグインは、公式ディレクトリに提出する前に、テーマレビューガイドラインに対してテーマを評価します。ディレクトリに提出しない場合でも、テーマがいくつかの基本的な基準を満たしていることを確認するために役立ちます。

テストスイートに含めるべき他のWordPressプラグインは次のとおりです:

  • デバッグバー: WordPress管理画面に管理バーを追加し、デバッグのための中央の場所を提供します。
  • クエリモニター: データベースクエリ、APIリクエスト、およびテーマページや機能を生成するために使用されるAJAXのデバッグを可能にします。
  • ログ非推奨通知: テーマ内での不正な関数使用、非推奨ファイル使用、非推奨関数使用をログに記録します。
  • モンスターウィジェット: コアWordPressウィジェットを単一のウィジェットに統合し、一度にすべてをテストしやすくします（クラシックテーマのみ）。

ブロックテーマの効果的なクロスブラウザ互換性テストのためには、次のような最新のブラウザで利用可能な開発者ツールを使用することが重要です:

機能テスト

テーマの基本的なWordPress機能との互換性をテストすることは必要です。このステップは、テーマが見た目が良いだけでなく、WordPressのコア機能ともうまく機能することを保証します。

基本的なWordPress機能のテスト

テーマがコア機能と連携し、期待通りに動作することが重要です。テストすべき基本的な機能は次のとおりです:

  • 投稿とページ:
    • ブロックエディタを使用してさまざまな投稿とページを作成します。テキスト、画像、動画など、さまざまなタイプのコンテンツを試してみてください。
    • すべての標準ブロック（段落、画像、見出し、リストなど）がどのように表示されるかに注意を払ってください。正しく整列していますか？間隔は一貫していますか？
  • ブロック設定:
    • 各ブロックの設定をテストして、意図した通りに機能することを確認します。たとえば、画像の整列を変更したり、見出しの色を変更したとき、テーマはこれらの変更を正確に反映しますか？
  • レスポンシブ性:
    • これらの要素が異なる画面サイズにどのように適応するかを確認します。モバイルデバイスでレイアウトが直感的でユーザーフレンドリーであることを確認してください。
  • コメント:
    • 投稿のコメントセクションを見てください。コメントと返信は正しく表示されていますか？
    • スレッドコメントがネストされた形式で表示され、会話を追いやすくなっていますか？
    • ブロックエディタでコメントブロックをテストします。テーマと統合されていますか？スタイリングや機能に問題はありますか？

このハンドブックが推奨するようにブロックテーマを構築している場合、次の機能もテストする必要があります:

  • サイトエディタ: サイトエディタをテストし、ヘッダーやフッターなどのテンプレートやテンプレートパーツを編集できることを確認します。
  • スタイルインターフェース: テーマ全体に適用される色、タイポグラフィ、レイアウト設定をカスタマイズできるスタイルインターフェースの機能を確認します。
  • ナビゲーションブロック: ナビゲーションブロックに特に注意を払います。そのレスポンシブ性、メニュー項目の追加の容易さ、サブメニュー機能、整列オプションをテストします。
  • テンプレート編集: 特定の投稿やページのためのテンプレートを作成および修正するためのテンプレートエディタを探ります。

アクセシビリティテスト

アクセシビリティを確保することは、責任あるテーマ開発の重要な側面です。

テーマがWordPressアクセシビリティガイドラインを満たすよう努めるべきです。これには、キーボードナビゲーション、スクリーンリーダーの互換性、ARIAロールの適切な使用などの側面が含まれます。

aXeやWAVEのようなツールは、潜在的なアクセシビリティの問題を特定するのに非常に役立ちます。開発中に定期的に使用して、問題を見つけて修正してください。この積極的なアプローチは、すべてのユーザーがウェブをナビゲートする方法に関係なく、アクセス可能なテーマを作成するのに役立ちます。

パフォーマンステスト

テーマが不必要に多くのリソースを読み込んでいないことを確認する必要があります。そのためには、PageSpeed Insightsのようなツールを使用して、テーマのパフォーマンスをチェックできます。これらのツールは、テーマの読み込み速度に関する情報を提供し、改善のための提案を行います。

メディアやその他のアセットをテーマと一緒に出荷する際は、それらが最適化されていることを確認してください。これには、次のことが含まれますが、これに限定されません:

  • 画像/メディア: テーマにバンドルされているメディアアイテムが正しくサイズ設定され、最も適切な形式で圧縮されていることを確認し、読み込み時間を短縮します。
  • CSSおよびJavaScriptファイル: ブラウザによって読み込まれるミニファイドアセットを含めることを確認してください。