博客年度更新

对于自己的这个小站，我每年都会折腾一 ...

发布于 杂七杂八 - 13/03/2017

对于自己的这个小站，我每年都会折腾一番。或是修改样式，或是新增功能，每每花个两天捣弄一番后再慢慢回味品鉴，像是在欣赏一件作品，神清气爽！虽说现在已是阳春三月，但也还算是四季之初，所以还是祝愿各位博友新年笔耕不缀，天天记录开心事儿~

前些日子买了台相机，心想以后可能会时不时发布些照片，而原来那款主题并不适合查图，所以我爬遍博友圈，找到了这款 Wordprss 主题。这里感谢 @Javis 开发了这样一款优秀的主题，同时还耐心地解答我的疑问，帮助我修改完善本站。

本文主要介绍本站新特性及优缺点，并记录我的修改历程，同时介绍几个非常有用的 Tips 给各位。

博客简介

牧羊人博客是我的个人博客，用于记录自己的故事，偶尔分享些有趣有用的东西。以前本站有个关于页面，这里暂从主导航中移除从而显得更简练。主题最大的一个特色是首页的头图，它调用了微软 bing.com 的 api，实现了与必应同步更新主图，这使得我不用经常更换背景，而且每天都有美图欣赏。不过因为首图色调不一，所以作者巧妙的加载一层灰色栅格图在上层，这样就使得网站名称“牧羊人”依然清晰可见，不至于混乱。

[xiami style=”small” ]3551689[/xiami]

我在关于里边说过：本站名“牧羊人”来源于本人属相和自己特喜欢的一首音乐《孤独的牧羊人》，再结合域名 Shepherd 而来，所以 Logo 就想找个有关羊的符号来充数，奈何翻遍了素材也没有找到合适的，索性用“牧羊人”三个字换成衬线体之后调灰看倒清雅~右侧是虾米音乐段代码效果。

多变的文章样式

实际上，主题提供的文章样式只有两个：标准页面和状态页面。不过标准页面有如下几个灵活的表现方式可供选择：

缩略图位置：浮动左侧、顶布局中、浮动右侧
可选开启或关闭顶部大图，并且支持外链
页面布局：单栏布局、双栏布局

你现在看到的这篇文章即是“缩略图”顶部居中的“双栏布局”文章，并且打开了顶部大图，怎么样，有没有觉得很漂亮？主题集成了 post-rating 和 H5 元数据，这对部分搜索引擎的显示非常友好，下图是我之前的网站 Youth Daily。还可以点击图片试试，这里用到了一个非常小巧的灯箱插件 Slimbox，大家可以试试。

双栏布局下可以自动支持文章目录（关联 H3 显示在右侧）。本站主导航可以设置隐藏在左侧（即浏览器低宽度下的响应状态，对移动用户非常友好），但我选择了常规样式并作了简单调整，最后成了如今的模样。我想我可能以后更多的会使用“单栏布局”模式，毕竟看着更清爽，比如：我们就是想装个摄像头……

页面样式实际上并不多，但是文档归档模板做的有点儿特色欢迎踩踏。另外我自己加了个分享栏，代码非常轻便不用加载 JS/CSS 而且比一般的更好用，分享代码（仅微博）如下：

<a target="_blank" rel="external nofollow" href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f='http://v.t.sina.com.cn/share/share.php?appkey=3004081210',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','<?php echo $pinimage[0]; ?>','<?php the_title(); ?> &raquo; <?php echo $description; ?>（分享自@鸡蛋麵）','','utf-8'));" class="single_share iconfont icon-weibo"></a>

具体会实现什么效果，不妨点微博分享下试试。另外还添加了几个小功能，如文章折叠、外链转内链等，不过比较有用的可能是这个关于彻底禁止 WordPress 自动剪裁的方法。

禁止 WordPress 自动剪裁成 768w 像素缩略图

在以前，我们可以通过将设置-多媒体设置里的尺寸全部填写成零并取消勾选，然后再把主题中的相关函数去掉从而起到不自动剪裁图片的效果，但是自 WordPress 更新到 4.4 以后，系统会自动剪裁出一个 768px 宽为默认主题响应式准备的缩略图，我们往往用不着，所以得干掉它。

之前我尝试了多种方法包括删除源函数、更改系统设置等都不奏效……机智的我后来用了一种不更改源文件且行之有效的办法……不升级！言归正传，归根结底的原因其实是 4.4 版本后 WP 在选项中硬生生的写了个 768 的尺寸进去，咱们正常模式下看不见！解决办法是将下述语句在 Mysql 中执行，然后将其参数改为零。

SELECT * FROM `wp_options` where option_name='medium_large_size_w'

两段有利于 SEO 的代码片段

虽说没啥卵用，但还是习惯性加上，主要是应用于文章页的外链加 NF 标签，我曾经介绍过一种更狠的办法：WordPress 文章正文中的外链转内链源代码分享

代码太长了 >>
展开 / 收起

//内文外链 nofollow，target=_blank
add_filter( 'the_content', 'cn_nf_url_parse');
function cn_nf_url_parse( $content ) {
	$regexp = "<a\s[^>]*href=(\"??)([^\" >]*?)\\1[^>]*>";
	if(preg_match_all("/$regexp/siU", $content, $matches, PREG_SET_ORDER)) {
		if( !empty($matches) ) {
			$srcUrl = get_option('siteurl');
			for ($i=0; $i < count($matches); $i++)
			{
				$tag = $matches[$i][0];
				$tag2 = $matches[$i][0];
				$url = $matches[$i][0];
				$noFollow = '';
				$pattern = '/target\s*=\s*"\s*_blank\s*"/';
				preg_match($pattern, $tag2, $match, PREG_OFFSET_CAPTURE);
				if( count($match) < 1 )
					$noFollow .= ' target="_blank" ';
				$pattern = '/rel\s*=\s*"\s*[n|d]ofollow\s*"/';
				preg_match($pattern, $tag2, $match, PREG_OFFSET_CAPTURE);
				if( count($match) < 1 )
					$noFollow .= ' rel="nofollow" ';
				$pos = strpos($url,$srcUrl);
				if ($pos === false) {
					$tag = rtrim ($tag,'>');
					$tag .= $noFollow.'>';
					$content = str_replace($tag2,$tag,$content);
				}
			}
		}
	}
	$content = str_replace(']]>', ']]>', $content);
	return $content;
}

//评论者链接加NF
function add_nofollow_to_comments_popup_link(){
	return ' rel="external nofollow" ';
}
add_filter('comments_popup_link_attributes', 'add_nofollow_to_comments_popup_link');

//禁止评论中URL自动可点击化
remove_filter( 'comment_text', 'make_clickable',  9 );

文章折叠功能

Function 需要的话找我要，粘到文章里头老是自动执行。这是对应的 Javascript，CSS 根据情况自己改

//展开/折叠功能代码
jQuery(document).ready(
	function(jQuery){
	jQuery('.collapseButton').click(function(){
		jQuery(this).parent().parent().find('.xContent').slideToggle('fast');
	});
});

点开有惊喜呦 >>
展开 / 收起

其他优化

见下页。说了这么多废话，介绍的都是不入流的东西……见笑了，毕竟外行啊……纯粹算是个记录贴吧。

1 2 3»

“博客年度更新”有 55 条评论

撰写评论

弋牧 28/05/2017 18:08 回复

头部大图有意思
1. 牧羊人 28/05/2017 21:56 回复
  
  @弋牧美女当然有意思啦哈哈哈哈
winegrower 28/04/2017 19:26 回复

你这个主题挺不错的，从大的结果到具体的细节都挺棒，但不清楚移动端效果如何？
1. 牧羊人 28/04/2017 19:54 回复
  
  @winegrower 移动端食用效果更佳~~
  
  PC端实际上有点点bug来着。。
古汐 27/04/2017 14:33 回复

悬浮的下一篇挺好玩的。。。。
1. 牧羊人 28/04/2017 19:54 回复
  
  @古汐是吧~这个设计确实挺好玩的，以及弹出评论窗口
豌豆苗 07/04/2017 08:57 回复

网站主题确实不错，博主折腾的不一般！感觉很顺手，体验不一般！
1. 牧羊人 08/04/2017 16:28 回复
  
  @豌豆苗感谢来访
纬八路 31/03/2017 14:57 回复

会折腾主题真好
有了相机，进了相机的坑了。摄影也挺烧钱
1. 牧羊人 01/04/2017 16:09 回复
  
  @纬八路确实，其实买个iphone就完美解决问题了，用不着买相机的
pxboy 31/03/2017 13:35 回复

主题不错，不亏是收费主题，细节制作的都很好，可惜主题作者官网打不开
1. 牧羊人 01/04/2017 16:09 回复
  
  @pxboy 作者说网站正在搬家，耐心等候哈哈哈哈
秦大叔 31/03/2017 10:06 回复

还是要懂技术，玩起wordpress来才得心应手。
1. 牧羊人 01/04/2017 16:08 回复
  
  @秦大叔还好吧，你看我就不懂，多花点时间折腾折腾九好啦
鱼尾纹 28/03/2017 14:58 回复

你这新主题很赞啊啊啊啊，虽然是wordpress，我用不了
1. 牧羊人 01/04/2017 16:08 回复
  
  @鱼尾纹不过bug也非常多，哈哈哈哈
Loekman 26/03/2017 10:04 回复

嗯还不错，符合我的胃口 ( ⊙ o ⊙ )
1. 牧羊人 28/03/2017 09:42 回复
  
  @Loekman 哈哈哈哈，你的主题也很棒啊~
