WordPress外贸建站教程:为网站添加移动端底部菜单的2种最佳方法
很多中文WordPress主题都自带移动端底部导航菜单,但国外主题往往缺少这一功能。如果您正在进行WordPress外贸建站,可能会发现同行网站或模板都没有这个实用功能。本文将分享两种为WordPress网站添加移动端底部菜单的有效方法。
Many Chinese WordPress themes come with mobile bottom navigation menus, but foreign themes often lack this feature. If you're building a WordPress foreign trade website, you may notice competitors' sites or templates don't include this practical function. This article shares two effective methods to add mobile bottom menus.
方法一:使用插件 | Method 1: Using Plugins
WordPress最大的优势就是丰富的插件生态,添加移动端底部菜单非常简单:
The biggest advantage of WordPress is its rich plugin ecosystem, making it easy to add mobile bottom menus:
- WP Mobile Menu - 经典插件,功能稳定(可能需要通过百度搜索下载)
- WP Mobile Menu - Classic plugin with stable functions (may need to download via Baidu search)
- WP Bottom Menu - 可直接在插件中心安装,支持SVG和FontAwesome图标
- WP Bottom Menu - Can be installed directly from plugin center, supports SVG and FontAwesome icons
- Elementor - 强大的页面构建器,通过设置Bottom动作效果实现
- Elementor - Powerful page builder, achieved by setting Bottom action effect
方法二:使用代码 | Method 2: Using Code
不想使用插件?可以通过CSS和HTML代码实现:
Don't want to use plugins? Achieve it through CSS and HTML code:
/* CSS代码 | CSS Code */ .nav{ display:none; } @media only screen and (max-width:450px){ .site-info{ padding:15px 0 58px 0; } /* 更多样式代码... | More style code... */ }
将CSS代码添加到主题样式或使用WPCode插件管理,然后修改以下HTML代码中的链接和菜单名称:
Add CSS code to theme styles or manage with WPCode plugin, then modify links and menu names in the following HTML code:
<div class="nav"> <ul> <li><a href="your-url"><span class="font-text">Home</span></a></li> <!-- 更多菜单项... | More menu items... --> </ul> </div>
最后将HTML代码添加到网站footer部分即可完成移动端底部菜单的添加。
Finally add the HTML code to the website footer to complete the mobile bottom menu.
