以子主题方式自定义WordPress

虽然我一直用的是Wordpress自带的TwentyFourteen主题,但是其实还是自己改动了很多地方的。以致于时间一长就有些功能是在哪改的都忘了,比如之前直接输入http://youthlin.com/links的话会跳转到首页,得从站内点击才能打开这个链接页面。之前也一直没在意,上周觉得这样不好,因为我发布一个页面http://youthlin.com/?page_id=1183直接打开会跳到首页而不是打开页面。额(-。-;)于是打算重整一下主题了。

计划一是自己写个主题,然而技术还不到家现在也没时间。
计划二就是改用子主题啦。

通过子主题可以把网上流传的各种(通过在functions.php添加代码的)特性集成到博客中,而又不需要修改原主题,即使原主题升级了也不会被覆盖。

子主题很早就知道啦,可以看看WP大学的文章简单了解下:使用WORDPRESS的子主题功能修改你的WORDPRESS主题

首先是style.css, 按照模板写就行了,不过不推荐用@import方式导入原主题样式,建议把原来的样式压缩一下直接粘贴过来,用在线网站就能压缩CSS百度一下很多的。这样能稍微提高下打开网站的速度。然后自己要自定义的样式写在他后面就行。

下面说说functions.php的内容,Wordpress大学那片文章说子主题的functions.php比原主题先载入(而style.css是替换原主题的样式表)。这个不是很要紧,反正他不会覆盖就行了,也就是不用把原来的拷贝过来。
于是,很多自定义的功能就可以都加在子主题的这个functions.php里。比如:

  • 替换Google字体
  • 评论回复通知(网上流传的使用comments-ajax.php的版本)
  • 登录页面添加验证码、添加参数
  • 替换默认的Emoji地址
  • 添加自定义表情支持
  • 添加自定义小工具,如带头像的近期评论、随机文章
  • 在header, footer添加自定义代码,如添加返回顶部、滚到底部、定位到评论的功能;评论分页ajax载入的功能。

以上部分内容可参见:

提醒:需要注意的是路径问题。(这个示例的子主题文件夹名称是2014)

下面是functions.php的内容:

其中:

  • 替换字体,原主题是使用twentyfourteen_font_url函数加载字体的,子主题不能重新定义这个函数,因此新顶一个函数,然后使用过滤器add_filter('twentyfourteen_font_url','my_font_url');替换原函数。
  • 评论通知需要comments-ajax.php, comments-ajax.js配合使用,还需要修改一下父主题的comments.php模板,添加自定义表情也要改一下评论模板。
    下面是comments.php的内容:

comments-ajax.js, comments-ajax.php内容:点击右边箭头在新窗口打开
注意代码中的路径发生了变化

其他文件也可以自定义,都会覆盖父主题,所以一般都是把父主题的模板拷贝过来修改。比如上面的评论模板,还有我还改了个404模板。 用意是:贡献404,让迷失宝贝回家

感谢阅读。


“以子主题方式自定义WordPress”的6个回复

Loading...

发表评论

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