杭州做网站：在WordPress for Mobile设备中创建响应式菜单

2019.08.16 mf_web

在响应式主题中，无论您是在大型屏幕设备（如笔记本电脑）还是小型设备（如手机或平板电脑）上看到，您都希望网站的某些部分看起来一致。但是，当用户以不同方式进行交互时，您网站的某些部分应根据屏幕大小而表现和感觉非常不同。

顶部或侧面菜单就是这样一个元素，您应该严格考虑在不同尺寸的不同设备上提供不同的体验。如果您的普通桌面大小的菜单很大，那么在移动设备上肯定会给人一种非常糟糕的感觉，也可能最终导致用户进行不必要的滚动。在本文中，我们将看到我们如何使用WordPress API和媒体查询在WordPress中提供不同的响应式菜单。

较小的屏幕上需要单独的菜单

屏幕上的房地产在移动设备上与在笔记本电脑上大不相同。您可能希望使用该房地产的每一部分向用户显示最重要的事物。当用户在更大的屏幕上查看您的站点时，这些约束会更轻一些。你有机会获得更多的东西。实际上强制要求没有相同的长菜单，这对于你的网站来说会有更大的显示。对于屏幕尺寸越来越大的设备，有两个单独的菜单是有意义的。您可能希望在移动设备屏幕上以不同的顺序显示菜单项，因为移动用户使用您的网站的方式与桌面上的用户不同。

StrictThemes

您应该检查您正在使用的分析工具中的用户行为，并尝试为移动用户重新排序菜单中的项目。您可能还有一些网站的页面仅适用于移动设备（可能是较小的图像等）。）。因此，当用户在移动设备上观看网站时，您可能希望链接到网站导航菜单中的这些移动设备特定页面。

您的WordPress主题应为您计划支持的不同类型的设备呈现不同的菜单。

创建子主题

为了尝试为您的WordPress主题设置不同的菜单，我们首先要创建一个二十世纪的子主题。要创建一个二十世纪的子主题，请创建一个文件夹wp-content \ themes \ twentytwelvechild，并在其中添加一个带有以下文本的style.css：

五

Theme Name: Twenty twelve child different responsive menu

Theme URI:

Description: Child to responsive menu in WordPress

Author: Abbas S for Designmodo

Template: twentytwelve

Version: 1.0

@import url("../twentytwelve/style.css");

在上面的代码中，您刚刚为您的主题指定了元数据，如名称版本等。模板字段指定是子主题，父主题是二十。然后我们只需在这个style.css中导入二十个样式的style.css，这样我们就可以得到父主题的所有样式。

添加style.css后，您将在管理部分中看到子主题，如下所示。你可以激活它。

WordPress的响应式菜单

注册移动菜单

创建子主题后，现在让我们开始添加一个单独的菜单，该菜单将用于移动网站。首先，使用以下代码创建名为functions.php的文件：

五

<?php

function twentytwelvechild_setup() {

register_nav_menu( 'primary-mobile', __( 'Primary Mobile Menu', 'twentytwelvechild' ) );

}

add_action( 'after_setup_theme', 'twentytwelvechild_setup' );

在上面的代码中，我们挂钩了WordPress的action_setup_theme并调用了一个函数twentytwelvechild_setup。主题初始化后，每次加载页面后调用操作挂钩after_setup_theme。您可以阅读有关after_setup_theme的更多详细信息。在函数twentytwelvechild_setup中，我们使用WordPress函数register_nav_menu注册一个名为“primary-mobile”的新自定义菜单。完成此操作后，您将能够在管理部分中看到自定义菜单。