WordPressのスクリプトとスタイルを排除します-＆＃＆プレス-php.cn

WordPressのスクリプトとスタイルを排除します

キーテイクアウト

wp_deregister_style関数を使用してエラーまたは競合を引き起こしている不必要なスクリプトを削除することができます。これは、問題のトラブルシューティング時にデバッグモードで特に役立ちます。
スクリプトとスタイルを排除する

Webサイトの特定のページに挿入するためにCSSまたはJavaScriptコードが必要な場合、同じマークアップファイル内に追加するか、ファイルに直接URLを使用して追加する傾向があります。

ただし、これはスクリプトを追加するための推奨される方法ではなく、キャッシュプラグインは最適化して資産をキャッシュしてウェブサイトのパフォーマンスを向上させません。 admin_enqueue_scriptsフックを使用する必要があります

wp_enqueue_scriptメソッドの最初のパラメーターはスクリプトハンドラー名です。競合を回避し、スクリプトが常にロードされることを確認するために、常にハンドラーにプレフィックスする必要があります。

現在のソリューションは完璧ではなく、スクリプトはすべてのバックエンドページに含まれています。渡された$ hook変数をコールバック関数に使用して、特定のページをテストできます。

さて、スクリプトは設定と新しい投稿ページ内にのみ含まれます。ユーザーが新しいページを作成しているときにのみスタイルを含めるためにさらに進むことができます。

不必要なスクリプトを削除します

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

ログイン後にコピー

ほとんどの開発者は、必要に応じてスクリプトを排除することを気にしません。これが、予期せぬエラーと奇妙なスタイリングの問題を常に取得する理由です。スクリプトがエラーをスローしたり、競合を引き起こしていることに気づいた場合、独自の追加を追加する前に削除できます。これはデバッグモードでしばしば役立ちます。

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?= plugins_url('assets/js/main.js') ?>"></script>

ログイン後にコピー

ショートコードの操作

ほとんどのプラグインとテーマは、Webサイトと対話するための一連のショートコードを提供します。時には、スクリプトをページに挿入する必要があります。悲しいことに、以前にバックエンドで行ったように、フロントエンドページをテストすることはできません。これを達成するための簡単な方法は、The_Contentフィルターにコールバックを登録し、ショートコードが含まれているかどうかをテストすることです。「はい」を返す場合、スクリプトをenqueし、そうでない場合は何もしません。

上記のコードはうまく機能し、ショートコードを含む投稿のスクリプトのみを締めくくります。ただし、このソリューションには、高負荷Webサイトでいくつかの深刻なパフォーマンスの問題があります。この問題に対してより洗練されたソリューションを作成します

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

ログイン後にコピー

Composerをまだ使用していない場合は、クラスをロードすることをお勧めします。プラグインComposer.jsonファイルは、次のようになります

SRC/ショートコード/helloshortcode.phpクラスは、ショートコードの定義を保持しています

実行方法は、ショートコードのHTMLマークアップを返し、ショートコードを使用するとロードされた静的属性をtrueに設定します。

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

ログイン後にコピー

enqueuescriptsメソッドは、プラグインがロードされたときにスタイルを排除します。残りの部分は、投稿コンテンツ内で認識されるショートコードを登録します。

確かに、このコードをメインプラグインファイルに配置することは避けられますが、物事をシンプルで読みやすくします。

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

ログイン後にコピー

$ショートコード変数には、利用可能なショートコードのリストが表示されます。最初のループはショートコードを登録し、実行方法をハンドラーにします。次に、wp_footerフックを使用して、ボディタグを閉じる前にショートコードスクリプトをエンキューします。

ショートコードを含む新しいページを作成し、スクリプトが適切にロードされているかどうかを確認できます。

結論

この短い記事は、プラグインとテーマのスクリプトを排除する方法に関する要約であり、Webサイトのすべてのページ内にロードすることを避けるための最良の方法でした。質問やコメントがある場合は、以下に投稿してください。私はそれらに答えるために最善を尽くします！

add_action( 'admin_enqueue_scripts', function($hook) {
    $unautorized_styles = [
        'script1',
        'another-script'
    ];

    foreach ( $unautorized_styles as $handle )
    {
        wp_deregister_style( $handle );
    }

    // enqueue my scripts
} );

ログイン後にコピー

WordPressのスクリプトとスタイルを排除することについて、よくある質問（FAQ）

WordPressでスクリプトとスタイルを排除する目的は何ですか？テーマやプラグインが使用している可能性のあるさまざまなスクリプトとスタイル間の競合を防ぐのに役立ちます。 Enqueingで、WordPressに、スクリプト/スタイルをいつロードするか、どこにロードするか、それが依存する他のスクリプト/スタイルを伝えています。

WordPressでスクリプトをenceueするにはどうすればよいですか？

WordPressでスクリプトをenceueするには、wp_enqueue_script（）関数を使用する必要があります。この関数には、ハンドル（スクリプトの一意の名前）とSRC（スクリプトのURL）の少なくとも2つのパラメーターが必要です。依存関係、バージョン、およびフッターにスクリプトをロードするかどうかなどの追加のパラメーターを指定することもできます。 WordPressでスクリプトを登録するには、重要な違いがあります。 wp_register_script（）は、スクリプトを登録するだけで、それをenceしません。これは、後でwp_enqueue_script（）でenquedされない限り、スクリプトが印刷されないことを意味します。一方、wp_enqueue_script（）はスクリプトを登録してenquesします。つまり、htmlに印刷されます。 wp_enqueue_style（）関数を使用します。この関数はwp_enqueue_script（）と同様に機能しますが、スクリプトの代わりにスタイルシートに使用されます。あなたのスクリプトとスタイル。このフックは、WordPressがHTMLでスクリプトとスタイルを印刷しようとしているときに呼び出されます。それに引っ掛けることにより、スクリプトとスタイルが適切なタイミングでエンキューされることを確認します。

スクリプトやスタイルをenqueするときに依存関係を指定することが重要なのはなぜですか？またはスタイルは正しい順序でロードされます。スクリプトが別のスクリプト（jQueryなど）に依存している場合、WordPressはスクリプトの前にjQueryがロードされていることを確認します。 wp_dequeue_script（）またはwp_dequeue_style（）関数を使用したWordPressのスクリプトまたはスタイル。これは、スクリプトやスタイルがロードされないようにしたい場合に便利です。

管理領域にスクリプトとスタイルを編成できますか？「admin_enqueue_scripts」アクションフックを使用したエリア。これは「wp_enqueue_scripts」フックと同様に機能しますが、フロントエンドの代わりに管理エリアに使用されます。フックは、スクリプトをenqueueするために使用された古いフックです。ただし、このフックを使用することは、スクリプトの読み込み順序の問題につながる可能性があるため、もう使用することはお勧めしません。代わりに「wp_enqueue_scripts」フックを使用する必要があります。