Der beste Weg, um Bootstrap in Wordpress aufzunehmen

Ich komme aus einem Laravel-Hintergrund und die Verwendung von Bootstrap in Laravel ist relativ einfach. Ich habe jedoch ein Projekt, an dem ich mit Wordpress gearbeitet habe, und ich verwende Bootstrap für meine Navigationsleisten. Das Problem ist, dass sie meinen Header auf der Seite durcheinander bringen. Das Thema, das ich benutze, ist Be Theme. Das ist mein Code:

<!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>

Ich habe dank der Hilfe, die ich in der vorherigen Frage erhalten habe, eine Vorlagenseite mit diesem Code erstellt .

Wie verwende ich Bootstrap, ohne die WP-Themen und ihre Header durcheinander zu bringen?

EDIT: So sieht meine functions.php aus

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' );

}

Wie bearbeite ich diese Funktion, um Bootstrap ^ einzuschließen? Ich habe es selbst versucht, aber es rendert es nicht.

Danke im Voraus!

themes twitter-bootstrap

— Kleinkind
quelle

Sie müssen Skripte und Stile in WordPress in die Warteschlange stellen. Ich würde empfehlen, ein benutzerdefiniertes / untergeordnetes Thema für Ihren Zweck zu erstellen. Dies könnte Ihnen helfen, 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 ', Array ('jquery')); } add_action ('wp_enqueue_scripts', 'custom_scripts');

— Piyush Rawat

Sie können Bootstrap in WordPress hinzufügen, indem Sie der Funktion in functions.php folgen

Sie können die URL nach Bedarf ändern, wenn Sie eine CDN haben.

<?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
quelle

Muss ich dies zu functions.php des Themas oder des untergeordneten Themas hinzufügen?

— R1ddler

Sie können ein untergeordnetes Thema hinzufügen, wenn Sie haben.

— Punitkumar Patel

Hinzugefügt meine functions.php

— Stilfunktion

Ich habe festgestellt, dass es dieses Skript ist, das meinen Header durcheinander

— bringt.

// erkennt, dass die automatische Seite von einer sicheren oder nicht sicheren Webseite stammt. dh http und https Wenn wir direkt schreiben: HTTP oder HTTPS, wird eine parserübergreifende Parser-Blockierung erstellt.

— Punitkumar Patel