TwentyThirteen 主题修改笔记

47条回复

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

47 thoughts on “TwentyThirteen 主题修改笔记”

土木坛子 2013年8月2日下午4:56

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

回复 ↓
1. 佐仔文章作者2013年8月2日下午5:04
  
  没法子，不完美的东西必须修改，否则心里总会不舒服。有点轻度强迫症，我。
  
  回复 ↓
  1. 土木坛子 2013年8月2日下午5:05
    
    那就改吧，哈哈。否则，更是问题。
    
    回复 ↓
  2. 马光 2013年8月2日下午10:12
    
    折腾主题是一种乐趣，哈哈~
    
    回复 ↓
    1. 佐仔文章作者2013年8月2日下午10:15
      
      难见马光兄过来本人博客并留言，欢迎欢迎。
      回头看看本人的博客，这段时间除了折腾还是折腾，文章反而没写几篇，呵呵，见笑。
      
      回复 ↓
[已删除] 2013年8月3日上午1:27

简洁快速

回复 ↓
1. 佐仔文章作者2013年8月3日下午12:34
  
  呵呵，发布不同的主题还会有不同的色调，非常不错的。
  
  回复 ↓
常阳时光 2013年8月3日上午11:24

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

回复 ↓
1. 佐仔文章作者2013年8月3日下午12:34
  
  是的，还没有出中文版，但我升级后后台依旧是简体中文的，可能是旧的语言文件有用。
  
  而主题我就自已汉化了语言包，需要的话可以发给你一份。
  
  回复 ↓
  1. maie 2013年8月3日下午10:34
    
    左兄下手很快啊，呵呵。wordpress那帮人速度太慢了，我也在官方上贡献了翻译，不知道wordpress的审核原理是什么，反正太慢了。
    
    回复 ↓
幽虫 2013年8月4日下午5:50

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

回复 ↓
1. 佐仔文章作者2013年8月4日下午6:11
  
  该主题不会有独立的中文版的，不过现在可以搜索到简体中文版或者本人邮件给你一份。
  
  回复 ↓
  1. 强子 2013年8月5日下午8:27
    
    有Twenty Thirteen2013主题中文包，可以发一份给我不？谢谢邮箱[email protected]
    
    回复 ↓
    1. 佐仔文章作者2013年8月5日下午8:34
      
      已发到你的电子信箱，请查收。
      
      回复 ↓
      1. 马光 2013年8月12日上午3:22
        
        已经按照你的方法设置了，很不错！早知道这也直接给你要一份得了，多省事啊！
        还是没明白，padding: 0 368px 0 0px，这段值为什么设置越小反而越宽？
        
        回复 ↓
        
        佐仔文章作者2013年8月12日上午7:29
        
        padding 简写属性在一个声明中设置所有内边距属性。
        
        所以你的数字越小，那离边距越近，那你的框框就越大。
大发 2013年8月6日上午10:47
去掉function中的
```
if ( version_compare( $GLOBALS['wp_version'], '3.6-alpha', '< ' ) )
    require get_template_directory() . '/inc/back-compat.php';
```
就能正常使用了，以前内测的时候我去在3.5上测试的
回复 ↓
1. 佐仔 2013年8月6日下午3:41
  
  你说的是那个问题？请详细告之，谢谢。
  
  回复 ↓
  1. 大发 2013年8月6日下午3:44
    
    没啥问题，我就看你说只能在3.6下使用，我就说了下在旧版本下使用的方法，囧。
    
    回复 ↓
    1. 佐仔 2013年8月6日下午3:50
      
      明白你的意思了，TwentyThirteen 主题可以应用于其它WordPress版本上，如3.5的，只需要去掉function中的
      
      if ( version_compare( $GLOBALS['wp_version'], '3.6-alpha', '< ' ) ) require get_template_directory() . '/inc/back-compat.php';
      
      就能正常使用了. 谢谢提供的解决方法。
      
      回复 ↓
老虎 2013年8月7日下午11:45

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

回复 ↓
1. 佐仔 2013年8月8日上午11:15
  
  下载可以了：
  http://hst.liuyuxuan.com/wp-content/themes/twentythirteen/languages/zh_CN.mo
  http://hst.liuyuxuan.com/wp-content/themes/twentythirteen/languages/zh_CN.po
  
  右键链接另存为下载这两个相应文件，上传到”wp-content/themes/twentythirteen/languages/”既可。
  
  回复 ↓
