您是否曾想加快主題開發過程？我認為答案是“是”，并且您已經了解 Bootstrap 并在模型中使用它進行開發。愛掏網 - it200.com這就提出了一個問題：“如何將 Bootstrap 組件集成到 WordPress 主題中？”
本系列教程將介紹如何將最流行的 Bootstrap 組件集成到 WordPress 主題中。愛掏網 - it200.com讓我們從 Navbar 組件開始，它可以輕松創建響應式導航欄。愛掏網 - it200.com為了使本教程易于理解，我將使用一個僅包含徽標和菜單的導航欄。愛掏網 - it200.com
以下是 Bootstrap 文檔頁面的源代碼：
登錄后復制讓我們仔細看看代碼并澄清一些事情，以便更好地理解本教程的下一部分。愛掏網 - it200.com
登錄后復制包裝器 - 一個 標簽，其類為“navbar”，角色為“navigation”，包裝了導航欄的全部內容。愛掏網 - it200.com
…登錄后復制
標題 – 一個 切換按鈕 - 品牌 – 帶有徽標的鏈接；它是可選的，您可以在此處省略它并將其包含在其他地方。愛掏網 - it200.com 可折疊內容 - 具有“collapse”類和“navbar-collapse”類的 菜單 – 一個 此步驟假設您已安裝 WordPress 并且您正在開發的主題已激活。愛掏網 - it200.com 打開您的 functions.php 文件并注冊您的導航（如果尚未注冊）。愛掏網 - it200.com 注冊引導文件和 jQuery： 從 GitHub 下載 Edward McIntyre 的 導航到您的 WordPress 網站后端Appearance->Menu。愛掏網 - it200.com創建一個名為“Primary”的新菜單并向其中添加項目。愛掏網 - it200.com轉到管理位置選項卡，并為名為“主要”的主題位置指定菜單“主要”。愛掏網 - it200.com保存更改。愛掏網 - it200.com 打開您的 header.php 并將導航欄模型復制并粘貼到您希望其顯示的位置。愛掏網 - it200.com現在我們用 WordPress 的模板功能替換部分模型。愛掏網 - it200.com首先放置徽標的正確鏈接。愛掏網 - it200.com更改此行： 至： 下一步是從后端輸出菜單而不是模型菜單。愛掏網 - it200.com對于這些行： 與： 現在您已將引導導航欄組件集成到您的主題中。愛掏網 - it200.com 在本教程中，我們研究了如何將使用 Bootstrap CSS 框架創建的導航欄集成到 WordPress 主題中。愛掏網 - it200.com要加快主題開發速度，您只需下載源文件并將其粘貼到您的主題中即可。愛掏網 - it200.com 您還可以在 Envato Market 上找到一些很棒的 Bootstrap 主題和模板，例如 Neon Bootstrap 管理模板或 Selphy Electronics 電子商務 Boostrap 模板。愛掏網 - it200.com 以上就是如何將Bootstrap導航欄集成到WordPress主題中的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！ ，其類為“navbar-header”，在任何尺寸的屏幕上都可見。愛掏網 - it200.com
登錄后復制
，代表小屏幕上折疊的內容；此按鈕是必須的，但您可以更改其中的內容。愛掏網 - it200.comBrand
登錄后復制
登錄后復制
…
登錄后復制
；它包含應在小屏幕上折疊的所有內容。愛掏網 - it200.com
登錄后復制
2.1。愛掏網 - it200.com為菜單準備主題
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' );
登錄后復制
wp-bootstrap-navwalker 類。愛掏網 - it200.com將文件放入主題根文件夾中。愛掏網 - it200.com返回到您的 functions.php 并粘貼以下代碼：2.2。愛掏網 - it200.com在后端創建菜單
2.3。愛掏網 - it200.com將導航欄模型集成到模板中
Brand
登錄后復制
登錄后復制
登錄后復制
'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
登錄后復制
