Rumah > Artikel > Tutorial CMS > Bagaimana untuk mengintegrasikan bar navigasi Bootstrap ke dalam tema WordPress

Bagaimana untuk mengintegrasikan bar navigasi Bootstrap ke dalam tema WordPress

王林asal: 2023-09-06 09:05:171481semak imbas

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></nav> dengan kelas "navbar" dan peranan "navigation" yang membungkus keseluruhan kandungan bar navigasi. <nav></nav> 标签，其类为“navbar”，角色为“navigation”，包装了导航栏的全部内容。

<div class="navbar-header">…</div>

标题 – 一个 <div> ，其类为“navbar-header”，在任何尺寸的屏幕上都可见。 <pre class="brush:php;toolbal:false;"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">…</button> </pre> <p><em>切换按钮</em> - <code><button></button>，代表小屏幕上折叠的内容；此按钮是必须的，但您可以更改其中的内容。

<a class="navbar-brand" href="#">Brand</a>

品牌 – 带有徽标的链接；它是可选的，您可以在此处省略它并将其包含在其他地方。

<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>

可折叠内容 - 具有“collapse”类和“navbar-collapse”类的 <div>；它包含应在小屏幕上折叠的所有内容。 <pre class="brush:php;toolbal:false;"><ul class="nav navbar-nav">…</ul> </pre> <p><em>菜单</em> – 一个 <code><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. <h3>
<pre class="brush:php;toolbal:false;">&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;
</pre>
</h3>
<p>Togol Button<strong> - <code><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.

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!

Bagaimana untuk mengintegrasikan bar navigasi Bootstrap ke dalam tema WordPress

1. Gunakan rangka kerja Bootstrap untuk menulis bar navigasi

2.将模型集成到模板中

2.1。为菜单准备主题

Daftar Bootstrap dan jQuery:

Artikel berkaitan