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

2019.08.16 mf_web

60

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

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

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

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

StrictThemes

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

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

创建子主题

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

1
2
3
4
6
7
8
9
/*
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的文件:

1
2
3
4
<?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”的新自定义菜单。完成此操作后,您将能够在管理部分中看到自定义菜单。

菜单

由于这是主标题菜单,您必须添加代码以显示header.php中的特定菜单。从基本主题创建header.php的精确副本(在这种情况下,它是二十二),并添加以下行以显示主要移动菜单。

1
<?php wp_nav_menu( array( 'theme_location' => 'primary-mobile', 'menu_class' => 'nav-menu-mobile' ) ); ?>

现在转到菜单管理员并创建一个新的移动菜单,并添加要在移动菜单上显示的特定链接,并将其附加到主要移动菜单主题位置。

菜单结构

如果现在一切都已消失,您应该会看到网站上的菜单 - 主菜单和主要移动菜单。

菜单风格

设置移动菜单的样式

我们不希望两个菜单都显示出来。我们希望移动设备仅显示在移动设备上,而普通菜单则显示在更大的屏幕上。我们将使用css媒体查询实现此目的。首先,默认情况下不显示移动菜单。将以下代码添加到style.css:

1
2
3
.nav-menu-mobile {
        display: none;
}

现在,当在移动屏幕上看到该网站时,我们想要隐藏主菜单并显示主要移动菜单。我们可能还需要一些其他样式,如边框等,以突出显示移动设备上的菜单项。为此,请将以下代码添加到style.css中:

1
2
3
4
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
/* Mobiles in Potrait mode */
@media only screen
and (max-width : 320px) {
    .nav-menu-mobile {
        display: block;
 
    }
 
    .nav-menu-mobile a{
        border: solid;
        padding: 5px;
    }
    .nav-menu {
        display:none;
    }
 
}
 
/* Mobiles in landscape mode */
@media only screen
and (min-width : 321px)
and (max-width : 480px) {
 
    .nav-menu-mobile {
        display: block;
 
    }
 
    .nav-menu-mobile a{
        border: solid;
        padding: 5px;
    }
    .nav-menu {
        display:none;
    }
 
}

在上面的代码中,当屏幕尺寸较小并隐藏主菜单时,我们显示了移动菜单。仅当屏幕大小与我们指定的大小匹配时,媒体查询标签才会启动。您可以在菜单上添加任何其他样式。现在,如果您在较小的屏幕上看到您的网站,您应该只能看到如下所示的移动菜单。您现在已为WordPress网站添加了响应式菜单。

响应WP

结论

顶部和侧面菜单是您网站的重要元素。您的移动用户在导航时不应感到沮丧。菜单应该易于访问,并且应该具有适当的内容,即使从移动用户的角度来看也是如此。

在本文中,您了解了我们如何使用媒体查询和一些WordPress API为移动用户实现不同的响应式菜单。创建这样的菜单后,管理员可以轻松地从管理部分更新菜单。您可以轻松更改页面或菜单项的顺序,而不会实际影响将在较大屏幕上显示的菜单。

杭州做网站

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP