WordPress が JS ファイルと CSS ファイルを正しくロードする方法

WordPress テーマの Monkey Wordpress プラグインを作成する過程で、多くの場合、スタイル ファイルまたは JS スクリプト ファイルを追加する必要があります。ほとんどのユーザーは Web サイトで複数のプラグインを実行するため、さまざまなファイルが読み込まれる可能性があり、競合が発生しやすくなります。したがって、WordPress システムは、プラグイン間のスクリプトの競合を防ぐのに役立つ、スクリプトとスタイル ファイル用の優れたキュー システムを開発者に提供します。この記事では、WordPress に Javascript ファイルと CSS ファイルを追加する方法を中心に紹介します。特に、WordPress テーマやプラグイン開発を学び始めたばかりの方に役立ちます。

間違った方法

Wordpress は、一般的なキーワードや説明などの指定されたヘッダー メッセージをページの先頭に追加するのに役立つ wp_head フックを提供しており、多くの人がこの方法を使用してサイト ファイルと外部スタイルを追加します。スクリプト ファイルに次のコードを追加します。

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

この方法は簡単に使用できますが、WordPress スクリプトとの競合が発生しやすいため、お勧めできません。

Wordpress スクリプト キュー システム

1. はじめに

Wordpress には世界中で強力な開発コミュニティがあり、WordPress テーマとプラグインの開発に積極的に参加しており、それらは無料で使用できます。さまざまな開発者が開発したプラグインの使用中に常にスクリプトの競合が発生するのを防ぐため、WordPress には非常に強力なスクリプト読み込み関数 wp_enqueue_script が用意されており、この関数を通じて、スクリプトをロードする場所とスクリプトが依存するフレームワークを WordPress に伝えることができます。 、この関数は組み込みの Javascript ライブラリを使用するため、同じスクリプトを複数回ロードすることを避けることができます。これにより、ページの読み込み時間が短縮され、他のテーマやプラグインとの競合が回避されます。

2. 使用例

WordPress の正しい読み込みスクリプトの使用は非常に簡単で、コードは次のとおりです:

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

上記のコードをプラグイン ファイルまたはテーマの function.php ファイルに挿入できます。

説明:

この例では、最初に関数 wp_register_script() を渡します。これは 5 つのパラメーターを受け取ります:

$handle
(string) (必须) 脚本名称. 名称必须唯一在之后函数 wp_enqueue_script() 会使用到该名称.
Default: None
$src
(string) (必须) 脚本路径，可以使用绝对路径。
Default: None
$deps
(array) (可选) 脚本依赖包，依赖包会在脚本加载之前预先加载。
Default: array()
$ver
(string) (可选)脚本版本控制。
Default: false
$in_footer
(boolean) (可选) 定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。
Default: false

wp_register_script() 関数を使用してスクリプト ファイルを登録する場合、関数 wp_enqueue_script() を使用して次のことを行うことができます。登録スクリプトファイルをロードします。

なぜスクリプトファイルを直接ロードしないのかと疑問に思うかもしれませんが、最初にスクリプトファイルを登録してからロードする必要はありません。実際、これは主に、サイト上の他の開発者が他のプラグインやテーマのコア スクリプト ファイルを簡単に参照できるようにするためのものです。

WordPress が CSS スタイル ファイルを読み込む方法

Wordpress CSS スタイル ファイルの読み込みは、上記で紹介したスクリプト ファイルの読み込み方法と同じです。

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

上記の例では、wp_register_script フックを使用して、スタイルファイル。

この例では、スタイル ファイルのパスを取得するために plugins_url() を使用します。これは通常、テーマを開発して wp_register_script() 関数を使用する場合に使用します。 ) パスが子テーマで使用されている場合、関数 get_stylesheet_directory_uri() を使用してパスを取得できます。 例は次のとおりです。

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

上記の分析を通じて、 WordPress への Javascript ファイルと CSS ファイルの追加についての新たな理解。