如何将footer标签固定在底部_真香，30天做一套wordpress主题（第7天）：公共底部...

欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是花上30天的时间闭关修炼，建立一套全新的wordpress主题，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们(数字江湖异志录)，从该系列的第一篇开始阅读。

我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~

这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：

1. HTML/CSS/JS基础

2. PHP基础

3. 如何使用Wordpress

4. 如何搭建web环境

如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。

公共底部

今天我们来完成公共底部，这是个非常重要的区域，并且也是非常省心的区域(基本写好了之后就是全局共用的)。

这里我们分两块区域，一是底部菜单，一是版权等信息，首先我们建立好DOM结构：

                

                    <?php                         wp_nav_menu(                            array(                                'container'  => 'nav',                                'theme_location' => 'footer',                            )                        );                    ?>                

                

                    

                        Copyright ©<?php  echo date_i18n(_x( 'Y', 'copyright date format'));?>                         "><?php  echo bloginfo( 'name' ); ?>                             . All Rights Reserved.                    

                    

                        "><?php  _e( 'Powered by WordPress'); ?>                          •                         Theme FreeGeek                    

                

            

        

这里需要注意wp_nav_menu里指定theme_location的位置为footer，这样会展示后台菜单设置里属于footer的菜单。

我们加上CSS描述，这里的CSS比较简单，就不贴出来了，直接看效果：

回到顶部

我们来做一个回到顶部的小按钮，增强页面体验：

                                                                

这里我们把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的自定义主题预览功能快速地看到我们调整后的效果，我们会运用媒体查询器控制页面元素，敬请期待吧。

如果你喜欢这个系列的文章，赶快关注我们(数字江湖异志录)吧，不要错过后续的更多干货噢。