web-dev-qa-db-ja.com

カスタムテーマでスクリプトとスタイルをロードするためにwp_enqueue_scriptsを呼び出すことの違い

私はWordPressが初めてです。私は自分自身のカスタムテーマを作り始めました。作成しているときに、add_action('wp_enqueue_script', 'custom_script');を使用してスタイルを追加できることがわかりました。

スタイルやスクリプトをロードするためのwp_enqueue_styleとwp_enqueue_scriptの使い方の違いを誰かに説明できますか？

theme-developmentwp-enqueue-scriptwp-enqueue-style
3
Shyamali

wp_enqueue_scriptsアクションフック：

WordPressは、WordPressコアの実行ライフサイクル内に コールバック関数 ）を挿入するために使用できるさまざまな名前（またはプレースホルダー）を提供します。これらは action および filterhooks ）と呼ばれます。

wp_enqueue_scripts はWordPressのアクションフックです。

注：wp_enqueue_scriptではなく、複数形：wp_enqueue_scripts。

このフックを使って、WPコア実行の正しい時間にスクリプトやスタイルを追加します。これはスタイルやスクリプト自体を追加するのではなく、WordPressが適切なタイミングでそれを実行できるように、単にカスタムコールバック関数を挿入します。そのため、コードは次のようになります。

function custom_script_style_adding_function() {
    // CODE for adding styles / scripts
}
add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );

スクリプトとスタイルをキューに入れるための関数

通常、HTMLの<head>タグにスクリプトとスタイルの両方を追加するので、いつ追加するかを定義するのに WordPressにアクションフックを指定する必要はありません。 、 実際にそれらをHTML CODEに追加するためにはWordPressは別々の関数を必要とします。スクリプトの場合、関数は wp_enqueue_script() で、スタイルの場合、関数は wp_enqueue_style() （これらの関数名で 単数形 の使用に注意してください）です。

そのため、これらの関数を使ってスクリプトやスタイルを追加すると、最終的なCODEは次のようになります。

function custom_script_style_adding_function() {
    wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' );
    wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'custom_script_style_adding_function' );

スクリプトとスタイルを別々の関数にエンキューします。

任意のフックを使用して複数のコールバック関数を添付することができます。そのため、以下のように、wp_enqueue_scriptsアクションフックを使用して、スクリプトやスタイルを追加するためのさまざまなカスタム関数を添付することもできます。

// this function only adds scripts
function custom_script_adding_function() {
    wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/script.js' );
}
add_action( 'wp_enqueue_scripts', 'custom_script_adding_function' );

// this function only adds styles
function custom_style_adding_function() {
    wp_enqueue_style( 'my-css', get_stylesheet_directory_uri() . '/style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'custom_style_adding_function' );

これは基本的に同じことですが、唯一の違いは、ここではスクリプトとスタイルを追加するために個別のカスタム関数を使用していることです。それで、スタイルとスクリプトのためのCODEの分離以外に、このアプローチと上記の他のアプローチの間に大きな違いはありません。

参考文献：

WordPressには他のスクリプトやスタイル関連の機能があり、さまざまなシナリオに役立ちます。例えば、WordPressのスクリプトやスタイルの他の同様の機能について知るためには、 codex の関連機能）をチェックしてください。この 開発者ドキュメント にも役に立つ情報があります。

4
Fayaz