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

キーテイクアウト

WordPressのスクリプトとスタイルを排除することは、パフォーマンスを維持し、異なるスクリプトとスタイル間の競合を防ぐために不可欠です。スクリプトを追加する推奨される方法は、admin_enqueue_scriptsフックを使用して、競合を回避し、スクリプトが常にロードされていることを確認するためにハンドラーのプレフィックスを使用することです。
• wp_deregister_style関数を使用してエラーまたは競合を引き起こしている不必要なスクリプトを削除することができます。これは、問題のトラブルシューティング時にデバッグモードで特に役立ちます。
ショートコードを使用するには、多くの場合、スクリプトをページに注入する必要があります。これは、The_Contentフィルターにコールバックを登録し、ショートコードが含まれている場合にテストすることで実現できます。ただし、このソリューションには、高負荷Webサイトでパフォーマンスの問題が発生する可能性があります。より洗練されたソリューションでは、Composerを使用してクラスをロードし、投稿コンテンツ内のショートコードを登録します。
WordPressプラグインとテーマをしばらく開発した後、テーマのパフォーマンスと顧客にとってどのような問題が生じるかについてますます考え始めます。これらの問題の1つは、スクリプトとスタイルを排除することです。この記事では、さまざまなユースケースのスクリプトとベストプラクティスの基本について説明します。 WordPressアセットの管理に関する初心者の概要については、この記事を確認できます。
• スクリプトとスタイルを排除する

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="<?=%20plugins_url('assets/js/main.js')%20?>"></script>

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

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

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

<script type="text/javascript" src="<?=%20plugins_url('assets/js/main.js')%20?>"></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」フックを使用する必要があります。

スクリプトやスタイルを条件付きでenceueできますか？たとえば、IS_Page（）関数を使用して、特定のページが表示されている場合にのみスクリプトまたはスタイルをenceueすることができます。これは、不必要なスクリプトやスタイルがロードされないようにするため、パフォーマンスに役立ちます。

以上がWordPressのスクリプトとスタイルを排除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。