如何創建適用於移動設備的響應式WordPress菜單


您是否要創建可移動的響應式WordPress菜單? 在許多網站上,移動用戶已經超過了台式機用戶。 添加移動響應菜單使用戶更容易瀏覽您的網站。 在本文中,我們將向您展示如何輕鬆創建支持移動設備的WordPress菜單。

創建響應移動設備的WordPress菜單

這是一個深入的教程。 我們將為初學者展示插件方法(無編碼),並為更高級的用戶展示編碼方法。

在本教程結束時,您將學習如何創建幻燈片式移動菜單,下拉式移動菜單和切換式移動菜單。

準備? 讓我們開始吧。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

方法1:使用插件在WordPress中添加響應菜單

這種方法比較簡單,建議初學者使用,因為它不需要自定義編碼。

通過這種方法,我們將創建一個在移動屏幕上滑出的漢堡菜單。

響應式菜單插件演示

您需要做的第一件事是安裝並激活響應菜單插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,插件將在您的WordPress管理欄中添加一個名為“響應菜單”的新菜單項。 單擊它會將您帶到插件的設置頁面。

響應式菜單設置

首先,您需要輸入屏幕的寬度,此時插件將開始顯示響應菜單。 默認值為800px,適用於大多數網站。

之後,您需要選擇您想要用於響應式菜單的菜單。 如果您尚未創建菜單,則可以通過訪問以下菜單來創建菜單 外觀»菜單。 有關詳細說明,請參見有關如何在WordPress中添加導航菜單的指南。

屏幕上的最後一個選項是為當前的非響應菜單提供CSS類。 這將允許插件在較小的屏幕上隱藏您的無響應菜單。

別忘了點擊 “更新選項” 按鈕來存儲您的設置。

現在,您可以訪問您的網站並調整瀏覽器屏幕的大小,以查看響應式菜單的作用。

響應式菜單插件演示

響應式菜單插件帶有許多其他選項,使您可以更改響應式菜單的行為和外觀。 您可以在插件的設置頁面上瀏覽這些選項,並根據需要進行調整。

方法2:使用插件添加下拉選擇菜單

添加響應式菜單的另一種方法是添加下拉選擇菜單。 此方法不需要任何編碼技能,因此建議初學者使用。

響應式選擇菜單

您需要做的第一件事是安裝並激活“響應式選擇菜單”插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 外觀»響應式選擇 配置插件設置。

選擇菜單設置

您需要向下滾動到“激活主題位置”部分。 默認情況下,該插件在所有主題位置均處於激活狀態。 您可以通過有選擇地為特定主題位置打開它來更改它。

不要忘記單擊“保存所有設置”按鈕來存儲您的更改。

現在,您可以訪問您的網站並調整瀏覽器屏幕的大小,以查看正在響應的選擇菜單。

方法3:創建具有切換效果的移動友好響應菜單

在移動屏幕上顯示菜單的最常用方法之一是使用切換效果。

此方法要求您將自定義代碼添加到WordPress文件中。 如果您以前沒有做過,請查看我們的有關在WordPress中從網絡粘貼代碼片段的指南。

首先,您需要打開一個文本編輯器(如記事本)並粘貼此代碼。

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className="nav-menu";
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

現在您需要將此文件另存為 navigation.js 在您的桌面上。

接下來,您需要打開FTP客戶端以將此文件上傳到 /wp-content/themes/your-theme-dir/js/ WordPress網站上的文件夾。

將您的主題目錄替換為當前主題的目錄。 如果您的主題目錄沒有js文件夾,則需要創建它。

上傳JavaScript文件後,下一步是確保您的WordPress網站加載了此JavaScript。 您將需要在主題的functions.php文件中添加以下代碼。

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

現在,我們需要將導航菜單添加到我們的WordPress主題中。 通常,導航菜單會添加到主題的 header.php 文件。



我們假設您的主題定義的主題位置稱為主要位置。 如果不是,請使用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主題,您可能需要調整CSS。 使用檢查元素工具來找出與主題衝突的CSS。

方法4:在WordPress中添加一個滑入式移動菜單

添加移動菜單的另一種常用技術是使用滑入式面板菜單(如方法1所示)。

方法4要求您將代碼添加到WordPress主題文件中,但這只是實現方法1相同結果的另一種方法。

首先,您需要打開一個純文本編輯器(如記事本),並將以下代碼添加到空白文本文件中。

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('關');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('“關閉"');  });  });  })(jQuery);

不要忘記用您自己的域名替換example.com和 your-theme 與您的實際主題目錄。 將此文件另存為 slidepanel.js 到您的桌面。

現在,您將需要用作菜單圖標的圖像。 漢堡包圖標最常用作菜單圖標。 您將在不同的網站上找到大量此類圖像。 我們將使用Google Material Icons庫中的菜單圖標。

找到要使用的圖像後,將其另存為 menu.png

接下來,您需要打開一個FTP客戶端客戶端並上傳 slidepanel.js 歸檔到 /wp-content/your-theme/js/ 夾。

如果您的主題目錄沒有JS文件夾,那麼您需要創建tit,然後上傳文件。

之後,您需要將menu.png文件上傳到 /wp-content/themes/your-theme/images/ 夾。

文件上傳後,我們需要確保您的主題加載了剛添加的JavaScript文件。 我們將通過排隊JavaScript文件來實現此目的。

將此代碼添加到主題的functions.php文件中。

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

現在,我們需要在主題的header.php文件中添加實際代碼,以顯示導航菜單。 您應該查找類似於以下代碼:

 'primary', 'menu_class' => 'nav-menu' ) ); ?>

您想用HTML代碼包裝現有的導航菜單,以在較小的屏幕上顯示幻燈片面板菜單。

節目
'primary', 'menu_class' => 'nav-menu' ) ); ?>

請注意,主題的導航菜單仍然存在。 我們只是將其包裝在觸發觸發麵板菜單的HTML周圍。

最後一步是添加CSS以在較大的屏幕上隱藏菜單圖像圖標。 您還需要調整菜單圖標的位置。

這是一個示例CSS,您可以將其用作起點:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

根據您的WordPress主題,您可能需要調整CSS以避免衝突。

這是在我們的演示網站上的外觀:

WordPress中的響應式滑動菜單

我們希望本文能幫助您學習如何創建可用於移動設備的響應式WordPress菜單。 您可能還想看一下我們如何在WordPress中添加全屏響應式菜單的指南

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。