web-dev-qa-db-ja.com

WordPressのfunctions.phpにReactDOMのスクリプトタグをどのようにエンキューしますか？

私はこの質問に最も適した場所はどこかに引き裂かれましたが、Reactのcrossoriginの目的を調査したところ、MDNで答えが見つかりました。

クロスオリジン
通常のスクリプト要素は、標準のCORSチェックに合格しないスクリプトについては、window.onerrorに最小限の情報を渡します。静的メディアに別のドメインを使用しているサイトのエラーログ記録を許可するには、この属性を使用します。有効な引数についてのより詳しい説明は、CORS設定属性を参照してください。

- _ mdn _

そしてReactDOMを使ってみると、スクリプトタグが一番下にあります。

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>window.ReactDOM || document.write('<script crossorigin src="path/to/react-dom.development.js"><\/script>')</script>

WordPressでは、私は基本的なエンキューに精通しています。

function theme_js() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );

wordPressでは、フッターにスクリプトを添付しています。

function inline_script() {
    ?>
    <script type="text/javascript">
    // js code goes here
    </script>
    <?php
}
add_action( 'wp_footer', 'inline_script' );

[wordpress] crossoriginのパラメータを使用して、以前の質問でクエリを実行したときに、この質問が表示されませんでした。 WordPressテーマでReactDOMをコーディングするための適切な方法はありますか。

function react_dom() {
    ?>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script>window.ReactDOM || document.write('<script crossorigin src=" <?php get_template_directory_uri() ?>/react-dom.development.js"><\/script>')</script>
    <?php
}
add_action( 'wp_footer', 'react_dom' );

ReactDOMはどのようにwp_enqueue_scriptsにするべきですか、それともフッターに追加するべきですか？

参照のためにこれはチャットで言及されました： どのようにプラグインのjavascriptsにdefer =“ defer”タグを追加しますか？

theme-developmentwp-enqueue-script
3
DᴀʀᴛʜVᴀᴅᴇʀ

そのため、スクリプトのロード時にscript_loader_tagフィルタを使用してHTMLを置き換えることができると思います。これにより、スクリプト属性を追加しながら、wp_enqueue_scriptsフックを使用してスクリプトを通常どおりキューに入れる場所を制御できます。 。

エンキュー 

/**
 * Enqueue whatever script we may need
 *
 * @return void
 */
function wpse302526_enqueue_react() {

    wp_enqueue_script(
        'react',    // File handle/slug
        $file_url,      // URL to file
        array(),        // Dependencies
        false,          // Version
        true            // Add to Header ( false ) or Footer ( true )
    );

}
add_action( 'wp_enqueue_scripts', 'wpse302526_enqueue_react' );

具体的にはhandle/scriptスラッグによってスクリプトをターゲットにします。

検索/置換 

/**
 * Modify the enqueue script tag
 *
 * @param String $html      - Generated script HTML
 * @param String $handle    - Script slug/handle
 *
 * @return $html
 */
function wpse302526_modify_script_tags( $html, $handle ) {

    /** Add script attribute **/
    if( 'react' === $handle ) {

        /* Add `crossorigin` attribute */
        $html = str_replace(
            '<script',
            '<script crossorigin',
            $html
        );

        /* Initialize ReactDOM */
        $html = str_replace(
            '</script>',
            'window.ReactDOM</script>',
            $html
        );

    }

    return $html;

}
add_filter( 'script_loader_tag', 'wpse302526_modify_script_tags', 10, 2 );

これを実行する開発者を混乱させる可能性があるため、この部分をエンキューの外側で行わないでください。すべてのエンキューとスクリプトのURLを（2つのフィルタの間で引き裂かれるのではなく）1か所に保管するのが最善の方法です。避けられない場合は、気軽に追加してください。

document.write('<script crossorigin src=" <?php get_template_directory_uri() ?>/react-dom.development.js"><\/script>')

上記の行が絶対に必要な場合は、wp_footerアプローチを使用してすべてを1か所にまとめます。

2
Howdy_McGee