Php 如何将引导cdn添加到wordpress主题？_Php_Wordpress

Php 如何将引导cdn添加到wordpress主题？

php wordpress

Php 如何将引导cdn添加到wordpress主题？,php,wordpress,Php,Wordpress,我是wordpress开发的新手，我尝试通过function.php文件添加引导。我有引导风格，但有些东西，如下拉菜单和扩展汉堡包菜单不起作用。有人能解释一下我做错了什么吗这是my functions.php文件： <?php add_action('wp_enqueue_scripts' , 'vault_files'); function vault_files(){ wp_enqueue_style('vault_main_style', get

我是wordpress开发的新手，我尝试通过function.php文件添加引导。我有引导风格，但有些东西，如下拉菜单和扩展汉堡包菜单不起作用。有人能解释一下我做错了什么吗

这是my functions.php文件：

<?php


    add_action('wp_enqueue_scripts' , 'vault_files');

    function vault_files(){

      wp_enqueue_style('vault_main_style', get_stylesheet_uri()); 

      wp_enqueue_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');

      wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js');
    }



?>

我的header.php文件如下所示：

<!doctype html>


<head>
    <!--the following function lets wordpress be in control of the head section
    this is prevent our theme from breaking when we add other plugins. -->
    <?php wp_head(); ?>
</head>


<body>
<header class="site-header">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Patua+One&display=swap" rel="stylesheet">


    <!--navbar starts here-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
  </header>












搜寻

您可以将引导链接放在这里

Header.php

<head>
<?php wp_head(); ?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

 <!-- Optional theme -->
 <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
 </script>
</head>

另一种方式

Functions.php

<head>
<?php wp_head(); ?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

 <!-- Optional theme -->
 <link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> 
 </script>
</head>

下载所有CDN，在functions.php文件中放入下面的代码后，放入一个或两个不同的文件夹，如css&js文件夹

<?php 
/**
* Enqueue scripts and styles
*/
function your_theme_enqueue_scripts() {
// all styles
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
// all scripts
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );

我解决了这个问题。问题是我没有在页脚中包含这些行

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

请在此处共享您的网站链接，以便我可以帮助您。遗憾的是，该网站尚未上线。我使用“飞轮本地”在本地查看站点。我尝试了第一种方法。不幸的是，它不起作用。我还没有尝试第二种方法，因为我首先试图避免在本地下载引导程序。没有得到任何错误。我认为只有javascript因为某种原因不能工作。当我在移动视图中单击汉堡时，可折叠菜单不起作用。@RahulChatterjee请尝试第二种方法是完全安全的。