将Javascript和Css添加到Wordpress页面

Question

我已经为主页的一个元素编写了javacript和html/css。我已经尝试将js文件放入根目录，并将其“包含”在头文件中。我已经使用gutenberg设计了我的页面，我想在其中添加这个元素。有人能帮我吗？它有一堆js和jquery代码，以及用于style和flexbox html的css。我的pc上有.js .css和.html文件，我的网站在本地主机上。我的主题是阿斯特拉免费版本。

Answer 1

对你来说，正确的方法是：

1. 创建一个Astra子主题并将其激活为您的主题。您可以使用他们的工具https://wpastra.com/child-theme-generator/

这样做是为了能够继续更新Astra，而不会丢失您的自定义工作

1. 在您的子主题的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');
  
}

1. 如果您不需要在站点的每个页面上都加载您的CSS和JS，请使用WordPress conditional tags有条件地加载它们，只在需要的页面上加载。例如，如果需要在所有博客文章上加载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');
}