notice
当前位置: 首页>>翻译>> 阅读正文

Comment.php模板的制作详解

发表评论 | Trackback 2009年8月7日 作者:死兔子 点击量:18,640 次

其实对于改编主题的朋友来说其他的页面都很简单,唯一麻烦的就是评论页也就是Comments.php。因为这个页面对初学者来说太多php代码了。如果不搞懂会出现很多错误! Nettuts+ 的作者 Gilles Maes 发表的一篇Unraveling the Secrets of WordPress' Comments.php File 详细的向你阐述wordpress主题文件中的comments.php文件。 下面就是我对上面的翻译,如果你的英文很好那么就直接点击上面去查看原文,如果英文不行的话,那么就看看我的译文吧,如有什么看不懂,请给我留言或点击查看英文原文。 如果只是为了参考本文,我制作了如下一个列表,文件你快速的跳到想参阅的部分:

  1. 页面的原生PHP代码
  2. 代码分析
    1. 防止直接访问comments.php文件
    2. 是否通过密码验证?
  3. 显示评论
    1. 评论模板基本标签
    2. 最终结果
  4. 评论表单
    1. 条件语句预览
    2. 插入表单
  5. 一些小技巧
    1. Gravatars
    2. 评论数
    3. 评论链接
    4. 编辑评论
    5. 评论的交互颜色
    6. 显示标签
    7. 评论的RSS链接
  6. 总结

1. 评论页面的原生PHP代码

<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?> 
<?php endif; ?> 
     
<?php if(!empty($post->post_password)) : ?> 
    <?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?> 
    <?php endif; ?> 
<?php endif; ?> 
 
<?php if($comments) : ?> 
    <?php foreach($comments as $comment) : ?> 
        <?php if ($comment->comment_approved == '0') : ?> 
        <?php endif; ?> 
    < ?php endforeach; ?> 
<?php else : ?> 
<?php endif; ?> 
 
<?php if(comments_open()) : ?> 
    <?php if(get_option('comment_registration') && !$user_ID) : ?> 
    <?php else : ?> 
        <?php if($user_ID) : ?> 
        <?php else : ?> 
        <?php endif; ?> 
    <?php endif; ?> 
<?php else : ?> 
<?php endif; ?>

上面那段是是comments.php的最基础的PHP代码,对于新手来说,这些看起来有些吓人,但是请不要担心,看完本教程以后,你的思路会变得很清晰。

2. 代码分析

1. 防止直接访问comments.php文件
<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?> 
<?php endif; ?>

以上代码是用来防止用户意外直接访问comments.php文件。通常评论页面是被包含在日志页面之中,而不是单独存在的,因此这段代码也可以理解成是一个安全措施。在这些语句中,你可以添加任何你想向直接访问者提示的声明,通常是die陈述,为了帮助理解,我展示如下代码:

<?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?> 
    <?php die('You can not access this page directly!'); ?> 
<?php endif; ?>
2. 是否通过密码验证?
<?php if(!empty($post->post_password)) : ?> 
    <?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?> 
    <?php endif; ?> 
<?php endif; ?>

这一段代码(这看上去是2段,实际上如果把它看作一段那更有意义)是用来检验用户是否通过密码验证,具备足够的权限来阅读日志和评论,显然,如果你没有阅读日志的权限,那么自然没有查看和参与评论的权限。

上述代码的第一个if是用来检测是否存在密码设置。第二个if是用来检测是否存在一个包含密码的cookie文件,如果不存在就显示错误信息。你可以在第二个if句块的任意位置自定义这些错误信息。

3. 显示评论

<?php if($comments): ?> 
    <?php foreach ($comments as $comment) : ?> 
        <?php if ($comment->comment_approved == '0') : ?> 
        <?php endif; ?> 
    <?php endforeach; ?> 
<?php else : ?> 
<?php endif; ?>

第一个条件语句(if($comments))是用来检测是否存在评论,如果存在的话,就按照foreach语句指定的方式循环显示每一条评论,直至结束。在foreach语句块中,你会发现有这么一个条件语句:if($comment->comment_approved ==‘0′)这是用来检测评论是否通过了审核,假如没通过审核就会提示错误信息。

举例如下:

<?php if($comments) : ?> 
    <ol> 
    <?php foreach($comments as $comment) : ?> 
        <li> 
            <?php if($comment->comment_approved == '0') : ?> 
                <p>Your comment is awaiting approval</p> 
            <?php endif; ?> 
            <p>Your comment</p> 
        </li> 
    <?php endforeach; ?> 
    </ol> 
<?php else : ?> 
    <p>No comments</p> 
