分类目录归档:WordPress

WordPress

WordPress 阅读统计插件 WP-PostViews 推荐

WP-PostViews 插件介绍

WP-PostViews 插件由 GaMerZ 开发,主要功能是实现文章阅读数统计、侧边栏 Widget 以及显示最受欢迎(阅读数最多)文章、某分类下最受欢迎(阅读数最多)文章等功能。

WP-PostViews 插件使用方法

1、页面使用

下载安装插件之后,在 WordPress 中你想要展现阅读统计数的地方插入以下代码即可。

<?php if(function_exists('the_views')) {the_views();} ?>

2、widget 使用

对于支持 widget 的 WordPress 的主题来说,激活 WP-PostViews Widget 之后,拖拽到侧边栏合适的位置即可,对于不支持 widget 的主题,使用以下语言进行调用。

<?php if (function_exists('get_most_viewed')): ?>
    <?php get_most_viewed(); ?>
<?php endif; ?>

WP-PostViews 插件下载:wp-postviews

Syntax Highlighter for WordPress 代码高亮插件

最近发现自己在用的代码高亮插件(WP-Syntax )不怎么好用,于是在谷歌上搜了一下,找到了一个 Syntax Highlighter 代码高亮插件,看看评价还是满高的,接着就安装了这款代码高亮插件 Syntax Highlighter ,然后发现居然不知道怎么使用用这个插件?结果蒙了,后来还是在插件的说明页找到了答案。Syntax Highlighter

Syntax Highlighter 插件支持的编码语言包括如下表:

语言名称 语言别名
ActionScript3 as3, actionscript3
Bash/shell bash, shell
ColdFusion cf, coldfusion
C# c-sharp, csharp
C++ cpp, c
CSS css
Delphi delphi, pas, pascal
Diff diff, patch
Erlang erl, erlang
Groovy groovy
JavaScript js, jscript, javascript
Java java
JavaFX jfx, javafx
Perl perl, pl
PHP php
Plain Text plain, text
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet
XML/HTML xml, xhtml, xslt, html, xhtml

使用方法:

在编辑加入代码片段时,将编辑器 切换HTML 编辑界面,用成对的 方括号 把代码包起来就 OK 了,例如:

[ html] Code Here [/html]

方括号 中的语言就是上面列表中语言名称对应的 语言别名

官方 Demo:

// SyntaxHighlighter makes your code
// snippets beautiful without tiring
// your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}

jQuery 实现 WordPress 滚动导航(回顶、回底、到评论)

在 WordPress 主题页面右侧,添加一个通过点击可以起到导航作用的小功能,这样会使网站变的更加的人性化,也增加了一定的用户体验。导航区域有三个图标,上下分别是点击回到页首和页尾。中间的按钮点击之后会转到文章的评论区域,可以方便用户阅读评论。出于人性化考虑,只有在文章内容页才会出现中间的那个阅读评论导航,因为只有这个页面有评论。

1、在主题的 footer.php 文件中的 </body> 结束标签之前添加如下代码:

PHP & HTML Code:

<div id="tcf">
  <div id="top"></div>

  <?php /* 判断是否为内容页 */ ?>
  <?php if (is_single()) { ?>
  <div id="comt"></div>
  <?php } ?>

  <div id="foot"></div>
</div>

2、在主题的 style.css 文件中添加以下样式:

CSS Code:

#tcf {
    left: 96%;
    position: absolute;
    top: 60%;
}
#top,
#comt,
#foot {
    cursor: pointer;
    height: 32px;
    margin: 10px 0;
    width: 32px;
}
#top {
    background: url(../images/tcf.gif) no-repeat;
}
#comt {
    background: url(../images/tcf.gif) no-repeat center -32px;
    height: 30px;
}
#foot {
    background: url(../images/tcf.gif) no-repeat center -64px;
}

4、在主题的 footer.php 文件中添加 jQuery 代码实现页面滑动效果,和滚动定位效果。

jQuery Code:

jQuery.noConflict();
(function($) {
    $(function() {

        // 使用 jQuery 实现页面导航滑动效果。
        var s = $("#tcf").offset().top;
        $(window).scroll(function() {
            $("#tcf").animate({
                top: $(window).scrollTop() + s + "px"
            },
            {
                queue: false,
                duration: 500
            })
        });

        // 使用 jQuery 实现相应滚动定位效果。
        $("#top").click(function() {
            $body.animate({
                scrollTop: 0
            },
            700)
        });
        $("#comt").click(function() {
            $body.animate({
                scrollTop: $("#comments").offset().top
            },
            700)
        });
        $("#foot").click(function() {
            $body.animate({
                scrollTop: $("#footer").offset().top
            },
            700)
        });

    })
})(jQuery);

