Free the Internet
Across the Great Wall we can reach every corner in the world

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

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

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

  1. HTML/CSS/JS基础
  2. PHP基础
  3. 如何使用Wordpress
  4. 如何搭建web环境

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

公共顶部

首先我们对顶部区域进行一下规划,我们简单地将其分为3块区域:

  1. 博客标题区域
  2. 标语区域(包含主标语与副标语)
  3. 菜单区域

然后根据区域划分我们把HTML DOM结构建立好:

            <div class=“top-container”>

                <div class=“title-menus-area”>

                    <div class=“blog-title”>

                        <?php echo get_theme_mod(‘blog_title’?>

                    </div>

                    <div class=“top-menus”>

                    This is menu area

                    </div>

                </div>

                <div class=“tagline”>

                    <div class=“tagline-main”>

                        <?php echo get_theme_mod(‘main_tagline’‘Free the Internet’?>

                    </div>

                    <div class=“tagline-split”></div>

                    <div class=“tagline-sub”>

                        <?php echo get_theme_mod(‘sub_tagline’‘Across the Great Wall we can reach every corner in the world’?>

                    </div>

                </div>

            </div>

 

 

OK,接下来是CSS样式,还记得吗?我们要全局应用flex布局,再加上vw视口单位,现在我们来试试看 :

            header {

                width100vw;

                height14.5833vw;

                background#222222;

                displayflex;

                justify-contentcenter;

            }

            .top-container {

                width62.5vw;

                height100%;

            }

            .title-menus-area {

                displayflex;

                width100%;

                height5.0833vw;

                justify-contentspace-between;

            }

            .blog-title {

                displayflex;

                font-size1.4583vw;

                font-weightbold;

                colorwhite;

                margin-top1.125vw;

            }

 

            .tagline {

                displayflex;

                width100%;

                flex-directioncolumn;

                align-itemscenter;

            }

            .tagline-main {

                colorwhite;

                font-size2.5625vw;

                margin-bottom1.4583vw;

                line-height2.5625vw;

            }

            .tagline-split {

                background#F6F8FA;

                width4.1667vw;

                height0.2083vw;

                margin-bottom1.7708vw;

            }

            .tagline-sub {

                displayflex;

                color#8A8A8A;

                font-size0.8333vw;

                line-height1.4583vw;

            }

 

看起来就像是这样:

很酷,不是吗?这时候细心的人会问,后台关于menus的配置在后台里找不到呀,这是因为没有在functions.php里注册menus配置:

function my_menus() {

    $locations = array(

        ‘primary’  => __‘Desktop Horizontal Menu’),

        ‘expanded’ => __‘Desktop Expanded Menu’),

        ‘mobile’   => __‘Mobile Menu’),

        ‘footer’   => __‘Footer Menu’),

        ‘social’   => __‘Social Menu’),

    );

 

    register_nav_menus$locations );

}

 

add_action‘init’‘my_menus’ );

 

我们的菜单设置回来了,现在我们来把菜单填上:

                    <div class=“top-menus”>

                    <?php

                        wp_nav_menu(

                            array(

                                ‘container’  => ‘nav’,

                                ‘theme_location’ => ‘primary’,

                            )

                        );

                    ?>

                    </div>

 

这样菜单就全显示出来了:

我们先从后台删掉一些菜单,然后把样式加上:

/* 顶部菜单 */

            .top-menus {

                displayflex;

                padding-right1.5417vw;

                padding-top1.3854vw;

                height0.8333vw;

            }

 

            .top-menus li {

                displayflex;

                list-stylenone;

                margin-right2.0938vw;

            }

 

            .top-menus li:first-child{

                margin-right3.151vw;

            }

 

            .top-menus li:last-child{

                margin-right0;

            }

 

            .top-menus a{

                colorwhite;

                font-size0.8333vw;

                line-height0.8333vw;

                text-decorationnone;

            }

 

            .top-menus .menu {

                displayflex;

                margin0;

                padding0;

                white-spacenowrap;

                list-stylenone;

            }

 

            /* 先把二级菜单屏蔽起来 */

            .top-menus .sub-menu{

                background-colortransparent

                positionabsolute;

                margin-top:2vw;

                visibilityhidden;

                opacity0;

                displayflex;

                flex-directioncolumn;

            }

 

最后就是这样的效果了:

看起来不错,对吗?不过我们目前没有处理菜单的展开和移动端下的菜单样式,这些我们之后会一一完善。

总结和预告

今天,我们完成了首页通用顶部区域,通过CSS我们可以对DOM结构做到绝对的控制和美化,我们还为之后的顶部菜单展开和移动端菜单样式预留了空间。

明天,我们将继续往下制作页面的文章列表区域,还记得吗?我们之前的设定是双栏结构,除了主内容区域以外,还有一个右侧边栏(后期我们可以随意在右侧边栏和左侧边栏之间进行切换),明天我们将把这些结构统统建好。

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

发表评论