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

16のコメント

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) (オプション)スクリプト前に位置するか、 前に配置するかどうかを指定します。 デフォルトは「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');

上記と同じ方法でスクリプトをインクルードします。 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 ...）で囲むと、その条件を満たす場合にのみロードされます。

メモ：

参照：

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

16のコメント

  1. こんにちは。 ワード、
    ブログに有益な文が多く、いつもたくさんの助けを得ています。

    html、cssについてのみ知識があるので WordPress ページ作業中に詰まった部分がありますのでお問い合わせいたします。

    以下のソースを特定のページにのみ適用したいと思います。
    --------------------------------

    function sayHello(){
    alert("Hello World!")
    }

    クリックしてください！

    --------------------------------
    一度部分はページに適用しました。
    部分はどのように扱うべきか教えてくれてありがとう。

    応答

    1. こんにちは？ コメントにHTMLタグを入力すると、HTMLタグは削除され登録されます。

      スクリプトを特定のページにのみ適用したいと思います。
      正しい方法については、次の記事を参照してください。

      https://iwordpower.com/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-js-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%ED%8A%B9%EC%A0%95-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89/

      応答

    2. 回答ありがとうございます！
      以下のようにすればいいのでしょうか？

      1. ページ生成時に grid というタイトルで生成
      2.チャイルドテーマフォルダ内のgrid.jsファイルの作成
      3. functions.phpファイルに以下のコードを追加する

      function my_scripts() {
      if( is_page( array( 'grid' ) ) ) ){
      wp_enqueue_script( 'script-name', 'grid.js', array(), '1.0.0', true );
      }
      }
      add_action( 'wp_enqueue_scripts', 'my_scripts' );

      応答

      3. 正しく行うとうまくロードされます。 wpcodeプラグインをインストールし、フッター部分にjavascriptコードを追加してみますか？ 태그도 추가해야 합니다. 그래도 안 된다면 버튼에 추가된 onclick() 이벤트 때문일 수 있습니다. 버튼도 Js로 생성하도록 코드를 바꾸어보세요. 아니면 버튼을 숏코드로 만들어서 추가하는 것도 가능합니다.

      4. うん！ わかりました。
        もう一つお問い合わせいたします。
        grid.jsファイルの場所はどこにあるべきですか？
        現在はチャイルドテーマフォルダ内にあります。

      5. 本文の下部に表示されているコードを使用する場合...

        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' ) );
        }
        }

        チャイルドテーマ内のjsフォルダの下に追加する必要があります。 jsファイルに 태그가 없어야 합니다.

      6. ありがとうございました！
        今日もいい一日になってください〜！

  2. 良い文章ありがとうございます。
    jsファイルを適用すると、functions.phpの最上部には適用されません。 Themeと干渉が起きて White Blank Page 問題が起きたんです。 もし、参考になるかコメントを残してみます。 ㅎ

    応答

    1. こんにちは？

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

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

      応答

      1. 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): 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ページのソース一度受けることができますか？

      2. こんにちは？

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

        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には、他の記事で詳しく説明したので、そのまま真似する別の問題がないでしょう。

コメントを残す

*電子メール情報は公開されません。