Bagaimana untuk mengintegrasikan bar navigasi Bootstrap ke dalam tema WordPress

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.

---

1. Gunakan rangka kerja Bootstrap untuk menulis bar navigasi

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”，代表站点导航。

---

2.将模型集成到模板中

此步骤假设您已安装 WordPress 并且您正在开发的主题已激活。

2.1。为菜单准备主题

打开您的 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');
?>

Header

– <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>

Penjenamaan

– Pautan dengan logo anda adalah pilihan dan anda boleh meninggalkannya di sini dan memasukkannya di tempat lain.

<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())
);
?>

Menu

– <ul> dengan kelas "nav navbar-nav" mewakili navigasi tapak.

2.

Sepadukan model ke dalam templat

Langkah 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.

---

rrreee

Daftar Bootstrap dan jQuery:

rrreee

Muat turun kelas wp-bootstrap-navwalker Edward McIntyre daripada GitHub. Letakkan fail ke dalam folder akar tema. Kembali ke

functions.php

anda dan tampal kod berikut:

rrreee

2.2. Buat menu di bahagian belakang

Navigasi ke bahagian belakang laman web WordPress anda Penampilan->Menu🎜. Buat menu baharu yang dipanggil "Utama" dan tambahkan item padanya. Pergi ke tab 🎜Urus Lokasi🎜 dan tetapkan menu "Utama" ke lokasi tema bernama "Utama". Simpan perubahan. 🎜 🎜 🎜🎜🎜 🎜Halaman pengurusan menu Wordpress🎜 🎜 🎜2.3. Integrasikan model bar navigasi ke dalam templat 🎜 🎜Buka 🎜header.php🎜 anda dan salin dan tampal mockup bar navigasi di tempat yang anda mahu ia dipaparkan. Sekarang mari kita gantikan sebahagian daripada model dengan fungsi templat WordPress. Mulakan dengan meletakkan pautan yang betul ke logo anda. Tukar baris ini: 🎜 rrreee 🎜Kepada: 🎜 rrreee 🎜Langkah seterusnya ialah mengeluarkan menu dari bahagian belakang dan bukannya menu model. Untuk baris ini: 🎜 rrreee 🎜 dengan: 🎜 rrreee 🎜Kini anda telah menyepadukan komponen Bar Navigasi Bootstrap ke dalam tema anda. 🎜 🎜 🎜Kesimpulan🎜 🎜Dalam tutorial ini, kami melihat cara menyepadukan bar navigasi yang dibuat menggunakan rangka kerja CSS Bootstrap ke dalam tema WordPress. Untuk mempercepatkan pembangunan tema, anda hanya boleh memuat turun fail sumber dan menampalnya ke dalam tema anda. 🎜 🎜Anda juga boleh menemui beberapa tema dan templat Bootstrap yang hebat di Envato Market, seperti Templat Pentadbir Neon Bootstrap atau Templat Boostrap E-Commerce Selphy Electronics. 🎜 🎜🎜🎜 🎜

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!