TwentyThirteen 主题修改笔记

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文件直接覆盖既可。

TwentyThirteen 主题修改笔记》有47个想法

          1. 不安的心

            呵呵,不算新吧,也经常折腾WordPress主题,你在我博客上上的评论我已经回复了,那是采用大发以前的分享,我用的香港空间,不知道有没有回复邮件通知

            回复
  1. 不安的心

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

    回复
  2. kashu

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

    回复
  3. Leon

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

    回复
    1. 佐仔 文章作者

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

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

      回复
    2. 阿菜

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

      回复
      1. 佐仔 文章作者

        我的方法根本没有改变主题字体大小的,只是改变了显示框的大小而已。

        实在不行,那拷贝本人的CSS文件代码覆盖吧!

        回复
        1. 佐仔 文章作者

          这个我习惯用more标签,你可以试试,该主题只支持标签实现摘要或发表文章时选择文章类别来实现摘要功能。

          回复
          1. beishy

            好的,谢谢!已经通过more标签实现了。这个主题真不错。打算慢慢修改一下。以后多向你学习!我这有几个想法,但编程太弱了,一直实现不了。

            回复
  4. 大发

    去掉function中的

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

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

    回复
        1. 佐仔

          明白你的意思了,TwentyThirteen 主题可以应用于其它WordPress版本上,如3.5的,只需要去掉function中的

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

          就能正常使用了. 谢谢提供的解决方法。

          回复
          1. 马光

            已经按照你的方法设置了,很不错!早知道这也直接给你要一份得了,多省事啊!
            还是没明白,padding: 0 368px 0 0px, 这段值为什么设置越小反而越宽?

            回复
            1. 佐仔 文章作者

              padding 简写属性在一个声明中设置所有内边距属性。

              所以你的数字越小,那离边距越近,那你的框框就越大。

    1. 佐仔 文章作者

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

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

      回复
      1. maie

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

        回复
        1. 佐仔 文章作者

          难见马光兄过来本人博客并留言,欢迎欢迎。
          回头看看本人的博客,这段时间除了折腾还是折腾,文章反而没写几篇,呵呵,见笑。

          回复

发表回复

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