如何将脚本和css文件添加到WordPress中？

时间：2013-07-09 作者：abiieez

我有以下html代码：

<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.world.js"></script>
<script src="js/jquery.vmap.sampledata.js"></script>

<script>
jQuery(\'#vmap\').vectorMap({
    map: \'world_en\',
    backgroundColor: null,
    color: \'#ffffff\',
    hoverOpacity: 0.7,
    selectedColor: \'#666666\',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: [\'#C8EEFF\', \'#006491\'],
    normalizeFunction: \'polynomial\'
});
</script>

<div id="vmap" style="width: 600px; height: 400px;"></div>

如何将使用过的Javascript（或CSS）文件添加到新页面中？我必须通过FTP复制和粘贴文件吗？

2 个回复

最合适的回答,由SO网友:Mayeenul Islam 整理而成

出于您的目的，排队是关键：

您可以咨询以下问题：How to enqueue the style using wp_enqueue_style() 用于样式排队。

对于脚本排队，我最近做了如下操作：

// ENQUEUE JAVASCRIPTS FOR CUSTOM PURPOSE
function scripts_for_something() {

    wp_register_script( \'my-scripts\', get_template_directory_uri() . \'/js/my-scripts.js\' );

    wp_enqueue_script( \'my-scripts\' );
}

add_action( \'admin_enqueue_scripts\', \'scripts_for_something\' );

admin_enqueue_scripts 将仅在管理面板中将脚本排队。您可以使用wp_enqueue_scripts 而不是前端。

SO网友:Vigs

虽然wordpress内置了一个文件编辑器，但我建议您在桌面上编辑文件，然后将其上载到您的网站并安装wordpress。

我们假设您在Web服务器上有一个文件夹，它位于名为js的wordpress主题内。这是您应该存放所有javascript文件的文件夹。

使用您喜爱的文本编辑器创建文件并将脚本放入其中：

jQuery(\'#vmap\').vectorMap({
    map: \'world_en\',
    backgroundColor: null,
    color: \'#ffffff\',
    hoverOpacity: 0.7,
    selectedColor: \'#666666\',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: [\'#C8EEFF\', \'#006491\'],
    normalizeFunction: \'polynomial\'
});

将此文件另存为：

my_vectormap.js

现在下载函数。web服务器上wordpress主题目录中的php文件。当然，使用FTP客户端。

在函数中。php文件添加以下内容：

add_action( \'wp_enqueue_scripts\', \'our_vmap_scripts\' );
function our_vmap_scripts(){
wp_register_script( \'vmap_main\', get_template_directory_uri() . \'/js/jquery.vmap.js, array( \'jquery\' ), false, true );
wp_register_script( \'vmap_world\', get_template_directory_uri() . \'/js/jquery.vmap.world.js, array( \'jquery\' ), false, true );
wp_register_script( \'vmap_sampledata\', get_template_directory_uri() . \'/js/jquery.vmap.sampledata.js, array( \'jquery\' ), false, true );
wp_register_script( \'my_vectormap\', get_template_directory_uri() . \'/js/my_vectormap.js, array( \'jquery\' ), false, true );

wp_enqueue_script( \'vmap_main\' );
wp_enqueue_script( \'vmap_world\' );
wp_enqueue_script( \'vmap_sampledata\' );
wp_enqueue_script( \'my_vectormap\' );

}

您现在必须上载修改后的函数。php文件返回到wordpress安装中其控制器中的Web服务器。通常位于/wp-content/themes/theme-name-here/。您还必须将之前创建的javascript文件上传到/wp-content/themes/theme-name-here/js/

这应该会让你走上正轨。

此外，您需要在站点上使用jquery。

正确的方法如下：

在您的功能中。php使用：

if (!is_admin()) add_action(\'wp_enqueue_scripts\', \'our_jquery_enqueue\', 11);
function our_jquery_enqueue() {
   wp_deregister_script(\'jquery\');
   wp_register_script(\'jquery\', "http" . ($_SERVER[\'SERVER_PORT\'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script(\'jquery\');
}

结束

小码农CODE

如何将脚本和css文件添加到WordPress中？

相关推荐

jquery does't work