爱之深恨之切–又换主题:Twenty Twelve 子主题

离上次使用启用Mon cahier主题才2个月,非常喜欢该主题,简洁,简单,可惜代码复杂及错乱,在兼容性及修改难度;非Responsive Design主题,无法在任何设备上完美展示内容,在这个Android和iPhone等智能手机盛行的年代,支持手机比支持IE6更加重要。或是应了那句话:爱之深恨之切,越是对它进行修改越发现其问题,于是在WordPress官方主题Twenty Twelve基础上进行修改计划提上。周末既付之行动,详细过程记录如下。

为了避免WordPress升级覆盖Twenty Twelve原修改的文件,以Twenty Twelve为母主题建立一个子主题

启用后的第一步为:SEO。

过去,默认主题的输出title的代码是长长的一串,在Twenty Twelve中,则是如此简单。

<title><?php wp_title( '|', true, 'right' ); ?></title>

在Twenty Twelve的变化中,简化似乎是一个方向,没有多余的功能,没有累赘的样式。标题简化到只有一个函数,通过插件可以完全控制标题的输出,而且与之前的主题相比SEO方面没有任何退步。简单,我喜欢。但是对于“description”和“keywords”修改如下。

修改header.php文件,搜索:

<title><?php wp_title( '|', true, 'right' ); ?></title>

添加以下代码:

<?php
if (!function_exists('utf8Substr')) {
 function utf8Substr($str, $from, $len)
 {
     return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'.
          '((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s',
          '$1',$str);
 }
}
 if (is_home()){
    $description = "HST网络站--关注互联网、IT科技、智能手机、电子商务、网络营销等内容的个人博客!";
    $keywords = "Android,WordPress,黑莓,安卓,互联网,创业,销售,摄影,时尚,艺术,程序,生活";
} elseif(is_category()){
$keywords=single_cat_title('', false);
$description= category_description();
$description=str_replace("<p>","",str_replace("</p>","",$description)); 
}elseif (have_posts()){
    if ($post->post_excerpt) {
        $description  = $post->post_excerpt;
    } else {
   if(preg_match('/<p>(.*)<\/p>/iU',trim(strip_tags($post->post_content,"<p>")),$result)){
    $post_content = $result['1'];
   } else {
    $post_content_r = explode("\n",trim(strip_tags($post->post_content)));
    $post_content = $post_content_r['0'];
   }
         $description = utf8Substr($post_content,0,220);   
  }

    $keywords = "";      
    $tags = wp_get_post_tags($post->ID);
    foreach ($tags as $tag ) {
        $keywords = $keywords . $tag->name . ",";
    }
}
?>
<meta name="description" content="<?php echo trim($description); ?>" />
<meta name="keywords" content="<?php echo rtrim($keywords,','); ?>" />

这关就可以实现Tag变成关键字,文章前140个字变成description。

第二步:增加投票及作者认证功能
之所以增加投票功能,是想了解大家对该文章的欢喜度。大家在发言之前可记得给文章投上一票哟。其实增加这个功能真正的目的是为了让Google更好的收录本站。如你在Google搜索本站是会如下显示:

Google

具体方法可以参考女程序员小蝴蝶的教程

第三步:增加文章页导航
效果如博客底部。方法是在functions.php增加以下函数:

/** 页码导航 **/
function twentytwelve_content_nav( $html_id ) {
	global $wp_query;

	$html_id = esc_attr( $html_id );

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
			<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
		</nav><!-- #<?php echo $html_id; ?> .navigation -->
	<?php endif;
}
/** 页码导航结束 **/

第四步:头部添加一个搜索框
S

从父主题 Twenty Twelve 目录下复制一份 header.php 文件到你的子主题目录下,然后打开 header.php 文件,找到下面这条标签:

</hgroup>

再在后面加上以下这行:

<div class="header-search"><?php get_search_form(); ?></div>

