WordPress主题制作全过程3

2024-11-15 13:02:39

1、制作single.php|WordPress主题制作全过程9

2、今天我们来制作单文章页single.php，有了之前制作index.php的经验，制作single.php也不再那么难了，这里将直接略过一些内容，直接给出结果。

3、添加文章标题：

4、<h3class=”title”><ahref=”single.html”>Loreum ipsium massa cras phasellus</a></h3>改成：

5、<h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>

6、添加文章标签

7、<ahref=”#”>News</a>, <ahref=”#”>Products</a>改成：

8、<?php the_tags(‘标签：’, ‘, ‘, ”); ?>

9、添加日期找到：31st Sep, 09 改成：

10、<?php the_time(‘Y年n月j日’) ?>

11、显示评论数

12、<ahref=”#”>7 Comments</a>改成：

13、<?php comments_popup_link(’0 条评论’, ’1 条评论’, ‘% 条评论’, ”, ‘评论已关闭’); ?>

14、添加编辑按钮接上面的评论代码，改成:

15、<?php comments_popup_link(’0 条评论’, ’1 条评论’, ‘% 条评论’, ”, ‘评论已关闭’); ?><?php edit_post_link(‘编辑’, ‘ • ‘, ”); ?>

16、添加文章内容将 和 之间的代码全部删除，替换成：

17、<?php the_content(); ?>另外，你可以将文章页那张图片删除了，删除以下代码：

18、<imgclass=”thumb” src=”<?php bloginfo(‘template_url’); ?>/images/610×150.gif” alt=””/>

19、添加返回博客首页和发表评论按钮其实就是添加博客首页和评论锚点链接，在制作header.php，我们已经知道可以通过get_option('home');来获取博客地址。

20、<pclass=”clearfix”> <ahref=”blog.html” class=”button float” ><< Back to Blog</a> <ahref=”#commentform” class=”button float right” >Discuss this post</a> </p>改成：

21、<p> <a href=”<?php echo get娄多骋能_option(‘home’); ?>” ><< 返回首页</a> <a href=”#commentform” >发表评论</a> </p> 好了，基本上的修改就这些了，但是你的文章页仍然不能显示文章内容，你得给它加上一个条件语句，这样WordPress才会去数据库读出你的文章内容。搜索代码：

22、改成：

23、<!– Column 1 /Content –> <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>将：

24、</div> <?php get_sidebar(); ?>改成：

25、 </div> <?php else : ?> <div> 没有文章！ </div> <?php endif; ?> <?php get_sidebar(); ?> 现在你的文章内容应该都可以正常显示了，一个文章页基本上也成型了。下节我们将讲解如何制作评论页，本次不提供修改的主题文件下载，下次一起提供。

26、另外，文章页顶部会有一段文字：

27、Our blog, keeping you up-to-date on our latest news.

28、可以替换成你的内容。如果不需要，可以将以下代码删除：

29、<h2class=”grid_12 caption clearfix”>Our <span>blog</span>, keeping you up-to-date on our latest news.</h2> <divclass=”hr grid_12 clearfix”> </div>

30、制作comments.php|WordPress主题制作全过程10

31、今天我们来制作评论主题的评论模块。在主题目录Aurelius下新建comments.php，在single.php剪切以下代码，粘贴到comments.php：

32、 <!– Comment’s List –> <h3>Comments</h3>稆糨孝汶; <divclass=”hr dotted clearfix”> </div> <olclass=”commentlist”> <liclass=”comment”> <divclass=”gravatar”> <imgalt=”” src=’images/gravatar.png’ height=’48′ width=’48′ /> <aclass=”comment-reply-link” href=">Reply</a> </div> <divclass=”comment_content”> <divclass=”clearfix”> <citeclass=”author_name”><ahref=””>Joe Bloggs</a></cite> <divclass=”comment-meta commentmetadata”>January 6, 2010 at 6:26 am</div> </div> <divclass=”comment_text”> <p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligula ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p> </div> </div> </li> </ol> <divclass=”hr clearfix”> </div> <!– Comment Form –> <formid=”comment_form” action=”” method=”post”> <h3>Add a comment</h3> <divclass=”hr dotted clearfix”> </div> <ul> <liclass=”clearfix”> <labelfor=”name”>Your Name</label> <inputid=”name” name=”name” type=”text” /> </li> <liclass=”clearfix”> <labelfor=”email”>Your Email</label> <inputid=”email” name=”email” type=”text” /> </li> <liclass=”clearfix”> <labelfor=”email”>Your Website</label> <inputid=”website” name=”website” type=”text” /> </li> <liclass=”clearfix”> <labelfor=”message”>Comment</label> <textareaid=”message” name=”message” rows=”3″ cols=”40″></textarea> </li> <liclass=”clearfix”> <!– Add Comment Button –> <atype=”submit” class=”button medium black right”>Add comment</a> </li> </ul> </form> 在single.php原位置添加代码：

