在我的WordPress主题中包含JavaScript和CSS的正确方法

时间:2015-01-07 作者:andresgl

我正在尝试用正确的方法构建我自己的Wordpress主题。但是

我发现的第一个问题是如何“使用正确的方式”添加css和js。

我找到了一些如何做的教程。e、 x:http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402 (这是“2014年6月30日”)这一个http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp-24321 (这是“2012年2月14日”)他们的解释是一样的。

此外,我看了一下主题“Twenty15”,还有另一种不同的方式。

让我用代码解释一下:

如果我遵循“tutsplus”中的两个教程,我添加css和js的代码如下所示:

<?php

function scripts() {
    wp_register_style(
        \'bootstrap\', 
        get_template_directory_uri() . \'/css/bootstrap.min.css\',
        \'3.3.1\',
    );
    wp_enqueue_style( \'bootstrap\' );
}

function mytheme_enqueue_style() {
    wp_enqueue_style( \'bootstrap\', get_stylesheet_uri() ); 
    }
add_action( \'wp_enqueue_scripts\', \'mytheme_enqueue_style\' );

?>
如果我遵循“Twenty15”主题的制作方式,我的代码如下所示:

<?php
function scripts() {

    // Load bootstrap.
    wp_enqueue_style( \'bootstrap\', get_template_directory_uri() . \'/css/bootstrap.min.css\', \'3.3.1\' );

add_action( \'wp_enqueue_scripts\', \'scripts\' );
?>
我喜欢最后一个,因为它的代码更少,更清晰,但我不知道“正确的方式”。

当然,我读过法典,但对我来说,还不完全清楚,因为这两种方法都有例子。我也发现了类似的问题,但没有回答我的问题。Including jQuery and JavaScript files the correct wayWhat's the correct way to include files in Wordpress TwentyTen theme with it's own jquery scripts and css?

我希望一些WP方面的专家或非专家能帮助我。

谢谢!:)

2 个回复
最合适的回答,由SO网友:Varun Kumar 整理而成

非常简单的答案是两者都是正确的。在第一种方法中,您将过程分为两个步骤。如果您想注册一些脚本,但希望稍后有条件地加载它们,则需要这样做。例如,您可能只想在第二个脚本需要第一个脚本时加载某个脚本。在这种情况下,只需注册第一个脚本,在第二个脚本排队时,可以将第一个脚本的句柄指定为依赖项。

更明确的解释方法是思考jquery。Wordpress默认为您注册。如果您想在站点中使用jquery,您可以简单地将其排队,也可以将另一个依赖于jquery的脚本排队。

如果您想直接使用脚本,那么另一种方法是非常简短和干净的。

SO网友:Asha Krishna

我为项目目的开发了自己的主题。最好使用一个单独的文件来调用所有js和css文件,这些文件仅用于管理区域,而不用于前端显示。

在主题功能中。php,给出like

require get_template_directory() . \'/inc/adminscripts.php\'; 
在主题文件夹中,创建文件夹“inc”,并包含文件“adminscripts”。php\'此处。

//adminscripts。php//

function theme_admin_scripts() {

global $typenow;
    if( $typenow == \'post\' ) {
        wp_enqueue_style( \'bootstrap\', get_template_directory_uri() . \'/inc/css/bootstrap.min.css\' );
    }  // to include a style in posts only
 wp_enqueue_script( \'custom_script_includes\', get_template_directory_uri() . \'/inc/js/custom_javascript_file.js\', array(), \'1.0.0\', true );
}

add_action(\'admin_enqueue_scripts\', \'theme_admin_scripts\');
创建两个文件夹,如cssjs 在内部inc 文件夹并在此处上载文件

结束

相关推荐

Loading custom CSS

我已经做了一些搜索,似乎无法为我遇到的特定问题找到合适的解决方案。我在我的一个主题中创建了一个选项,允许用户编辑任何元素,如h1、p、divs等。用户还可以添加样式,我基本上只是创建一个标识符字符串和用户选择的样式。加载此css字符串的最佳方式是什么?最好在之前将其作为函数调用,还是应该通过编程创建一个“自定义”。css“之后排队的文件”样式。css\'?我担心创建一个“自定义”。css的文件,以防权限成为问题。