保存并关闭 header.php 文件。
打开子主题中的 style.css 文件并添加以下 CSS 代码:

.header-search {
    float: right;
    margin-top: -50px;
}
@media (max-width: 650px) {
    .header-search {
        margin-top:5px;
        text-align:center;
        float:none;
    }
    .main-navigation  {
        clear:both;
    }
}

保存并关闭 style.css 文件。

第五步:修改CSS

/* 调整边栏标题字体大小与底边距离 */
.widget-area .widget h3 {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
margin-bottom: auto;
font-size:14px;
font-size:1em;
color:#069;
}
/* 调整边栏标题字体大小与底边距离结束 */

/* 文章内容中图片撑破页面的处理 */
.entry-content img,
.comment-content img,
.widget img {
max-width: 600px;
width: expression(this.width > 600 ? “650px” : (this.width+”px”));

}
/* 文章内容中图片撑破页面的处理结束 */

第六步:修改底部信息

<p>版权所有 &copy; (2005 - 2013)  <a href="http://hst.liuyuxuan.com">HST网络站</a> | <a href="http://hst.liuyuxuan.com/sitemap.xml">网站地图</a> │ <a href="">联系作者</a> │ <a href="">日志存档</a> │ 主机提供商: <a href="http://icdsoft.com/">ICDSoft </a>.<br>本站遵循"署名-非商业用途-保持一致"的创作共用协议,转载文章须注明来源。<br>
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.</p>

修改完毕,现在来看看安卓手机的显示效果。
Screenshot_2013-04-14-09-50-45

在任何位置在点击“菜单”既可下拉详细菜单,非常方便。
Screenshot_2013-04-14-09-50-54

iPhone显示效果:
IMG_1653

IMG_1654

这一切都无关重关,重要的是在Google 网站站长工具中的结构化数据测试工具上测试没有任何错误。

2013-04-15补充,我完整的CSS如下:

/* 搜索样式 */
.header-search {
    float: right;
    margin-top: -50px;
}
@media (max-width: 650px) {
    .header-search {
        margin-top:5px;
        text-align:center;
        float:none;
    }
    .main-navigation  {
        clear:both;
    }
}
/* 搜索样式结束 */

/*投票样式*/
.ratingtext-xhd{display:none;position: absolute;top: -50px;font-weight: normal;font-size: 12px;background: #ffffe0;border: 1px solid rgb(230, 195, 85);padding: 5px;}
/*投票样式结束*/

/* 文章标题字体颜色 */
a{
	color:green;
}

/* 修改导航栏背景颜色 */
.main-navigation {
	background: #006699;
}

/* 修改导航菜单字号 */
.main-navigation li {
    font-size: 14px;
    font-size: 1rem;

}

/* 修改导航菜单栏目文字位置 */
.main-navigation a {
	margin-left:14px;
	margin-left:1rem;
}

/* 修改导航菜单栏目文字颜色为白色 */
.main-navigation li a {
	color: #fff;
    text-align: center;
}

/* 修改导航菜单当前栏目文字颜色为高亮白色 */
    .main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #fff;
	}

/* 修改导航菜单栏目子栏目文字颜色为白色 */
.main-navigation li ul li a {
	color: #fff;
}

/* 修改内容页容器 */
.site-content {
     margin: 0 0 0;
     margin: 0 0 0;
}

/* 修改内容页容器之间的行间距 */
.site-content article {
        margin-bottom: 14px;
        margin-bottom: 1rem;
}

/* 调整边栏标题字体大小与底边距离 */
.widget-area .widget h3 {
    margin-bottom: auto;
    font-size: 14px;
    font-size: 1rem;
    color:#069;
}

/* 文章内容中图片撑破页面的处理 */
.entry-content img,
.comment-content img{
border: 0;
max-width: 100%;
}

/* 调整栏目页分类目录归档与内容页之间的距离 */
.archive-header, .page-header {
     margin-bottom: 14px;
     margin-bottom: 1rem;
}

