ホームページ > 記事 > バックエンド開発 > WordPress テーマとプラグインのキューイングスクリプトについて学習します。

WordPress テーマとプラグインのキューイングスクリプトについて学習します。

PHPzオリジナル: 2023-08-30 13:21:08796ブラウズ

了解 WordPress 主题和插件的排队脚本

wp_enqueue_script 関数は、JavaScript ファイルを WordPress サイトに読み込むための最適なソリューションです。 JavaScript または JavaScript ライブラリを使用するテーマを開発している場合は、wp_enqueue_script 関数を使用できます。これまで実際に使用したことがない場合は混乱する可能性があります...そこで、今日はキュー関数を使用してスクリプトをテーマまたはプラグインに適切に読み込む方法を詳しく説明します。

その後のテクノロジーとソフトウェアの変更

このチュートリアルで使用されているアプリケーションまたはテクニックの一部の側面は、最初の出版物から変更されています。これにより、その後の手順が少し難しくなる場合があります。同じトピックに関する最新のチュートリアルを確認することをお勧めします:

WordPress テーマとプラグインに JavaScript と CSS を含める方法

エンキュー機能を使用する理由は何ですか?

基本的な HTML の知識がある場合は、JavaScript ファイル (jQuery からプラグインスクリプトまでを含む) をドキュメントのヘッダーまたはフッターに直接読み込むことに慣れているでしょう。基本的な HTML ページのようなスタンドアロン環境にいる場合はこれで問題ありません...しかし、WordPress インストール上で実行される可能性のある他の無数のスクリプトを導入すると、私が「群集管理」と呼ぶものを実行するのが難しくなります。スクリプトを使用してください。

それでは、ヘッダーまたはフッターに JavaScript をロードしてみてはいかがでしょうか?答えは非常に簡単です。このように JavaScript を組み込むと、インストール中に JavaScript と競合するリスクが生じます (複数のプラグインが同じスクリプトまたはそのスクリプトの異なるバージョンをロードしようとしていると考えてください)。さらに、JavaScript は、必要ない場合でも、すべての ページに読み込まれます。これにより、ページの読み込みに不必要に時間がかかり、プラグインやダッシュボード内などの他の JavaScript に干渉する可能性があります...これは WP 開発では禁止されています。

wp_enqueue_script 関数を使用します。 JavaScript をいつどのようにロードするかをより詳細に制御できるようになります。ヘッダーとフッターのどちらに読み込むかを決定することもできます。

理解 wp_enqueue_script 関数

wp_enqueue_script 関数は、WordPress サイトにスクリプトを読み込むために使用されます。通常、これを functions.php ファイルで使用します。

wp_enqueue_script 関数自体は非常に単純なので、その構造を見てみましょう。

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

$ハンドル
- これは、ロードするスクリプトのハンドル (名前) です。すべて小文字にする必要があります。
- これは必須です
- デフォルト値: なし
$scr
- これはスクリプトの URL です。
- サーバーからローカルにロードしている場合は、サーバー上でスクリプトの URL をハードコーディングしないでください。テーマとプラグイン には、content_url、bloginfo("template_url")、または get_template_directory_uri() (WordPress 関数リファレンスの推奨事項) を使用するのが最善です。 plugins_url。リーリー
- 別のサーバーからスクリプトをロードする場合。たとえば、Google CDN から jQuery ライブラリをロードします。ロードするファイルの URL を入力するだけです。リーリー
- これはオプションです
- デフォルト値: false
$デプス
- これは、スクリプトの依存関係を処理する配列です。たとえば、fade.js スクリプトを実行するには jQuery が必要です。このパラメーターは、スクリプトを jQuery ライブラリにリンクします。
- このパラメータを使用したくないが、他のパラメータを使用したい場合は、「false」を使用します。リーリー
- 必要なスクリプトを最初にロードする必要があります。
- 配列を使用するために必要なスクリプトハンドル。リーリー
- これはオプションです
- デフォルト: array()
$ver
- これはスクリプトのバージョンです。
- バージョンはクエリ文字列としてパスの末尾に連結されます。 version には、バージョン番号、false、または NULL を指定できます。
- バージョンとして false を使用する場合。 WordPressのバージョンが使用されます。
- NULL を使用する場合。バージョンとしては何も使用されません。 WordPress 関数リファレンスではこれを推奨していません。
- $ver パラメータが使用されない場合は、WordPress バージョンがデフォルトで使用されます。リーリー
- これはオプションです
- デフォルト値: false
$フッター内
- これにより、ページ上のスクリプトの位置が決まります。
- このパラメータはブール値 (「true」または「false」) です。
- デフォルトでは、スクリプトはに配置されますが、タグの終わりの前に配置することをお勧めします。これは、パラメータに「true」を渡すことによって行われます。リーリー
- これはオプションです
- デフォルト値: false

ご覧のとおり、$handle を除くすべてのパラメータはオプションです。これは一見すると奇妙に思えるかもしれません。特に $scr パラメータ。 WordPress は URL のないスクリプトをどのように見つけますか?

这背后的原因是 WordPress 附带了内置脚本。例如，jQuery 是 WordPress 核心的一部分，WordPress 开发团队使加载这些内置脚本变得非常简单。您所要做的就是将脚本的句柄传递给 wp_enqueue_script。

<?php wp_enqueue_script('jquery'); ?>

有关内置 WordPress 脚本及其句柄的完整列表。请查看 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');
?>

第 2 行创建一个名为 load_my_scripts 的函数
第 3 行注册脚本 myscript
第 4 行将脚本 myscript 排入队列
第 6 行初始化函数 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');
?>

第 2 行取消注册 WordPress 附带的默认 jQuery
第 3 行注册另一个版本的 jQuery
第 4 行将脚本 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。这里还列出了一些其他相关的法典链接：

函数参考/wp 入队脚本
函数参考/wp注册脚本
函数参考/wp注销脚本
函数参考/wp出队脚本

以上がWordPress テーマとプラグインのキューイングスクリプトについて学習します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript jquery css html NULL 字符串 JS function WordPress

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHPのimagefilledrectangle()関数次の記事：PHPのimagefilledrectangle()関数

続きを見る

WordPress テーマとプラグインのキューイング スクリプトについて学習します。