スクリプトとスタイルのエンキュー

テーマにスクリプトとスタイルを追加する正しい方法は、functions.phpファイルでそれらをエンキューすることです。style.cssファイルはすべてのテーマで必要ですが、テーマの機能を拡張するために他のファイルを追加する必要がある場合があります。

ヒント: WordPressには、jQueryなどの一般的に使用されるライブラリを含む、ソフトウェアパッケージの一部として多くのJavaScriptファイルが含まれています。独自のJavaScriptを追加する前に、含まれているライブラリを利用できるか確認してください。

基本は次のとおりです:

  • 1. wp_enqueue_script()、wp_enqueue_style()、またはwp_enqueue_block_styleを使用してスクリプトまたはスタイルをエンキューします。

スタイルシート

あなたのCSSスタイルシートは、テーマのプレゼンテーションをカスタマイズするために使用されます。スタイルシートは、テーマに関する情報が保存されるファイルでもあります。この理由から、style.cssファイルはすべてのテーマで必須です。

スタイルシートをheader.phpファイルで読み込むのではなく、wp_enqueue_styleを使用して読み込むべきです。メインスタイルシートを読み込むには、functions.phpでエンキューできます。 

  3. ``````bash
  4. wp_enqueue_style( 'style', get_stylesheet_uri() );
  5. `

これにより、「style」という名前のスタイルシートが探され、読み込まれます。

スタイルをエンキューするための基本的な関数は: 

  1. wp_enqueue_style( $handle, $src, $deps, $ver, $media );

これらのパラメータを含めることができます:

  • $handleは単にスタイルシートの名前です。
  • $srcはその場所です。残りのパラメータはオプションです。
  • $depsは、このスタイルシートが他のスタイルシートに依存しているかどうかを指します。これが設定されている場合、このスタイルシートは依存しているスタイルシートが最初に読み込まれない限り、読み込まれません。
  • $verはバージョン番号を設定します。
  • $mediaは、このスタイルシートを読み込むメディアの種類を指定できます。たとえば、「all」、「screen」、「print」または「handheld」です。

したがって、テーマのルートディレクトリにある「CSS」というフォルダー内の「slider.css」という名前のスタイルシートを読み込みたい場合は、次のようにします: 

  1. wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', false, '1.1', 'all');

ブロックスタイル用のCSSの含め方

  2. ブロックテーマを作成する際の重要な部分はパフォーマンスです。`````wp_enqueue_block_style()`````を使用すると、テーマはページでブロックが使用されるときにのみ、選択されたブロックのCSSを読み込みます。  
  4. 追加のスタイルは、WordPressとGutenbergプラグインによって提供されたブロックスタイルの後に、エディターとフロントで読み込まれます。この方法を使用して、`````theme.json`````を介して追加できないブロックスタイルを追加できます。たとえば、メディアクエリです。  
  6. このコード例は、最新のコメントブロックの日付のサイズとテキストの色を変更します。これは、他のHTML要素の中にネストされた`````time````` HTML要素であるため、`````theme.json`````を使用してスタイルを設定することはできません。  
  8. まず、ブロックの名前で新しいCSSファイルを作成します: `````latest-comments.css`````。  
  10. ファイルを配置する場所は、テーマファイルの整理方法によって異なります。この例では、ファイルは`````assets/CSS/blocks`````フォルダー内に配置されています。  
  12. 時間要素のCSSクラスは`````wp-block-latest-comments__comment-date`````です。プレフィックスとブロック名の後に部分が続き、2つのアンダースコアで区切られます。  
  14. ブロックエディターの命名規則については、[コーディングガイドライン](e455dee4bdaf5027.md#naming)で詳しく読むことができます。  
  16. テキストの色とフォントサイズは、`````theme.json`````から生成されたCSSカスタムプロパティで追加されます:  
  19. ``````bash
  20. .wp-block-latest-comments__comment-date {
  21.     color: var(--wp--preset--color--primary);
  22.     font-size: var(--wp--preset--font-size--small);
  23. }
  24. `

次に、テーマのセットアップ関数内でブロックスタイルをエンキューします。

ブロック名は、複数のブロックスタイルを読み込むために配列内に配置されます。 

  2. `````wp_enqueue_block_style()`````は、ブロック名と引数を使用してファイルをエンキューします:  
  4. `````wp_enqueue_block_style( "prefix/blockname", $args );

コード例では、スタイルがコアブロック用であるため、プレフィックスは「core」です。プラグインからブロックのスタイルを設定する場合は、プレフィックスを調整する必要があります。 

  1. function myfirsttheme_setup() {
  2.     /*
  3.      * Load additional block styles.
  4.      */
  5.     $styled_blocks = ['latest-comments'];
  6.     foreach ( $styled_blocks as $block_name ) {
  7.         $args = array(
  8.             'handle' => "myfirsttheme-$block_name",
  9.             'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
  10.             $args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
  11.         );
  12.         wp_enqueue_block_style( "core/$block_name", $args );
  13.     }
  14. }
  15. add_action( 'after_setup_theme', 'myfirsttheme_setup' );

スクリプト

テーマに必要な追加のJavaScriptファイルは、wp_enqueue_scriptを使用して読み込む必要があります。これにより、適切な読み込みとキャッシングが保証され、特定のページをターゲットにするための条件付きタグの使用が可能になります。これらはオプションです。 

  2. スクリプトをエンキューします:  
  5. ``````bash
  6. wp_enqueue_script( $handle, $src, $deps, $ver, $args );
  7. `
  • $handleはスクリプトの名前です。
  • $srcはスクリプトの場所を定義します。
  • $depsは、新しいスクリプトが依存しているすべてのスクリプトを処理できる配列です。たとえば、jQueryなどです。
  • $verはバージョン番号をリストすることを許可します。
  • $argsは、フッター印刷（in_footerキーを介して）およびスクリプト読み込み戦略（strategyキーを介して）の引数の配列であり、deferまたはasyncのようなものです。これは、WordPressバージョン6.3以降、$in_footerパラメータを置き換え/オーバーロードします。

