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 ...)で囲むと、その条件を満たす場合にのみロードされます。
メモ:
参照:
- wp_enqueue_script(developer。wordpress.org)
- wp enqueue script(Codex)
- Including JavaScript in Pluginsまたは Themes、the Right Way(正しい方法でプラグインやテーマにJavaScriptを埋め込む
- How to enqueue Scripts&Stylesheets to WordPress 人生 plugin (プラグイン経由 WordPressスクリプト/スタイルシートenquque(フック)させる方法)
- plugin dir url(コデックス)
- ADDING SCRIPTS AND STYLES TO WORDPRESS THE RIGHT WAY WITH ENQUEUEING(正しい方法でEnququeを使用して WordPressスクリプトとスタイルを追加する方法)
こんにちは。 ワード、
ブログに有益な文が多く、いつもたくさんの助けを得ています。
html、cssについてのみ知識があるので WordPress ページ作業中に詰まった部分がありますのでお問い合わせいたします。
以下のソースを特定のページにのみ適用したいと思います。
--------------------------------
function sayHello(){
alert("Hello World!")
}
クリックしてください!
--------------------------------
一度部分はページに適用しました。
部分はどのように扱うべきか教えてくれてありがとう。
こんにちは? コメントに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/
回答ありがとうございます!
以下のようにすればいいのでしょうか?
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' );
一度試してみて問題があれば教えてください。
こんにちは。 ワード
週末よく過ごしましたか?
ボタンをクリックするとHello World! というアラットの窓が浮かぶソースなのに。
grid.jsファイルが正しく呼び出されないようです。
一度見てみていただければ幸いです。
https://wordpress-958476-3655171.cloudwaysapps.com/grid/
正しく行うとうまくロードされます。 wpcodeプラグインをインストールし、フッター部分にjavascriptコードを追加してみますか? 태그도 추가해야 합니다. 그래도 안 된다면 버튼에 추가된 onclick() 이벤트 때문일 수 있습니다. 버튼도 Js로 생성하도록 코드를 바꾸어보세요. 아니면 버튼을 숏코드로 만들어서 추가하는 것도 가능합니다.
うん! わかりました。
もう一つお問い合わせいたします。
grid.jsファイルの場所はどこにあるべきですか?
現在はチャイルドテーマフォルダ内にあります。
本文の下部に表示されているコードを使用する場合...
チャイルドテーマ内のjsフォルダの下に追加する必要があります。 jsファイルに 태그가 없어야 합니다.
ありがとうございました!
今日もいい一日になってください〜!
良い文章ありがとうございます。
jsファイルを適用すると、functions.phpの最上部には適用されません。 Themeと干渉が起きて White Blank Page 問題が起きたんです。 もし、参考になるかコメントを残してみます。 ㅎ
こんにちは?
実行順序に係るものですね。
この場合、priorityを指定することが望ましいことと思われる。
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
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): 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には、他の記事で詳しく説明したので、そのまま真似する別の問題がないでしょう。
はいエラーページ消えていた! ありがとうございます