wordpress博客主题制作技巧 – 函数妙用

设计WordPress主题时,发现在functions.php文件里添加一套通用的自定义函数将会大大提高开发效率;

因为,这样我就可以不必每次开发主题时都需先查找然后复制同样的函数。因此,我先搞定functions.php模板然后从那里开始创建主题,模板里把一些必要的准备工作都做好了。

包括:

1、包含 jQuery
2、启用嵌套评论
3、给头部添加Feed链接
4、禁用无用的小工具区域
5、给脚部添加谷歌分析工具
6、阻止“read more”的跳转
这些函数让我喜欢的共同点就是它们都非常简单明了、高效!

此functions.php 模板目前包含了十五个函数,并且还在不断改善中。

虽然,并不是所有人都会需要使用文件中的所有函数,但我的目的是将这个模板修改为适合大家使用的通用型模板,能够让你通过这些真正实用的函数找到主题开发的突破口。

在这篇文章里,我先向大家解释下每个函数,然后将所有这十五个函数融合在一起放入到functions.php模板中。

你只要复制并粘贴本文最后的代码或是获取 functions.php文件的压缩包 ,就可以通过此模板享受WordPress的基本功能,为您的开发带来的极大的便利!

给头部添加feed链接

WordPress2.9以后,你都可以在头部区域添加所有相关的feed链接(如:主体、评论、分类等)。

不过这并不是默认的,你需要添加下面的代码来运行:

  1. // add feed links to header
  2. if (function_exists(‘automatic_feed_links’)) {
  3. automatic_feed_links();
  4. } else {
  5. return;
  6. }

复制代码

这段代码先检查你是否使用可兼容的WordPress版本,然后再启用自动geed链接。

几点注意事项:

第一,此方法是假设你没有手动在头部添加任何feed链接;

第二,根据 最近这个Trac ticket,似乎这个功能与add_theme_support已经整合在一起了。

自动包含jQuery

如何包含 jQuery ? 你可以在主题的functions.php文件里添加下面的代码:

  1. // smart jquery inclusion
  2. if (!is_admin()) {
  3. wp_deregister_script(‘jquery’);
  4. wp_register_script(‘jquery’,
  5. (“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”), false);
  6. wp_enqueue_script(‘jquery’);
  7. }

 
这个代码可以确保只包含一份jQuery,并从谷歌服务器上访问它,节省带宽同时访问时还有缓存上的优势;

注意,这段代码必需放在嵌套评论函数的前面才能正常运行。

启用嵌套评论

一般来说,启用嵌套评论需要在头部区域添加一小段代码到wp_head 标签的前面。

经过一次小实验后,我发现你可以在functions.php文件里添加这段代码:

  1. // enable threaded comments
  2. function enable_threaded_comments(){
  3. if (!is_admin()) {
  4. if (is_singular() AND comments_open() AND (get_option(‘thread_comments’) == 1))
  5. wp_enqueue_script(‘comment-reply’);
  6. }
  7. }
  8. add_action(‘get_header’, ‘enable_threaded_comments’);

这有助于保持 <head>文件的整洁性;

注意,这个函数需要放置在jQuery-inclusion函数的后面才能正常运作。

删除Head区域多余东西

WordPress  <head>文件里含有大量的多余东西, 诸如,版本号、WLW、RSD和索引链接。

为了清除这些不必要信息,你可以在functions.php文件里添加下面的代码:

// remove junk from head

  1. remove_action(‘wp_head’, ‘rsd_link’);
  2. remove_action(‘wp_head’, ‘wp_generator’);
  3. remove_action(‘wp_head’, ‘feed_links’, 2);
  4. remove_action(‘wp_head’, ‘index_rel_link’);
  5. remove_action(‘wp_head’, ‘wlwmanifest_link’);
  6. remove_action(‘wp_head’, ‘feed_links_extra’, 3);
  7. remove_action(‘wp_head’, ‘start_post_rel_link’, 10, 0);
  8. remove_action(‘wp_head’, ‘parent_post_rel_link’, 10, 0);
  9. remove_action(‘wp_head’, ‘adjacent_posts_rel_link’, 10, 0);

给页脚添加谷歌分析工具

另一个比较让我头疼的事情就是每一次制作站点时都需要在footer.php文件添加谷歌分析工具的代码;

最近我才往functions.php 文件添加了下面的代码并从此不用为这个问题头疼了。

// add google analytics to footer

  1. function add_google_analytics() {
  2. echo ‘<script src=”http://www.google-analytics.com/ga.js” type=”text/javascript”></script>’;
  3. echo ‘<script type=”text/javascript”>’;
  4. echo ‘var pageTracker = _gat._getTracker(“UA-XXXXX-X”);’;
  5. echo ‘pageTracker._trackPageview();’;
  6. echo ‘</script>’;
  7. }
  8. add_action(‘wp_footer’, ‘add_google_analytics’);

两点注意事项:

第一,用你实际的 GA 代码代替“UA-123456-1” ;

第二,你也可以查看当前谷歌分析工具的三种选择并修改相应的代码。

目前,这个函数使用“ga.js”跟踪代码,你也可以改用其他方法。

自定义摘要的长度,
使用下面这个函数你就可以给摘要指定任何长度而不用受默认的55字的限制。

// custom excerpt length

  1. function custom_excerpt_length($length) {
  2. return 20;
  3. }
  4. add_filter(‘excerpt_length’, ‘custom_excerpt_length’);

你只需要将 “20” 替换为任何你需要的字数。

自定义摘要后 “继续阅读”字符串,

不管你怎么称呼这个方括号里的省略号[…]” ,总之这是WordPress默认的紧跟摘要后面部分;

我想删除方括号,使用下面这段代码你可以对它进行任何更改:

// custom excerpt ellipses for 2.9+

  1. function custom_excerpt_more($more) {
  2. return ‘…’;
  3. }
  4. add_filter(‘excerpt_more’, ‘custom_excerpt_more’);
  5. /* custom excerpt ellipses for 2.8-
  6. function custom_excerpt_more($excerpt) {
  7. return str_replace(‘[…]’, ‘…’, $excerpt);
  8. }
  9. add_filter(‘wp_trim_excerpt’, ‘custom_excerpt_more’);
  10. */

你可能已经注意到这里的代码有两个不同版本,看你使用的是WordPress什么版本;

当然最好是使用最新版,因此这里注释了更老版本的方法,不过要是你需要的话也可以使用它;

不管是什么版本,使用此方法你仅仅需要用 “。..” 或是任何你想要的符号来代替原来的“[。..]”,即可。

“read more” 链接无法正常跳转

WordPress里最让人不可思议的就是当读者在浏览一篇文章的模式下点击“read more” 链接时,页面就会跳转到 “<!–more–>” 标签的位置。

如果是跳转到同一页面也就无所谓了,但是如果是重新加载一个新的页面然后读者发现没有了下文也没有任何解释说哪里出错了,这就很让人觉得莫名其妙的。

无论如何,这里有个非常漂亮的小函数可以阻止跳转的发生:

// no more jumping for read more link

  1. function no_more_jumping($post) {
  2. return ‘<a href=”‘.get_permalink($post->ID).'”>’.’Continue Reading’.'</a>’;
  3. }
  4. add_filter(‘excerpt_more’, ‘no_more_jumping’);

这段代码无需其他任何东西就可以运行,从此你就可以不必为“跳转”费心了。

注意,这也是自定义“read more”链接的好方法,你可以在此给它设定各种属性或定义任何你想要文本。

博客添加图标

如果你想给博客添加个图标,下面的代码将会非常实用。

创建完图标后只要上传图片到网站的根目录下即可。

只要在functions.php文件的 <head>区域添加下面的几行代码:

  1. // add a favicon to your
  2. function blog_favicon() {
  3. echo ‘<link rel=”Shortcut Icon” type=”image/x-icon” href=”‘.get_bloginfo(‘wpurl’).’/favicon.ico” />’;
  4. }
  5. add_action(‘wp_head’, ‘blog_favicon’);

复制代码

你可以随意更改目录,同时确保wp_head包含在你的主题 header.php文件里。

博客后台添加一个不同的图标

有必要给WordPress后台添加一个特别的图标,这样被收藏为书签或是处理标签时就更加容易认出。只要将图标上传到主题的/images/ 目录下,加上下面的代码即可:

  1. / add a favicon for your admin
  2. function admin_favicon() {
  3. echo ‘<link rel=”Shortcut Icon” type=”image/x-icon”
  4. href=”‘.get_bloginfo(‘stylesheet_directory’).’/images/favicon.png” />’;
  5. }
  6. add_action(‘admin_head’, ‘admin_favicon’);

复制代码

