官方主题主页:Twenty Thirteen
Twenty Thirteen 主题是 WordPress 2013 年发布的一款主题,单栏、双栏、页脚等布局,还有大量的帖子格式:日志、标准、图片、聊天、视频、音频等,每个格式不同出现的帖子背景颜色不同,真正的是一款个人博客主题。
相比现在的流行的主题更倾向于商业主题,西方网站流行的扁平化大留白大简洁,Twenty Thirteen 主题就显得有点古老~但 Twenty Thirteen 主题也是扁平化 1.0 的产物,之后 WordPress 官方主题在没有这样个性设计了~
Twenty Thirteen 主题是最个性的一款~包括下一页、上一页的按钮等~
就连 404 页面做的也很有意思~不过在移动端就显示「未找到」,并没有图案~
虽然是 10 年前的主题,如今使用当作个人博客还是很能打,但有些地方需要修改一下,其实不修改也行,就照着俺心目中的传统博客布局改了一下~
俺也不知道主题的代码是否符合今天的互联网,有利于 SEO 不利?!
俺对代码不熟悉,简单改个 CSS 样式,颜色、字体还是可以的。
主题还是有许多的不如意,比如页眉的字体大小,间距,搜索全网也没有找到解决办法~对中文来说,网站标题字体太大了,英文却很合适。比如菜单栏不对齐内容很别扭。
这款主题对英文很友好,对中文就差点意思~并且中文的翻译是国外人翻译的乱七八糟只有 71%,于是俺抽空翻译了一下,提交给中文管理了~
修改如下:
修改h1,h2,h3字体大小
/* h1 h2 h3 文字大小 */
h1 {
font-size: 30px;
line-height: 1.6;
}
h2{
font-size: 28px;
font-weight: 500;
}
h3{
font-size: 25px;
font-weight: 500;
}
修改网站标题描述字体大小
/* 网站标题描述字体大小 */
.site-description{
font-size: 20px;
}
菜单字体大小
/* 菜单字体大小 */
.nav-menu li a
{
font-size: 18px;
}
文章元素字体大小
/* 文章元素字体大小 */
.entry-meta a{
font-size: 16px;
}
文章重点块的圆角、小工具、图片圆角
/* 文章重点块的圆角、小工具、图片圆角 */
.widget,.blue-tip,.yellow-note,img{
border-radius: 5px;
font-size: 18px;
}
图片加边框
/* 图片加边框 */
img{
border: 2px solid #eee;
}
整体布局的字体设置
/* 整体布局的字体设置 */
body{
font-size: 18px;
line-height: 1.7;
letter-spacing: 1px;
background-color: #e8e8e8;
}
网站宽窄设置
/* 网站宽窄设置 */
.site {
max-width: 1120px;
}
网站左边间距设置
/* 网站左边间距设置 */
.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta,
.sidebar .must-log-in, .sidebar .comment-reply-title, .sidebar .comment-navigation, .sidebar .comment-respond .comment-form
{
padding-left: 0px;
}
文章页面特色图像掩藏
/* 文章页面特色图像掩藏 */
.single-post .entry-thumbnail {
display: none;
}
文章内加重点提示
/* 文章内加重点提示 */
.blue-tip {
background-color: #D2E9FF;
border: 2px dashed #0080FF;
padding: 20px;
}
.yellow-note {
background-color: #FFF8E1;
border: 2px dashed #FFC107;
padding: 20px;
}
特色图像的高低
都是最基本的 CSS 字体、颜色设置。多了也不会。
还有一个是修改了特色图像的高低,原本是 270px,改为了 350px。
代码在 functions.php 中的 236 行。
显示文章摘要的修改
还有让 Twenty Thirteen 主题首页、搜索页、归档页显示文章摘要的修改~没有修改,因为俺不知道如何修改显示摘要的字数,默认字数对中文太少了,以后再摸索。
更改显示摘要的字数,默认是 55 个字符(英文),修改成 110 个字。
打开主题根目录下的「wp-includes」,寻找「formatting.php」大概在 3909 行,将 55 改为 110 。
/* translators: Maximum number of words used in a post excerpt. */
$excerpt_length = (int) _x( '55', 'excerpt_length' );
下面代码是修改摘要的~
打开主题编辑,找到 content.php ,寻找一下代码,大概在第 35 行处:
<?php if ( is_search() ) : // Only display excerpts for search. ?>
更改为如下
<?php if ( is_search() ||is_archive() || is_home() ) : // Only display excerpts for search. ?>
原本只是搜索页面显示摘要,如今添加了上面的橘色字体的代码,就是归档和首页也要摘要~
整个CSS更改下载:style.css
最后放一个谷歌 PageSpeed Insights 测速: