您想在您的 WordPress 博客上創建一個響應式菜單嗎?
如今,移動用戶數量超過台式機用戶。 添加響應式移動菜單可使用戶更輕鬆地瀏覽您的網站。
在本教程中,我們將向您展示如何輕鬆地在WordPress上創建響應菜單。
但是之前,如果您從未安裝過WordPress發現 在WordPress上安裝多少個插件. et 如何找到,安裝和你的博客激活WordPress主題
然後回到為什麼我們在這裡。
在這裡,向您展示針對初學者的帶有插件的方法和針對高級用戶的編碼方法,這將是一個深入探討的問題。
第一種方法:使用WordPress插件創建移動菜單
這種方法比較容易,建議初學者使用,因為它不需要任何特殊的編碼技能。
在這種方法中,我們將創建一個菜單(帶有一個漢堡圖標)在移動屏幕上滑動。
您需要做的第一件事是安裝並激活 WordPress響應式菜單插件 。 有關詳細信息, 查看有關如何安裝WordPress插件的指南 .
激活插件後,插件將在菜單上添加一個名為“ 響應菜單 ”。 點擊它會帶你進入設置頁面 WordPress插件.
您必須首先輸入移動菜單應顯示的尺寸。 默認值為800px,適用於大多數網站。
之後,您必須選擇要在移動設備上使用的菜單。
屏幕上的最後一個選項允許您為菜單提供CSS類。 這將允許插件在小屏幕上隱藏您的無響應菜單。
不要忘記點擊« 更新選項 保存設置。
我們也建議您發現我們的 10 WordPress插件可在您的博客上創建菜單
現在,您可以訪問您的網站並調整瀏覽器屏幕的大小,以查看響應式菜單的作用。
插件« 響應菜單 »提供許多其他選項,使您可以修改響應菜單的行為和外觀。 您可以在插件的設置頁面上瀏覽這些選項,並根據需要進行調整。
2方法:如何手動添加移動菜單
在移動屏幕上顯示菜單的最常用方法之一是使用槓桿。
此方法要求您將自定義代碼添加到WordPress文件中。
在我們之前的教程之一中,我們向您展示 如何創建一個WordPress插件.
首先,您需要打開一個文本編輯器(如記事本)並粘貼此代碼。
(功能(){風險NAV =的document.getElementById(“與網站導航'),按鈕,菜單;如果(NAV){返回} ;!按鈕= nav.getElementsByTagName(”按鈕“)[0] =導航菜單。的getElementsByTagName('UL')[0]如果{返回;}(按鈕!)//隱藏按鈕如果菜單丟失或空if(|| menu.childNodes.length菜單!)= {button.style.display。 “無”;返回;} button.onclick =函數(){如果(-1 === menu.className.indexOf(NAV-菜單')){menu.className = NAV-菜單';}如果( - !== 1 button.className.indexOf('被切換')){button.className button.className.replace =('被切換',''); menu.className menu.className.replace =('切換-on','');} else {button.className + ='toggled-on'; menu.className + ='toggled-on';}};})(jQuery);
現在,您必須使用“ navigation.js 在你的桌子上。
接下來,您需要打開FTP客戶端,以將該文件下載到WordPress網站上的“ / wp-content / themes / your-theme / js /”位置。
替換錶達式“ 您的主題 » 帶有您的文件夾的名稱 WordPress主題 當前的。 如果你的主題目錄沒有 js 文件夾,那麼你需要創建一個。
上傳JavaScript文件後,下一步是確保您的WordPress網站將加載JavaScript文件。 您需要將以下代碼添加到“ 的functions.php “ 你的 WordPress主題.
發現其他東西 你怎麼用functions.php文件?
wp_enqueue_script('bpc_togglemenu'get_template_directory_uri()'/js/navigation.js',陣列('的jquery'),20160909',真);
現在我們需要在我們的中添加導航選單 WordPress主題。 通常導航選單會新增在“ header.php文件 您的WordPress主題。
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle">Menu</button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
我們假設您的 WordPress 主題定義的菜單位置稱為“ 主 ”。 否則,請使用您的 WordPress 主題定義的位置。
最後一步是添加一些CSS,以便我們的菜單在移動設備上查看時使用正確的CSS類進行切換。
/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
// CSS to use on mobile devices
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover,
.main-navigation li a:focus {
color: #000;
}
.main-navigation li {
margin: 0 40px 0 0;
margin: 0 2.857142857rem 0 0;
position: relative;
}
.main-navigation li ul {
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul,
.main-navigation .focus > ul {
border-left: 0;
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover,
.main-navigation li ul li a:focus {
background: #e3e3e3;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
}
.menu-toggle {
display: none;
}
}
現在,您可以訪問您的網站並調整瀏覽器屏幕的大小,以查看響應式菜單是否切換。
還發現一些高級WordPress插件
您可以使用其他 WordPress插件 賦予現代外觀並優化您的博客或網站的處理。
我們在這里為您提供了一些高級WordPress插件,它們將幫助您實現這一目標。
1。 UberMenu
UberMenu 是一個 WordPress插件 致力於創建高度可定制、響應迅速且用戶可訪問的 megamenu。 它在安裝後即可運行,無需任何特定配置。
它是一個易於使用的插件,但功能強大,足以創建高度可定制的創意超級菜單佈局。
您會發現:3個菜單模板,完全響應式佈局,與移動設備(iPhone,iPad,Android)的兼容性,觸摸支持等...
2。 LMM
Liquida Mega Menu 也稱為 LMM 是 WordPress插件 專為使用者和開發人員設計。 它具有簡單直覺的介面,整合到 WP 儀表板中,可讓您建立和自訂無限數量的大型選單,而無需任何程式設計技能。
它具有許多功能,無論是針對普通用戶還是高級用戶。 作為功能,它提供了其他功能:自動和手動集成, 支持多站點, 照顧孩子的主題、完全可定制的菜單樣式、可定制的菜單位置、粘性菜單等……
3。 8Degree Fly菜單
8Degree Fly Menu是一個高級WordPress插件,可讓您在網站上添加畫布菜單,以使其看起來突出並輕鬆地顯示您的信息。 它使用默認的WordPress菜單功能創建菜單。
您將能夠在默認菜單項中添加其他元素,例如圖標,菜單標語,偽分組標題和詳細說明。
還要讀: 10個WordPress插件可優化側邊欄和粘性標頭
它還提供了一個所見即所得的編輯器,以幫助您以一種用戶友好的方式掌握詳細的描述,也可以使用短代碼。
其他推薦資源
我們還邀請您參考以下資源,以進一步掌握和控製網站和博客。
- 如何在WordPress博客圖像重命名
- 如何在WordPress上創建一個浮動菜單
- 8 WordPress插件可在您的博客上創建megamenu
- 為您的博客創建現代菜單的一些技巧
- 6 WordPress插件用於管理博客上的類別和子類別
結論
所以 ! 這就是本教程的內容,我希望它能讓您為移動用戶創建一個菜單。 隨意地 與社交網絡上的朋友分享提示.
但是,您也可以諮詢我們的 RESSOURCES,如果您需要更多的元素來執行創建Internet網站的項目,請參考我們關於 WordPress博客創建。
但是,與此同時,請告訴我們您的 評論 和專用部分中的建議。
...
你好
感謝您的信息
我找不到「選單的 CSS 類別」。我找到了 css 樣式表,但我不知道要複製和貼上什麼
預先感謝您的幫助
週末結束
米歇爾
你好,
你有截圖嗎?