真香,30天做一套wordpress主题(第7天):公共底部

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

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

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

1. HTML/CSS/JS基础

2. PHP基础

3. 如何使用Wordpress

4. 如何搭建web环境

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

公共底部

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

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

<footer><divclass="footer-container"><divclass="footer-menus"><?phpwp_nav_menu(array('container'=>'nav','theme_location'=>'footer',));?></div><divclass="footer-copyright"><p>Copyright©<?phpechodate_i18n(_x('Y','copyrightdateformat'));?><ahref="<?phpechoesc_url(home_url('/'));?>"><?phpechobloginfo('name');?></a>.AllRightsReserved.</p><p><ahref="<?phpechoesc_url(__('https://wordpress.org/'));?>"><?php_e('PoweredbyWordPress');?></a>•<ahref="#">ThemeFreeGeek</a></p></div></div></footer>

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

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

真香,30天做一套wordpress主题(第7天):公共底部

回到顶部

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

<divclass="scrolltop-wrap"><aclass="go-top"href="#common-top"><spanclass="iconfont"></span></a></div>

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

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

/*gotopbutton*/.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-inease0.5s;animation-iteration-count:1;}

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

真香,30天做一套wordpress主题(第7天):公共底部

顶部菜单展开

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

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

真香,30天做一套wordpress主题(第7天):公共底部

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

真香,30天做一套wordpress主题(第7天):公共底部

这里也是直接用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,如果不设的话菜单可能会被同级元素遮挡。

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

小修复

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

真香,30天做一套wordpress主题(第7天):公共底部

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

<?phpif(is_customize_preview()){wp_footer();}?>

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

真香,30天做一套wordpress主题(第7天):公共底部

总结和预告

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

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

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

未经允许不得转载:WPCS » 真香,30天做一套wordpress主题(第7天):公共底部

赞 (2) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