<?php endif; ?>
1. 评论模板基本标签

您需要使用Wordpress提供的预定义标签,来给评论页面添加一些功能。

模板标签描述
<?php comment_ID(); ?>评论的ID
<?php comment_author(); ?>评论的作者
<?php comment_author_link(); ?>评论者的链接
<?php comment_type(); ?>评论的类别,pingback,trackback或者是一个单纯的评论
<?php comment_text(); ?>评论内容
<?php comment_date(); ?>评论的日期
<?php comment_time(); ?>评论的时间
2. 最终结果
<?php if($comments) : ?> 
    <ol> 
    <?php foreach($comments as $comment) : ?> 
        <li id="comment-<?php comment_ID(); ?>"> 
            <?php if ($comment->comment_approved == '0') : ?> 
                <p>Your comment is awaiting approval</p> 
            <?php endif; ?> 
            <?php comment_text(); ?> 
            <cite><?php comment_type(); ?> by <?php comment_author_link(); ?> on <?php comment_date(); ?> at <?php comment_time(); ?></cite> 
        </li> 
    <?php endforeach; ?> 
    </ol> 
<?php else : ?> 
    <p>No comments yet</p> 
<?php endif; ?>

把这段代码插入到你的 comments.php 文件中,这样你就有一个评论的有序列表,并且显示你定义的内容。

4. 评论表单

现在我们开始进入到评论表单部分的处理,评论表单皮肤的定制算是 comments.php文件中的一个难点。

你也许会被众多的语句吓到了,比如“你已经登陆,请……”,这些往往给新手造成了困扰:错误的标签放置可能造成整个评论表单失效,而这往往并不是PHP语法上的错误。

为了让你尽快的对评论表单有一个全面的认识,我接下来要详细讲解这些语句块,并且对HTML代码也做了相应介绍,让你明白为什么它们会出现在这个位置。

1. 条件语句预览
<?php if(comments_open()) : ?> 
    <?php if(get_option('comment_registration') && !$user_ID) : ?> 
    <?php else : ?> 
        <?php if($user_ID) : ?> 
        <?php else : ?> 
        <?php endif; ?> 
    <?php endif; ?> 
<?php else : ?> 
<?php endif; ?>

我们碰到的第一个条件语句是 。这个函数主要目的是为了检测日志是否允许评论。很显然,如果该日志是不允许评论状态,那么你就不能发表评论,也就是说完全没有必要显示评论表单。当关闭评论后,你可以放置一些提示信息于上述代码最后两个标签 和 之间,以便让访问者知道。

第二个条件语句是 () 。这个函数是用来检测你是否要注册后才能评论以及目前是否登陆了帐号。如果上面的两个条件都不满足,那么访问者就会被引导到登陆页面。假如博客的主人设置为不用注册即可发表评论,或者是你已经登陆,那么就将接着执行 else 部分并显示出评论表单。

最后一个条件语句是用来检测你否已经登出帐号。此检查的目的很简单,假如你已经登陆了,那么评论表单就不会显示姓名、Email、主页地址等填写项,因为对于已登陆的用户来说这是没有实在意义的。

2. 插入表单

我们已经分析完 coments.php 文件中的所有条件语句,接下来可以插入评论表单。

我猜你肯定首先想到的是:在哪开始插入表单?不要紧张,不妨凭感觉走 第二个条件语句是用来检测你是否已经登陆,因此你至少要在这个判断条件之后才能插入表单,这样我们也就确定了评论表单的位置。

<?php if(comments_open()) : ?> 
    <?php if(get_option('comment_registration') && !$user_ID) : ?> 
        <p>You must be <a href="&lt;?php echo get_option('siteurl'); ?&gt;/wp-login.php?redirect_to=&lt; ?php echo urlencode(get_permalink()); ?&gt;">logged in</a> to post a comment.</p><?php else : ?> 
        <form action="&lt;?php echo get_option('siteurl'); ?&gt;/wp-comments-post.php" method="post" id="commentform"> 
            <?php if($user_ID) : ?> 
            <?php else : ?> 
            <?php endif; ?> 
        </form> 
    <?php endif; ?> 
<?php else : ?> 
    <p>The comments are closed.</p> 
<?php endif; ?>

我还插入了登陆页面的链接,这只是我在默认的 comments.php 文件中发现的。就像我之前说的那样,最后一个条件句是用来判断你是否登陆。因此,姓名、Email、主页地址只在你没有登陆时才有必要显示。因此我们可以在那个位置插入这些东西。

