有没有办法通过unctions.php在模板中“在页面上”推送javascript或css?

时间:2017-08-10 作者:Henry

我的意思是,当我在函数中“enqueue\\u scripts”以将CSS或JS加载到模板中时,它会添加完整路径。

我想做的是将Javascript实际发布到实际页面上,以便在页面上按如下方式推送它:

<script> the javascript is printed ON the page NOT a Full Path </script>
我知道这有一个插件,但我想知道是否有一个更简单的\'功能。php的做法。。。

换句话说,我正在努力加快网站的速度,也就是说,我正在尝试在页面上放置CSS和JavaScript。Google建议“消除折叠内容上方的渲染阻塞JavaScript和CSS”

这就是我想要实现的。。。

谢谢

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

你可以wp_head 对于CSS或JS,或wp_footer 对于JS(样式标记需要位于标题中):

function wpse_276403_output_scripts() {
    ?>
    <script>alert(\'Hello world!\');</script>
    <style>
        body {
            background: #F00;
        }
    </style>
    <?php
}
add_action( \'wp_head\', \'wpse_276403_output_scripts\' );

function wpse_276403_output_scripts() {
    ?>
    <script>alert(\'Hello world!\');</script>
    <?php
}
add_action( \'wp_footer\', \'wpse_276403_output_scripts\' );
如果脚本或样式依赖于已注册或排队的脚本,则可以使用wp_add_inline_style()wp_add_inline_script() 要确保JS/CSS在其所依赖的脚本或样式之后输出,请执行以下操作:

function wpse_276403_output_scripts() {
    wp_enqueue_script( \'my-dependency-script\', \'/uri/to/script/file.js\' );
    wp_add_inline_script( \'my-dependency-script\', \'alert("Hello world!");\' );
    wp_enqueue_style( \'my-dependency-style\', \'/uri/to/stkle/file.css\' );
    wp_add_inline_style( \'my-dependency-style\', \'body { background: #F00; }\' );
}
add_action( \'wp_enqueue_scripts\', \'wpse_276403_inline_scripts\' );
这样,脚本和样式将仅在以下情况下输出my-dependency-script/my-dependency-style 已加载,并将在它们之后加载。请注意,您不需要添加<script></script><style></style> 标签。

结束

相关推荐

在Functions.php中正确地将首页的CSS-TEMPLATE_REDIRECT排队?

我想加载一些特定的css来更改WP首页/主页的主体元素的颜色。在我的主题函数文件中,以下代码似乎有效,但有人能告诉我它是否“正确”吗?//Adding and Encuing styles for Front Page add_action( \'template_redirect\', \'front_page_design\' ); function front_page_design(){ if ( is_front_page() || is_home())