如何在 WordPress 中使用 wp_enqueue_scripts 挂钩将脚本排入队列 -光子波动网

WordPressでスクリプトとスタイルシートを効果的に管理する方法

WordPress ではwp_enqueue_script()歌で応えるwp_enqueue_style()これら2つの関数は、JavaScriptスクリプトとCSSスタイルシートをウェブサイトのフロントエンド読み込みキューに追加するのに役立ちます。この方法は「キューイング」と呼ばれます。

キューを使用する主な利点は2つあります：

ウェブサイトのパフォーマンス向上ローディングプロセスを最適化することで、キューイングはウェブページのローディング時間を短縮し、ウェブサイトをより速くスムーズに実行することができます。
コンフリクトの回避複数のプラグインやテーマが同じスクリプトやスタイルシートを読み込もうとするとき、キューイングはこれらのリソース間の競合を防ぎ、安定したサイトを保証します。

wp_enqueue_script について理解しましょう。

キューイング処理はwp_enqueue_scripts ワードプレスフックと、スタイルシートとスクリプト用の2つの関数を追加しました。

まずは。wp_enqueue_scriptsは、スタイルシートやJavaScriptファイルをWordPressサイトにスケジュールするためのアクションフックです。このフックは通常、WordPressテーマのfunctions.phpまたはプラグインファイルの

WordPressでスタイルシートを使う方法

functions.phpの編集ででコーディングする前に、ウェブサイトのバックアップを作成することをお勧めします。

WordPressのダッシュボードからこのファイルにアクセスするには外観 -> テーマファイルエディタ。の右サイドバーを見つけてください。functions.php ファイルを参照してください。

スタイルシートは主に2つの機能で扱われます：wp_register_style()歌で応えるwp_enqueue_style().

スタイルシート登録使用wp_register_style()関数を使用してスタイルシートを登録します。この関数は主に2つの引数を取ります：
- 1TP4ハンドルスタイルシートの一意な識別名で、WordPress内でスタイルシートを識別するために使用されます。
- $src: スタイルシートファイルのURLまたはパスです。WordPressのテーマやプラグインのディレクトリからの相対パスでも、他の場所でホストされているURLでもかまいません。登録関数ですでにパスを提供している場合は、このパラメータは省略できます。
スタイルシートの読み込みスタイルシートが登録されるとwp_enqueue_style()関数を使用して WordPress サイトにロードします。登録時にすでにパスを指定している場合は、キューイング時に再度パスを指定する必要はありません。

以下は両方の関数を含むコードです：

関数 register_plugin_styles() {
wp_register_style( 'plugin-development', plugins_url( '/css/plugin.css' ) )；
wp_enqueue_style( 'plugin-development' )；
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' )；

これは、wp_enqueue_style() を含める唯一の方法です。コードの

関数 register_plugin_styles() {
wp_enqueue_style( 'plugin-development', plugins_url( '/css/plugin.css' ) )；
}
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' )；

WordPressでJavaScriptスクリプトを管理する方法

WordPressは主に2つの機能でJavaScriptファイルを管理します：wp_register_script()歌で応えるwp_enqueue_script().

登録スクリプト::
- 使うwp_register_script()関数を使用してカスタム JavaScript ファイルを登録します。
- 1TP4ハンドルスクリプトの一意な識別名で、WordPressでの識別に使用されます。
- $srcスクリプトファイルのURLまたはパスです。登録時にすでにパスを指定した場合は、次回以降のロード時に再度指定する必要はありません。
スクリプトの読み込み::
- とおすwp_enqueue_script()関数を使用して、登録されたスクリプトをウェブサイトにロードします。登録時にすでにパスが指定されている場合は、ロード時にこのパラメータを省略することができます。
追加パラメータ::
- $deps現在のスクリプトが依存している他のスクリプトの配列をリストします。jQuery.
- $verスクリプトのバージョン番号を指定することで、複数のバージョンを追跡・管理しやすくなります。
- $in_フッタースクリプトをHTMLドキュメントのフッターセクションに読み込むかどうかを設定します。デフォルトでは、スクリプトは<head>部分的にロード。

スタイル・シートと同じように、スクリプトの詳細をすでに知っている場合はwp_enqueue_script()を使用すると、事前登録なしでスクリプトを読み込むことができます。

両方の機能を持つ例：

関数 register_plugin_script() {
wp_register_script( 'new-script', plugins_url( '/script.js' ) )；
wp_enqueue_script( 'new-script' )；
}
add_action( 'wp_enqueue_scripts', 'register_plugin_script' )；

の画像を見てみましょう。単一の wp_enqueue_script()機能の例：

関数 register_plugin_script() {
wp_enqueue_script( 'new-script', plugins_url( '/script.js' ) )；
add_action
( 'wp_enqueue_scripts', 'register_plugin_script' )；

WordPressのwp_enqueue_scriptの使い方

jQueryでwp_enqueue_scriptを使う方法

wp_enqueue_script()関数にはarray()パラメータで、必要なスクリプトの依存関係を指定することができます。

関数 my_custom_script() {
    wp_enqueue_script( 'registered-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true )；
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' )；

コードではwp_enqueue_scripts() 関数は my-script.js に名前を付けます。スクリプトをキューに入れます。

wp_enqueue_script を使ってフッターにスクリプトを読み込む方法

フッターにスクリプトをロードすることで、ウェブサイトの速度を向上させることができます。ブラウザがスクリプトを待つと、ページの読み込み時間が遅くなります。スクリプトをフッターセクションに移動すると、ブラウザは最初にコンテンツを表示してからスクリプトを読み込むことができます。詳しくは以下の例をご覧ください：

関数 plugin_assets() {
wp_enqueue_script( 'custom-script', plugins_url( '/js/my-script.js' , __FILE__ ), array( 'jquery' ), true )；
}
add_action( 'wp_enqueue_scripts', 'plugin_assets' )；

この例ではmy_custom_styles 関数は、my-styles.css を登録します。スタイルシートをカスタマイズしてキューに入れます。

はんけつをくだす

WordPress ではwp_enqueue_scriptsフックと関連する以下のような機能wp_enqueue_script()歌で応えるwp_enqueue_style()カスタム JavaScript スクリプトと CSS スタイルを簡単かつ効率的に追加するためのツールです。これらのツールは、コードの競合や二重読み込みの問題を回避しながら、スクリプトやスタイルがウェブサイトに正しく読み込まれるようにします。

お問い合わせ
記事が読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み