Je viens d'un contexte Laravel et utiliser Bootstrap dans Laravel est relativement facile. Cependant, j'ai un projet sur lequel je travaille avec Wordpress et j'utilise Bootstrap pour mes barres de navigation. Le problème est que, ils bousillent mon en-tête sur la page. Le thème que j'utilise est Be Theme. Ceci 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 obtenue dans 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 éditer cette fonction pour inclure Bootstrap ^? J'ai essayé moi-même mais ça ne le rend pas.
Merci d'avance!
Vous pouvez ajouter un bootstrap dans WordPress en suivant la fonction dans functions.php
Vous pouvez changer 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' );