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加载它。要加载主样式表，您可以将其排入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 或< EM>手持

因此，如果您想在主题的根目录中的名为slider.css的文件夹中加载名为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

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

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

localhost for wordpress：正确的方法来链接引用css / js文件？

3 个答案: