wordpress博客主题制作技巧:模板函数妙用
2019-03-13 23:47:48来源: 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.8以后,你都可以在头部区域添加所有相关的feed链接(主体、评论、分类等),不过这并不是默认的,你需要添加下面的代码来运行:
// add feed links to header if (function_exists('automatic_feed_links')) { automatic_feed_links(); } else { return; } |
这段代码先检查你是否使用可兼容的WordPress版本,然后再启用自动geed链接。几点注意事项:第一,此方法是假设你没有手动在头部添加任何feed链接。第二,根据 最近这个Trac ticket,似乎这个功能与add_theme_support已经整合在一起了。
自动包含jQuery
如何包含 jQuery ? 你可以在主题的functions.php文件里添加下面的代码:
// smart jquery inclusion ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); |
这个代码可以确保只包含一份jQuery,并从谷歌服务器上访问它,节省带宽同时访问时还有缓存上的优势。注意,这段代码必需放在嵌套评论函数的前面才能正常运行。
启用嵌套评论
一般来说,启用嵌套评论需要在头部区域添加一小段代码到wp_head 标签的前面。经过一次小实验后,我发现你可以在functions.php文件里添加这段代码:
// enable threaded comments function enable_threaded_comments(){ if (!is_admin()) { if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) wp_enqueue_script('comment-reply'); } } add_action('get_header', 'enable_threaded_comments'); |
这有助于保持 <head>文件的整洁性,注意,这个函数需要放置在jQuery-inclusion函数的后面才能正常运作。
删除Head区域多余东西
WordPress <head>文件里含有大量的多余东西, 诸如,版本号、WLW、RSD和索引链接。为了清除这些不必要信息,你可以在functions.php文件里添加下面的代码:
// remove junk from head remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'feed_links', 2); remove_action('wp_head', 'index_rel_link'); remove_action('wp_head', 'wlwmanifest_link'); remove_action('wp_head', 'feed_links_extra', 3); remove_action('wp_head', 'start_post_rel_link', 10, 0); remove_action('wp_head', 'parent_post_rel_link', 10, 0); remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0); |
给页脚添加谷歌分析工具
另一个比较让我头疼的事情就是每一次制作站点时都需要在footer.php文件添加谷歌分析工具的代码。最近我才往functions.php 文件添加了下面的代码并从此不用为这个问题头疼了。
// add google analytics to footer function add_google_analytics() { echo '<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>'; echo '<script type="text/javascript">'; echo 'var pageTracker = _gat._getTracker("UA-XXXXX-X");'; echo 'pageTracker._trackPageview();'; echo '</script>'; } add_action('wp_footer', 'add_google_analytics'); |
两点注意事项:第一,用你实际的 GA 代码代替“UA-123456-1” ;第二,你也可以查看当前谷歌分析工具的三种选择并修改相应的代码。目前,这个函数使用“ga.js”跟踪代码,你也可以改用其他方法。
使用下面这个函数你就可以给摘要指定任何长度而不用受默认的55字的限制。
// custom excerpt length function custom_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'custom_excerpt_length'); |
你只需要将 “20” 替换为任何你需要的字数。
自定义摘要后 “继续阅读”字符串
不管你怎么称呼这个方括号里的省略号[...]” ,总之这是WordPress默认的紧跟摘要 后面部分,我想删除方括号,使用下面这段代码你可以对它进行任何更改:
// custom excerpt ellipses for 2.9+ /* custom excerpt ellipses for 2.8- |
你可能已经注意到这里的代码有两个不同版本,看你使用的是WordPress什么版本。当然最好是使用最新版,因此这里注释了更老版本的方法,不过要是你需要的话也可以使用它。不管是什么版本,使用此方法你仅仅需要用 “。..” 或是任何你想要的符号来代替原来的“[。..]”,即可。
“read more” 链接无法正常跳转
WordPress里最让人不可思议的就是当读者在浏览一篇文章的模式下点击“read more” 链接时,页面就会跳转到 “<!--more-->” 标签的位置。如果是跳转到同一页面也就无所谓了,但是如果是重新加载一个新的页面然后读者发现没有了下文也没有任何解释说哪里出错了,这就很让人觉得莫名其妙的。无论如何,这里有个非常漂亮的小函数可以阻止跳转的发生:
// no more jumping for read more link function no_more_jumping($post) { return '<a href="'.get_permalink($post->ID).'" class="read-more">'.'Continue Reading'.'</a>'; } add_filter('excerpt_more', 'no_more_jumping'); |
这段代码无需其他任何东西就可以运行,从此你就可以不必为“跳转”费心了。 注意,这也是自定义“read more”链接的好方法,你可以在此给它设定各种属性或定义任何你想要文本。
给博客添加图标
如果你想给博客添加个图标,下面的代码将会非常实用。创建完图标后只要上传图片到网站的根目录下即可。只要在functions.php文件的 <head>区域添加下面的几行代码:
// add a favicon to your function blog_favicon() { echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />'; } add_action('wp_head', 'blog_favicon'); |
你可以随意更改目录,同时确保wp_head包含在你的主题 header.php文件里。
给博客后台添加一个不同的图标
有必要给WordPress后台添加一个特别的图标,这样被收藏为书签或是处理标签时就更加容易认出。只要将图标上传到主题的/images/ 目录下,加上下面的代码即可:
/ add a favicon for your admin function admin_favicon() { echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/favicon.png" />'; |
像前面一样,你同样可以随意更改目录。不过最好将后台图标和前台图标分开放在不同的目录下。
自定义后台登陆图标
是否想利用WordPress图标在各个登陆页面给自己做宣传?那么,你可以将这个WordPress图标替换为其他自定义图片,创建自定义登陆图片,并将其命名为“custom-login-logo.png”将图片上传至主题的/images/ 目录下,用下面的代码:
// custom admin login logo url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important; } |
这里关键是要你设置路径和图片名称一致。另外,在创建图片的时候,记住图片的属性:宽为30px, 高为31px,透明GIF格式,头部背景色#464646 。
禁用无用的小工具区域
Justin Tadlock介绍了个非常方便的函数,可用于删除主题中不需要的小工具区域,这是自定义主题必不可少的一个函数:
// disable all widget areas function disable_all_widgets($sidebars_widgets) { //if (is_home()) $sidebars_widgets = array(false); return $sidebars_widgets; } add_filter('sidebars_widgets', 'disable_all_widgets'); |
这个代码属于即插即用型,不需要任何更改。注意:如果你只想在主页禁用小工具,那么就将第三栏的 “//”删除。
删除WordPress更新提示
我比较讨厌WordPress更新提示,下面的代码就可以将管理面板的更新提示删除:
// kill the admin nag if (!current_user_can('edit_users')) { add_action('init', create_function('$a', "remove_action('init', 'wp_version_check');"), 2); add_filter('pre_option_update_core', create_function('$a', "return null;")); } |
如果你想要获得更新通知的话,你也可以将这段代码注释掉或是删除掉。
在body_class 与 post_class中加入分类ID
默认情况下,WordPress body_class和 post_class并没有包含当前文章的分类ID。 不过,你可以用下面的代码来实现:
// category id in body and post class function category_id_class($classes) { global $post; foreach((get_the_category($post->ID)) as $category) $classes [] = 'cat-' . $category->cat_ID . '-id'; return $classes; } add_filter('post_class', 'category_id_class'); add_filter('body_class', 'category_id_class'); |
即使你没有使用分类ID,但是这个函数还是非常好使的,这也是为什么我将这个归入自定义functions.php 模板的必备函数中来。
获取第一个分类ID
当要处理多个不同分类时,另一个非常实用的函数可以让你获取当前文章的第一个分类。代码如下:
// get the first category id function get_first_category_ID() { $category = get_the_category(); return $category[0]->cat_ID; } |
严格的即插即播型: 只要在模板文件使用<?php get_first_category_ID(); ?>来访问数据。
整合以上所有代码
如开头承诺,这里将完整的代码贴出来与大家分享:
<?php // custom functions.php template @ digwp.com // add feed links to header // smart jquery inclusion ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.3.2'); // enable threaded comments // remove junk from head // add google analytics to footer src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>'; // custom excerpt length // custom excerpt ellipses for 2.9+ /* custom excerpt ellipses for 2.8- // no more jumping for read more link " class="read-more">'.'Continue Reading'.'</a>'; // add a favicon to your href="'.get_bloginfo('wpurl').'/favicon.ico" />'; // add a favicon for your admin href="'.get_bloginfo('stylesheet_directory').'/images/favicon.png" />'; // custom admin login logo url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important; } // disable all widget areas // kill the admin nag "remove_action('init', 'wp_version_check');"), 2); // category id in body and post class // get the first category id ?> |
如果喜欢的话,你可以下载functions.php 模板文件压缩包。
原文:WordPress functions.php Template with 15 Essential Custom Functions(译文WordPress拉)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 冷启动时期,用户量如何破冰增长 2019-08-20
- 运营是什么?连续问了8年的问题 2019-04-28
- 曾经用户量9000万,现在却面临关闭,昔日爆红的博客行业不行 2019-04-10
- 网易博客停运,一个时代的挽歌 2019-04-10
- 请了一位编辑来润色文章之后,博客浏览量增长了450倍 2019-04-10
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash