Der beste Weg, um Bootstrap in Wordpress aufzunehmen

8

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!

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

Antworten:

8

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.
1
// 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