欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是（没有蛀牙！）建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. html/css/js基础
2. php基础
3. 如何使用wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
公共顶部
首先我们对顶部区域进行一下规划，我们简单地将其分为3块区域：
1. 博客标题区域
2. 标语区域（包含主标语与副标语）
3. 菜单区域
然后根据区域划分我们把html dom结构建立好：
<div class="top-container"> <div class="title-menus-area"> <div class="blog-title"> <?php echo get_theme_mod('blog_title') ?> </div> <div class="top-menus"> this is menu area </div> </div> <div class="tagline"> <div class="tagline-main"> <?php echo get_theme_mod('main_tagline', 'free the internet') ?> </div> <div class="tagline-split"></div> <div class="tagline-sub"> <?php echo get_theme_mod('sub_tagline', 'across the great wall we can reach every corner in the world') ?> </div> </div> </div>
ok，接下来是css样式，还记得吗？我们要全局应用flex布局，再加上vw视口单位，现在我们来试试看 ：
header { width: 100vw; height: 14.5833vw; background: #222222; display: flex; justify-content: center; } .top-container { width: 62.5vw; height: 100%; } .title-menus-area { display: flex; width: 100%; height: 5.0833vw; justify-content: space-between; } .blog-title { display: flex; font-size: 1.4583vw; font-weight: bold; color: white; margin-top: 1.125vw; } .tagline { display: flex; width: 100%; flex-direction: column; align-items: center; } .tagline-main { color: white; font-size: 2.5625vw; margin-bottom: 1.4583vw; line-height: 2.5625vw; } .tagline-split { background: #f6f8fa; width: 4.1667vw; height: 0.2083vw; margin-bottom: 1.7708vw; } .tagline-sub { display: flex; color: #8a8a8a; font-size: 0.8333vw; line-height: 1.4583vw; }
看起来就像是这样：
很酷，不是吗？这时候细心的人会问，后台关于menus的配置在后台里找不到呀，这是因为没有在functions.php里注册menus配置：
function my_menus() { $locations = array( 'primary' => __( 'desktop horizontal menu'), 'expanded' => __( 'desktop expanded menu'), 'mobile' => __( 'mobile menu'), 'footer' => __( 'footer menu'), 'social' => __( 'social menu'), ); register_nav_menus( $locations );}add_action( 'init', 'my_menus' );
我们的菜单设置回来了，现在我们来把菜单填上：
<div class="top-menus"> <?php wp_nav_menu( array( 'container' => 'nav', 'theme_location' => 'primary', ) ); ?> </div>
这样菜单就全显示出来了：
我们先从后台删掉一些菜单，然后把样式加上：
/* 顶部菜单 */ .top-menus { display: flex; padding-right: 1.5417vw; padding-top: 1.3854vw; height: 0.8333vw; } .top-menus li { display: flex; list-style: none; margin-right: 2.0938vw; } .top-menus li:first-child{ margin-right: 3.151vw; } .top-menus li:last-child{ margin-right: 0; } .top-menus a{ color: white; font-size: 0.8333vw; line-height: 0.8333vw; text-decoration: none; } .top-menus .menu { display: flex; margin: 0; padding: 0; white-space: nowrap; list-style: none; } /* 先把二级菜单屏蔽起来 */ .top-menus .sub-menu{ background-color: transparent; position: absolute; margin-top:2vw; visibility: hidden; opacity: 0; display: flex; flex-direction: column; }
最后就是这样的效果了：
看起来不错，对吗？不过我们目前没有处理菜单的展开和移动端下的菜单样式，这些我们之后会一一完善。
总结和预告
今天，我们完成了首页通用顶部区域，通过css我们可以对dom结构做到绝对的控制和美化，我们还为之后的顶部菜单展开和移动端菜单样式预留了空间。
明天，我们将继续往下制作页面的文章列表区域，还记得吗？我们之前的设定是双栏结构，除了主内容区域以外，还有一个右侧边栏（后期我们可以随意在右侧边栏和左侧边栏之间进行切换），明天我们将把这些结构统统建好。
如果你喜欢这个系列的文章，赶快关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。
