Cách tốt nhất để đưa Bootstrap vào Wordpress

Tôi đến từ nền tảng của Laravel và sử dụng Bootstrap trong Laravel tương đối dễ dàng. Tuy nhiên tôi có một dự án tôi đang thực hiện với Wordpress và tôi đang sử dụng Bootstrap cho các thanh điều hướng của mình. Vấn đề là, họ đang làm rối tiêu đề của tôi trên trang. Chủ đề tôi đang sử dụng là Be Theme. Đây là mã của tôi:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="tabbable">
<div class="panel panel-default">
<div class="panel-body">
    <ul class="nav nav-tabs nav-justified" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black; "></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color: black;"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#link" role="tab" style="color:black;"></a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="link" role="tabpanel" style="; color: black;">  


    <form action="" method="get" name="" style="color: black;" class="form-inline">
    <br>

    <br>


<input type="submit" name="submit" class="btn btn-default" style="background-color: red;">
</form>

<table>

</table>




    </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
  <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>

   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
   <div class="tab-pane " id="id" role="tabpanel" style=";">
  </div>
</div>

</div>
</div>
</div>
</div>
</body>
</html>

Tôi đã tạo một trang mẫu bằng mã này nhờ vào sự giúp đỡ tôi có trong câu hỏi trước .

Làm cách nào để sử dụng bootstrap mà không làm rối các chủ đề WP và tiêu đề của chúng?

EDIT: đây là cách các hàm.php của tôi trông như thế nào

add_action( 'wp_enqueue_scripts', 'mfnch_enqueue_styles', 101 );
function mfnch_enqueue_styles() {

    // Enqueue the parent stylesheet
//  wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );     //we don't need this if it's empty

    // Enqueue the parent rtl stylesheet
    if ( is_rtl() ) {
        wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
    }

    // Enqueue the child stylesheet
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' );

}

Làm cách nào để chỉnh sửa chức năng này để bao gồm Bootstrap ^? Tôi đã cố gắng một mình nhưng nó không làm cho nó.

Cảm ơn trước!

themes twitter-bootstrap

— Bánh lái
nguồn

Bạn phải enqueue script và phong cách trong wordpress. Tôi sẽ khuyên bạn nên tạo một chủ đề tùy chỉnh / con cho mục đích của bạn. Điều này có thể giúp bạn custom_scripts () {wp_enqueue_style ('bootstrap', ' maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css '); wp_enqueue_script ('bootstrap-js', ' maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js ', mảng ('jquery')); } add_action ('wp_enqueue_scripts', 'custom_scripts');

— Piyush Rawat

Bạn có thể thêm bootstrap trong WordPress bằng cách theo chức năng trong Hàm.php

Bạn có thể thay đổi url khi bạn cần nếu bạn có cdn.

<?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 );
    wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri() . '/css/style.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' );

— Punitkumar Patel
nguồn

Tôi có cần thêm cái này vào hàm.php của chủ đề hay chủ đề con không?

— R1ddler

Bạn có thể thêm vào chủ đề con nếu bạn có.

— Punitkumar Patel

Đã thêm chức năng kiểu

— hàm.php

Tôi đã nhận ra rằng chính tập lệnh này làm rối tung tiêu đề của tôi <script src = " ajax.googleapis.com/ajax/libs/jquery/3.2.1/. >

— R1ddler

// sẽ xác định trang tự động đến từ trang web an toàn hoặc không bảo mật. tức là http và https Nếu chúng ta viết trực tiếp: HTTP hoặc HTTPS thì sẽ tạo ra Trình chặn phân tích cú pháp, trang web chéo.

— Punitkumar Patel