html+css配置wordpress主题在小屏幕的时候隐藏侧边栏

看到标题好长啊。对于一个响应式web站点来说,很多功能都是通过 @media queries 和 Viewports 来实现哈。本站现在使用的也是html5的wordpress响应式主题。当然,还会有js来实现Responsive的,但本来就不了解这方面的知识,所以也就不敢描述了。 使用本主题也算是有好一段时间了,在小屏幕访问的时候,老是看见加载了wordpress页面侧边栏,就想把它弃掉。前段时间刚好看到了@media queries的一些东西,然后就打开主题的style.css文件看看。发现能改了。 下面是主题部分@media配置:

theme style @media

原来设置为:
@media screen and (max-width: 768px) {
 #content,
 #sidebar {
    float: left; 
    padding: 2%;
    width: 96%;
    display:none;
 }
}
下面是通过此法禁止效果:

show the theme single page

上一篇Previous

loading your wordpress theme static file from qiniu cloud

下一篇Next

新浪发布新网页版新浪微博

13 条评论添加评论

请教博主,如何让整个删掉侧边栏?就是说在全站的首页、文章页、页面页、分类页等页面下都没有侧边栏并且相关的内容都居中与页眉菜单栏等宽显示?就像博主的这篇文章的这个页面一样。 爬帖子爬了好久都没找到一个可行方案,大多提到的是如何自定义侧边栏或者如何设置个可见开关隐藏/显示侧边栏,没有提到如何整个删除侧边栏。爬着爬着爬到博主这儿了,万望博主指点一二,感激不尽!

回复取消回复
@YangQing

查找主题文件:index.php,page.php,single.php等等这些文件,注释掉包含“sidebar.php、sidebar" 类似这样的代码。 剩下的估计就要修改主题的css文件了。 其它方法我就不会了。 貌似可以js控制侧边栏,但是,js只能删除或隐藏html上的边栏。实际上程序还是会把边栏渲染出来的。 或者直接找一个单栏主题就ok啦。

回复取消回复

我之前想弄这个,弄了好久都没弄好,就放弃了

回复取消回复

其实在屏幕尺寸小于768的时候,加载另一个Css就行。

回复取消回复
@Era

一样的意思,就是@media来查询媒体嘛,如果另外再加载一个css。又会是多了一个请求。而且估计还有javascript其他脚本来实现。

回复取消回复

Twenty Twelve主题确实不错

回复取消回复
@mooc

en..确实,不过我这个不懂代码的盲人,不知道怎么优化和修改自己想要的东西啊。

回复取消回复

...直接删除掉好了

回复取消回复
@厦门微信营销

直接删除掉?直接删除掉的话在桌面上的大屏幕也不能显示侧边栏了呀。

回复取消回复

这个功能不错 手机上更实用

回复取消回复
@行客莱特

嗯哈。就是给小屏幕显示的时候使用的哦。

回复取消回复

这个不错。终于又更新了,天天刷

回复取消回复
@wordpressnot

每天都在的。只是,不知道写点什么好,每次都是写着写着就穷了。然后现在还有两篇草稿没写完。

回复取消回复