YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Archive by category "WordPress"

给 WordPress 添加数字分页导航

给 WordPress 添加数字分页导航

制作 BlueNight 主题的工程中积累一些 WordPress 的开发经验,今天这里就把如何给 WordPress 添加数字分页导航的 PHP 代码给出: <?php /** * Paginate */ if (!function_exists(‘paginate’)): function paginate($args = null) { // 显示数字当行个数的范围基数:默认值 = 3 $range_gap = 3; // 主题设置的值,如果你不是使用的 BlueNight 主题,那么有 $range_gap = 3; 就OK了 if (get_option(‘bluenight_paginate_num’) != ”… [阅读全文]

利用 explode() 函数获得 WordPress 中第一段的内容

利用 explode() 函数获得 WordPress 中第一段的内容

如何获得 WordPress 中第一段的内容?我想很多用 WordPress 的朋友都会考虑这个问题。比如我们在文章列表页希望使用第一段的内容生成文章的摘要。我这里就给出我的一个解决方案: if (!function_exists(‘get_the_paragraph’)): function get_the_paragraph($nth){ $content = get_the_content(); $content = apply_filters(‘the_content’, $content); $content = str_replace(‘]]>’, ‘]]&gt;’, $content); $paragra… [阅读全文]

制作 WordPress 主题时需要添加默认标题

制作 WordPress 主题时需要添加默认标题

昨天收到了 WordPress Theme 测试组给我回复了,很遗憾 BlueNight 1.1.28 测试没有通过。这里把我遇到的一个反馈的信息给大家展示一下: No Post Title: This Post has no Post Title, but must still display a link to the single-page Post view. 原来,在用户没有输入文章标题的时候,WordPress 也要有一个默认的标题显示出来,以便浏览者可以点击链接文字到这个无标题的详细页。唉!没有标题要给个默认标题,我们只用使用:add_filter(‘the_title’, ‘default_title’); 这样来改… [阅读全文]

利用 query_posts() 函数实现 WordPress 按不同类别显示不同条数的文章

利用 query_posts() 函数实现 WordPress 按不同类别显示不同条数的文章

这两天在继续优化 BlueNight 主题,其中一个要优化的地方就是给我的 Video 分类设置不同的页面布局,以区分视频栏目和普通的文章列表页。遇到的一个问题就是希望给 Video 分类的列表页显示不同的文章条数。我想也有其他玩 WordPress 的朋友希望针对不同的分类显示不同的文章条数。这里我就把我的实现方式给大家分享一下。 query_posts() 函数就是我们实现这个功能的关键。query_posts() 函数具体的 API 使用方法我已经给出了访问链接,大家自己查看,我这里就直接介绍相关的内容。 query_posts() 函数简介 query_posts()函数是最简单的用来改变默认的 WordPress 查询的方… [阅读全文]

给 WordPress 在 Chrome 浏览器中添加语音搜索功能

给 WordPress 在 Chrome 浏览器中添加语音搜索功能

为了优化 BlueNight 主题的用户体验,给 BlueNight 主题添加了对 Chrome 浏览器的语音搜索功能。 语音搜索功能对于于老年人、残障人士、偷懒人群是一个非常有用功能。不过这个功能目前只能在 Chrome 11+ 的谷歌浏览器上看到这个效果。例如本博客在 Google 的 Chrome(23.0.1271.97 m) 浏览器中显示的那样: 在 Chrome中实现语音搜索很简单,只需要在 WordPress 的 searchform.php 文件的代码加上 x-webkit-speech 特殊属性就可以轻松搞定: <form method=”get” action=”/” class=”searchform t… [阅读全文]

使用 preg_replace() 函数为 WordPress 添加搜索关键字高亮

使用 preg_replace() 函数为 WordPress 添加搜索关键字高亮

这两天在完善 BlueNight 主题的搜索功能,给 WordPress 自带的搜索结果添加了单个关键字高亮(以下简称关键词高亮,多关键字的分词高亮也不是一会半会可以搞好的,不过在我的算法更新里简单的实现了多关键字高亮)。之前在网上参考过一些资料,有的是通过获取 Google 或百度的搜索结果来显示,效果不错,不过会搜到很多不相关的内容。有的就是直接简单的在 WordPress 里提供的 get_the_excerpt() 的内容中添加高亮,这样很多时候在摘要中和标题中都看不到搜索的关键字。在参考了各种资料后,自己还是采取直接在 WordPress 的搜索结果上来添加关键字高亮。最后弄出来的搜索结果标题和文章摘要都有高亮,并且保证了… [阅读全文]

如何给 WordPress 添加留言板

如何给 WordPress 添加留言板

这两天又在给 BlueNight 主题增加新的功能,留言板就是我希望添加的一个功能。由于自己的主机控件不支持 PHP 的 email 模块,所以主题自己的博客一直都没有 contact us 页面,虽然我的主题有这个模版。随叫自己图便宜,找了个水货服务商。那只有想个办法做一个专门供网友和我在线沟通的工具。 看看强大的 WordPress,我想大家肯定跟我一样,第一时间就想到了用 WordPress 的 Page 模版,然后添加上 WordPress 的评论功能。事实上这样是确实可行的,而且也十分的简单。下面我就具体介绍一下怎么制作留言板模版。 给 Page 模版添加上发表评论功能 玩过 WordPress 的朋友都知道,WordPr… [阅读全文]

利用 get_comment_author_email() 函数获得 Gravatar 评论图像路径

利用 get_comment_author_email() 函数获得 Gravatar 评论图像路径

在 WordPress 中我们想获得评论中的 Gravatar 图像,一般使用 get_avatar() 函数,例如: get_avatar($comment,$size=’32’,$default=’http://www.gravatar.com/avatar/be385381854ec020acbfd856b085bc0f?s=32&d=mm&r=g’, get_comment_author()) 但是只要细心一些的前端开发的朋友都知道,get_avatar() 函数读取的 Gravatar 评论图片是保存在 gravatar.com 网站上的远程的图片。这样直接加载远程站点的图片对前端的性能是会有影响的。于… [阅读全文]

wp_get_attachment_image_src() 函数详解 – 如何函数获得 WordPress 中的特色图像路径

wp_get_attachment_image_src() 函数详解 – 如何函数获得 WordPress 中的特色图像路径

在 WordPress 中通常我们用 the_post_thumbnail() 函数打印特色图像(featured image)。但是在有些情况下,我们只需获得文章特色图像的路径。比如我的 BlueNight 主题中使用了 jQuery 的 lazyload 插件来异步加载图片,优化前端性能。这样在一开始我就不能直接使用 the_post_thumbnail() 输出特色图像,而需要自己输出一个占位的默认图片,然后再通过 lazyload 获取到特色图像的路径替换占位的图像(怎么使用 jQuery 的 lazyload 插件请查看《Lazy Load Plugin for jQuery》)。在这种情况下,我们如何获得之前发表文章时设… [阅读全文]

WordPress 主题如何设置多语言支持

WordPress 主题如何设置多语言支持

让 WordPress 主题支持多语言并不复杂,我们需要使用到 WordPress 的三个函数:__()、_e() 和 load_theme_textdomain()。具体的操作如下: 第一步:在 functions.php 页面中添加支持多语言的初始化代码 /** * Languages Init */ function theme_languages_init(){ load_theme_textdomain(‘bluenight’, get_template_directory() . ‘/languages’); } add_action (‘init’, ‘theme_languages_init’); 很简单的处理,主要… [阅读全文]