在WordPress中链接外部JS和CSS文件

时间:2012-11-19 08:19:17

标签: javascript css wordpress

我是Wordpress框架的新手。我可以知道如何将外部CSS和JS文件链接到我的Wordpress页面吗?我创建了一个新页面,但我想将CSS和JS文件链接到它。

是创建新模板还是插件解决方案?我对此完全陌生。

7 个答案:

答案 0 :(得分:8)

我知道这个帖子有点陈旧,但也许其他人可能觉得它很有用。

包含外部CSS和JS文件的正确方法是使用wp_enqueue_style method并在source参数上使用esc_url_raw

例如,要将google字体包含在您的主题中,您需要执行以下操作:

wp_enqueue_style( 'twentytwelve-googlefonts', esc_url_raw( 'http://fonts.googleapis.com/css?family=Titillium+Web:600,300,200' ), array(), null );

答案 1 :(得分:4)

取决于您是否要添加CSS或JS conditionnaly。如果您希望它们包含在所有文件中,只需使用主题文件夹的functions.php页面,然后添加:

            function your_scripts() {
                    wp_register_script('yourscriptname', '/PATH/TO/YOUR/SCRIPT.js', false);
                    // This registers your script with a name so you can call it to enqueue it
                    wp_enqueue_script( 'yourscriptname' );
                    // enqueuing your script ensures it will be inserted in the propoer place in the header section
            }
            add_action('wp_enqueue_scripts', 'your_scripts');
            // This hook executes the enqueuing of your script at the proper moment.

对于样式表,请按以下方式进行:

            function your_css() {
                wp_register_style( 'nameofyourCSSsheet', '/PATH/TO/YOUR/STYLESHEET.css' );
                wp_enqueue_style( 'nameofyourCSSsheet' );
            }
            add_action( 'wp_enqueue_scripts', 'your_css' );
            // same hook is used to enqueue CSS sheets

答案 2 :(得分:3)

使用“插入页眉和页脚”wordpress插件。它为你完成所有工作!只需将应该包含的内容粘贴到插件的标题部分即可。

答案 3 :(得分:1)

您可以将文件添加到当前主题。将css文件添加到标头(主题文件夹中的header.php)。并将js文件添加到页脚(主题文件夹中的footer.php)。主题文件夹可以在路径wp-content / themes /

中找到

答案 4 :(得分:0)

您可以修改主题的header.php文件,以包含外部 JS CSS 文件。 Header.php位于wp-content> themes>当前有效主题> header.php。

在编辑器中打开它,并在<head></head>标记之间包含指向外部或文件的链接。

答案 5 :(得分:0)

您无需创建插件或新模板即可链接到现有Wordpress主题中的文件。

正如建议的那样,如果打开主题header.php,在结束标记之前,您可以插入指向文件位置的链接。

您的CSS文件通常位于您的主题文件夹中: wp-content / themes / your_theme / style.css

您可以使用以下Wordpress函数调用样式表:

请查看以下Wordpress Codex部分获取信息: http://codex.wordpress.org/Function_Reference/bloginfo

答案 6 :(得分:0)

您无需购买任何插件,只需在WordPress主题的根目录下打开function.php文件。只需插入此功能PFB,只需更改目录,对于js,您无需连接单独的文件,因为您可以使用footer.php并将js代码插入脚本标签中,即可正常工作。

add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' );
    function radliv_child_enqueue_styles() {
    wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' );
} ;