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!
themes
twitter-bootstrap
Kleinkind
quelle
quelle
Antworten:
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.
quelle