Wollten Sie schon immer Ihren Theme-Entwicklungsprozess beschleunigen? Ich denke, die Antwort lautet „Ja“, und Sie kennen Bootstrap bereits und entwickeln es in Ihren Modellen. Da stellt sich die Frage: „Wie integriere ich Bootstrap-Komponenten in ein WordPress-Theme?“
Diese Tutorialreihe zeigt Ihnen, wie Sie die beliebtesten Bootstrap-Komponenten in Ihr WordPress-Theme integrieren. Beginnen wir mit der Navbar-Komponente, die es einfach macht, eine responsive Navigationsleiste zu erstellen. Damit dieses Tutorial leicht verständlich ist, verwende ich eine Navigationsleiste, die nur das Logo und das Menü enthält.
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<nav role="navigation">…</nav>
Wrapper – Ein -Tag mit der Klasse „navbar“ und der Rolle „navigation“, das den gesamten Inhalt der Navigationsleiste umschließt. <nav>
<div class="navbar-header">…</div>
Header – Ein mit der Klasse „navbar-header“, sichtbar auf jeder Bildschirmgröße. <div>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button>
Schaltfläche umschalten – stellt minimierten Inhalt auf kleinen Bildschirmen dar; diese Schaltfläche ist erforderlich, aber Sie können den darin enthaltenen Inhalt ändern. <button>
<a class="navbar-brand" href="#">Brand</a>
Marke – Ein Link mit Ihrem Logo; er ist optional und Sie können ihn hier weglassen und an anderer Stelle einfügen.
<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>
Zusammenklappbarer Inhalt - mit der Klasse „collapse“ und „navbar-collapse“ enthält alle Inhalte, die auf kleinen Bildschirmen minimiert werden sollen. <div>
<ul class="nav navbar-nav">…</ul>
Menü – Ein mit der Klasse „nav navbar-nav“, das die Site-Navigation darstellt. <ul>
2.1. Bereiten Sie ein Thema für Ihr Menü vor
functions.php und registrieren Sie Ihre Navigation, falls Sie dies noch nicht getan haben.
<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
?>
function wpt_register_js() {
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
-Klasse von GitHub herunter. Platzieren Sie die Datei im Theme-Stammordner. Gehen Sie zurück zu Ihrer wp-bootstrap-navwalkerfunctions.php und fügen Sie den folgenden Code ein:
<?php // Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
?>
Darstellung->Menü. Erstellen Sie ein neues Menü mit dem Namen „Primär“ und fügen Sie ihm Elemente hinzu. Gehen Sie zur Registerkarte Standorte verwalten und weisen Sie das Menü „Haupt“ dem Themenstandort mit dem Namen „Haupt“ zu. Änderungen speichern.
Wordpress-Menüverwaltungsseiteheader.php, kopieren Sie das Navigationsleistenmodell und fügen Sie es dort ein, wo es angezeigt werden soll. Ersetzen wir nun einen Teil des Modells durch die Template-Funktionalität von WordPress. Beginnen Sie damit, den richtigen Link zu Ihrem Logo zu platzieren. Ändern Sie diese Zeile:
<a class="navbar-brand" href="#">Brand</a>
<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>
<ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul>
<?php /* Primary navigation */ wp_nav_menu( array( 'menu' => 'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', //Process nav menu using our custom nav walker 'walker' => new wp_bootstrap_navwalker()) ); ?>
Auf Envato Market finden Sie auch einige tolle Bootstrap-Themen und -Vorlagen, wie zum Beispiel die Neon Bootstrap Admin-Vorlage oder die Selphy Electronics E-Commerce Boostrap-Vorlage.
Das obige ist der detaillierte Inhalt vonSo integrieren Sie die Bootstrap-Navigationsleiste in das WordPress-Theme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