33、<?php comments_template(); ?> 以上语句的作用就是将comments.php里的所有内容导入到single.php中，与直接在single.php写comments.php中的代码效果是一样的。

34、为了安全起见，不让恶意用户直接打开评论文件，请在comments.php头部添加以下代码：

35、<?php if (isset($_SERVER['SCRIPT娄多骋能_FILENAME']) && ‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME'])) die(‘Please do not load this page directly. Thanks!’);?> 因为WordPress的输出评论函数wp_list_comments()输出的评论代码与我们主题的评论代码不一样的，我们得自定义我们的评论列表，将comments.php中的以下代码删除（以下代码用于列出文章的所有评论）：

36、<liclass=”comment”> <divclass=”gravatar”> <imga造婷用痃lt=”” src=’images/gravatar.png’ height=’48′ width=’48′ /> <aclass=”comment-reply-link” href=">Reply</a> </div> <divclass=”comment_content”> <divclass=”clearfix”> <citeclass=”author_name”><ahref=””>Joe Bloggs</a></cite> <divclass=”comment-meta commentmetadata”>January 6, 2010 at 6:26 am</div> </div> <divclass=”comment_text”> <p>Donec leo. Aliquam risus elit, luctus vel, interdum vitae, malesuada eget, elit. Nulla vitae ipsum. Donec ligul a ante, bibendum sit amet, elementum quis, viverra eu, ante. Fusce tincidunt. Mauris pellentesque, arcu eget feugiat accumsan, ipsum mi molestie orci, ut pulvinar sapien lorem nec dui.</p> </div> </div></li>改成：

37、 <?php if (!empty($post->po衡痕贤伎st_password) && $_COOKIE[&#泌驾台佐39;wp-postpass_' . COOKIEHASH] != $post->post_password) { // if there’s a password // and it doesn’t match the cookie ?> <li> <p><a href=”#addcomment”>请输入密码再查看评论内容.</a></p> </li> <?php } else if ( !comments_open() ) { ?> <li> <p><a href=”#addcomment”>评论功能已经关闭!</a></p> </li> <?php } else if ( !have_comments() ) { ?> <li> <p><a href=”#addcomment”>还没有任何评论，你来说两句吧</a></p> </li> <?php } else { wp_list_comments(‘type=comment&callback=aurelius_comment’); } ?> 以上代码的意思大致也可以看得出来了，就是一大堆如果…就….，如果以上条件都不满足就列出所有评论。现在将主题文件夹Aurelius中的functions.php中的 ?> ，改成以下代码，如果你之前从本博客下载到的functions.php已经有以下代码则不用再添加：

38、function aurelius_comment($comment, $args, $depth){ $GLOBALS[&#泌驾台佐39;comment'] = $comment; ?> <li id=”li-comment-<?php comment_ID(); ?>”> <div> <?php if (function_exists(‘get_avatar’) && get_option(‘show_avatars’)) { echo get_avatar($comment, 48); } ?><?php comment_reply_link(array_merge( $args, array(‘reply_text’ => ‘回复’,’depth’ => $depth, ‘max_depth’ => $args['max_depth']))) ?> </div> <div id=”comment-<?php comment_ID(); ?>”> <div> <?php printf(__(‘<cite>%s</cite>’), get_comment_author_link()); ?> <div>发表于：<?php echo get_comment_time(‘Y-m-d H:i’); ?></div>    <?php edit_comment_link(‘修改’); ?> </div>

39、 <div> <?php if ($comment->comment_approved == ’0′) : ?> <em>你的评论正在审核，稍后会显示出来！</em><br /> <?php endif; ?> <?php comment_text(); ?> </div> </div> </li><?php } ?>

40、以上代码所用到的WordPress函数及相应的说明：

41、函数名称函数功能get_avatar($comment, 48)获取评论者的gravatar头像，尺舣剃哩矮寸为48 * 48comment_reply_link()回复留言的链接get_comment_author_link用于获取评论者博客地址get_comment_time获取评论发布时间edit_comment_link管理员修改评论的链接comment_text()输出评论内容好，现在在你的文章页面底部就可以正常地显示评论了！现在我们继续来制作提交评论的表单，将以下代码删除（也就是评论表单的代码）：

42、<!– Comment Form –><formid=”comment_form” action=”” m髫潋啜缅ethod=”post”> <h3>Add a comment</h3> <divclass=”hr dotted clearfix”> </div> <ul> <liclass=”clearfix”> <labelfor=”name”>Your Name</label> <inputid=”name” name=”name” type=”text” /> </li> <liclass=”clearfix”> <labelfor=”email”>Your Email</label> <inputid=”email” name=”email” type=”text” /> </li> <liclass=”clearfix”> <labelfor=”email”>Your Website</label> <inputid=”website” name=”website” type=”text” /> </li> <liclass=”clearfix”> <labelfor=”message”>Comment</label> <textareaid=”message” name=”message” rows=”3″ cols=”40″></textarea> </li> <liclass=”clearfix”> <!– Add Comment Button –> <atype=”submit” class=”button medium black right”>Add comment</a> </li> </ul></form>改成：

43、<?phpif ( !comments_open() ) :// If registration required and not logged in.elseif ( get_option(‘comment_registration’) && !is_user_logged_in() ) :?><p>你必须 <a href=”<?php echo wp_login_url( get_permalink() ); ?>”>登录</a> 才能发表评论.</p><?php else : ?><!– Comment Form –><form id=”commentform” name=”commentform” action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post”> <h3>发表评论</h3> <div> </div> <ul> <?php if ( !is_user_logged_in() ) : ?> <li> <label for=”name”>昵称</label> <input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”23″ tabindex=”1″ /> </li> <li> <label for=”email”>电子邮件</label> <input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”23″ tabindex=”2″ /> </li> <li> <label for=”email”>网址(选填)</label> <input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”23″ tabindex=”3″ /> </li> <?php else : ?> <li>您已登录:<a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a href=”<?php echo wp_logout_url(get_permalink()); ?>” title=”退出登录”>退出 »</a></li> <?php endif; ?> <li> <label for=”message”>评论内容</label> <textarea id=”message comment” name=”comment” tabindex=”4″ rows=”3″ cols=”40″></textarea> </li> <li> <!– Add Comment Button –> <a href=”javascript:void(0);” onClick=”Javascript:document.forms['commentform'].submit()”>发表评论</a> </li> </ul> <?php comment_id_fields(); ?> <?php do_action(‘comment_form’, $post->ID); ?></form><?php endif; ?>函数名称函数功能is_user_logged_in判断用户是否登录wp_login_url博客登录地址get_comment_author_link用于获取评论者博客地址$comment_author读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写用户名$comment_author_email读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写Email$comment_author_url读取cookie，如果该用户之前已经发表过评论则自动帮助用户填写博客地址do_action(‘comment_form’, $post->ID);该函数为某些插件预留wp_logout_url退出登录的链接好了，评论模板comments.php制作完毕！

44、制作page.php|WordPress主题制作全过程11

45、 page.php也就是页面，可能大家不太理解页面是什么意思，博客上的所有网页不都是页面吗？我们这里指的页面一个单独的页面，如”关于”、”联系方式”等，可以在WordPress后台 – 页面，进行页面的添加修改等。

46、这个page.php有很多东西跟single.php也都是相通的，或者基本都一样，这里我们对部分内容也不做太多的解析，直接上结果

47、添加标题搜索代码：

48、<!– Column 1 / Content –>改成：

49、<!– Column 1 / Content –> <h2><?php the_title(); ?></h2>

50、添加页面内容

51、<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel porta erat. Quisque sit amet risus at odio pellentesque sollicitudin. Proin suscipit molestie facilisis. Aenean vel massa magna. Proin nec lacinia augue. Mauris venenatis libero nec odio viverra consequat. In hac habitasse platea dictumst.</p>改成：

52、<?php the_content(); ?>

53、添加评论框将 与 </form>之间的所有代码删除（包括</form>）

54、替换成：

55、<?php comments_template(); ?>

56、添加查询语句搜索代码：

57、改成：

58、<!– Column 1 / Content –> <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>查找：

59、</div> <?php get_sidebar(); ?>改成：

60、 </div> <?php else : ?> <div> 没有找到你想要的页面！ </div&爿讥旌护gt; <?php endif; ?> <?php get_sidebar(); ?> 我们的page.php就制作完毕了。另外还有两个页面，无边栏页面full_width.php，联系页contact.php，制作方法完全一样，这里就不再详述了，我已经直接写好了，下载即可。你可能会问，那这两个页面怎么用呢？我分别在这两个页面的前面写了两个注释：

61、<?php/*Template Name: Page without s坡纠课柩idebar*/?><?p茑霁酌绡hp/*Template Name: contract*/?> 以后在WordPress后台新建页面的时候，可以在右边栏选择页面模板，你可以选择Page without sidebar 或 contract，不选默认使用page.php模板！contact.php边栏的联系方式你自己改一下内容就可以了。