灰常记忆 24/03/2017 17:01 回复

这个不是以前的主题
1. 牧羊人 26/03/2017 01:02 回复
  
  @灰常记忆才换的呀~~新主题如何哇~
Life in Faw 24/03/2017 12:27 回复

主题非常不错，技术文章介绍的很详细，学习了。
1. 牧羊人 26/03/2017 01:02 回复
  
  @Life in Faw 哪里哪里啊
  
  大家互相学习
  
  我是代码盲，瞎折腾而已
上海网站建设 23/03/2017 11:34 回复

博主明显压力很大的呀。。
1. 牧羊人 26/03/2017 01:01 回复
  
  @上海网站建设呃，是啊
  
  压力太大脱不了身啊
纬八路 23/03/2017 10:48 回复

多拍点美图，不过拍的时候，小心被发现
1. 牧羊人 26/03/2017 00:58 回复
  
  @纬八路镜头焦距不够啊！！！
  
  我也想拍啊！
懿古今 23/03/2017 09:19 回复

我一直都认为折腾是保持激情最好的办法，所以博主这个每年都折腾一下的做法真的非常好
1. 牧羊人 26/03/2017 00:58 回复
  
  @懿古今呃。。。
  
  就当你说的是对的吧~
小星星的博客 22/03/2017 22:04 回复

求模板一套，谢谢！
依然 21/03/2017 19:55 回复

手机端体验良好
1. 牧羊人 26/03/2017 00:58 回复
  
  @依然嗯呢~~
  
  你这新主题还挺适合发图的，不过打开速度太慢了，可以考虑上个免费的CDN·
jeray.wang 21/03/2017 09:05 回复

相机买好了，那就多多更新美图吧。
还有我现在对博客的功能已经无关紧要了，重点就是稳定，简洁，美观就足够了。
估计也变相说明我老了，懒得折腾了
1. 牧羊人 21/03/2017 19:36 回复
  
  @jeray.wang 说得对说得对~
  
  看你好像换主题了麻
  1. jeray.wang 21/03/2017 20:25 回复
    
    @牧羊人恩，因为主要要在朋友圈分享，所以把老博客暂停更新了，数据以及系统都没有新博客的typecho简洁干净。老博客用之前的主题了，还是喜欢简洁的
灰狼 20/03/2017 10:32 回复

文章里面翻页，点了之后要先看一阵子大图，往下滑才看得到正文，感觉有点过于复杂了
1. 牧羊人 20/03/2017 21:29 回复
  
  @灰狼这个确实是个问题，不过文章翻页之后除了 content 变了之外，其他元素没有任何改变，所以好像也不好弄，暂时就这样了
  
  以后尽量少用分页
尽欢 19/03/2017 10:10 回复

因为刚好遇见你，留下足迹才美丽~~~
山小炮 19/03/2017 08:30 回复

最喜欢点开有福利啦～～主题很好看，代码高亮比较喜欢～～
1. 牧羊人 20/03/2017 21:28 回复
  
  @山小炮 ahh
  
  代码高亮是N久之前的一个小工具，其实很不完善，缺陷多。。不过好在不用额外加载css js
文栋说自媒体 18/03/2017 21:55 回复

难道，是位美女博主，哇咔咔，来支持一下！
1. 牧羊人 20/03/2017 21:25 回复
  
  @文栋说自媒体让您失望了哈哈哈哈
  
  常来常来
fooleap 16/03/2017 18:02 回复

我是来看美女的
1. 牧羊人 18/03/2017 10:32 回复
  
  @fooleap 欢迎踩踏~
BanYuner 15/03/2017 22:56 回复

可以的这个主题非常不错的啊很简洁效果方面也很好
1. 牧羊人 18/03/2017 10:32 回复
  
  @BanYuner 哈哈哈哈
  
  原作者给力啊
  
  我更新了下~
河石子 15/03/2017 18:57 回复

新颖的主题，不错，这是一条测试评论。内容就不要看了蛤。
1. 牧羊人 18/03/2017 10:31 回复
  
  @河石子更新了下，欢迎测试哈哈哈哈~
牧羊人 15/03/2017 10:42 回复
themebetter 15/03/2017 10:33 回复

测试评论
牧羊人 13/03/2017 22:38 回复

这是一条测试评论
1. 牧羊人 13/03/2017 22:40 回复
  
  @牧羊人嵌套一层测试
  1. muguayuan.com 14/03/2017 11:12 回复
    
    @牧羊人再来一层吧
    1. 牧羊人 14/03/2017 11:35 回复
      
      @muguayuan.com 这是一条测试评论回复的哈哈哈哈
      1. 老杨 14/03/2017 18:26 回复
        
        @牧羊人这是一条测试评论回复的哈哈哈哈的回复哈哈哈哈
      2. 博客本 20/03/2017 13:58 回复
        
        @牧羊人到这里就不好看了