49 thoughts on “爱之深恨之切–又换主题:Twenty Twelve 子主题

        1. 佐仔 文章作者

          mon是比较容易修改,不过太多自创函数,与一些插件不兼容,特别是我现在需要的投票插件。
          不过你的站把mon修改得非常漂亮。

          回复
            1. 佐仔 文章作者

              已给你邮件。Firebug这个是我浏览器的标配插件,在使用当中。
              刚才已修改了一下CSS,主题显示又有改变。

              请教一下:由于该主题出现图片撑破页面问题,用代码限制宽度为600,在电脑上显示正常,可以是手机上还是会出现图片撑破页面问题。
              现在CSS为:
              .entry-content img,
              .comment-content img{
              max-width: 600px;
              width: expression(this.width > 600 ? “600px” : (this.width+”px”));

              }
              有没有更好的解决方案?

            1. 佐仔 文章作者

              /* 文章内容中图片撑破页面的处理 */
              .entry-content img,
              .comment-content img{
              border: 0;
              max-width: 100%;
              }

              这样就自适应了,无论在什么设备上,显示都不会撑破页面。

    1. 佐仔 文章作者

      字体是比较小,不过我已调了行距,现在与一般中文的行距是一样的。这个主题的好处是没有任何图片,纯代码。
      专业人士不敢称,只是略懂而已,并且很多方法都是Google的。呵呵。

      回复
  1. 从良未遂

    感觉不错啊,谢谢博主。咨询一个问题啊:我要是只想页面模版和首页模版使用侧边栏,文章内容页不显示侧边栏该怎么处理啊?如果有空帮忙一下吧!

    回复
  2. 猎手

    佐兄,我看了这篇文章,完全按照这个方法修改了子主题,感觉非常好!尤其是导航条的背景色,在手机下浏览比原主题美观多了!今有一问题请教:
    1、twenty twelve的默认主题,在首页会有很多个h1标签,在文章页有两个h1标签。这和多数人所坚持的“一个页面只能有一个h1标签”不同。这点,不知道wordpress的这个官方主题是怎么考虑的;这对seo有什么影响呢?
    2、这是个很小的问题:我用手机浏览,发现顶部的“菜单”按钮和紧跟于其下方的弹出的菜单内容项有个很小的错位-内容项和“菜单“按钮内有对齐、而是右移了一点点。不知道怎么解决。
    敬祝博主愉快!

    回复
    1. 佐仔 文章作者

      第一个问题:
      根据”2013年影响网站在谷歌中排名的关键因素“的显示,文章中的H1与H2对SEO的影响力还是有的,但一般建议博客名称或文章标题为H1,文章内的其它标题可以设H2或H3。而官方主题出于什么考虑而这样设置,还真的不知道。不过可以自已调整的。
      第二个问题:
      建议不要使用我所说的导航条背景色,用回原官方的,好像可以解决这个问题。因为有一段时间没有使用该主题了,详细的也忘了。

      回复
  3. 夜色温柔

    你好,看到你修改的主题特别清新,能给我发下你的主题吗,借鉴下,感觉网上的那些主题没感觉了,还是自己决定改改了。。谢谢了

    回复
            1. 佐仔 文章作者

              不知道你说的是那一部份哟,顶端菜端还是最底端的那个??建议自已在网上搜索教程吧,Wordpress的教程有很多的。

    1. 佐仔 文章作者

      我这个主题也用了几年,没有找到合适自己的,而该主题一直都还可以用,又跟得上现时显示器,所以就一直懒得换了。

      回复
  4. xwq

    你好,我初次使用wordpress,对Twenty Twelve主题也是刚刚接触,因此对主题的源码架构不太了解;在您的这篇文章中曾有一部分是介绍如何修改主题底部内容的,我想问一下,需要在哪个文件中进行修改,当然如果能指出具体位置就更好了,在此先谢过博主了。

    回复

发表评论

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