Meilleure façon d’inclure Bootstrap dans WordPress
Je viens d’un milieu Laravel et utiliser Bootstrap dans Laravel est relativement facile. Cependant, j’ai un projet sur lequel j’ai travaillé avec WordPress et j’utilise Bootstrap pour mes barres de navigation. Le problème est qu’ils gâchent mon en-tête sur la page. Le thème que j’utilise est Be Theme. C’est mon 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>
J’ai créé une page de modèle en utilisant ce code grâce à l’aide que j’ai reçue à la question précédente.
Comment utiliser bootstrap sans gâcher les thèmes WP et leurs en-têtes ?
EDIT : voici à quoi ressemble mon functions.php
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' );
}
Comment modifier cette fonction pour inclure Bootstrap ^ ? J’ai essayé par moi-même mais ça ne le rend pas.
Merci d’avance!
Solution n°1 trouvée
Que diriez-vous d’économiser une bande passante et éventuellement d’augmenter la vitesse de chargement d’une page en utilisant MaxCDN et NetDNA. Ajoutez ces deux fonctions à votre functions.php
function pwwp_enqueue_my_scripts() {
// jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
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' );
// this will add the stylesheet from it's default theme location if your theme doesn't already
//wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'pwwp_enqueue_my_styles');
Documents sources
Solution n°2 trouvée
Vous pouvez ajouter bootstrap dans WordPress en suivant la fonction dans functions.php
Vous pouvez modifier l’URL selon vos besoins si vous avez 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' );
0 commentaire