使用functions.php将Bootstrap排队到Wordpress

Posted 2023-05-08

【中文标题】使用functions.php将Bootstrap排队到Wordpress

【英文标题】：enqueuing Bootstrap to Wordpress with functions.php

【发布时间】：2018-05-03 23:46:18

【问题描述】：

我的 functions.php 文件夹中有以下代码（使用子主题，如果这里有任何因素的话）

<?php
function theme_styles() 

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/bootstrap.min.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );



add_action( 'wp_enqueue_scripts', 'theme_styles');

function theme_js() 

    global $wp_scripts;

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/bootstrap.min.js' );



add_action( 'wp_enqueue_scripts', 'theme_js');

?>

使用 FTP，我已将 bootstrap.min.css 和 bootstrap.min.js 文件夹添加到我的子主题目录（从网站下载）。

但是，当我在我正在构建的页面中的代码块上做手风琴时，它不会创建手风琴。代码如下：

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is html?</a>
            </h4>
        </div></div></div>

所发生的只是显示带有链接的文本。

我做错了吗？

【问题讨论】：

您是否检查过浏览器中的任何控制台错误？如果 JS 被调用了？或者比需要的时间晚，等等。

这是来自 *** 新用户的一个写得很好的问题。发布相关代码并适当编写问题的绝佳示例。

【参考方案1】：

get_template_directory_uri() 返回父主题的目录。为了获得子主题目录，您应该使用get_stylesheet_directory_uri()。

注意： get_stylesheet_directory_uri() 不包含尾部斜杠。

因此，在您的wp_enqueue_* 行中，将get_template_directory_uri() 换成get_stylesheet_directory_uri()，只要文件路径的其余部分正确且文件确实在服务器上，您就不应再有 404。

【讨论】：

成功了！为什么这只需要应用到 bootstrap.min.css 而不需要应用到 bootstrap.min.js？

很高兴它对你有用。如果两个文件都在子主题中，则需要将其应用于 JS 和 CSS 入队。