あなたのエンキュー関数は次のようになります: 

  1. wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true);

遅延スクリプト読み込み

WordPressは、wp_register_script()およびwp_enqueue_script()関数を介してスクリプトの読み込み戦略を指定するサポートを提供します。これは、WordPress 6.3で導入された新しい$args配列パラメータ内のstrategyキーによって行われます。

サポートされている戦略は次のとおりです:

  • defer
    • $argsパラメータに'strategy' => 'defer'の配列キー値ペアを指定することで追加されます。
    • 遅延実行のためにマークされたスクリプト（deferスクリプト属性を介して）は、DOMツリーが完全に読み込まれた後（ただし、DOMContentLoadedおよびウィンドウの読み込みイベントの前）にのみ実行されます。遅延スクリプトは、非同期スクリプトとは異なり、DOM内で印刷/追加された順序で実行されます。
  • async
    • $argsパラメータに'strategy' => 'async'の配列キー値ペアを指定することで追加されます。
    • 非同期実行のためにマークされたスクリプト（asyncスクリプト属性を介して）は、ブラウザによって読み込まれるとすぐに実行されます。非同期スクリプトは、実行順序が保証されていません。スクリプトB（スクリプトAの後にDOMに追加されても）は、スクリプトAよりも先に実行される可能性があります。このようなスクリプトは、DOMが完全に構築される前またはDOMContentLoadedイベントの後に実行される場合があります。

スクリプト登録中に読み込み戦略を指定する例は次のとおりです: 

  1. wp_register_script(
  2.    'foo',
  3.    '/path/to/foo.js',
  4.    array(),
  5.    '1.0.0',
  6.    array(
  7.    'strategy'  => 'defer',
  8.    )
  9. );
  2. 遅延スクリプト読み込み戦略を指定する際には、スクリプトの依存関係ツリー（その依存関係および/または依存先）を考慮して、「適格な戦略」を決定します。これにより、1つのスクリプトには有効だが、ツリー内の他のスクリプトには有害な戦略が適用されることを防ぎます。このような論理の結果、`````$args`````パラメータを介して渡す意図された読み込み戦略は、最終的な（選択された）戦略ではない場合がありますが、意図された戦略に対して有害であったり、厳格であったりすることは決してありません。  
  3.  <a name="the-comment-reply-script"></a>
  5. ### コメント返信スクリプト
  7. WordPressのコメントには、スレッドコメントや強化されたコメントフォームなど、すぐに使える機能がたくさんあります。コメントが正しく機能するためには、いくつかのJavaScriptが必要です。ただし、このJavaScript内で定義する必要がある特定のオプションがあるため、コメントを使用するすべてのクラシックテーマにコメント返信スクリプトを追加する必要があります。  
  9. **ブロックテーマでは、コメントブロックを配置するとスクリプトが含まれます。手動で追加する必要はありません。**  
  11. クラシックテーマでコメント返信を含める正しい方法は、条件付きタグを使用して特定の条件が存在するかどうかを確認し、スクリプトが不必要に読み込まれないようにすることです。たとえば、`````is_singular`````を使用して単一投稿ページでのみスクリプトを読み込むことができ、ユーザーによって「スレッドコメントを有効にする」が選択されていることを確認できます。したがって、次のような関数を設定できます:  
  14. ``````bash
  15. if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
  16.     wp_enqueue_script( 'comment-reply' );
  17. }
  18. `

ユーザーによってコメントが有効になっている場合、かつ投稿ページにいる場合、コメント返信スクリプトが読み込まれます。そうでない場合は、読み込まれません。

エンキュー関数の結合

すべてのエンキューされたスクリプトとスタイルを単一の関数に結合し、その後wp_enqueue_scriptsアクションを使用して呼び出すのが最良です。この関数とアクションは、初期設定の下に配置する必要があります（上記で実行されます）: 

  1. function add_theme_scripts() {
  2.     wp_enqueue_style( 'style', get_stylesheet_uri() );
  4.     wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all' );
  6.     wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );
  8.     if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
  9.         wp_enqueue_script( 'comment-reply' );
  10.     }
  11. }
  12. add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

WordPressによって含まれ、登録されたデフォルトスクリプト

デフォルトでは、WordPressはWeb開発者によく使用される多くの人気スクリプトと、WordPress自体で使用されるスクリプトを含んでいます。それらのいくつかは、このリファレンスページにリストされています:

wp_enqueue_script()

リストは完全ではありません。含まれているファイルの完全なリストはwp-includes/script-loader.phpで見つけることができます。

/

変更履歴:

  • 更新日 2023-02-24: wp_enqueue_block_style()に関する情報を追加しました。
  • 更新日 2024-06-06: 読者に新しいドキュメントを指摘するアラートを追加しました。