雲仙夢語
九天云外身自在,八荒宇内任逍遥

欢迎来到《真香,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 &copy;<?php echo date_i18n(_x‘Y’‘copyright date format’));?>

                        <a href=<?php echo esc_urlhome_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”>&#xe62b;</span>

                </a>

            </div>

这里我们把header的id设为common-top,这样点击这个锚链接的时候就会自动跳到首屏。

再让我们来看看CSS,这里利用postion:sticky巧妙地实现了这个按钮在首屏的隐藏:

            /* go top button */

            .scrolltop-wrap {

                box-sizingborder-box;

                positionabsolute;

                top10.2083vw;

                right0.4167vw;

                bottom0;

            }

            .go-top {

                width2.6042vw;

                height2.6042vw;

                font-size1.6667vw;

                text-decorationnone;

                background#DBB302;

                border-radius100%;

                colorwhite;

                justify-contentcenter;

                align-itemscenter;

                displayflex;

                cursorpointer;

                positionfixed;

                position: -webkit-sticky;

                positionsticky;

                top-5.2083vw;

                transformtranslateY(100vh);

                overflowhidden;

                animation: slide-up-fade-in ease 0.5s;

                animation-iteration-count1;

            }

看,我们完全不需要JS也实现了,是不是非常优雅呢?

顶部菜单展开

还记得吗,我们在做顶部菜单,对于展开功能并没有实现,而只是临时屏蔽了相关的DOM,现在我们就来实现菜单的展开。

首先把.sub-menu元素的visibility:hidden去掉,这样我们的多级菜单就全跑出来了:

这样可不行,我们需要调整为鼠标在一级菜单悬停时展示出来,这里主要利用li:hover来实现,最终实现效果如图:

这里也是直接用CSS完成,难度不大,主要是涉及到下拉菜单的显示和隐藏控制,看一下关键部位的CSS:

            .top-menus>nav>ul>li:hover>ul {

                displayflex;

            }

            .top-menus>nav>ul>li>.sub-menu {

                positionabsolute;

                left50%;

                transformtranslateX(-50%);

                displaynone;

                flex-directioncolumn;

                background#2A2A2A;

                z-index1;

                overflow:hidden;

            }

这里需要注意的是我们把菜单的z-index设为1,如果不设的话菜单可能会被同级元素遮挡。

这样我们的菜单展开部分也完成了。

小修复

也许你已经发现了,我们的侧边栏在主题自定义里看不到,会显示这样的字样:

这是怎么回事呢,其实我们少了wp_footer加载的官方js,但我们这是AMP主题呀,加载自定义js会破坏AMP格式,那怎么办呢?其实很简单:

        <?php

            if (is_customize_preview()) {

                wp_footer();

            }

        ?>

判断是否在主题预览里,如果是的话加载官方的wp_footer。

总结和预告

今天我们实现了公共底部,后期我们可以把这些公共组件统统抽离成独立的文件, 然后我们制作出了跳转到顶部的小按钮,还实现了顶部菜单的二级展开,顺便修复了一个小bug,有一定的难度,但只要细心研究,都可以解决。

明天我们将到达一个全新的领域——平板、手机适配,我们可以使用wordpress的自定义主题预览功能快速地看到我们调整后的效果,我们会运用媒体查询器控制页面元素,敬请期待吧。

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

one response

发表评论