wordpress 的本地主机：链接参考 css/js 文件的正确方法？

Posted 2023-03-06

【中文标题】wordpress 的本地主机：链接参考 css/js 文件的正确方法？

【英文标题】：localhost for wordpress: correct way to link reference css/js files?

【发布时间】：2018-07-16 10:53:03

【问题描述】：

我正在尝试将 Bootstrap 布局转换为 Wordpress，但是在链接 js/css 资源时遇到了一些困难。

什么对 index.html 有效，即。

<link href="./vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="./css/business-frontpage.css" rel="stylesheet">

即使具有相同的文件结构，似乎也不适用于 header.php 文件。

以前我曾尝试修改 Wordpress 布局，但我是在实时网站上进行的，没有尝试先通过 localhost 进行修改，我没有遇到这个问题。谁能让我知道这样做的正确方法？

【问题讨论】：

去掉点

您应该将 js 和 css 放在主题文件夹中，并使用 get_stylesheet_directory_uri() 之类的东西来获取这些文件的路径。示例：<link href="<?= get_stylesheet_directory_uri() ?>/css/business-frontpage.css" ...

How To Include CSS and jQuery in my wordpress plugin?的可能重复

摆脱点不起作用@delbot1978uk

【参考方案1】：

这取决于您的工作文件的存储位置。如果它们在根目录中，您只需删除代码中的点，即可从根目录访问文件。例如，www.mydomain.com/vendor/bootstrap/css/bootstrap.min.css 可以访问您的引导 CSS 文件。

但是，如果您将这些文件放在您的主题中，则必须在点所在的位置添加 <?php echo get_template_directory_uri(); ?> 才能链接到您的主题文件夹。

【讨论】：

get_template_directory_uri() 存在问题。如果主题是子主题，它将返回主主题的 url。

【参考方案2】：

将所有静态资产移动到你的模板目录并使用get_template_directory_url函数：

<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/css/business-frontpage.css" rel="stylesheet">

更多详情：https://developer.wordpress.org/reference/functions/get_template_directory_uri/

【讨论】：

get_template_directory_uri() 存在问题。如果主题是子主题，它将返回主主题的 url。

我不知道。你有解决这个问题的办法吗？

是的，请改用get_stylesheet_directory_uri()：developer.wordpress.org/reference/functions/…

【参考方案3】：

排队脚本和样式

将脚本和样式添加到主题的正确方法是将它们排入functions.php 文件中。所有主题都需要 style.css 文件，但可能需要添加其他文件来扩展主题的功能。

样式表

您的 CSS 样式表用于自定义主题的呈现方式。样式表也是存储主题信息的文件。

而不是将样式表加载到您的header.php 文件中，您应该使用wp_enqueue_style 加载它。为了加载您的主样式表，您可以将其排入functions.php。

入队style.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

这将查找名为 style 的样式表并加载它。

样式入队的基本函数是：

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle 只是样式表的名称。 $src 是它所在的位置。其余参数是可选的。 $deps 指的是这个样式表是否依赖于另一个样式表。如果设置了此项，则不会加载此样式表，除非先加载其依赖的样式表。 $ver 设置版本号。 $media 可以指定加载该样式表的媒体类型，例如all、screen、print或handheld em>。

因此，如果您想在主题根目录中名为 CSS 的文件夹中加载名为 slider.css 的样式表，您可以使用：

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

脚本

主题所需的任何其他 javascript 文件都应使用 wp_enqueue_script 加载。这确保了正确的加载和缓存，并允许使用条件标签来定位特定页面。这些是可选的。

wp_enqueue_script 使用与 wp_enqueue_style 类似的语法。

将你的脚本加入队列：

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

$handle 是脚本的名称。 $src 定义脚本所在的位置。 $deps 是一个数组，可以处理您的新脚本所依赖的任何脚本，例如 jQuery。 $ver 可让您列出版本号。 $in_footer 是一个 boolean (true/false) 参数，允许您将脚本放在 HTML 文档的页脚而不是页眉中，这样它就不会延迟 DOM 的加载树。

您的入队函数可能如下所示：

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

组合入队函数

最好将所有入队的脚本和样式组合成一个函数，然后使用wp_enqueue_scripts 操作调用它们。此功能和操作应位于初始设置下方的某个位置（如上所示）。

function add_theme_scripts() 
   wp_enqueue_style( 'style', get_stylesheet_uri() );

   wp_enqueue_style( 'slider', get_template_directory_uri() . 
   '/css/slider.css', array(), '1.1', 'all');

    wp_enqueue_script( 'script', get_template_directory_uri() . 
     '/js/script.js', array ( 'jquery' ), 1.1, true);

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) 
    ) 
     wp_enqueue_script( 'comment-reply' );
    
  
  add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );