离上次使用启用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搜索本站是会如下显示:
具体方法可以参考女程序员小蝴蝶的教程。
第三步:增加文章页导航
效果如博客底部。方法是在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; } /** 页码导航结束 **/
从父主题 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>版权所有 © (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>
这一切都无关重关,重要的是在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; }
怪不得昨晚访问有点不正常,又换主题鸟。。。
我与勺子一样,换主题勤过写博客。但对前一个主题真是爱之深恨之切,它确实有很多不如意的地方,如修正又需要改动太大。
我倒是觉得mon 更容易修改。。。
不过兼容手机平板的话就难点了。
mon是比较容易修改,不过太多自创函数,与一些插件不兼容,特别是我现在需要的投票插件。
不过你的站把mon修改得非常漂亮。
对了,可以发一份你的存档模板吗?我觉得你的非常不错。
可以,你的邮箱?
不过很多我是随性改的,没修改记录,我也忘了具体改了那些了。。。
另外,Firebug是个好东西。
已给你邮件。Firebug这个是我浏览器的标配插件,在使用当中。
刚才已修改了一下CSS,主题显示又有改变。
请教一下:由于该主题出现图片撑破页面问题,用代码限制宽度为600,在电脑上显示正常,可以是手机上还是会出现图片撑破页面问题。
现在CSS为:
.entry-content img,
.comment-content img{
max-width: 600px;
width: expression(this.width > 600 ? “600px” : (this.width+”px”));
}
有没有更好的解决方案?
这个不懂。。。关联到自适应吧。
/* 文章内容中图片撑破页面的处理 */
.entry-content img,
.comment-content img{
border: 0;
max-width: 100%;
}
这样就自适应了,无论在什么设备上,显示都不会撑破页面。
呵呵,乱讲,我是换主题,写、删文章,一样的勤快。
不过,我现在用的已经满足我对极简的要求了,估计较长的一段时间内不会再换了。
同样,也不想折腾技术了,认真写写练练。
你是有得写才有得删,而我只好发一篇是一篇,无论好坏都放上去。
幸苦了,没想到你是专业人士。Twenty Twelve这主题感觉对英文比较友好,中文字看起来略密集。个人意见。
字体是比较小,不过我已调了行距,现在与一般中文的行距是一样的。这个主题的好处是没有任何图片,纯代码。
专业人士不敢称,只是略懂而已,并且很多方法都是Google的。呵呵。
评分这个不错,回去鼓捣下,我也装上一个
其实加了Google也不一定会显示,根据内容的重要程度及可信度的。所以最好的SEO是写多些精彩的博文。
求一份现在的的这个修改过的主题啊
邮箱kanxsh#gmail.com
已发到你留言的QQ信箱,请查收。
感觉不错啊,谢谢博主。咨询一个问题啊:我要是只想页面模版和首页模版使用侧边栏,文章内容页不显示侧边栏该怎么处理啊?如果有空帮忙一下吧!
佐兄,我看了这篇文章,完全按照这个方法修改了子主题,感觉非常好!尤其是导航条的背景色,在手机下浏览比原主题美观多了!今有一问题请教:
1、twenty twelve的默认主题,在首页会有很多个h1标签,在文章页有两个h1标签。这和多数人所坚持的“一个页面只能有一个h1标签”不同。这点,不知道wordpress的这个官方主题是怎么考虑的;这对seo有什么影响呢?
2、这是个很小的问题:我用手机浏览,发现顶部的“菜单”按钮和紧跟于其下方的弹出的菜单内容项有个很小的错位-内容项和“菜单“按钮内有对齐、而是右移了一点点。不知道怎么解决。
敬祝博主愉快!
第一个问题:
根据”2013年影响网站在谷歌中排名的关键因素“的显示,文章中的H1与H2对SEO的影响力还是有的,但一般建议博客名称或文章标题为H1,文章内的其它标题可以设H2或H3。而官方主题出于什么考虑而这样设置,还真的不知道。不过可以自已调整的。
第二个问题:
建议不要使用我所说的导航条背景色,用回原官方的,好像可以解决这个问题。因为有一段时间没有使用该主题了,详细的也忘了。
能给一份改好的主题吗?感谢!
你好,非常喜欢你改过的2012,好清秀!可以发我一份吗 chazoon#mail.com
具体的修改内容请看本人的CSS文件,没有做其它太多的修改。
你好,看到你修改的主题特别清新,能给我发下你的主题吗,借鉴下,感觉网上的那些主题没感觉了,还是自己决定改改了。。谢谢了
本人没有怎么改,你直接看CSS文件看本人改了那些样式既可。
大神,能不能把修改后的主题发我一份,完整的,谢谢!电子邮箱:[email protected]
看我的主题Css文件,基本上改的都在上面了,并且用中文备注。
主要想参考下,主页和分类页文章介绍截断的问题,我的把整个文章全部显示出来了。
这个是more标签功能呀,在文章某个地方插入该标签既可。
又来麻烦你了,首页的早期文章那个导航怎么设置!
不知道你说的是那一部份哟,顶端菜端还是最底端的那个??建议自已在网上搜索教程吧,Wordpress的教程有很多的。
楼主好,我也是安装了Twenty Twelve主题,但是字体有点小,特别是首页导航栏,想看看您那边的css文件怎么修改的,可以发我一份吗 [email protected] xiexie
详细的看本博客的CSS文件既可,里面有详细的中文备注。
请问文章底部的图片(V2Ray)不管是手机版还是桌面版都会显示,这是用插件实现吗?
这个不是插件,就是一段代码,你可以搜索一下:文章底部加广告代码。
您好,我想问一下,底部的信息怎么改。我怎么在模板上没有找到呢?求解答
修改foot文件既可。
好喜欢这个官方主题,我用begin都有点腻了,好想换。
我这个主题也用了几年,没有找到合适自己的,而该主题一直都还可以用,又跟得上现时显示器,所以就一直懒得换了。
我决定启用这个主题了,但是为什么我首页最下面没有显示“早期文章”呢
早期文章?你说是归档吗?
对的,就是首页左下角不应该有一个“早期文章”的选项吗,我博客没有
那个是边栏小工具,自己在后台—主题—小工具 里增加可以了。
https://s2.ax1x.com/2019/01/17/kphlKH.png 我博客没有这个功能
这个是主题少了 posts_nav_link 函数调用,具体的搜索教程。
你好,我初次使用wordpress,对Twenty Twelve主题也是刚刚接触,因此对主题的源码架构不太了解;在您的这篇文章中曾有一部分是介绍如何修改主题底部内容的,我想问一下,需要在哪个文件中进行修改,当然如果能指出具体位置就更好了,在此先谢过博主了。
https://codex.wordpress.org/zh-cn:%E4%B8%BB%E9%A2%98
看这篇文章的主题文件部份内容。