头中的wordpress自定义js

wordpress custom js in header

本文关键字：自定义 js wordpress      更新时间：2024-06-25

我需要将这段特定的JS代码添加到Wordpress支持的网站区域中。

    <script type="text/javascript">
    var myDate = new Date();
    var myStamp = ""+myDate.getDate()+myDate.getMonth()+myDate.getFullYear()+myDate.getHours()+myDate.getMinutes();
    document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/abeSVNInfo.js?' + myStamp + '"><'/script>');
    </script>
    <script type="text/javascript">
    document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/ct_abe.js?'+CARTRAWLER.SVNInfo.revision+'"><'/script>');
    </script>
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['form'];
    if (!theForm) {
        theForm = document.form;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>

实现这一目标的最佳方式是什么？

在这种情况下，我认为使用WordPress wp_enque_script函数效果最好。

首先将JavaScript放入一个单独的文档（即cartrawler.js）中。将此JavaScript文档放入您的主题中（最好放在/js文件夹中）。之后，您将告诉您的主题使用该文件夹中的JavaScript。这种方法的好处是，它更容易控制何时何地加载JavaScript（就像只在主页页面的标题中一样），并且它允许与（better）WP Minify等插件更好地兼容缓存。

这就是它的工作原理：

制作一个单独的JavaScript文档，并将其存储在您的主题文件夹中（即.theme/js/cartrawler.js）：

var myDate = new Date();
var myStamp = ""+myDate.getDate()+myDate.getMonth()+myDate.getFullYear()+myDate.getHours()+myDate.getMinutes();
document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/abeSVNInfo.js?' + myStamp + '"><'/script>');
document.write('<script type="text/javascript" src="https://ajaxgeo.cartrawler.com/cartrawlerabe/abe/js/ct_abe.js?'+CARTRAWLER.SVNInfo.revision+'"><'/script>');
var theForm = document.forms['form'];
if (!theForm) {
    theForm = document.form;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

制作JavaScript文档后，您可以将其添加到您的函数中。php文档：

// Enqueue JavaScripts
function theme_scripts() {
    wp_enqueue_script('cartrawler', get_template_directory_uri() . '/js/cartrawler.js', array(), '20120802', '1');
}
add_action('wp_enqueue_scripts', 'theme_scripts');

当调用JavaScript时，我们要做的是：我们给JavaScript一个名称（cartrawler），并告诉函数在哪里可以找到源。之后我们定义了任何依赖项，幸运的是我们没有任何依赖项。之后，我们添加一个版本号（20120802），并告诉函数在页脚中加载JavaScript。它根本不需要在标题中（thumbsup@Lixus）。

请在此处阅读有关使用wp_enque_script函数的详细信息：http://codex.wordpress.org/Function_Reference/wp_enqueue_script

注意：请确保您的header.php使用wp_header（）函数，而footer.php使用wp_footer（）函数。

你是说在前端？

header.php在模板中使用的位置通常是正确的。

在Wordpress后端，转到外观->编辑器，并在右菜单（Footer.php）中选择页脚模板。

然后在</body>标记之前添加您的代码。

编辑：我认为最好将此代码添加到页脚，因为它不需要等待文档加载。

相关文章：