真香，30天做一套wordpress主题（第7天）：公共底部

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

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

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

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

WordPress判断置顶文章函数：is_sticky

WordPress函数is_sticky用于判断当前文章是否置顶，在WordPress主题的制作中，可以通过判断文章是否置顶以应用不同的样式，例如加一个推荐的标签。

is_sticky(int $post_ID)

函数参数

$post_ID

整数，默认为空

文章的ID

函数使用示例

以下示例判断ID为66的文章是否设置了置顶：

if ( is_sticky(66) ) {     // 文章已置顶} else {     // 文章没有置顶}

扩展阅读

is_sticky()函数位于：wp-includes/post.php

相关函数：

• is_page()
• is_singular()