beishy 2013年8月9日下午4:36

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

回复 ↓
1. 佐仔文章作者2013年8月9日下午4:42
  
  可以说更详细一些吗？我用的是more代码的实现摘要或是发表文章时用摘要格式既可。
  
  回复 ↓
  1. beishy 2013年8月9日下午5:53
    
    就是首页的文章，都显示一定数目的数字即可。后面显示+继续阅读。
    
    回复 ↓
    1. 佐仔文章作者2013年8月9日下午5:56
      
      这个我习惯用more标签，你可以试试，该主题只支持标签实现摘要或发表文章时选择文章类别来实现摘要功能。
      
      回复 ↓
      1. beishy 2013年8月9日下午6:28
        
        好的，谢谢！已经通过more标签实现了。这个主题真不错。打算慢慢修改一下。以后多向你学习！我这有几个想法，但编程太弱了，一直实现不了。
        
        回复 ↓
歌自逸 2013年8月15日下午3:54

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

回复 ↓
1. 佐仔文章作者2013年8月15日下午4:05
  
  改这个很容易，但这个可是该主题的特色哟。
  
  回复 ↓
Leon 2013年8月25日下午2:13

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

回复 ↓
1. 佐仔文章作者2013年8月25日下午2:16
  
  你修改的方法是正确的，其实css文件可以下载本人的。
  
  同时语言包好像本人在留言已留下地址，要不回头给你发一份，现在外面。
  
  回复 ↓
2. 阿菜 2013年9月7日下午11:22
  
  博主，你好。我按你的方法去修改了一下这个主题，文章标题字体大小可以修改了，但是文章显示宽度却一直没变，不知道怎么回事。另外，我的侧边栏在网页最底部，不是在右侧。所以文章页面看起来很小，非常不舒服。希望博主能帮我一下，将文章页面显示宽度变大。
  
  回复 ↓
  1. 佐仔文章作者2013年9月8日上午8:39
    
    我的方法根本没有改变主题字体大小的，只是改变了显示框的大小而已。
    
    实在不行，那拷贝本人的CSS文件代码覆盖吧！
    
    回复 ↓
Y 2013年9月6日下午2:10

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

回复 ↓
1. 佐仔文章作者2013年9月6日下午10:30
  
  直接使用本人的CSS文件替换既可。
  
  回复 ↓
小雯子 2013年9月11日上午10:55

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

回复 ↓
1. 佐仔文章作者2013年9月11日上午10:58
  
  呵呵，那你就要加油了哟！
  
  回复 ↓
kashu 2013年10月3日上午2:52

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

回复 ↓
1. 佐仔文章作者2013年10月5日下午11:07
  
  其实你直接右键，查看源代码，找到本人CSS地址下载上传到你的空间相应位置既可。
  
  回复 ↓
不安的心 2015年3月15日下午6:40

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

回复 ↓
1. 佐仔文章作者2015年3月15日下午8:13
  
  抱歉，这个主题已很久没用了，原来修改的源文件已被删，帮不了你了。
  欢迎你的到来。
  
  回复 ↓
不安的心 2015年3月16日上午8:12

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

回复 ↓
1. 佐仔文章作者2015年3月16日上午8:20
  
  呵呵，我还以为什么问题呢？写文章时在适当的位置插入more标签既可。什么是more标签那就搜搜吧
  
  回复 ↓
  1. 不安的心 2015年3月16日上午10:22
    
    原来如此，不胜感激，为表感谢，浏览一下广告哈哈
    
    回复 ↓
    1. 佐仔文章作者2015年3月16日下午7:32
      
      呵呵，客气。你应该是博客新人吧。加油与坚持哟。
      
      回复 ↓
      1. 不安的心 2015年3月16日下午9:05
        
        呵呵，不算新吧，也经常折腾WordPress主题，你在我博客上上的评论我已经回复了，那是采用大发以前的分享，我用的香港空间，不知道有没有回复邮件通知
        
        回复 ↓
        
        佐仔文章作者2015年3月16日下午9:32
        
        有没有回复邮件通知与主机空间无关，你在你的博客回复我的评论，我没有收到相关的邮件通知。
        如果想实现这个功能，请看本人的这一篇博客：代码实现WordPress评论回复邮件提醒通知功能
        http://hst.liuyuxuan.com/5347.html

47 thoughts on “TwentyThirteen 主题修改笔记”

发表评论 取消回复

发表评论取消回复