欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是花上30天的时间闭关修炼，建立一套全新的wordpress主题，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. html/css/js基础
2. php基础
3. 如何使用wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
公共底部
今天我们来完成公共底部，这是个非常重要的区域，并且也是非常省心的区域（基本写好了之后就是全局共用的）。
这里我们分两块区域，一是底部菜单，一是版权等信息，首先我们建立好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的自定义主题预览功能快速地看到我们调整后的效果，我们会运用媒体查询器控制页面元素，敬请期待吧。
如果你喜欢这个系列的文章，赶快关注我们（数字江湖异志录）吧，不要错过后续的更多干货噢。
