Erfahren Sie mehr über das Einreihen von Skripten für WordPress-Themes und -Plugins

wp_enqueue_script 函数是将 JavaScript 文件加载到 WordPress 站点的最佳解决方案。如果您正在开发使用 JavaScript 或 JavaScript 库的主题，则可以使用 wp_enqueue_script Funktion. Es kann verwirrend sein, wenn Sie es noch nie wirklich verwendet haben. Deshalb werden wir uns heute eingehend mit der Verwendung von Funktionen in der Warteschlange befassen, um Skripte ordnungsgemäß in Ihr Theme oder Plugin zu laden.

Nachträgliche Änderungen an Technik und Software

Einige Aspekte der in diesem Tutorial verwendeten Anwendungen oder Techniken haben sich seit der ursprünglichen Veröffentlichung geändert. Dies kann nachfolgende Schritte etwas erschweren. Wir empfehlen Ihnen, sich das neueste Tutorial zum gleichen Thema anzusehen:

• So binden Sie JavaScript und CSS in WordPress-Themes und -Plugins ein

Warum die Enqueue-Funktion verwenden?

Wenn Sie über grundlegende HTML-Kenntnisse verfügen, sind Sie wahrscheinlich daran gewöhnt, Javascript-Dateien (einschließlich alles von jQuery bis hin zu Plugin-Skripten) direkt in die Kopf- oder Fußzeile Ihres Dokuments zu laden. Dies ist in Ordnung, wenn Sie sich in einer eigenständigen Umgebung wie einer einfachen HTML-Seite befinden. Sobald Sie jedoch die unzähligen anderen Skripte einführen, die möglicherweise auf Ihrer WordPress-Installation ausgeführt werden, wird es schwieriger, das durchzuführen, was ich „Crowd-Management“ nenne. Verwenden Sie Ihr Skript.

Warum also nicht JavaScript in die Kopf- oder Fußzeile laden? Die Antwort ist ganz einfach: Wenn Sie JavaScript auf diese Weise einbinden, besteht die Gefahr eines Konflikts mit dem JavaScript während der Installation (denken Sie an mehrere Plugins, die versuchen, dasselbe Skript oder verschiedene Versionen dieses Skripts zu laden). Darüber hinaus wird Ihr JavaScript auf jederSeite geladen, auch wenn Sie es nicht benötigen. Dies führt dazu, dass das Laden der Seite unnötig länger dauert, und kann andere JavaScript-Funktionen beeinträchtigen, beispielsweise von Plugins oder im Dashboard … was in der WP-Entwicklung ein Tabu ist.

Mit der Funktion wp_enqueue_script. Sie haben mehr Kontrolle darüber, wie und wann JavaScript geladen wird. Sie können sogar entscheiden, ob in die Kopf- oder Fußzeile geladen werden soll.

---

Verstehen Sie die Funktion wp_enqueue_script

Die Funktion

wp_enqueue_script 函数用于将脚本加载到您的 WordPress 站点中。您通常会在 functions.php wird zum Laden von Skripten in Ihre WordPress-Site verwendet. Normalerweise verwenden Sie dies in einer functions.php-Datei.

wp_enqueue_script Die Funktion selbst ist sehr einfach, also schauen wir uns ihre Struktur an.

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

• $handle
  • Dies ist das Handle (Name) des zu ladenden Skripts. Sollte nur in Kleinbuchstaben geschrieben sein.
  • Dies ist erforderlich
  • Standard: Keine
• $scr
  • Dies ist die URL des Skripts.
  • Wenn Sie lokal vom Server laden, sollten Sie die URL des Skripts nicht fest auf dem Server codieren. Das Thema wird am besten verwendet content_url、bloginfo("template_url") 或 get_template_directory_uri() （WordPress 函数参考推荐），插件最好使用 plugins_url.

    <?php wp_enqueue_script('myscript', content_url('/myTheme/js/myScript.js'__FILE__)); // content_url ?>
    
    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__); // bloginfo("template_url") ?>
    
    <?php wp_enqueue_script('myscript', get_template_directory_uri().'/js/myScript.js'__FILE__); // get_template_directory_uri() ?>
    
    <?php wp_enqueue_script('myscript', plugins_url('/myPlugin/js/myScript.js'__FILE__)); // plugins_url ?>
    

  • Wenn Sie das Skript von einem anderen Server laden. Laden Sie beispielsweise die jQuery-Bibliothek von Google CDN. Sie müssen lediglich die URL der Datei eingeben, die Sie laden möchten.

    <?php wp_enqueue_script('myscript', 'https://www.url/of/file/script.js'__FILE__); ?>
    

  • Dies ist optional
  • Standardwert: false
• $deps
  • Dies ist ein Array, das alle Skriptabhängigkeiten verarbeitet. Beispielsweise erfordert die Ausführung Ihres fade.js-Skripts jQuery. Dieser Parameter verknüpft Ihr Skript mit der jQuery-Bibliothek.
  • Wenn Sie diesen Parameter nicht verwenden möchten, aber andere Parameter verwenden möchten, verwenden Sie „false“.

    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '3.1' ); ?>
    

  • Die erforderlichen Skripte müssen zuerst geladen werden.
  • Das Skript-Handle, das Sie zur Verwendung des Arrays benötigen.

    <?php 
    wp_enqueue_script('jquerylib', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js');
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquerylib'));
    ?>
    

  • Dies ist optional
  • Standard: array()
• $ver
  • Dies ist Ihre Version des Skripts.
  • Die Version wird als Abfragezeichenfolge an das Ende des Pfads angehängt. version kann eine Versionsnummer, false oder NULL sein.
  • Wenn Sie false als Version verwenden. Es wird die WordPress-Version verwendet.
  • Bei Verwendung von NULL. Als Version wird nichts verwendet. Die WordPress-Funktionsreferenz empfiehlt dies nicht.
  • Wenn der Parameter $ver nicht verwendet wird, wird standardmäßig die WordPress-Version verwendet.

    <?php wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), false, '1.0' ); ?>
    

  • Dies ist optional
  • Standardwert: false
• $in_footer
  • Dadurch wird die Position Ihres Skripts auf der Seite bestimmt.
  • Dieser Parameter ist ein boolescher Wert („wahr“ oder „falsch“)
  • Standardmäßig wird Ihr Skript in platziert, am besten platzieren Sie es jedoch vor dem Ende des -Tags. Dies geschieht durch die Übergabe von „true“ an den Parameter.

    <?php
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', false ); // placed in the head
    wp_enqueue_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array(), 'version', true ); // placed before body close tag
    ?>
    

  • Dies ist optional
  • Standardwert: false

Wie Sie sehen, sind alle Parameter außer $handle 之外的所有参数都是可选的。乍一看这似乎很奇怪。特别是 $scr optional. Das mag auf den ersten Blick seltsam erscheinen. Insbesondere der Parameter $scr. Wie findet WordPress ein Skript ohne 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' ); ?>

足够简单，只是不太优雅。更好的方法是使用 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出队脚本

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über das Einreihen von Skripten für WordPress-Themes und -Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!