博客年度更新（小功能添加和 SEO 优化）

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

前些日子买了台相机，心想以后可能会时不时发布些照片，而原来那款主题并不适合查图，所以我爬遍博友圈，找到了这款 Wordprss 主题。这里感谢 @Javis 开发了这样一款优秀的主题，同时还耐心地解答我的疑问，帮助我修改完善本站。本文主要介绍本站新特性及优缺点，并记录我的修改历程，同时介绍几个非常有用的 Tips 给各位。

1、牧羊人博客简介

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

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

2、多变的文章样式

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

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

你现在看到的这篇文章即是“缩略图”顶部居中的“双栏布局”文章，并且打开了顶部大图，怎么样，有没有觉得很漂亮？主题集成了 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 自动剪裁的方法。

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

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

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

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

4、两段有利于 SEO 的代码片段

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

//评论者链接加 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 );

其实现在发现没必要这么复杂，直接在 wp 系统文件里面去改就行了，20220815

WordPress 正文折叠功能（已停用，古腾堡已有类似功能）

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

//添加“展开/收起”功能，使用方法：[z title="标题"]需点击展开的内容[/z] 
function xcollapse($atts, $content = null){
	extract(shortcode_atts(array("title"=>""),$atts));
	return '<div style="margin: 0.5em 0;">
		<div class="xControl">
			<span class="xTitle">'.$title.'&nbsp;&nbsp;>></span>
			<a href="javascript:void(0)" class="collapseButton xButton" title="点击这里 展开/收起 隐藏内容">展开 / 收起</a>
			<div style="clear: both;"></div>
		</div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('z', 'xcollapse');

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

/* 正文内容折叠，已停用
.xControl {
	font-family: Aleo,Microsoft YaHei,serif
}

.xControl a {
	float: right;
	margin-right: 2px;
	border: 0;
	color: #b10b14;
	font-style: italic
}

.xControl a:hover {
	text-decoration: underline
}

.xControl .xTitle {
	padding-right: 6px;
	color: #b10b14;
	font-style: italic
}
*/

隐藏 WordPress 不必要的内容

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

//去掉后台 WordPress logo
function cwp_remove_wp_logo_from_admin_bar_new( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}
add_action( 'admin_bar_menu', 'cwp_remove_wp_logo_from_admin_bar_new', 25 );

//添加下一页按钮到编辑器
add_filter('mce_buttons','Shepherd_add_next_page_button');
function Shepherd_add_next_page_button($mce_buttons) {
 $pos = array_search('wp_more',$mce_buttons,true);
 if ($pos !== false) {
  $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
  $tmp_buttons[] = 'wp_page';
  $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
 }
 return $mce_buttons;}
//可选格式
add_filter("mce_buttons", "enable_more_buttons");
function enable_more_buttons($buttons) {
$buttons[] = 'styleselect';
$buttons[] = 'fontselect';
return $buttons;
}
//添加中文字体到编辑器
add_filter('tiny_mce_before_init', 'custum_fontfamily');
function custum_fontfamily($initArray){
   $initArray['font_formats'] = "宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';ClearSans='clear_sansregular',Helvetica,Arial,sans-serif;ClearSans Medium='clear_sans_mediumregula',Helvetica,Arial,sans-serif;ClearSans Light='clear_sans_lightregular',Helvetica,Arial,sans-serif;ClearSans Thin='clear_sans_thinregular',Helvetica,Arial,sans-serif";
   return $initArray;
}

---

5、上一个主题的一些截图