动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 4 – 评论篇

七月 12th, 2009

动手打造你自己的Wordpress Template and Themes (主题, 模板) Part 4 – 评论篇

Part 1 – 布局 (The Layout)
Part 2 – 标头 (Heaer)
Part 3 – 索引 (Index)
Part 4 – 评论 (Comment)
Part 5 – 侧边栏 (Sidebar)
Part 6 – 底部 (Footer)
Part 7 – 结束语 (Finish!)

在Part 4中，我们将学到如何编写comments.php文件。首先，我将展示个各位看评论的布局，然后我们在写入标签。

当我们进入文章或页面(page)单一页面时，comments.php文件将由index.php文件召唤出来，召唤的代码如下：

<?php comments_template(); ?>

注意：这部分有点不好处理，所以请集中你300%的注意力，呵呵

评论布局：

首先，我们要做的是建立评论的布局，我们希望他看起来像这样。

myowt---part-4

打开你的文字编辑器，并敲进下列代码，储存为comments.php:

1.
2.      <div id=”comments”>
3.
4.      <div>
5.       comments list here
6.      </div> <!– close comments list –>
7.
8.      <div>
9.       comments form here
10.      </div> <!– close comments form –>
11.
12.      </div> <!– close comments –>
13.

在comments_list部分，我们希望评论照我们的要求展现，所以我们把“comments list here”加上ol和li标签。我们会在li标签里放入评论者名称以及他的评论

1.
2.      <div>
3.
4.       <ol>
5.        <li>
6.         <div>
7.          comments author here
8.         </div> <!– close comments_author –>
9.         <div>
10.          comments text here
11.         </div>
12.        </li>
13.       </ol>
14.
15.      </div> <!– close comments list –>
16.

我们现在先不去改动comment_form，因为我们未来会复制贴上一段html+php代码，这个不容易解释清楚，除非你懂得PHP的结构

我们现在把需要的wordpress代码放进comments.php

并把这段代码放在comments id之前

1.
2.      <?php // Do not delete these lines //不要删除此行
3.       if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
4.        die (‘Please do not load this page directly. Thanks!’);
5.
6.      if (!empty($post->post_password)) { // if there’s a password //如果有密码的话
7.      if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie //如果与cookie不符
8.          ?>
9.
10.          <p>This post is password protected. Enter the password to view comments.<p>
11.
12.          <?php
13.          return;
14.      }
15.      }
16.
17.        /* This variable is for alternating comment background */ /* 这个变数是用来改变交流评论背景的 */
18.        $oddcomment = ‘alt’;
19.      ?>
20.

就像这样

1.
2.      <?php // Do not delete these lines (Sulow注：重复就不再翻译了，下同)
3.       if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
4.        die (‘Please do not load this page directly. Thanks!’);
5.
6.      if (!empty($post->post_password)) { // if there’s a password
7.      if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
8.          ?>
9.
10.          <p>This post is password protected. Enter the password to view comments.<p>
11.                        (这篇文章是受密码保护的，请输入密码查阅评论。)
12.          <?php
13.          return;
14.      }
15.      }
16.
17.        /* This variable is for alternating comment background */
18.        $oddcomment = ‘alt’;
19.      ?>
20.
21.      <div id=”comments”>
22.

我们把下面的代码放在<div class=”comments_list”>之上，如果有评论，Wordpress会自动显示评论。

<?php if ($comments) : ?>

看起来像这样：

1.
2. <?php if ($comments) : ?>
3. <div>
4.

下一步，我们将让评论循环(loop)，我们把循环代码放在<ol>后面，把下面代码放到<ol>后面：

<?php foreach ($comments as $comment) : ?>

还有这段代码：

<?php endforeach; ?>

像这样

1.
2.      <ol>
3.      <?php foreach ($comments as $comment) : ?>
4.
5.       the <li> and </li> here. see below.
6.
7.      <?php endforeach; ?>
8.      </ol>
9.

Now we will focus in our loop. Put your eyes and mind on it. Ok? Good… :p Ok here is our comments list start with <li> and end with </li>.
现在，我们把焦点放在循环处，把你的眼睛和大脑连起来好吗？很好。。呵呵，下面是我们的评论列表，并用<li> 和 </li>来表示开始和结束。

1.
2.        <li>
3.         <div>
4.          comments author here
5.         </div> <!– close comments_author –>
6.         <div>
7.          comments text here
8.         </div> <!– close comments_text –>
9.        </li>
10.

我们把<li>用下面代码取代：

<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

What it do is, the class will change to odd if the comment is odd number. So you can stylish your comments list with CSS.
这是什么？如果某个评论是随机的，这个 class 会自动生成(Sulow注：抱歉，这段实在看不懂，请看的懂的同志不吝告知，原文如上，先谢了)，因此你可以用CSS来定义评论列表。

我们用下列代码来取代评论作者部分。

