WordPress twentytwelve主题修改页面宽度

24 Aug 2013

Wordpress twentytwelve theme以简洁取胜，但是这个主题是固定页面宽度的（默认值为960）,如果网站上放置的东西多一点就会显得拥挤不堪，破坏了其整体整洁性，下面介绍的方法可以很方便的更改这个主题的宽度：

• 打开主题的style.css文件（可以使用WP后台编辑也可以直接进主机目录修改 一个可能的路径 /var/www/wordpress/wp-content/themes/twentytwelve

• 查找下面的内容（在我的主机上是在655行）

/* Footer */
footer[role="contentinfo"] {
        border-top: 1px solid #ededed;                        
        clear: both;
        font-size: 12px;
        font-size: 0.857142857rem;                            
        line-height: 2;
        max-width: 960px;
        max-width: 68.571428571rem;                           
        margin-top: 24px;
        margin-top: 1.714285714rem;                           
        margin-left: auto;
        margin-right: auto;                                   
        padding: 24px 0;
        padding: 1.714285714rem 0;                            
}

把其中的max-width修改成符合你要求的数值，px和rem之间的换算关系可以简单的用px / 14来计算，比如1000px / 14 = 71.4285714rem 。

• 查找下面这一段(在我的主机上是在1420行)

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
        .author-avatar {
                float: left;
                margin-top: 8px;
                margin-top: 0.571428571rem;
        }
        .author-description {
                float: right;
                width: 80%;
        }
        .site {
                margin: 0 auto;
                max-width: 960px;
                max-width: 68.571428571rem;
                overflow: hidden;
        }

同上一步修改max-width 。

Done!