大侠阿木博客
大侠阿木博客

【欲思主题Yusi修改教程】文章页面取消侧边栏,布局居中,并宽度变窄

任务描述

这是Yusi的群里一位小伙伴提的需求,我就自告奋勇尝试着写了一下,班门弄斧大家不要见笑哈,零基础门外汉,我没有学过css和php。

先看一下最终的效果

预览

预览

 

本来要求其实很简单,就是文章页面不显示小工具栏,这个其实很简单,我帮他删除了默认的社交小工具,再通过后台的小工具设置,很容易达到目的。但是问题来了,文章不是居中的,因为原来侧边栏的位置还是空着的,很丑。所以一步步看下来,任务就变成了:
1,去掉侧边栏;
2,侧边栏空着的位置给文章占领,文章模块右端空出来的370px要去掉;
3,但是宽屏设备上看文章实在太费劲了,所以还要限制一下文章模块的最大宽度。

尝试了几次之后,终于完美完成了任务

 

修改教程

编辑single.php

最后一行<?php get_sidebar(); get_footer(); ?> 改为<?php get_footer(); ?> //作用是去掉文章页的侧边栏
在第3行 <div class="content">上面回车空出一行
在这个空行里加<div class="contentz">
在倒数第二行</div>(也是这个文件里最后一个</div>)后面紧挨着再写一个</div> //作用是专门给文章加一个特殊的容器,方便下面针对这个容器写特殊的样式

编辑styles.css
最下面另起一行写:
.contentz .content{margin-right:0 !important}
.contentz{margin:0 auto;max-width:800px}

其中800是文章的最大宽度,可以自己按需调节一下
这一步完成最后的修改,作用有两个,第一行是为了填补删掉侧边栏带来的空白,也就是将文章模块(content)拉宽到填满我们的新容器(contentz),第二行的作用是限制我们新容器(contentz)的最大宽度,并设置新容器为居中。

嗯,就酱。

没有标签
首页      Wordpress      【欲思主题Yusi修改教程】文章页面取消侧边栏,布局居中,并宽度变窄

大侠阿木博客

【欲思主题Yusi修改教程】文章页面取消侧边栏,布局居中,并宽度变窄
任务描述 这是Yusi的群里一位小伙伴提的需求,我就自告奋勇尝试着写了一下,班门弄斧大家不要见笑哈,零基础门外汉,我没有学过css和php。 先看一下最终的效果 预览   本来要求其实…
扫描二维码继续阅读
2014-11-02