<?php comment_author_link() ?>

这会显示作者姓名并连接到作者的网站。

接下来，我们用下列代码取代”comments text here”

<?php comment_text() ?>

这会让评论出现在我们的网站上。

有些人可能会勾选评论审核选项，所以我们需要告诉评论者，评论需要经过审核，如果这样，我们要把下列代码放到<?php comment_text() ?>之前

1.
2.      <?php if ($comment->comment_approved == ‘0′) : ?>
3.        <em>Your comment is awaiting moderation.</em> /* 您的评论需要经过审核才会发布 */
4.      <?php endif; ?>
5.

最后，把这些代码放到<?php endforeach; ?>前面

1.
2.      <?php /* Changes every other comment to a different class */
3.        if (‘alt’ == $oddcomment) $oddcomment = ”;
4.        else $oddcomment = ‘alt’;
5.       ?>
6.

希望你的comments_list(评论列表)看起来像这样：

1.
2.      <?php if ($comments) : ?>
3.      <div>
4.
5.      <ol>
6.      <?php foreach ($comments as $comment) : ?>
7.
8.      <li id=”comment-<?php comment_ID() ?>”>
9.
10.         <div>
11.          <?php comment_author_link() ?>
12.         </div> <!– close comments_author –>
13.         <div>
14.
15.      <?php if ($comment->comment_approved == ‘0′) : ?>
16.        <em>Your comment is awaiting moderation.</em>
17.      <?php endif; ?>
18.      <?php comment_text() ?>
19.
20.         </div> <!– close comments_text –>
21.
22.      </li>
23.
24.      <?php /* Changes every other comment to a different class */
25.        if (‘alt’ == $oddcomment) $oddcomment = ”;
26.        else $oddcomment = ‘alt’;
27.       ?>
28.
29.      <?php endforeach; ?>
30.      </ol>
31.
32.      </div> <!– close comments_list –>
33.

不过，还没有结束，在结束前，我们还需要把这些代码放到comments_list div 之前：

1.
2.       <?php else : // this is displayed if there are no comments so far ?>
3.
4.      <?php if (‘open’ == $post->comment_status) : ?>
5.        <!– If comments are open, but there are no comments. –>
6.
7.        <?php else : // comments are closed ?>
8.        <!– If comments are closed. –>
9.        <p>Comments are closed.</p>
10.
11.       <?php endif; ?>
12.      <?php endif; ?>
13.

评论框(comments form)：

好的，为了让访问者可以留下评论，我们就必须让读者能够看到评论框，所以，如果我们的文章允许评论，就需要以下代码：

<?php if (’open’ == $post->comment_status) : ?>

我们把代码放到comments_form之前，像这样：

1.
2. <?php if (‘open’ == $post->comment_status) : ?>
3. <div>
4.

也许你希望人们在评论前先登入网站，我们就需要以下代码来确认登录状态：

1.
2.      <?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
3.      <p>You must be <a href=”<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>”>logged in</a> to post a comment.</p>
4.      <?php else : ?>
5.

看起来像是这样的：

1.
2.      <?php if (‘open’ == $post->comment_status) : ?>
3.
4.      <?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
5.      <p>You must be <a href=”<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>”>logged in</a> to post a comment.</p>
6.      <?php else : ?>
7.
8.      <div>
9.

这是最容易的部分了，把下面代码复制粘贴到comments_form部分吧

1.
2.      <form action=”<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
3.      <?php if ( $user_ID ) : ?>
4.
5.      <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”>Logout &raquo;</a></p>
6.
7.      <?php else : ?>
8.
9.      <p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”22″ tabindex=”1″ />
10.      <label for=”author”><small>Name <?php if ($req) echo “(required)”; ?></small></label></p>
11.
12.      <p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”22″ tabindex=”2″ />
13.      <label for=”email”><small>Mail (will not be published) <?php if ($req) echo “(required)”; ?></small></label></p>
14.
15.      <p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”22″ tabindex=”3″ />
16.      <label for=”url”><small>Website</small></label></p>
17.
18.      <?php endif; ?>
19.      <?php smilies_clickable(); ?>
20.      <p><textarea name=”comment” id=”comment” cols=”50″ rows=”10″ tabindex=”4″></textarea></p>
21.      <p><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”Submit Comment” />
22.      <input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” /></p>
23.      <?php do_action(‘comment_form’, $post->ID); ?>
24.      </form>
25.      <div>
26.       <?php if ($post-> comment_status == “open” && $post->ping_status == “open”) { ?>
27.        <p>
28.         <a href=”<?php trackback_url(display); ?>”>Trackback this post</a> &nbsp;|&nbsp; <?php comments_rss_link(‘Subscribe to the comments via RSS Feed’); ?>
29.        </p>
30.
31.       <?php } elseif ($post-> comment_status == “open”) {?>
32.        <p>
33.         <?php comments_rss_link(‘Subscribe to the comments via RSS Feed’); ?>
34.        </p>
35.       <?php } elseif ($post->ping_status == “open”) {?>
36.        <p>
37.         <a href=”<?php trackback_url(display); ?>”>Trackback this post</a>
38.        </p>
39.       <?php } ?>
40.       </div>
41.      <?php endif; // If registration required and not logged in ?>
42.

