WordPress的本地主机：链接参考CSS / JS文件的正确方法？

Question

我正在尝试将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进行修改，并且没有遇到此问题。 谁能让我知道正确的方法？

Answer 1

将所有静态资产移动到您的模板目录，并使用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/

Answer 2

使脚本和样式入队

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

样式表

CSS样式表用于自定义主题的表示形式。 样式表也是存储有关主题的信息的文件。

与其将样式表加载到header.php文件中， wp_enqueue_style使用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或掌上电脑 。

因此，如果要在主题的根目录中的名为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是一个布尔值 （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' );

Answer 3

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

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