通过以上的操作就实现了在网站右侧添加导航功能的效果,此效果完美兼容 IE6/7/8、Firefox 等主流浏览器。你可以在本页面右侧点击测试效果,有什么问题欢迎留言。

如何让 WordPress 的 jQuery 库起作用

这个应该不是什么新信息,但我却是现在才搞清楚。

在我修改我的 WordPress 主题模板时用到了 jQuery 这个便利的 javascript 库,但让我很郁闷的是,虽然已经调用了 jQuery 库,在 html 代码上也有 jQuery 库的链接,但主题中应有的效果却始终不能显示出来。但是改为调用自己空间上的 jQuery 库都能显示出效果。所以在主题中我只好用空间上的 jQuery 库来代替了。

这实在不是什么好主意,因为 jQuery 库同时调用了两次,严重影响加载速度,但当时也是没办法,因为我不知道解决办法。

后来无意中打开 WordPress 中 jquery.js 库,发现它和官方的 jquery.js 库有点不一样,WordPress 中的 jquery.js 库最后面多了一行代码:

jQuery.noConflict();

查阅了 jQuery api 帮助文档才知道,上面那行代码的意义是:它释放了 jQuery 中的 $ 变量。从而避免多个 javascript 库之间的冲突问题。解决方法如下:

在 DOM 加载完成时运行的代码(页面载入代码):

$(document).ready(function() {
    // 在这里写你的代码...
});

用下面的代码替换:

(function($) {
    $(function() {
        // 在这里写你的代码...
    });
})(jQuery);

OK,现在使用 wordpress 内核中的 jquery 库也就能出效果了。

如何写 WodPress robots.txt 文本文件

robots.txt 基本介绍

robots.txt 是一个纯文本文件,在这个文件中网站管理者可以声明该网站中不想被 robots 访问的部分,或者指定搜索引擎只收录指定的内容。

当一个搜索机器人(有的叫搜索蜘蛛)访问一个站点时,它会首先检查该站点根目录下是否存在 robots.txt 纯文本文件,如果存在,搜索机器人就会按照该文件中的内容来确定访问的范围;如果该文件不存在,那么搜索机器人就沿着链接抓取。

另外,robots.txt 必须放置在一个站点的根目录下,而且文件名必须全部小写。

robots.txt 写作语法

首先,我们来看一个 robots.txt 范例:robots.txt

访问以上具体地址,我们可以看到 robots.txt 的具体内容如下:

User-agent: *
Disallow:
Sitemap: http://www.qq.com/sitemap_index.xml

以上文本表达的意思是允许所有的搜索机器人访问 www.qq.com 站点下的所有文件。

具体语法分析:其中 User-agent: 后面为搜索机器人的名称,后面如果是 * ,则泛指所有的搜索机器人;Disallow: 后面为不允许访问的文件目录;Sitemap: 后面为允许访问 XML 网站地图

下面,我将列举一些 robots.txt 的具体用法:

允许所有的 robot 访问

User-agent: *
Disallow:

或者也可以建一个空文件 “/robots.txt” file

禁止所有搜索引擎访问网站的任何部分

User-agent: *
Disallow: /

禁止所有搜索引擎访问网站的几个部分(下例中的01、02、03目录)

User-agent: *
Disallow: /01/
Disallow: /02/
Disallow: /03/

禁止某个搜索引擎的访问(下例中的baidu)

User-agent: baidu
Disallow: /

只允许某个搜索引擎的访问(下例中的google)

User-agent: google
Disallow:

User-agent: *
Disallow: /

下面,我将介绍一下 WordPress robots.txt 的写法

我的 WordPress robots.txt 的写法如下:

User-agent: *
Disallow: /cgi-bin
Disallow: /tools
Disallow: /wp-
Disallow: /license.txt
Disallow: /readme.html
Disallow: /feed
Disallow: /comments/feed
Disallow: /?s=
Sitemap: http://www.cssue.com/sitemap.xml

简单说明一下,这个 robots.txt 文件允许博客被所有搜索引擎收录,但是不允许搜索机器人访问 cgi-bin 文件夹以及 wp 开头的文件,这主要是为了博客的安全。

此外,不允许搜索机器人访问 feed 文件夹 comments 的 feed 文件夹和 tools 文件夹,主要是为了避免重复内容,这一点百度尤其重视,将 WordPress 的很多页面视为重复内容,这也是 WordPress 博客在百度中排名不高的原因之一。其中,tools 文件是我新建的文件夹,是用来平时存放静态网页的文件夹,不是 WordPress 的系统文件夹,这个我也不希望被搜索机器人访问到,所以一并禁止访问。