在结束comments_form前，确认我们结束了我们的if代码

<?php endif; // if you delete this the sky will fall on your head ?> (如果你把这行删了，天空会掉下来砸到你头上，哈哈，作者越来越幽默了）

最后，我们的comments.php会像这样：

1.
2.      <?php // Do not delete these lines
3.       if (‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
4.        die (‘Please do not load this page directly. Thanks!’);
5.
6.      if (!empty($post->post_password)) { // if there’s a password
7.      if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
8.          ?>
9.
10.          <p>This post is password protected. Enter the password to view comments.<p>
11.
12.          <?php
13.          return;
14.      }
15.      }
16.
17.        /* This variable is for alternating comment background */
18.        $oddcomment = ‘alt’;
19.      ?>
20.
21.      <div id=”comments”>
22.
23.      <?php if ($comments) : ?>
24.      <div>
25.
26.      <ol>
27.      <?php foreach ($comments as $comment) : ?>
28.
29.      <li id=”comment-<?php comment_ID() ?>”>
30.
31.         <div>
32.          <?php comment_author_link() ?>
33.         </div> <!– close comments_author –>
34.         <div>
35.
36.      <?php if ($comment->comment_approved == ‘0′) : ?>
37.        <em>Your comment is awaiting moderation.</em>
38.      <?php endif; ?>
39.      <?php comment_text() ?>
40.
41.         </div> <!– close comments_text –>
42.
43.      </li>
44.
45.      <?php /* Changes every other comment to a different class */
46.        if (‘alt’ == $oddcomment) $oddcomment = ”;
47.        else $oddcomment = ‘alt’;
48.       ?>
49.
50.      <?php endforeach; ?>
51.      </ol>
52.
53.      </div> <!– close comments_list –>
54.
55.      <?php else : // this is displayed if there are no comments so far ?>
56.
57.      <?php if (‘open’ == $post->comment_status) : ?>
58.        <!– If comments are open, but there are no comments. –>
59.
60.        <?php else : // comments are closed ?>
61.        <!– If comments are closed. –>
62.        <p>Comments are closed.</p>
63.
64.       <?php endif; ?>
65.      <?php endif; ?>
66.
67.      <?php if (‘open’ == $post->comment_status) : ?>
68.
69.      <?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
70.      <p>You must be <a href=”<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>”>logged in</a> to post a comment.</p>
71.      <?php else : ?>
72.
73.      <div>
74.
75.
76.
77.      <form action=”<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
78.      <?php if ( $user_ID ) : ?>
79.
80.      <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”>Logout &raquo;</a></p>
81.
82.      <?php else : ?>
83.
84.      <p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”22″ tabindex=”1″ />
85.      <label for=”author”><small>Name <?php if ($req) echo “(required)”; ?></small></label></p>
86.
87.      <p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”22″ tabindex=”2″ />
88.      <label for=”email”><small>Mail (will not be published) <?php if ($req) echo “(required)”; ?></small></label></p>
89.
90.      <p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”22″ tabindex=”3″ />
91.      <label for=”url”><small>Website</small></label></p>
92.
93.      <?php endif; ?>
94.      <?php smilies_clickable(); ?>
95.      <p><textarea name=”comment” id=”comment” cols=”50″ rows=”10″ tabindex=”4″></textarea></p>
96.      <p><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”Submit Comment” />
97.      <input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” /></p>
98.      <?php do_action(‘comment_form’, $post->ID); ?>
99.      </form>
100.      <div>
101.       <?php if ($post-> comment_status == “open” && $post->ping_status == “open”) { ?>
102.        <p>
103.         <a href=”<?php trackback_url(display); ?>”>Trackback this post</a> &nbsp;|&nbsp; <?php comments_rss_link(‘Subscribe to the comments via RSS Feed’); ?>
104.        </p>
105.
106.       <?php } elseif ($post-> comment_status == “open”) {?>
107.        <p>
108.         <?php comments_rss_link(‘Subscribe to the comments via RSS Feed’); ?>
109.        </p>
110.       <?php } elseif ($post->ping_status == “open”) {?>
111.        <p>
112.         <a href=”<?php trackback_url(display); ?>”>Trackback this post</a>
113.        </p>
114.       <?php } ?>
115.       </div>
116.      <?php endif; // If registration required and not logged in ?>
117.
118.      </div> <!– close comments form –>
119.
120.      <?php endif; // if you delete this the sky will fall on your head ?>
121.
122.      </div> <!– close comments –>
123.