如何將Bootstrap導航欄集成到WordPress主題中

…

菜單 – 一個

此步驟假設您已安裝 WordPress 并且您正在開發的主題已激活。愛掏網 - it200.com

2.1。愛掏網 - it200.com為菜單準備主題

打開您的 functions.php 文件并注冊您的導航（如果尚未注冊）。愛掏網 - it200.com

注冊引導文件和 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 類。愛掏網 - it200.com將文件放入主題根文件夾中。愛掏網 - it200.com返回到您的 functions.php 并粘貼以下代碼：

2.2。愛掏網 - it200.com在后端創建菜單

導航到您的 WordPress 網站后端Appearance->Menu。愛掏網 - it200.com創建一個名為“Primary”的新菜單并向其中添加項目。愛掏網 - it200.com轉到管理位置選項卡，并為名為“主要”的主題位置指定菜單“主要”。愛掏網 - it200.com保存更改。愛掏網 - it200.com

2.3。愛掏網 - it200.com將導航欄模型集成到模板中

打開您的 header.php 并將導航欄模型復制并粘貼到您希望其顯示的位置。愛掏網 - it200.com現在我們用 WordPress 的模板功能替換部分模型。愛掏網 - it200.com首先放置徽標的正確鏈接。愛掏網 - it200.com更改此行：

Brand

至：

下一步是從后端輸出菜單而不是模型菜單。愛掏網 - it200.com對于這些行：

• Link
• Link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
  • One more separated link

與：

 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())
);
?>

現在您已將引導導航欄組件集成到您的主題中。愛掏網 - it200.com

在本教程中，我們研究了如何將使用 Bootstrap CSS 框架創建的導航欄集成到 WordPress 主題中。愛掏網 - it200.com要加快主題開發速度，您只需下載源文件并將其粘貼到您的主題中即可。愛掏網 - it200.com

您還可以在 Envato Market 上找到一些很棒的 Bootstrap 主題和模板，例如 Neon Bootstrap 管理模板或 Selphy Electronics 電子商務 Boostrap 模板。愛掏網 - it200.com

以上就是如何將Bootstrap導航欄集成到WordPress主題中的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！

• 上一篇：如何開發一個自動生成留言板的WordPress插件
• 下一篇：如何為WordPress插件添加微信小程序功能