禁止访问 license.txt 和 readme.html 文件,是因为它们是 WordPress 的自述文件,所以也没必要被搜索机器人访问。

禁止访问 /?s= 下的内容,是因为它是站内搜索的结果页,也是为了避免重复内容的出现,所以也把它给干掉。

Sitemap: 让搜索机器人访问我的 xml 网站地图文件,让它能更好的收录我的网站内容。

WordPress 主题模板技术手册 基本文件及函数说明

选择使用 WordPress 来搭建博客,主要原因便在于 WordPress 有较高的流行度,还有各种围绕其进行的开发的扩展功能应有尽有,基本上可以说我们在博客建设中所需的任何功能,都已有人想到并得到实现,让你不必在博客具体的技术实现及功能扩展方面投入过多的精力,而更专注于内容建设。

本文以技术手册的方式简单汇总 WordPress 主题模板的基本资料,希望能对 WordPress 主题模板开发的朋友解渴。

WordPress 主题模板基本文件

一套完整的 WordPress 主题模板应至少具有如下文件:

style.css : CSS (样式表)文件
header.php : Header 模板
index.php : 主页模板
sidebar.php : 侧栏模板
page.php : 内容页 (Page) 模板
single.php : 内容页 (Post) 模板
comments.php : 留言/回复模板
searchform.php : 搜索表单模板
search.php : 搜索结果模板
archive.php : Archive/Category 模板
404.php : Not Found 错误页模板
footer.php : Footer 模板

当然,具体到特定的某款模板,可能不止这些文件,但一般而言,这些文件是每套模板所必备的。

WordPress 基本条件判断函数

is_home() : 是否为主页
is_page() : 是否为内容页 (Page)
is_single() : 是否为内容页 (Post)
is_archive() : 是否为存档页
is_tag() : 是否为 Tag 存档页
is_date() : 是否为指定日期存档页
is_year() : 是否为指定年份存档页
is_month() : 是否为指定月份存档页
is_day() : 是否为指定日存档页
is_time() : 是否为指定时间存档页
is_search() : 是否为搜索结果页
is_category() : 是否为 Archive/Category 页
is_paged() : 主页 Archive/Category 页是否以多页显示
is_404() : 是否为 “HTTP 404: Not Found” 错误页

Header 部分常用到的 PHP 函数

<?php bloginfo('html_type'); ?> : 博客网页 Html 类型
<?php bloginfo('charset'); ?> : 博客网页编码
<?php bloginfo('description'); ?> : 博客描述
<?php bloginfo('stylesheet_url'); ?> : CSS 文件路径
<?php bloginfo('template_url'); ?> : 模板文件路径
<?php bloginfo('pingback_url'); ?> : PingBack Url
<?php bloginfo('atom_url'); ?> : Atom Url
<?php bloginfo('rss2_url'); ?> : RSS 2.o Url
<?php bloginfo('url'); ?> : 博客 Url
<?php bloginfo('name'); ?> : 博客名称 (Title)
<?php wp_title(); ?> : 特定内容页 (Page/Post) 的标题
<?php bloginfo('version'); ?> : WordPress 版本

模板常用的 PHP 函数及命令

<?php get_header(); ?> : 调用 Header 模板
<?php get_sidebar(); ?> : 调用 Sidebar 模板
<?php get_footer(); ?> : 调用 Footer 模板
<?php the_content(); ?> : 显示内容 (Page/Post)
<?php if(have_posts()) : ?> : 检查是否存在 (Page/Post)
<?php while(have_posts()) : the_post(); ?> : 如果存在 (Page/Post) 则予以显示
<?php endwhile; ?> : While 结束
<?php endif; ?> : If 结束
<?php the_time('字符串') ?> : 显示时间,时间格式由“字符串”参数决定,具体参考 PHP 手册
<?php comments_popup_link(); ?> : 正文中的留言链接。如果使用 comments_popup_script() ,
则留言会在新窗口中打开,反之,则在当前窗口打开
<?php the_title(); ?> : 内容页 (Page/Post) 标题
<?php the_permalink() ?> : 内容页 (Page/Post) Url
<?php the_ID(); ?> : 特定内容页 (Post/Page) ID
<?php the_category(',') ?> : 特定内容页 (Page/Post) 所属 Category
<?php the_author(); ?> : 作者
<?php edit_post_link(); ?> : 如果用户已登录并具有权限,显示编辑链接
<?php get_links_list(); ?> : 显示 Blogroll 中的链接
<?php comments_template(); ?> : 调用留言/回复模板
<?php wp_list_pages(); ?> : 显示 Page 列表
<?php wp_list_categories(); ?> : 显示 Categories 列表
<?php next_post_link('%link'); ?> : 下一篇文章链接
<?php previous_post_link('%link'); ?> : 上一篇文章链接
<?php posts_nav_link(); ?> : 导航,显示上一篇/下一篇文章链接
<?php get_calendar(); ?> : 日历
<?php wp_get_archives() ?> : 显示内容存档
<?php include(TEMPLATEPATH . '/文件名'); ?> : 嵌入其他文件,可为定制的模板或其他类型文件

