将 Javascript 和 Css 添加到 Wordpress 页面答案

【问题标题】：adding Javascript and Css to Wordpress page将 Javascript 和 Css 添加到 Wordpress 页面
【发布时间】：2021-11-29 12:54:45
【问题描述】：

我为我的主页中的一个元素编写了 javacript 和 html/css。我已经尝试将我的 js 文件放入根目录并将其“包含”在我的标题中。我已经使用gutenberg 来设计我的页面，并且我想将这个元素添加到其中。有谁能够帮我？它的一堆 js 和 jquery 代码以及用于样式和 flexbox html 的 css。我的电脑上有 .js .css 和 .html 文件，我的网站在 localhost 上。我的主题是 Astra 免费版。

【问题讨论】：

标签： javascript css wordpress

【解决方案1】：

正确的方法是：

创建一个 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 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');
}

【讨论】：