博客年度更新(2017年)

博客年度更新(2017年)

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

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

牧羊人博客简介

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

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

多变的文章样式

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

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

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

曾经的youth daily在搜索引擎中的表现
曾经的youth daily在搜索引擎中的表现

双栏布局下可以自动支持文章目录(关联 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 宽为默认主题响应式准备的缩略图,我们往往用不着,所以得干掉它。

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

SELECT * FROM `wp_options` where option_name='medium_large_size_w'
我也不知道哪来的美女图

两段有利于 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 根据情况自己改:

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

隐藏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;
}

上一个主题的一些截图

1920 1199 牧羊人
55条评论
  • 弋牧
    05/28/2017 at 18:08 回复

    头部大图有意思

    • 牧羊人
      05/28/2017 at 21:56 回复

      美女当然有意思啦哈哈哈哈

  • winegrower
    04/28/2017 at 19:26 回复

    你这个主题挺不错的,从大的结果到具体的细节都挺棒,但不清楚移动端效果如何?

    • 牧羊人
      04/28/2017 at 19:54 回复

      移动端食用效果更佳~~

      PC端实际上有点点bug来着。。 😉

  • 古汐
    04/27/2017 at 14:33 回复

    悬浮的下一篇挺好玩的。。。。

    • 牧羊人
      04/28/2017 at 19:54 回复

      是吧~这个设计确实挺好玩的,以及 弹出 评论窗口

  • 豌豆苗
    04/07/2017 at 08:57 回复

    网站主题确实不错,博主折腾的不一般!感觉很顺手,体验不一般!

    • 牧羊人
      04/08/2017 at 16:28 回复

      感谢来访

  • 纬八路
    03/31/2017 at 14:57 回复

    会折腾主题真好
    有了相机,进了相机的坑了。摄影也挺烧钱

    • 牧羊人
      04/01/2017 at 16:09 回复

      确实,其实买个iphone就完美解决问题了,用不着买相机的

  • pxboy
    03/31/2017 at 13:35 回复

    主题不错,不亏是收费主题,细节制作的都很好,可惜主题作者官网打不开

    • 牧羊人
      04/01/2017 at 16:09 回复

      作者说 网站正在搬家,耐心等候哈哈哈哈 🙂

  • 秦大叔
    03/31/2017 at 10:06 回复

    还是要懂技术,玩起wordpress来才得心应手。

    • 牧羊人
      04/01/2017 at 16:08 回复

      还好吧,你看我就不懂,多花点时间折腾折腾九好啦

  • 鱼尾纹
    03/28/2017 at 14:58 回复

    🙄 你这新主题很赞啊啊啊啊,虽然是wordpress,我用不了

    • 牧羊人
      04/01/2017 at 16:08 回复

      不过bug也非常多,哈哈哈哈 😕

  • Loekman
    03/26/2017 at 10:04 回复

    嗯 还不错,符合我的胃口 ( ⊙ o ⊙ )

    • 牧羊人
      03/28/2017 at 09:42 回复

      哈哈哈哈,你的主题也很棒啊~

  • 灰常记忆
    03/24/2017 at 17:01 回复

    这个不是以前的主题

    • 牧羊人
      03/26/2017 at 01:02 回复

      才换的呀~~新主题如何哇~ 😀

  • Life in Faw
    03/24/2017 at 12:27 回复

    主题非常不错,技术文章介绍的很详细,学习了。

    • 牧羊人
      03/26/2017 at 01:02 回复

      哪里哪里啊

      大家互相学习

      我是代码盲,瞎折腾而已

  • 上海网站建设
    03/23/2017 at 11:34 回复

    博主明显压力很大的呀。。

    • 牧羊人
      03/26/2017 at 01:01 回复

      呃,是啊

      压力太大 脱不了身啊 😥

  • 纬八路
    03/23/2017 at 10:48 回复

    多拍点美图,不过拍的时候,小心被发现

    • 牧羊人
      03/26/2017 at 00:58 回复

      镜头焦距不够啊!!!

      我也想拍啊!
      🙁

  • 懿古今
    03/23/2017 at 09:19 回复

    我一直都认为折腾是保持激情最好的办法,所以博主这个每年都折腾一下的做法真的非常好

    • 牧羊人
      03/26/2017 at 00:58 回复

      呃。。。

      就当你说的是对的吧~ 😆 😆

  • 小星星的博客
    03/22/2017 at 22:04 回复

    求模板一套,谢谢!

  • 依然
    03/21/2017 at 19:55 回复

    手机端体验良好

    • 牧羊人
      03/26/2017 at 00:58 回复

      嗯呢~~

      你这新主题还挺适合发图的,不过打开速度太慢了,可以考虑上个免费的CDN·

  • jeray.wang
    03/21/2017 at 09:05 回复

    相机买好了,那就多多更新美图吧。
    还有我现在对博客的功能已经无关紧要了,重点就是稳定,简洁,美观就足够了。
    估计也变相说明我老了,懒得折腾了 🙂

    • 牧羊人
      03/21/2017 at 19:36 回复

      说得对说得对~

      看你好像换主题了麻

      • jeray.wang
        03/21/2017 at 20:25 回复

        恩,因为主要要在朋友圈分享,所以把老博客暂停更新了,数据以及系统都没有新博客的typecho简洁干净。老博客用之前的主题了,还是喜欢简洁的

  • 灰狼
    03/20/2017 at 10:32 回复

    文章里面翻页,点了之后要先看一阵子大图,往下滑才看得到正文,感觉有点过于复杂了

    • 牧羊人
      03/20/2017 at 21:29 回复

      这个确实是个问题,不过文章翻页之后除了 content 变了之外,其他元素没有任何改变,所以好像也不好弄,暂时就这样了 😆

      以后尽量少用分页

  • 尽欢
    03/19/2017 at 10:10 回复

    因为刚好遇见你,留下足迹才美丽~~~

  • 山小炮
    03/19/2017 at 08:30 回复

    最喜欢点开有福利啦~~主题很好看,代码高亮比较喜欢~~

    • 牧羊人
      03/20/2017 at 21:28 回复

      ahh

      代码高亮是N久之前的一个小工具,其实很不完善,缺陷多。。不过好在不用额外加载css js 😕

  • 文栋说自媒体
    03/18/2017 at 21:55 回复

    难道,是位美女博主,哇咔咔,来支持一下!

    • 牧羊人
      03/20/2017 at 21:25 回复

      让您失望了哈哈哈哈

      常来常来

  • fooleap
    03/16/2017 at 18:02 回复

    我是来看美女的 🙄

    • 牧羊人
      03/18/2017 at 10:32 回复

      欢迎踩踏~ 😎

  • BanYuner
    03/15/2017 at 22:56 回复

    可以的 这个主题非常不错的啊 很简洁 效果方面也很好

    • 牧羊人
      03/18/2017 at 10:32 回复

      哈哈哈哈

      原作者给力啊

      我更新了下~

  • 河石子
    03/15/2017 at 18:57 回复

    新颖的主题,不错,这是一条测试评论。内容就不要看了蛤。

    • 牧羊人
      03/18/2017 at 10:31 回复

      更新了下,欢迎测试哈哈哈哈~ 😮

  • 牧羊人
    03/15/2017 at 10:42 回复

    🙄

  • themebetter
    03/15/2017 at 10:33 回复

    测试评论

  • 牧羊人
    03/13/2017 at 22:38 回复

    这是一条测试评论

    • 牧羊人
      03/13/2017 at 22:40 回复

      嵌套一层测试

      • muguayuan.com
        03/14/2017 at 11:12 回复

        再来一层吧

        • 牧羊人
          03/14/2017 at 11:35 回复

          这是一条测试评论回复的哈哈哈哈

          • 老杨
            03/14/2017 at 18:26 回复

            这是一条测试评论回复的哈哈哈哈的回复哈哈哈哈

          • 博客本
            03/20/2017 at 13:58 回复

            到这里就不好看了

发表评论

请输入关键词...