与主题模板相关的其他函数

<?php _e('Message'); ?> : 输出相应信息
<?php wp_register(); ?> : 显示注册链接
<?php wp_loginout(); ?> : 显示登录/注销链接
<!–next page–> : 将当前内容分页
<!–more–> : 将当前内容截断,以不在主页/目录页显示全部内容
<?php timer_stop(1); ?> : 网页加载时间(秒)
<?php echo get_num_queries(); ?> : 网页加载查询量

其它

<?php get_archives('postbypost', 10); ?> 调用最近的10篇日志

<?php
$rand_posts = get_posts('numberposts=10&orderby=rand');
foreach( $rand_posts as $post ) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?> 随机调用10篇日志

<?php the_tags('Post Tags :', ', ', '<br />'); ?> 调用标签
<?php if (get_the_tags()) the_tags('Tags:',',','end'); ?> 标签存在时调用
<?php wp_tag_cloud('smallest=1&largest=9&'); ?> 调用标签云
<?php $posts = get_posts( "category=12&numberposts=5" ); ?> 获得5篇12分类中的日志

WordPress Custom Smilies 表情插件

Custom Smilies 是一个 WordPress 的表情插件。它可以让你自由地在你的文章和评论中使用表情。这也增加了一定的用户体验,也会让访客感到很有乐趣。想实现这个功能也很简单,直接安装这个插件即可。

Custom Smilies 的安装使用:

  1. 下载 Custom Smilies 插件,解压后,上传到 /wp-content/plugins/ 目录;
  2. 上传后打开 wordpress 后台控制面板,选择插件管理将其安装。
  3. 最后在设置管理中找到表情菜单进行设置即可,设置界面如下图:

插件默认是读取 /wp-includes/images/smilies 目录中的表情,如果你没有删除 smilies 文件夹中图片,会列出该文件夹中的默认小图标,wordpress 默认的表情有点小丑。你也可以下载我收集的几款 热门表情 上传到该目录替换即可,如果没有设置表情代码的小图标,也可以进入后台控制面板的设置选项设置表情代码,设置代码中不要包含字符:”‘\ 。

如果你的主题不支持 Custom Smilies ,你需要在设置中勾选其他设置;

当然有些主题就算勾选了其他设置,也不能显示表情,这是需要在主题 comments.php 文件合适位置添加如下代码:

<?php
if (function_exists(cs_print_smilies)) {
    cs_print_smilies();
}
?>

建议放在紧挨评论文本框的上面或下面。

<textarea name="comment" id="comment" tabindex="4" rows="8" cols="50"></textarea>

复制粘贴上面的表情代码,刷新一下,看是不是有表情了。

WordPress Popular Posts 热门文章排行插件

为了防止曾经的热文被淹没掉,博主最好添加一个热文排行榜,让博客中的那些流行度比较高的文章,持续它们的价值,所以,很有必要安装热文排行插件,通过这个插件,你可以自定义显示类别、标题、链接数以及显示的评论数。

WordPress Popular Posts 插件安装使用也十分的方便,下载 WordPress Popular Posts 插件,将压缩包解压后,把文件夹上传到 wp-content/plugins/ 目录下,登录 WordPress 管理后台,激活该插件便可设置使用。设置界面如下图:

原文:WordPress Popular Posts

WordPress 分页插件 Wp-PageNavi 使用

好久没有介绍 wordpress 插件了,今天介绍一个好东东吧(Wp-PageNavi 分页插件)。

Wp-PageNavi 这是一个分页插件或许你用过它的旧版本,并不觉得这是一个好到怎样的插件。不过,它现在可是已经经过作者的改良并升级了的。具体的效果你可以看本站首页底部。

具体介绍一下它的使用方法:

  1. 下载 Wp-PageNavi 插件( 官方下载:Wp-PageNavi ),解压后,上传到 /wp-content/plugins/ 目录;
  2. 上传后打开 wordpress 后台控制面板,选择插件管理将其安装;
  3. 最后,在你想要添加这个分页的地方加上如下的代码:
<?php 
if (function_exists('wp_pagenavi')) {
    wp_pagenavi();
}
?>