<?php if(comments_open()) : ?> 
    <?php if(get_option('comment_registration') && !$user_ID) : ?> 
        <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?> 
        <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> 
            <?php if($user_ID) : ?> 
                <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p> 
            <?php else : ?> 
                <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> 
                <label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p> 
                <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> 
                <label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p> 
                <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> 
                <label for="url"><small>Website</small></label></p> 
            <?php endif; ?> 
        </form> 
    <?php endif; ?> 
<?php else : ?> 
    <p>The comments are closed.</p> 
<?php endif; ?>

非常棒!我们只需要插入一些简单的代码,比如文件域和提交按钮,把这些通通播入到最后一个判断语句块的后面,因为这些元素跟你有没有登陆是不相干的。

<?php if(comments_open()) : ?> 
    <?php if(get_option('comment_registration') && !$user_ID) : ?> 
        <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?> 
        <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> 
            <?php if($user_ID) : ?> 
                <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p> 
            <?php else : ?> 
                <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> 
                <label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p> 
                <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> 
                <label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p> 
                <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> 
                <label for="url"><small>Website</small></label></p> 
            <?php endif; ?> 
            <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> 
            <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 
            <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p> 
            <?php do_action('comment_form', $post->ID); ?> 
        </form> 
    <?php endif; ?> 
<?php else : ?> 
    <p>The comments are closed.</p> 
<?php endif; ?>

这些代码简洁明了,不言自明:一个文本域、一个提交按钮,还有一个由评论的 future ID 控制的隐藏的输入区域,最后是一个PHP小代码段

<?php if(comments_open()) : ?> 
    <?php if(get_option('comment_registration') && !$user_ID) : ?> 
        <p>You must be <a href="&lt;?php echo get_option('siteurl'); ?&gt;/wp-login.php?redirect_to=&lt; ?php echo urlencode(get_permalink()); ?&gt;">logged in</a> to post a comment.</p><?php else : ?> 
        <form action="&lt;?php echo get_option('siteurl'); ?&gt;/wp-comments-post.php" method="post" id="commentform"> 
            <?php if($user_ID) : ?> 
                <p>Logged in as <a href="&lt;?php echo get_option('siteurl'); ?&gt;/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="&lt;?php echo get_option('siteurl'); ?&gt;/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p> 
            <?php else : ?> 
                <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> 
                <label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p> 
                <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> 
                <label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p> 
                <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> 
                <label for="url"><small>Website</small></label></p> 
            <?php endif; ?> 
            <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> 
            <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> 
            <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p> 
            <?php do_action('comment_form', $post->ID); ?> 
        </form> 
    <?php endif; ?> 
<?php else : ?> 
    <p>The comments are closed.</p> 
<?php endif; ?>

这是WordPress 用来请求评论的函数。

整个流程就是这样,现在你拥有了自己的 comments.php 文件了,通过简单的修饰,你可以得到如下所示的效果:

comment1

5. 一些小技巧

毫无疑问,仅仅是一张 comments.php 文件,你就可以对它进行各种各样的改进,这里我列出一个表,希望能帮到你。

1. Gravatars

从Wordpress2.5开始,Wordpress内置了对Gravatars头像的支持,这样Wordpress就可以方便的通过博客用户的邮箱地址来显示相关联头像。要实现这个效果的代码非常简单。

<?php echo get_avatar($author_email, $size, $default_avatar ); ?>

在上述代码中,你可以把 $author_email 更换为 get_comment_author_email(); 函数,$size 则是头像的宽高,至于 $default_avatar 参数则是用来调用默认的头像,而且这个只在用户没有Gravatars头像时生效。

把上述代码插入评论的 foreach 循环。这样就可以输出 Gravatars 头像,该头像还有特定的评级以及大小(这完全取决于博客的设置),结合简单的CSS,你可以轻易的得到如下效果:

comment2

2. 评论数

我特意把comments.php文件头部代码留在我们建立页面以后,因为我相信多余的代码会使学习过程变成复杂。当然了,我是不会忘记使用他们的。

通常,人们会看到一个类似于“迄今已经有3评论”,这要感谢wordpress提供了这么简单的模板标签。

<?php comments_number($zero_comments, $one_comment, $more_comments); ?>

不用说都明白:在显示的文本时$ zero_comments是,没有人发表评论, $ one_comment时有一个评论和$ more_comments当有多个评论。举个例子如下:

<?php comments_number('No comments', 'One comment', '% comments'); ?>

我用%表示多少评论,因为comments_number功能能把%替换成( 2 , 3 , ... )

使用我们的comments.php文件,你可以轻易的得到如下效果:

comment3

要显示一个链接的评论部分(或若干评论显示) ,只需使用以下代码

