javascript - 将 Javascript 和 Css 添加到 Wordpress 页面
问题描述
我为我的主页中的一个元素编写了 javacript 和 html/css。我已经尝试将我的 js 文件放入根目录并将其“包含”在我的标题中。我已经使用gutenberg 来设计我的页面,并且我想将这个元素添加到其中。有谁能够帮我?它的一堆 js 和 jquery 代码以及用于样式和 flexbox html 的 css。我的电脑上有 .js .css 和 .html 文件,我的网站在 localhost 上。我的主题是 Astra 免费版。
解决方案
正确的方法是:
- 创建一个 Astra 子主题并将其激活为您的主题。您可以使用他们的工具https://wpastra.com/child-theme-generator/
您这样做是为了能够继续更新 Astra 而不会丢失您的自定义工作
- 在子主题的 functions.php 文件中,您使用 WordPress 动作挂钩将 CSS 和 JS 文件排入队列,如下所示:
add_action('wp_enqueue_scripts', 'amir_astra_scripts');
function amir_astra_scripts(){
wp_register_style(
'amir-styles', // Idendtifier to later enqueue it
get_stylesheet_directory_uri() . 'path/to/file/your-css.css', //full URL to the file
true,
filemtime( get_stylesheet_directory() . 'path/to/file/your-css.css' ), // A dynamic version to bust caching
'all'
);
wp_enqueue_style('amir-styles');
wp_register_script(
'amir-script',
get_stylesheet_directory_uri() . 'path/to/file/your-js.js',
['jquery'], // Make script a dependency of jquery
filemtime( get_stylesheet_directory() . 'path/to/file/your-js.js'),
true // Load in footer instead of header
);
wp_enqueue_script('amir-script');
}
- 如果您不需要在网站的每个页面上加载 CSS 和 JS,请使用WordPress 条件标签有条件地加载它们,仅在需要的页面上。例如,如果你需要在所有博客文章上加载你的 CSS 和 JS,你可以在注册它们之后像这样将入队封装在 is_single() 中
if( is_single() ){
wp_enqueue_style('amir-styles');
wp_enqueue_script('amir-script');
}
如果您仅在带有“联系”的页面上需要它们,您会这样做
if( is_page('contact') ){
wp_enqueue_style('amir-styles');
wp_enqueue_script('amir-script');
}