像前面一样,你同样可以随意更改目录。不过最好将后台图标和前台图标分开放在不同的目录下。

自定义后台登陆图标

是否想利用WordPress图标在各个登陆页面给自己做宣传?那么,你可以将这个WordPress图标替换为其他自定义图片,创建自定义登陆图片,并将其命名为“custom-login-logo.png”将图片上传至主题的/images/ 目录下,用下面的代码:

  1. // custom admin login logo
  2. function custom_login_logo() {
  3. echo ‘<style type=”text/css”>
  4. h1 a { background-image:
  5. url(‘.get_bloginfo(‘template_directory’).’/images/custom-login-logo.png) !important; }
  6. </style>’;
  7. }
  8. add_action(‘login_head’, ‘custom_login_logo’);

复制代码

这里关键是要你设置路径和图片名称一致。另外,在创建图片的时候,记住图片的属性:宽为30px, 高为31px,透明GIF格式,头部背景色#464646 。

禁用无用的小工具区域

Justin Tadlock介绍了个非常方便的函数,可用于删除主题中不需要的小工具区域,这是自定义主题必不可少的一个函数:

  1. // disable all widget areas
  2. function disable_all_widgets($sidebars_widgets) {
  3. //if (is_home())
  4. $sidebars_widgets = array(false);
  5. return $sidebars_widgets;
  6. }
  7. add_filter(‘sidebars_widgets’, ‘disable_all_widgets’);

复制代码

这个代码属于即插即用型,不需要任何更改。注意:如果你只想在主页禁用小工具,那么就将第三栏的 “//”删除。

删除WordPress更新提示

我比较讨厌WordPress更新提示,下面的代码就可以将管理面板的更新提示删除:

  1. // kill the admin nag
  2. if (!current_user_can(‘edit_users’)) {
  3. add_action(‘init’, create_function(‘$a’, “remove_action(‘init’, ‘wp_version_check’);”), 2);
  4. add_filter(‘pre_option_update_core’, create_function(‘$a’, “return null;”));
  5. }

复制代码

如果你想要获得更新通知的话,你也可以将这段代码注释掉或是删除掉。

在body_class 与 post_class中加入分类ID

默认情况下,WordPress body_class和 post_class并没有包含当前文章的分类ID。 不过,你可以用下面的代码来实现:

  1. // category id in body and post class
  2. function category_id_class($classes) {
  3. global $post;
  4. foreach((get_the_category($post->ID)) as $category)
  5. $classes [] = ‘cat-‘ . $category->cat_ID . ‘-id’;
  6. return $classes;
  7. }
  8. add_filter(‘post_class’, ‘category_id_class’);
  9. add_filter(‘body_class’, ‘category_id_class’);

复制代码

即使你没有使用分类ID,但是这个函数还是非常好使的,这也是为什么我将这个归入自定义functions.php 模板的必备函数中来。

获取第一个分类ID

当要处理多个不同分类时,另一个非常实用的函数可以让你获取当前文章的第一个分类。代码如下:

  1. // get the first category id
  2. function get_first_category_ID() {
  3. $category = get_the_category();
  4. return $category[0]->cat_ID;
  5. }

复制代码

严格的即插即播型: 只要在模板文件使用<?php get_first_category_ID(); ?>来访问数据。

整合以上所有代码

