Cea mai bună modalitate de a include Bootstrap în WordPress

Question

Cea mai bună modalitate de a include Bootstrap în WordPress

12 oct. 2017, 13:02:23

Vizualizări: 48.4K

Voturi: 10

Vin dintr-un background de Laravel unde utilizarea Bootstrap este relativ ușoară. Cu toate acestea, am un proiect la care lucrez cu WordPress și folosesc Bootstrap pentru barele de navigare. Problema este că acestea îmi strică header-ul paginii. Tema pe care o folosesc este Be Theme. Acesta este codul meu:

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

Am creat o pagină template folosind acest cod mulțumită ajutorului primit în întrebarea anterioară.

Cum pot folosi Bootstrap fără să stric temele WordPress și header-ele lor?

EDIT: așa arată functions.php-ul meu

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

    // Încarcă stylesheet-ul părinte
//  wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );     //nu avem nevoie de asta dacă este gol

    // Încarcă stylesheet-ul rtl părinte
    if ( is_rtl() ) {
        wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
    }

    // Încarcă stylesheet-ul copil
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' );

}

Cum editez această funcție pentru a include Bootstrap ^? Am încercat singur dar nu îl afișează.

Mulțumesc anticipat!

R1ddler

137

teme twitter bootstrap

Comentarii

Trebuie să încărci scripturile și stilurile în WordPress. Aș recomanda crearea unei teme personalizate/teme copil pentru scopul tău. Acest lucru te-ar putea ajuta

custom_scripts() { wp_enqueue_style( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'custom_scripts' );

Piyush Rawat

12 oct. 2017 13:07:23

Toate răspunsurile la întrebare

Comentarii

Trebuie să adaug asta în functions.php al temei sau al temei copil?

R1ddler

12 oct. 2017 13:10:51

Poți să adaugi în tema copil dacă ai.

Punitkumar Patel

12 oct. 2017 13:12:00

Am adăugat funcția de stil din functions.php în OP (fără Bootstrap)

R1ddler

12 oct. 2017 13:16:37

Am realizat că acest script este cel care îmi strica header-ul <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

R1ddler

12 oct. 2017 13:37:31

Ar trebui să adaugi // înaintea link-ului.

Punitkumar Patel

12 oct. 2017 13:39:58

Arată celelalte 5 comentarii

Cum ar fi să economisești lățime de bandă și posibil să îmbunătățești viteza de încărcare a paginii folosind MaxCDN și NetDNA. Adaugă aceste două funcții în fișierul tău functions.php

function pwwp_enqueue_my_scripts() {
    // jQuery este declarat ca dependință pentru bootstrap-js - va fi încărcat de WordPress înaintea scripturilor BS
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // toată bunătatea JavaScript a Bootstrap
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_scripts');

function pwwp_enqueue_my_styles() {
    wp_enqueue_style( 'bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    // aceasta va adăuga fișierul de stil din locația implicită a temei, dacă tema ta nu o face deja
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');

Documentația sursă

Alexius The Coder

31

1 ian. 2021 21:55:29

Punitkumar Patel 328 · Accepted Answer · 2017-10-12T13:07:04Z

Puteți adăuga Bootstrap în WordPress folosind următoarea funcție în functions.php

Puteți modifica URL-ul după necesități dacă aveți un CDN.

<?php 
/**
 * Încarcă scripturile și stilurile
 */
function your_theme_enqueue_scripts() {
    // toate stilurile
    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 );
    // toate scripturile
    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

328

12 oct. 2017 13:07:04