Gutenbergブロックを開発するとき、アセットをenqueeする正しい方法には次のものが含まれます。1。register_block_typeを使用して、editor_script、editor_style、およびstyleのパスを指定します。 2。functions.phpまたはプラグインでwp_register_scriptとwp_register_styleを介してリソースを登録し、正しい依存関係とバージョンを設(shè)定します。 3.適切なモジュール形式を出力するようにビルドツールを構(gòu)成し、パスが一貫していることを確認(rèn)します。 4. add_theme_supportまたはenqueue_block_assetsを介してフロントエンドスタイルの読み込みロジックを制御して、スタイルが有効になり、競合を回避します。

Gutenbergブロックを開発する場(chǎng)合、アセット（JavaScriptやCSSファイルなど）が正しくエンキューすることは、ブロックが適切に機(jī)能することを保証するための重要なステップです。これは、バックエンドエディターにファイルをロードするだけでなく、フロントエンドのディスプレイと依存関係の管理の問題を検討することでもあります。

1. register_block_typeを使用して、アセットパスを正しく指定します

WordPressは、ブロックタイプを登録するためにregister_block_type関數(shù)を提供し、パラメーターを介して対応するJSおよびCSSファイルパスを指定できます。

 Register_block_type（__dir__、array（
    'editor_script' => 'my-block-editor-script'、
    'editor_style' => 'my-block-editor-styles'、
    'style' => 'my-block-frontend-styles'、
））;

• editor_script ：ブロックエディターのスクリプトに使用されます（通常は.jsまたは.jsxファイルをコンパイルします）
• editor_style ：エディターにロードされたスタイルのみが前景に影響しません
• style ：フロントとバックエンドにロードされるスタイル、通常はブロックの基本的な外観に使用されます

functions.phpまたはプラグインにスクリプトとスタイルシートを登録します

これらのリソースを最初にwp_register_scriptおよびwp_register_styleで登録する必要があります。これにより、WordPressがregister_block_typeで言及したハンドルを認(rèn)識(shí)できるようにします。

関數(shù)my_block_assets（）{
    wp_register_script（
        「My-Block-Editor-Script」、
        get_template_directory_uri（）。 '/blocks/my-block/build/index.js'、
        array（ 'wp-blocks'、 'wp-element'、 'wp-editor'）、
        filemtime（get_template_directory（）。 '/blocks/my-block/build/index.js'）
    ）;

    wp_register_style（
        「My-Block-Editor-Styles」、
        get_template_directory_uri（）。 '/blocks/my-block/editor.css'、
        配列（）、
        filemtime（get_template_directory（）。 '/blocks/my-block/editor.css'）
    ）;

    wp_register_style（
        「My-Block-Frontend-Styles」、
        get_template_directory_uri（）。 '/blocks/my-block/style.css'、
        配列（）、
        filemtime（get_template_directory（）。 '/blocks/my-block/style.css'）
    ）;
}
add_action（ 'init'、 'my_block_assets'）;

いくつかの重要なポイントに注意してください：

• wp-blocks 、 wp-element 、 wp-editorなど、スクリプト依存関係を完全に記述する必要があります
• filemtime()を使用して、古いバージョンのファイルをキャッシュすることからブラウザを避ける
• テーマディレクトリ構(gòu)造を使用している場(chǎng)合は、 get_template_directory使用することをお?jiǎng)幛幛筏蓼?。プラグインの?chǎng)合は、 plugins_url()を使用して__FILE__と協(xié)力します

3。ツール構(gòu)成の構(gòu)築に関する注意事項(xiàng)

Webpack、Vite、またはその他のビルドツールを使用してブロックコードをパッケージ化する場(chǎng)合は、次のポイントに注意する必要があります。

• 出力JSファイルはUMDモジュールであるか、WordPress環(huán)境に適した形式で正しくパッケージ化する必要があります。
• ReactやReactdomを個(gè)別にパッケージ化しないでください。WordPress（ window.React 、 window.ReactDOMなど）が提供するグローバル変數(shù)參照を使用します。
• 出力パスがPHPに登録されているパスと一致していることを確認(rèn)してください

一般的な慣行：

• 編集者スクリプトを/src/blocks/your-block/index.jsに置きます
• webpackを使用して/build/your-block/index.jsにコンパイルします
• 同時(shí)に、依存関係とバージョン番號(hào)を自動(dòng)的に取得するために.asset.phpファイルを生成します（WordPressデフォルトサポート）

4。フロントエンドスタイルを読み込むためのヒント

デフォルトでは、Gutenbergブロックのstyleパラメーターは、スタイルを前景に自動(dòng)的にロードします。しかし、時(shí)々、スタイルが効果的ではないことがわかります。理由は次のとおりです。

• テーマはブロックスタイルのサポートを正しく有効にしません（ add_theme_support( 'wp-block-styles' )と呼ばれるかどうかを確認(rèn)）
• スタイルは他のテーマスタイルでカバーされています。名前空間クラス名を追加することをお?jiǎng)幛幛筏蓼?/li>
• いくつかのブロックは、フロントエンド（いくつかの動(dòng)的ブロックなど）にレンダリングされません?，F(xiàn)時(shí)點(diǎn)では、 enqueue_block_assetsフックを使用してオンデマンドで読み込むことを検討できます。

関數(shù)my_enqueue_frontend_assets（）{
    if（has_block（ 'my/block-name'））{
        wp_enqueue_style（ 'my-block-frontend-styles'）;
    }
}
add_action（ 'wp_enqueue_scripts'、 'my_enqueue_frontend_assets'）;

この方法はより柔軟ですが、ブロックが実際にページに存在するかどうかを判斷する必要もあります。

基本的にそれだけです。 WordPressのブロック登録仕様をフォローし、建設(shè)およびパスの問題に注意を払う限り、ブロックに資産を正常にロードできます。

以上がGutenbergブロックの資産を排除する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。