如开头承诺,这里将完整的代码贴出来与大家分享:

  1. <?php // custom functions.php template @ digwp.com
  2. // add feed links to header
  3. if (function_exists(‘automatic_feed_links’)) {
  4. automatic_feed_links();
  5. } else {
  6. return;
  7. }
  8. // smart jquery inclusion
  9. if (!is_admin()) {
  10. wp_deregister_script(‘jquery’);
  11. wp_register_script(‘jquery’,
  12. (“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”), false, ‘1.3.2’);
  13. wp_enqueue_script(‘jquery’);
  14. }
  15. // enable threaded comments
  16. function enable_threaded_comments(){
  17. if (!is_admin()) {
  18. if (is_singular() AND comments_open() AND (get_option(‘thread_comments’) == 1))
  19. wp_enqueue_script(‘comment-reply’);
  20. }
  21. }
  22. add_action(‘get_header’, ‘enable_threaded_comments’);
  23. // remove junk from head
  24. remove_action(‘wp_head’, ‘rsd_link’);
  25. remove_action(‘wp_head’, ‘wp_generator’);
  26. remove_action(‘wp_head’, ‘feed_links’, 2);
  27. remove_action(‘wp_head’, ‘index_rel_link’);
  28. remove_action(‘wp_head’, ‘wlwmanifest_link’);
  29. remove_action(‘wp_head’, ‘feed_links_extra’, 3);
  30. remove_action(‘wp_head’, ‘start_post_rel_link’, 10, 0);
  31. remove_action(‘wp_head’, ‘parent_post_rel_link’, 10, 0);
  32. remove_action(‘wp_head’, ‘adjacent_posts_rel_link’, 10, 0);
  33. // add google analytics to footer
  34. function add_google_analytics() {
  35. echo ‘<script
  36. src=”http://www.google-analytics.com/ga.js” type=”text/javascript”></script>’;
  37. echo ‘<script type=”text/javascript”>’;
  38. echo ‘var pageTracker = _gat._getTracker(“UA-XXXXX-X”);’;
  39. echo ‘pageTracker._trackPageview();’;
  40. echo ‘</script>’;
  41. }
  42. add_action(‘wp_footer’, ‘add_google_analytics’);
  43. // custom excerpt length
  44. function custom_excerpt_length($length) {
  45. return 20;
  46. }
  47. add_filter(‘excerpt_length’, ‘custom_excerpt_length’);
  48. // custom excerpt ellipses for 2.9+
  49. function custom_excerpt_more($more) {
  50. return ‘…’;
  51. }
  52. add_filter(‘excerpt_more’, ‘custom_excerpt_more’);
  53. /* custom excerpt ellipses for 2.8-
  54. function custom_excerpt_more($excerpt) {
  55. return str_replace(‘[…]’, ‘…’, $excerpt);
  56. }
  57. add_filter(‘wp_trim_excerpt’, ‘custom_excerpt_more’);
  58. */
  59. // no more jumping for read more link
  60. function no_more_jumping($post) {
  61. return ‘<a href=”‘.get_permalink($post->ID).’
  62. “>’.’Continue Reading’.'</a>’;
  63. }
  64. add_filter(‘excerpt_more’, ‘no_more_jumping’);
  65. // add a favicon to your
  66. function blog_favicon() {
  67. echo ‘<link rel=”Shortcut Icon” type=”image/x-icon”
  68. href=”‘.get_bloginfo(‘wpurl’).’/favicon.ico” />’;
  69. }
  70. add_action(‘wp_head’, ‘blog_favicon’);
  71. // add a favicon for your admin
  72. function admin_favicon() {
  73. echo ‘<link rel=”Shortcut Icon” type=”image/x-icon”
  74. href=”‘.get_bloginfo(‘stylesheet_directory’).’/images/favicon.png” />’;
  75. }
  76. add_action(‘admin_head’, ‘admin_favicon’);
  77. // custom admin login logo
  78. function custom_login_logo() {
  79. echo ‘<style type=”text/css”>
  80. h1 a { background-image:
  81. url(‘.get_bloginfo(‘template_directory’).’/images/custom-login-logo.png) !important; }
  82. </style>’;
  83. }
  84. add_action(‘login_head’, ‘custom_login_logo’);
  85. // disable all widget areas
  86. function disable_all_widgets($sidebars_widgets) {
  87. //if (is_home())
  88. $sidebars_widgets = array(false);
  89. return $sidebars_widgets;
  90. }
  91. add_filter(‘sidebars_widgets’, ‘disable_all_widgets’);
  92. // kill the admin nag
  93. if (!current_user_can(‘edit_users’)) {
  94. add_action(‘init’, create_function(‘$a’,
  95. “remove_action(‘init’, ‘wp_version_check’);”), 2);
  96. add_filter(‘pre_option_update_core’, create_function(‘$a’, “return null;”));
  97. }
  98. // category id in body and post class
  99. function category_id_class($classes) {
  100. global $post;
  101. foreach((get_the_category($post->ID)) as $category)
  102. $classes [] = ‘cat-‘ . $category->cat_ID . ‘-id’;
  103. return $classes;
  104. }
  105. add_filter(‘post_class’, ‘category_id_class’);
  106. add_filter(‘body_class’, ‘category_id_class’);
  107. // get the first category id
  108. function get_first_category_ID() {
  109. $category = get_the_category();
  110. return $category[0]->cat_ID;
  111. }
  112. ?>

复制代码

Leave a comment

You must be logged in to post a comment.