公共底部
今天我们来完成公共底部，这是个非常重要的区域，并且也是非常省心的区域（基本写好了之后就是全局共用的）。
这里我们分两块区域，一是底部菜单，一是版权等信息，首先我们建立好DOM结构：
<footer>
<div class="footer-container">
<div class="footer-menus">
<?php
wp_nav_menu(
array(
'container' => 'nav',
'theme_location' => 'footer',
)
);
?>
</div>
<div class="footer-copyright">
<p>
Copyright ©<?php echo date_i18n(_x( 'Y', 'copyright date format'));?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo bloginfo( 'name' ); ?></a>
. All Rights Reserved.
</p>
<p>
<a href="<?php echo esc_url( __( 'https://wordpress.org/') ); ?>"><?php _e( 'Powered by WordPress'); ?></a>
•
<a href="#">Theme FreeGeek</a>
</p>
</div>
</div>
</footer>
这里需要注意wp_nav_menu里指定theme_location的位置为footer，这样会展示后台菜单设置里属于footer的菜单。
我们加上CSS描述，这里的CSS比较简单，就不贴出来了，直接看效果：
回到顶部
我们来做一个回到顶部的小按钮，增强页面体验：
<div class="scrolltop-wrap">
<a class="go-top" href="#common-top">
<span class="iconfont"></span>
</a>
</div>
这里我们把header的id设为common-top，这样点击这个锚链接的时候就会自动跳到首屏。
再让我们来看看CSS，这里利用postion:sticky巧妙地实现了这个按钮在首屏的隐藏：
/* go top button */
.scrolltop-wrap {
box-sizing: border-box;
position: absolute;
top: 10.2083vw;
right: 0.4167vw;
bottom: 0;
}
.go-top {
width: 2.6042vw;
height: 2.6042vw;
font-size: 1.6667vw;
text-decoration: none;
background: #DBB302;
border-radius: 100%;
color: white;
justify-content: center;
align-items: center;
display: flex;
cursor: pointer;
position: fixed;
position: -webkit-sticky;
position: sticky;
top: -5.2083vw;
transform: translateY(100vh);
overflow: hidden;
animation: slide-up-fade-in ease 0.5s;
animation-iteration-count: 1;
}
看，我们完全不需要JS也实现了，是不是非常优雅呢？
顶部菜单展开
还记得吗，我们在做顶部菜单，对于展开功能并没有实现，而只是临时屏蔽了相关的DOM，现在我们就来实现菜单的展开。
首先把.sub-menu元素的visibility:hidden去掉，这样我们的多级菜单就全跑出来了：
这样可不行，我们需要调整为鼠标在一级菜单悬停时展示出来，这里主要利用li:hover来实现，最终实现效果如图：
这里也是直接用CSS完成，难度不大，主要是涉及到下拉菜单的显示和隐藏控制，看一下关键部位的CSS：
.top-menus>nav>ul>li:hover>ul {
display: flex;
}
.top-menus>nav>ul>li>.sub-menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: none;
flex-direction: column;
background: #2A2A2A;
z-index: 1;
overflow:hidden;
}
这里需要注意的是我们把菜单的z-index设为1，如果不设的话菜单可能会被同级元素遮挡。
这样我们的菜单展开部分也完成了。
小修复
也许你已经发现了，我们的侧边栏在主题自定义里看不到，会显示这样的字样：
这是怎么回事呢，其实我们少了wp_footer加载的官方js，但我们这是AMP主题呀，加载自定义js会破坏AMP格式，那怎么办呢？其实很简单：
<?php
if (is_customize_preview()) {
wp_footer();
}
?>
判断是否在主题预览里，如果是的话加载官方的wp_footer。
总结和预告
今天我们实现了公共底部，后期我们可以把这些公共组件统统抽离成独立的文件， 然后我们制作出了跳转到顶部的小按钮，还实现了顶部菜单的二级展开，顺便修复了一个小bug，有一定的难度，但只要细心研究，都可以解决。
明天我们将到达一个全新的领域——平板、手机适配，我们可以使用wordpress的自定义主题预览功能快速地看到我们调整后的效果，我们会运用媒体查询器控制页面元素，敬请期待吧。
如果你喜欢这个系列的文章，赶快关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。