<?php comments_popup_link($zero_comments, $one_comment, $more_comments, $css_class, $comments_closed); ?>

前3个参数,功能同上述comments_number功能一样。 $ css_class,很显然这个标记CSS类,给链接<a>标记,$comments_closed是表示当时的评论已经关闭。

<?php comments_popup_link('No comments', 'One comment', '% comments', 'comments-link', 'Comments are closed'); ?>

这就给你的链接加上了名为comments-link的class

4. 编辑评论

有时你会想到立即修改评论。幸运的是,运用edit_comment_link功能,您可以轻松地在网页中进行编辑,而不需要进到您的管理后台,以最终达成评论的目的。用法是这样的:

<?php edit_comment_link($link_text, $before_link, $after_link); ?>

你必须把这个代码放到foreach循环里面。参数是显而易见的: $ link_text是修改链接的锚文本, $ before_link和$ after_link分别是显示在之前或之后链接的文字或代码。

这样确实更容易修改评论,您可以只需添加一个小'编辑'链接到您的评论中(只能先以管理员的身份登录后) 。这就是它可以如下所示:

comment4

5. 评论的交互颜色

可能您想要的您的评论交替行颜色变换,以达到更准确的分辨。这里有一种简单的方法。首先,将以下代码添加到网页顶部的:

function alternate_rows($i){<br />    if($i % 2) {<br />        echo ' class="alt"';<br />    } else {<br />        echo '';<br />    } 
}

然后添加以下到foreach循环内 。你可以查找<li id="comment-<?php comment_ID(); ?>"> ,然后用一下代码替换:

<?php $i++; ?> 
<li <?php alternate_rows($i); ?> id="comment-<?php comment_ID(); ?>"> 
</li>

这将使评论出现两个不同的class ,从而可以通过CSS改变其外观 。
我决定把它制成function,以减少对您实际主题文件的影响。您可以将它添加到您的函数定义functions.php文件里,但更有意义,对我来说,只是把它放到网页上面。
交行更容易区分不同评论;一旦实施,您可能需要像这样:

comment5

6. 显示标签

显示访问者可以在他们的意见使用的标签,只需使用以下的一段片段

Allowed tags: <?php echo allowed_tags(); ?>

那么你一定会得到一个的名单,写着您可以在评论使用的标签,例如:

comment6

7. 评论的RSS链接

要获得链接RSS评论的地址,只需将下面的代码插入到您的comments.php文件中您想要的地方。

<?php comments_rss_link($link_text); ?>

然后只需更换$ link_test为RSS链接的锚文本。

如果您想给您的访客有机会为某一特定的文章或博客帖子订阅评论的话,那这代码会派上用场。您可以得到以下效果:

comment7

6. 总结

我希望你也很喜欢这个关于WordPress的comments.php文件的文章。你可以使用这里的全部代码,我的技巧包括在它表明:

gravatars ,

候补行的颜色,

编辑链接,

评论RSS链接。

显然,评论链接,因为这不包括已被用来内部循环 。

祝您在你的WordPress皮肤制作上有好运!

终于翻译完了!

anyShare分享到:
          
发表评论 | Trackback 8 条评论.
  1. 2011年4月18日20:10

    过来看看哦,嘿嘿。;-)

    [回复]

  2. 2011年3月16日07:38

    现在3.1的comments.php可以写的很简单。 :|
    不过看过那个还是觉得先看这个比较好。

    [回复]

    死兔子 回复:

    那是,这个是2.3版本的,在2.7版本的时候就一句话就可以代替以上大部分内容了,不过个人感觉那个不好控制样式~

    [回复]

  3. shaun
    2010年7月28日21:54

    很好的文章
    站里的其他一些文章也都很不错呢

    这两天正学着怎么改留言框 呃 这篇文章真是雪中送炭啊
    不过我想问一下 怎么没有出现comments_list这个函数···
    是不是要比这个简单

    [回复]

    graygift 回复:

    其实comments_lis是wordrpess最近几个版本的代码,在前几个版本没这个代码,此代码简化了评论的设计,不过我这文章有点早而已。就是不知道WordPress 3.0有什么改变

    [回复]

  4. 二道贩子
    2010年6月1日00:31

    很好的翻译,为什么 没有人支持.
    但是我想问一下,这个是否适合WP2.92.
    因为我最近想要更改评论部位的样式时,已经找不到方法了.

    [回复]

2 trackbacks

  1. I'm Daley » 应该可以提供下载了,[Ruiz]——我的第二款主题 Pingback | 2010/05/29
  2. Comment.php模板的制作详解 | SEO积累|网站分析|网络营销 Pingback | 2011/12/24
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif