TwentyThirteen 主题修改笔记

  2013-08-02  乱七八糟  5 分钟

WordPress 3.6版终于发布了,随着WordPress新版本的发布,官方也推出新的官方主题:TwentyThirteen,启用新主题发现非常不错,只是中文显示时有些不能满足个人要求,于是开始行动:折腾TwentyThirteen主题正式开始。主要修改标题大小和文章显示位置调整。TwentyThirteen主题只适用于WordPress 3.6以上版本。具体修改如下,本文只是一篇笔记,具体的一些功能性修改不在本文体现。

1、文章标题大小

原来的CSS代码为:

h1 {
    font-size: 48px;
    margin: 33px 0;
}

修改为:

h1 {
    font-size: 35px;
    margin: 33px 0;
}

2、文章标题与内容显示宽度调节

原来的CSS代码为:

.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
    max-width: 1040px;
    padding: 0 376px 0 60px;
}

修改为:

.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
    max-width: 1040px;
    padding: 0 368px 0 0px;
}

3、为了整体协调与美观,还需要调一下底部导航栏相应宽度。

搜索代码:

padding: 0 376px 0 60px;

替换成:

padding: 0 368px 0 0px;

同样为了整体协调与美观,还需要调一下评论显示框大小。

原代码如下:

.sidebar .comments-title,
.sidebar .comment-list,
.sidebar .must-log-in,
.sidebar .comment-reply-title,
.sidebar .comment-navigation,
.sidebar .comment-respond .comment-form {
    max-width: 1040px;
    padding-left: 60px;
    padding-right: 376px;
}

修改为:

.sidebar .comments-title,
.sidebar .comment-list,
.sidebar .must-log-in,
.sidebar .comment-reply-title,
.sidebar .comment-navigation,
.sidebar .comment-respond .comment-form {
    max-width: 1040px;
    padding-left: 0px;
    padding-right: 368px;
}

本次修改的内容不太多,尽量贴近原味,只是为了更完美地显示中文与满足我的审美要求而已。最后上传TwentyThirteen简体中文包。修改完毕。最后送上一段内链代码,直接放入functions.php既可。

//内链开始
//连接数量
$match_num_from = 1; //一个关键字少于多少不替换
$match_num_to = 3; //一个关键字最多替换
//连接到WordPress的模块
add_filter('the_content','tag_link',1);
//按长度排序
function tag_sort($a, $b){
if ( $a->name == $b->name ) return 0;
return ( strlen($a->name) > strlen($b->name) ) ? -1 : 1;
}
//改变标签关键字
function tag_link($content){
global $match_num_from,$match_num_to;
$posttags = get_the_tags();
if ($posttags) {
usort($posttags, "tag_sort");
foreach($posttags as $tag) {
$link = get_tag_link($tag->term_id);
$keyword = $tag->name;
//连接代码
$cleankeyword = stripslashes($keyword);
$url = "<a href=\"$link\" title=\"".str_replace('%s',addcslashes($cleankeyword, '$'),__('View all posts in %s'))."\"";
$url .= 'target="_blank"';
$url .= ">".addcslashes($cleankeyword, '$')."</a>";
$limit = rand($match_num_from,$match_num_to);
//不连接的代码
$content = preg_replace( '|(<a[^>]+>)(.*)('.$ex_word.')(.*)(</a[^>]*>)|U'.$case, '$1$2%&&&&&%$4$5', $content);
$content = preg_replace( '|(<img)(.*?)('.$ex_word.')(.*?)(>)|U'.$case, '$1$2%&&&&&%$4$5', $content);
$cleankeyword = preg_quote($cleankeyword,'\'');
$regEx = '\'(?!((<.*?)|(<a.*?)))('. $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))\'s' . $case;
$content = preg_replace($regEx,$url,$content,$limit);
$content = str_replace( '%&&&&&%', stripslashes($ex_word), $content);
}
}
return $content;
}
//内链结束

如果大家喜欢本人的修改结果,可以下载本人的CSS文件直接覆盖既可。

— 转载本站文章请注明作者和出处佐仔志 ,请勿用于任何商业用途

— 于 2013年08月02日 ,共写了 2462 字;

— 本文共有 2 个标签:标签:,

佐仔志--关注互联网、IT科技、智能手机、电子商务、网络营销等内容的个人博客!

47条回应:“TwentyThirteen 主题修改笔记”

  1. 土木坛子说道:

    只是为了更完美地显示中文与满足我的审美要求而已。
    我不折腾了。直接利用人家的设计成果。

  2. 常阳时光说道:

    真能折腾……
    不是还没出中文版么?

    • 佐仔说道:

      @常阳时光

      是的,还没有出中文版,但我升级后后台依旧是简体中文的,可能是旧的语言文件有用。

      而主题我就自已汉化了语言包,需要的话可以发给你一份。

      • maie说道:

        @佐仔 左兄下手很快啊,呵呵。wordpress那帮人速度太慢了,我也在官方上贡献了翻译,不知道wordpress的审核原理是什么,反正太慢了。

  3. 幽虫说道:

    看上去很不错,坐等中文版。

  4. 大发说道:

    去掉function中的

    if ( version_compare( $GLOBALS['wp_version'], '3.6-alpha', '< ' ) )
        require get_template_directory() . '/inc/back-compat.php';

    就能正常使用了,以前内测的时候我去在3.5上测试的

  5. 老虎说道:

    我也想改来着,测试版的时候就干过,懒得动……楼主弄个包给大家下载呗。另外3.6中文版怎么还没出来?

  6. beishy说道:

    请问首页文章摘要怎么修改的。看着和以前的主题代码有点不一样。多谢。

  7. 歌自逸说道:

    要是能把底部的“较早文章”改成数字分页就完美了

  8. Leon说道:

    有Twenty Thirteen2013主题中文包,可以发一份给我不?谢谢. 好人一生平安。话说是不是改theme/twentythirteen/style.css 文件,我改了怎么没有用啊。

    • 佐仔说道:

      @Leon

      你修改的方法是正确的,其实css文件可以下载本人的。

      同时语言包好像本人在留言已留下地址,要不回头给你发一份,现在外面。

    • 阿菜说道:

      @Leon

      博主,你好。我按你的方法去修改了一下这个主题,文章标题字体大小可以修改了,但是文章显示宽度却一直没变,不知道怎么回事。另外,我的侧边栏在网页最底部,不是在右侧。所以文章页面看起来很小,非常不舒服。希望博主能帮我一下,将文章页面显示宽度变大。

  9. Y说道:

    求这个修改好的版本…多谢

  10. 小雯子说道:

    我们用的是同一个主题呢,不过你比我勤快多了。更新的频率高,字数多。给力!

  11. kashu说道:

    大哥,我是菜鸟,刚刚弄了一个网站,想和你弄一样的主题风格,你能把你改的主题相关文件邮件发给我么?谢谢了!

  12. 不安的心说道:

    博主这个主题改的很好,我折腾半天还是折腾不出来首页显示文章里图片而不是缩略图,博主可否共享下啊?万分感激

  13. 不安的心说道:

    不好意思,是你现在这个Twenty Twelve主题,首页如何才能像你这样显示文章部分内容,而不是摘要呢?(摘要里没有图),可否共享下你的 content.php 文件。同样也喜欢折腾WordPress,我的博客 http://www.fanjielin.com,借鉴了你的部分css,感谢!

发表评论

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