wp_enqueue_script 関数は、JavaScript ファイルを WordPress サイトに読み込むための最適なソリューションです。 JavaScript または JavaScript ライブラリを使用するテーマを開発している場合は、wp_enqueue_script 関数を使用できます。これまで実際に使用したことがない場合は混乱する可能性があります...そこで、今日はキュー関数を使用してスクリプトをテーマまたはプラグインに適切に読み込む方法を詳しく説明します。
このチュートリアルで使用されているアプリケーションまたはテクニックの一部の側面は、最初の出版物から変更されています。これにより、その後の手順が少し難しくなる場合があります。同じトピックに関する最新のチュートリアルを確認することをお勧めします:
基本的な HTML の知識がある場合は、JavaScript ファイル (jQuery からプラグイン スクリプトまでを含む) をドキュメントのヘッダーまたはフッターに直接読み込むことに慣れているでしょう。基本的な HTML ページのようなスタンドアロン環境にいる場合はこれで問題ありません...しかし、WordPress インストール上で実行される可能性のある他の無数のスクリプトを導入すると、私が「群集管理」と呼ぶものを実行するのが難しくなります。スクリプトを使用してください。
それでは、ヘッダーまたはフッターに JavaScript をロードしてみてはいかがでしょうか?答えは非常に簡単です。このように JavaScript を組み込むと、インストール中に JavaScript と競合するリスクが生じます (複数のプラグインが同じスクリプトまたはそのスクリプトの異なるバージョンをロードしようとしていると考えてください)。さらに、JavaScript は、必要ない場合でも、すべての ページに読み込まれます。これにより、ページの読み込みに不必要に時間がかかり、プラグインやダッシュボード内などの他の JavaScript に干渉する可能性があります...これは WP 開発では禁止されています。
wp_enqueue_script 関数を使用します。 JavaScript をいつどのようにロードするかをより詳細に制御できるようになります。ヘッダーとフッターのどちらに読み込むかを決定することもできます。
wp_enqueue_script 関数は、WordPress サイトにスクリプトを読み込むために使用されます。通常、これを functions.php ファイルで使用します。
wp_enqueue_script 関数自体は非常に単純なので、その構造を見てみましょう。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$ハンドル
には、content_url、bloginfo("template_url")、または get_template_directory_uri() (WordPress 関数リファレンスの推奨事項) を使用するのが最善です。 plugins_url。
リーリー
$デプス
$ver
$フッター内
ご覧のとおり、$handle を除くすべてのパラメータはオプションです。これは一見すると奇妙に思えるかもしれません。特に $scr パラメータ。 WordPress は URL のないスクリプトをどのように見つけますか?
这背后的原因是 WordPress 附带了内置脚本。例如，jQuery 是 WordPress 核心的一部分，WordPress 开发团队使加载这些内置脚本变得非常简单。您所要做的就是将脚本的句柄传递给 wp_enqueue_script。
<?php wp_enqueue_script('jquery'); ?>
有关内置 WordPress 脚本及其句柄的完整列表。请查看 WordPress 函数参考。
现在您已经了解了 wp_enqueue_script 的各个部分。让我们看看您如何在 WordPress 主题中实际使用它。
在开始正确排列脚本之前，您还需要了解其他 WordPress 函数。
wp_register_script
wp_register_script 函数用于向 WordPress 注册您的脚本。这意味着，您将能够为您的脚本使用 wp_enqueue_script ，就像 WordPress 附带的内置脚本一样wp_register_script 的参数结构与 wp_enqueue_script 结构完全相同，所以我不再赘述。如果需要，您可以参考上面的部分。wp_register_script，就像设置 wp_enqueue_script 一样。然后通过将句柄传递给 wp_enqueue_script 将脚本排队。
<?php
wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false );
wp_enqueue_script('myscript');
?>
wp_deregister_script
wp_deregister_script 删除已注册的脚本。<?php wp_deregister_script('myscript'); ?>
wp_deregister_script
wp_dequeue_script 删除已注册的脚本。<?php wp_dequeue_script('myscript'); ?>
加载脚本的最简单方法是将 wp_enqueue_script 放置在页面上您想要的任何位置。
<?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>
<?php wp_head(); ?>
足够简单，只是不太优雅。更好的方法是使用 function.php 文件来加载脚本。为此，您需要创建一个自定义函数。然后使用 add_action 来初始化您的函数。
<?php
function load_my_scripts() {
wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0', true );
wp_enqueue_script('myscript');
}
add_action('init', 'load_my_scripts');
?>
load_my_scripts 的函数
myscript
myscript 排入队列
load_my_scripts
我们刚刚加载的脚本需要当前版本的 jQuery 才能运行，因此让我们注销 WordPress 附带的默认版本，并将新版本添加到我们的函数中。
<?php
function load_my_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
wp_enqueue_script('jquery');
wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array("jquery"), '1.0', true );
wp_enqueue_script('myscript');
}
add_action('init', 'load_my_scripts');
?>
myscript 排入队列
好的，WordPress 编码的良好实践表明我们需要在运行函数之前检查它是否存在。这样就完成了。
<?php
if (function_exists('functionName')) {
}
?>
这会检查您的函数是否已存在。如果不存在，它将运行您的函数。
让我们将其添加到我们的 load_my_scripts 函数
<?php
if (function_exists('load_my_scripts')) {
function load_my_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
wp_enqueue_script('jquery');
wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
wp_enqueue_script('myscript');
}
}
add_action('init', 'load_my_scripts');
?>
现在，如果您转到管理页面，您不希望加载脚本。它可能会导致冲突并破坏管理页面。一般的经验法则是您不希望自定义脚本加载到管理页面中。插件脚本则是另一回事。我稍后会再讨论这个问题。
我们将使用 !is_admin() 检查加载的页面是否不是管理页面。如果不是，我们的脚本将加载。
<?php
if (!is_admin()) {
}
?>
现在函数看起来像这样。
<?php
if (function_exists('load_my_scripts')) {
function load_my_scripts() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
wp_enqueue_script('jquery');
wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
wp_enqueue_script('myscript');
}
}
}
add_action('init', 'load_my_scripts');
?>
给你。一个很好的模板，供您使用来将脚本排入队列
好的，既然你已经记下来了。让我们添加一个仅在插件的管理页面上加载的脚本。
其实很简单。只需在插件文件中编写脚本函数，就像我们在上一节中所做的那样。只是现在不要在 add_action 中使用“init”，而是使用“admin_init”。
<?php
if (function_exists('load_my_scripts')) {
function load_my_scripts() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
wp_enqueue_script('jquery');
wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true );
wp_enqueue_script('myscript');
}
}
}
add_action('admin_init', 'load_my_scripts');
?>
就是这样，现在您的脚本只会在您进入插件的管理页面时加载。
我希望这将帮助您更好地理解 WordPress 中的入队脚本，因此现在您可以走出去并加载一些您自己的脚本！
如果有任何不明白或想继续阅读的内容。我建议访问 WordPress Codex。这里还列出了一些其他相关的法典链接：
以上がWordPress テーマとプラグインのキューイング スクリプトについて学習します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
