メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • WordPressの関数(wp_register_script, wp_enqueue_script)の使用と区別

WordPressの関数(wp_register_script, wp_enqueue_script)の使用と区別

video
wordpress
hook

やりたいこと:カスタムjsファイルをWordPressのページに挿入します

  • カスタムjsファイル(例:二つのテストjsファイル)をWordPressのページに挿入したいです
    • 二つのjsファイルに、単純的に alter でメッセージを出力します
    • 二つのjsファイルが依存関係があります(test_2.js が てtest_js.js を依存)
  • カスタムjsファイルを子テーマのフォルダに保存しています

関数(wp_register_script, wp_enqueue_script)でカスタムjsファイルをページに挿入します

  • この二つの関数を利用して、以下のような書き方ができます
  • wp_register_scriptでjsファイルを事前に登録し、wp_enqueue_scriptで呼び出してページに挿入します
    function add_js_file(){
    	// test_2.jsを登録+test_js.jsを依存
    	wp_register_script('script_2', 
    		get_stylesheet_directory_uri().'/js/test_2.js', array('script') );
    	// test_js.jsを登録
    	wp_register_script('script', 
    		get_stylesheet_directory_uri().'/js/test_js.js' );
    	// test_2.jsを呼び出し
    	wp_enqueue_script('script_2');
    }
    add_action('wp_enqueue_scripts', 'add_js_file');
  • wp_register_scriptなしでwp_enqueue_scriptのみでjsファイルを呼び出してページに挿入します
    function add_js_file(){
    	// test_js.jsを呼び出し
    	wp_enqueue_script('script_js', get_stylesheet_directory_uri().'/js/test_js.js');
    	// test_2.jsを呼び出し
    	wp_enqueue_script('script_2', get_stylesheet_directory_uri().'/js/test_2.js' );
    }
    add_action('wp_enqueue_scripts', 'add_js_file');

wp_enqueue_scriptのみの使用が簡単のように見えますがなぜwp_register_scriptが必要でしょうか。またいつ使用すべきでしょうか。

  • カスタムjsファイルをWordPressのページに挿入する機能から見ると、wp_regsiter_scriptに使用必要はありません
  • wp_enqueue_scriptのみで使用すればカスタムjsファイルの挿入ができますが、以下の点はwp_register_scriptを使用したほうが良いでしょう

wp_register_scriptの使用利点1:一か所ですべてのjsファイルを登録し、後で必要な場所にwp_enqueue_scriptで登録したjsファイルを呼び出して、ページに挿入します

  • プログラミングの観点から見ると、一か所ですべてのjsファイルを定義するには、コードが読みやすくなります
  • wp_register_scriptを利用して、一か所ですべてのjsファイルを登録することができます(この時点ではまだページに挿入しません)
  • 後で、必要な場所にwp_enqueueで登録したjsファイルを呼び出して、ページに挿入することができます
    • もちろん、wp_register_scriptで登録しなくても、jsファイルをページに挿入することができます

wp_register_scriptの使用利点2:依存関係のある複数のjsファイルが自動的に呼び出されることができます

  • 関数(wp_register_script)が複数のjsファイルの依存関係登録ができます(第3引数:配列で複数の依存jsファイル登録)
  • 依存関係登録しているjsファイルをwp_enqueue_scriptで呼び出すと、登録されている依存関連のjsファイルが自動的に呼び出されます
    依存関係のある複数のjsファイルがwp_enqueue_scriptに自動的に呼び出されます
Embedded thumbnail for WordPressの関数(wp_register_script, wp_enqueue_script)の使用と区別
ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)