Miglior modo per includere Bootstrap in WordPress

Question

Miglior modo per includere Bootstrap in WordPress

12 ott 2017, 13:02:23

Visualizzazioni: 48.4K

Voti: 10

Provengo da un background Laravel dove l'utilizzo di Bootstrap è relativamente semplice. Tuttavia, ho un progetto su WordPress in cui sto usando Bootstrap per le barre di navigazione. Il problema è che stanno interferendo con l'header della pagina. Il tema che sto utilizzando è Be Theme. Questo è il mio codice:

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

Ho creato una pagina template usando questo codice grazie all'aiuto ricevuto nella domanda precedente.

Come posso utilizzare Bootstrap senza interferire con i temi WordPress e i loro header?

MODIFICA: ecco come appare il mio functions.php

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

    // Carica il foglio di stile del tema padre
//  wp_enqueue_style( 'parent-style', get_template_directory_uri() .'/style.css' );     //non ne abbiamo bisogno se è vuoto

    // Carica il foglio di stile rtl del tema padre
    if ( is_rtl() ) {
        wp_enqueue_style( 'mfn-rtl', get_template_directory_uri() . '/rtl.css' );
    }

    // Carica il foglio di stile del tema figlio
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri() .'/style.css' );

}

Come posso modificare questa funzione per includere Bootstrap? Ho provato da solo ma non viene renderizzato.

Grazie in anticipo!

R1ddler

137

temi twitter bootstrap

Commenti

Devi accodare script e stili in WordPress. Ti consiglio di creare un tema personalizzato/child per il tuo scopo. Questo potrebbe aiutarti

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 ott 2017 13:07:23

Tutte le risposte alla domanda

Commenti

Devo aggiungere questo al functions.php del tema o del tema figlio?

R1ddler

12 ott 2017 13:10:51

Puoi aggiungerlo al tema figlio se ne hai uno.

Punitkumar Patel

12 ott 2017 13:12:00

Ho aggiunto la mia funzione di stile in functions.php nell'OP (senza Bootstrap)

R1ddler

12 ott 2017 13:16:37

Mi sono reso conto che è questo script che manda in tilt il mio header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

R1ddler

12 ott 2017 13:37:31

Dovresti aggiungere // prima del link.

Punitkumar Patel

12 ott 2017 13:39:58

Mostra i restanti 5 commenti

Che ne dici di risparmiare banda e possibilmente aumentare la velocità di caricamento della pagina utilizzando MaxCDN e NetDNA. Aggiungi queste due funzioni al tuo functions.php

function pwwp_enqueue_my_scripts() {
    // jQuery è dichiarato come dipendenza di bootstrap-js - verrà caricato da WordPress prima degli script BS
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // tutta la bontà del javascript di 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' );

    // questo aggiungerà il foglio di stile dalla sua posizione predefinita nel tema se il tuo tema non lo fa già
    //wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');

Documentazione sorgente

Alexius The Coder

31

1 gen 2021 21:55:29

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

Puoi aggiungere Bootstrap in WordPress utilizzando la seguente funzione nel file functions.php

Puoi modificare l'URL come preferisci se disponi di un CDN.

<?php 
/**
 * Aggiungi script e stili
 */
function your_theme_enqueue_scripts() {
    // tutti gli stili
    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 );
    // tutti gli script
    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 ott 2017 13:07:04