WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPressでJavaScriptを(js)ファイルやスタイルシートファイル(css)をロードするには、wp_enqueue_script()関数を使用します。 この記事では、さまざまな状況でjs / cssファイルを WordPressにロードする方法について説明します。

WordPressでjsスクリプトファイルとスタイルシートを正しくロードする

wp_enqueue_script

wp_enqueue_script ( string $handle, string|bool $src = false, array $deps = array(), string|bool $ver = false, bool $in_footer = false )

パラメータ:

  • $ handle
    (string)(必須)スクリプトの名前
  • $ src
    (string | bool)(オプション) WordPress ルートディレクトリからスクリプトへのパス。 例:「/js/myscript.js '。
    デフォルト:false
  • $ deps
    (array)(オプション)このスクリプトが依存している登録されたハンドルのarray。
    デフォルト:array()
  • $ ver
    (string | bool)(オプション)スクリプトのバージョン番号。 このパラメータは、キャッシュに関係なく、正しいバージョンがクライアントに配信されるようにするために使用されます。
    デフォルト:false
  • $ in_footer
    (bool)(オプション)スクリプトが</ head>の前に位置するか、</ body>の前に位置するかを指定します。 デフォルトでは、「false」です。 「false」または「true」を使用可能。
    デフォルト:false

例:

次のようなコードを関数ファイルに追加するようにします。

function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );

上記のget_stylesheet_directory_uri()は、子テーマがある場合、子テーマのパスを指します。 もし親テーマのパスを指定するにはget_template_directory_uri()を使用するようにします。 したがって、上記のアクション関数は、テーマのフォルダの下にjs / custom_script.jsファイルをフック(enqueue)になります。

wp register script

wp register scriptは WordPress 内のスクリプトファイルを登録したがwp_enqueue_script()関数を使用してページに接続するために使用され、スクリプト依存(Dependency)を安全に処理します。

使用法:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

例:

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' ); // 테마 폴더 내 js 폴더 아래의 my-script.js 파일을 등록
// jQuery(WordPress에 의해 자동으로 등록)와 my-script(바로 위에서 등록됨)를 Dependency로 가지는 스크립트를 로드(Enquque)시킴
wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
}

プラグインでロードする場合には、

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

上記のようにスクリプトを登録した後

wp_enqueue_script('test');

上記のような方法でスクリプトをincludeします。 plugin_dir_url(__FILE__)は、プラグイン_FILE_のパスを表します。 したがって、上記の場合は、そのプラグインのフォルダの下のtest.jsファイルをロードします。

function myplugin_scripts() {
wp_register_style( 'foo-styles',  plugin_dir_url( __FILE__ ) . 'assets/foo-styles.css' );
wp_enqueue_style( 'foo-styles' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_scripts' );

プラグインフォルダの下のCSSをロードする場合、上記のような形で利用することができます。 次のようなコードで ユーザーCSSをロードすることができます。

function custom_style_sheet() {
wp_enqueue_style( 'custom-styling', get_stylesheet_directory_uri() . '/mycustom.css' );
}
add_action('wp_enqueue_scripts', 'custom_style_sheet');

特定のページにスクリプトをロードする

特定のページや特定の条件を指定して、スクリプトをロード(フック)することができます。

function enqueue_and_register_my_scripts(){

wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js' );

// Enqueues a script only to be used on a specific page of the site
// 사이트의 특정 페이지에만 사용하도록 스크립트를 enquque(후크)시킴
if ( is_page( 'careers' ) ){

wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );
}
}

上記のようにwp_enqueue_script()の部分を条件(if ...)で囲むと、その条件を満たしている場合にのみ読み込まれます。

メモ:

参照:



7のコメント

  1. 良い文章ありがとうございます。
    jsファイルの適用時に、functions.php最上段に適用しないので、いくつかのThemeと干渉が起きWhite Blank Page問題が起きたんですよ。 こぶ、参考になるかしてコメントを残すします。 ふ

    応答
    • こんにちは?

      実行順序に係るものですね。
      この場合、priorityを指定することが望ましいことと思われる。

      add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

      応答
  2. https://www.thewordcracker.com/intermediate/how-to-add-a-jquery-datepicker-in-wordpress/
    ここに乗って入ってきました。 例示のように、私もkboardに日ピッカーを追加しようとするこれまでの例のファイルありますか?

    wpdocs_scripts_method、wp register scriptソースをどのファイルに追加しますか?
    ありがとう!

    応答
    • こんにちは?

      上記の例を状況に合わせて適切に変更します:
      テーマの関数ファイル(functions.php)に追加してください。

      応答
      • twentysixteen_datepicker> template-parts> functions.php

        // wp_enqueue_scripts
        function wpdocs_scripts_method(){
        wp_enqueue_script( 'datepicker-script'、get_stylesheet_directory_uri() '/js/datepicker.js'、array( 'jquery'));
        }
        add_action(「wp_enqueue_scripts '、' wpdocs_scripts_method ');
        // END

        // wp register script
        add_action(「wp_enqueue_scripts '、' enqueue_and_register_my_scripts ');

        function enqueue_and_register_my_scripts(){
        //プラグインでロードする場合
        wp_register_script( 'test'、plugin_dir_url(__ FILE__)」datepicker.js '、array(' jquery ')、「1.0'、true);
        // jQuery(WordPressによって自動的に登録)とmy-script(すぐ上登録さ)をDependencyに持つスクリプトをロード(Enquque)させる
        wp_enqueue_script( "test");

        // END

        twentysixteen_datepicker> template-parts> header.php

        twentysixteen_datepicker> js> datepicker.js

        $(function(){
        $( "#datepicker1」).datepicker({
        dateFormat:「yy-mm-dd '
        });
        });

        default_deadline> editor.php

        Date of Birth(DOB):<input type = "text" id = "kboard-input-option-deadline" name = "kboard_option_deadline" value = "option-> deadline?>">

        default_deadline> document.php

        option-> deadline?>

        このように追加してみまし、誤った部分でしょうか?
        Parse error:syntax error、unexpected end of file in /host/home/super/html/wp-content/themes/twentysixteen_datepicker/functions.php on line 425

        このようにページが浮かんで最初からfunctions.phpでアンイルヒネヨ。どこの設定を誤ったのか。
        425行は参考に最終行です
        kboard timepickerページのソース一度受けることができますか?

      • こんにちは?

        関数ファイルでは、上記のコードをすべて削除して、次のコードが、追加してください。

        function wpdocs_scripts_method() {
        wp_register_script('datepicker-scripts', get_stylesheet_directory_uri() . 'js/datepicker.js', array('jquery'), '1.0', true);
        wp_enqueue_script('datepicker-scripts');

        }
        add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );

        date pickerには、他の記事で詳しく説明したので、そのまま真似する別の問題がないでしょう。