wordpress3.6页面样式调整

1、wordpress调整页面宽度
如果熟悉Web前端发的人来说,更改wordpress的显示样式,简直就是小菜一碟了!
在firfox中“查看元素”或者chrome的“开发者工具,查看页面的css设计,就可针对性的修改style.css,使其符合你的审美观。
我个人也对web前端的开发也一无所知,找了个同事,帮我做这些css调整。下面的是wordpress3.6.1的一些设置,或者wp-syntax插件的设置,具体效果,可以查看的我一些博客内容。以下修改的是 twentyten主题的style.css文件。

修改当前主题的样式表 css文件(style.css)

#wrapper {
    margin: 0 auto;
    width: 1060px;
}

width: 1060px;改成你需要的设置的值

#access {
    background: #000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 1060px;
}

width: 1060px;改成和上面一致的值
2、wordpress调整右边侧栏的标题和内容的字体大小

.widget-title {
    color: #222;
    font-weight: bold;
    font-size: 14px;
}

修改font-size

.widget-area .entry-meta {
    font-size: 11px;
}

修改font-size

3、wordpress修改副标题字体

#site-description {
    clear: right;
    float: right;
    font-style: italic;
    font-size : 15px;
    margin: 15px 0 18px 0;
    width: 220px;
}

修改font-style和font-size的值

4、修改文章的字体与行高

#content,
#content input,
#content textarea {
    color: #333;
    font-size: 15px;
    line-height: 22px;
}

修改font-size和line-height的值

5、修改wp-syntax高亮代码中的注释的斜体字为正体
网上的搜索出来的方法大多是在wp-syntax.php文件中的“do_action_ref_array( ‘wp_syntax_init_geshi’, array( &$geshi ) );”代码之前添加以下两行代码
$geshi->set_comments_style(1, ‘font-style: normal;’,true);
$geshi->set_comments_style(‘MULTI’, ‘font-style: normal;’,true)
我尝试了一下这个方法,发现不能更改注释的斜体字。

另外的方法是修改wp-content/plugins/wp-syntax/geshi/geshi目录下面的对应语言的.php文件
我修改了bash代码显示的字体样式的对应的bash.php。把以下代码:

'COMMENTS' => array(
    0 => 'color: #666666; font-style: italic;',
    1 => 'color: #800000;',
    2 => 'color: #cc0000; font-style: italic;',
    3 => 'color: #000000; font-weight: bold;',
    4 => 'color: #666666;'
),

更改为

'COMMENTS' => array(
    0 => 'color: #666666;',
    1 => 'color: #800000;',
    2 => 'color: #cc0000;',
    3 => 'color: #000000; font-weight: bold;',
    4 => 'color: #666666;'
),

保存后,刷新博客页面,代码注释的字体为正体。

6、设置wp-syntax代码自动换行

.wp_syntax pre {
    background:transparent;
    margin:0;
    padding:0;
    width:auto;
    float:none;
    clear:none;
    overflow:visible;
    font-family:Monaco;
    font-size:8px;
    line-height:4px;
    white-space:pre;

    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    word-break:break-all;
}

添加上面最后的6行代码

不显示代码的水平滚动条

.wp_syntax {
    color : #100;
    /* background-color: #f9f9f9;
    border : 1px solid #EBEBEB; */
    margin : 0 0 1em 0;
    width :99%
    overflow : hidden;
}

修改overflow的值hidden;

/* IE FIX */
.wp_syntax {
    overflow-x : hidden;
    overflow-y : hidden;
    padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
    width : 99%;
}

修改overflow的值hidden;

IE或者极速浏览器的IE内核对上面的代码换行css并不能完美的解释,IE9和IE10的结果正常,而极速浏览器默认的兼容模式出现换行的代码不能正常显示,缓行代码截断。

7、绑定域名后,浏览器地址栏显示的是IP地址,不是域名

进入后台控制面板,选择”设置”->”常规”,修改”WordPress地址(URL)”和”站点地址(URL)”两个选线。

首页地址如果显示的也是IP地址,那么去“菜单”选项修改首页的URl。

此条目发表在web分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>