Pernahkah anda ingin mempercepatkan proses pembangunan tema anda? Saya rasa jawapannya ialah "ya" dan anda sudah tahu Bootstrap dan membangunkan menggunakannya dalam mockup anda. Ini menimbulkan persoalan: “Bagaimana untuk mengintegrasikan komponen Bootstrap ke dalam tema WordPress?”
Siri tutorial ini akan menunjukkan kepada anda cara menyepadukan komponen Bootstrap yang paling popular ke dalam tema WordPress anda. Mari kita mulakan dengan komponen Navbar, yang memudahkan untuk membuat bar navigasi responsif. Untuk menjadikan tutorial ini mudah diikuti, saya akan menggunakan bar navigasi yang hanya mengandungi logo dan menu.
Berikut ialah kod sumber halaman dokumentasi Bootstrap:
<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>
Mari kita lihat lebih dekat pada kod dan jelaskan beberapa perkara untuk lebih memahami bahagian seterusnya tutorial ini.
<nav role="navigation">…</nav>
Wrapper - Teg <nav> dengan kelas "navbar" dan peranan "navigation" yang membungkus keseluruhan kandungan bar navigasi. <nav> 标签，其类为“navbar”，角色为“navigation”，包装了导航栏的全部内容。
<div class="navbar-header">…</div>
标题 – 一个 <div> ，其类为“navbar-header”，在任何尺寸的屏幕上都可见。
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button>
切换按钮 - <button>，代表小屏幕上折叠的内容；此按钮是必须的，但您可以更改其中的内容。
<a class="navbar-brand" href="#">Brand</a>
品牌 – 带有徽标的链接；它是可选的，您可以在此处省略它并将其包含在其他地方。
<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>
可折叠内容 - 具有“collapse”类和“navbar-collapse”类的 <div>；它包含应在小屏幕上折叠的所有内容。
<ul class="nav navbar-nav">…</ul>
菜单 – 一个 <ul> ，其类为“nav navbar-nav”，代表站点导航。
此步骤假设您已安装 WordPress 并且您正在开发的主题已激活。
打开您的 functions.php 文件并注册您的导航（如果尚未注册）。
<?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;
?>
注册引导文件和 jQuery：
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' );
从 GitHub 下载 Edward McIntyre 的 wp-bootstrap-navwalker
<?php // Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
?>
<div> dengan kelas "navbar-header", boleh dilihat pada sebarang saiz skrin. <a class="navbar-brand" href="#">Brand</a>
Togol Button - <button>, mewakili kandungan yang diruntuhkan pada skrin kecil diperlukan, tetapi anda boleh menukar kandungannya.
<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>
Kandungan Boleh Dilipat
- <div> dengan kelas "collapse" dan "navbar-collapse"; ia mengandungi semua kandungan yang harus diruntuhkan pada skrin kecil. <?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()) ); ?>
<ul> dengan kelas "nav navbar-nav" mewakili navigasi tapak. 2.
Sepadukan model ke dalam templatLangkah ini menganggap bahawa anda telah memasang WordPress dan tema yang anda bangunkan diaktifkan.
2.1. Sediakan tema untuk menu anda
Buka fail
functions.php
anda dan daftarkan navigasi anda jika anda belum melakukannya.Muat turun kelas wp-bootstrap-navwalker Edward McIntyre daripada GitHub. Letakkan fail ke dalam folder akar tema. Kembali ke
anda dan tampal kod berikut:
rrreee2.2. Buat menu di bahagian belakang 
Atas ialah kandungan terperinci Bagaimana untuk mengintegrasikan bar navigasi Bootstrap ke dalam tema WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
wordpress seo
Bagaimana untuk memasang wordpress selepas memuat turunnya
Pengenalan kepada penggunaan kod keseluruhan vbs
Apakah perbezaan antara nombor versi Eclipse?
langkah perlindungan keselamatan pelayan cdn
Bagaimana untuk membuat asal selepas gitcommit
projek microsoft
Alat pengesan cakera keras yang disyorkan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
