WordPress主题制作全过程(九):制作single.php

日期: 标签:WordPress教程主题制作
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

今天我们来制作单文章页single.php,有了之前制作index.php的经验,制作single.php也不再那么难了,这里将直接略过一些内容,直接给出结果。如果对某些修改不太清楚,可以先参考:WordPress主题制作全过程(八):制作index.php

1、添加文章标题:

<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>

改成:

<h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

2、添加文章标签

<a href="#">News</a>, <a href="#">Products</a>

改成:

<?php the_tags('标签:', ', ', ''); ?>

3、添加日期
找到:31st Sep, 09 改成:

<?php the_time('Y年n月j日') ?>

4、显示评论数

<a href="#">7 Comments</a>

改成:

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>

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

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?><?php edit_post_link('编辑', ' • ', ''); ?>

6、添加文章内容
<!-- Post Content --><!-- Post Links -->之间的代码全部删除,替换成:

<?php the_content(); ?>

另外,你可以将文章页那张图片删除了,删除以下代码:

<img class="thumb" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" alt=""/>

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

<p class="clearfix"> <a href="blog.html" class="button float" ><< Back to Blog</a> <a href="#commentform" class="button float right" >Discuss this post</a> </p>

改成:

<p class="clearfix"> <a href="<?php echo get_option('home'); ?>" class="button float" ><< 返回首页</a> <a href="#commentform" class="button float right" >发表评论</a> </p>

好了,基本上的修改就这些了,但是你的文章页仍然不能显示文章内容,你得给它加上一个条件语句,这样WordPress才会去数据库读出你的文章内容。搜索代码:<!-- Column 1 /Content -->

改成:

<!-- Column 1 /Content -->
	<?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

将:

</div>
	<?php get_sidebar(); ?>

改成:

	</div>
	<?php else : ?>
	<div class="errorbox">
		没有文章!
	</div>
	<?php endif; ?>
	<?php get_sidebar(); ?>

现在你的文章内容应该都可以正常显示了,一个文章页基本上也成型了。下节我们将讲解如何制作评论页,本次不提供修改的主题文件下载,下次一起提供。

另外,文章页顶部会有一段文字:

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

可以替换成你的内容。如果不需要,可以将以下代码删除:

<h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
	<div class="hr grid_12 clearfix"> </div>

好了今天的教程就讲到这。WordPress主题制作全过程完整列表:

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/create-wordpress-themes-single.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

49 条留言

点此留言
  1. ioXiu ioXiu

    我来膜拜一下哈

  2. ZTMC

    在"6、添加文章内容"时咱一边改代码一边预览效果
    文章内容就是不显示 咱纠结了半天改来改去都没搞定
    然后半个小时候焦炙了决定先看下面的内容
    然后看到7.里面那个条件的啥的 当时就想喊去屎去屎去屎去屎去屎= =

    • Ludou

      @ZTMC 必须添加后面的循环语句才能显示文章。看来是我在编排文章的时候,疏忽了这一点。

      • 青刀刀 青刀刀

        @Ludou caro 博主:
        updata_post_caches的函数能具体讲讲吗,是不是每个调用详细文章内容都是用这个函数的。

        • 青刀刀 青刀刀

          @青刀刀 还有,就是填写判断语句if文章存在,调用次文章内容,否则“文章不存在”。
          事实上,我在后台如果把文章放掉回收站里,前台就没有这个文章了。不晓得这个判断是在什么情况下用得到。

          不知道我的问题说的清不清楚

          • Ludou

            @青刀刀 <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

            这段代码其实就是从数据库中读取已发布的文章,自然不包括待审、草稿、回收站中的文章,如果你想显示这类文章,你可以使用query post函数,给它传递参数post_status,值可选pending(待审)、publish(已发布)、draft(草稿), future(定时), private(私有), trash(回收站),程序实例:
            <?php
            query_posts( array( 'post_status' => array('publish', 'pending', 'draft', 'future', 'private', 'trash') ) );

            if (have_posts()) : the_post(); update_post_caches($posts); ?>

            这样将显示所有状态的文章,可根据需要去除相应的值。

        • Ludou

          @青刀刀 update_post_caches不是必须的。

  3. 老饕 老饕

    9贴错内容了吧?怎么是制作comments.php的内容啊?

    • Ludou

      @老饕 详见下一节,https://www.ludou.org/create-wordpress-themes-comments.html

  4. 老衲 老衲

    好长时间没有来了 继续把这个教程给看完…
    似乎这个问题很白痴….
    <?php comments_template(); ?> 跟这个<?php get_comments(); ?>(<?php get_header(); ?>) 既然都是调用有什么区别 不知道你懂不懂…

    • 老衲 老衲

      @老衲 <?php get_comments(); ?>似乎不能用啊

      • Ludou

        @老衲 文章我已经改过了,get_comments()不起作用说明你还没有创建comments.php

        看来只有你才是认真看完本教程的网友了,唉,只能说明我写的教程很失败啊。

        • 老衲 老衲

          @Ludou 我感觉教程不错啊

          • Ludou

            @老衲 你的网站已经好久不能访问了

    • Ludou

      @老衲 comments_template();用户导入评论模板,也可以自定义评论模板文件,默认是导入comments.php中的所有代码(相当用这个函数替代文件中的所有代码),如果给他传递文件参数,可以自行选择评论模板文件,如comments_template( '/short-comments.php' );

      get_comments()用于调用对应文章或页面的所有评论信息,记住这只是评论的信息,如评论作者、日期、内容等,这些只是一些信息,是没有格式的,需要你用HTML代码给他们括起来。

  5. 老衲 老衲

    教程看完了 真费脑子

    这个9 估计是内容贴错了 自己根据教程的理解也修改了下single 只是显示图片 不显示里面的文字内容…

    文章页面的上下博文的连接代码用前面index说的那个也不行,自己搜索去了

    露兜上来看看,这9 跟10 ,弄错了…

    • Ludou

      @老衲 确实搞混了,之前更换了代码高亮插件,结果复制文章内容的时候搞乱了,幸好还有数据库备份。

  6. 西门 西门

    搜索代码:<!– Caption Line –>
    你上一节提供下载的代码找不到这个。

    • Ludou

      @西门 那就查找 <!– Column 1 /Content –>

      当时编排的时候有点混乱。

  7. fans

    我这样做出来了 但是所有的single页面都只显示最老的一篇文章

  8. virou

    update_post_caches($posts);我怎么看都没看出什么用途,好像去掉也不影响什么!

  9. virou

    我弄错了,不好意思,继续学习!!

  10. virou

    update_post_caches($posts);看了又看,这句好像就是没什么用啊……

  11. 感恩的心

    教程很精彩,非常认真的花了一整天的时间学习完了.最后的"评论"comment没有讲很遗憾

  12. lugu lugu

    wp的文章浏览次数,怎么做?

    • Ludou

      @lugu 插件:WP-PostViews

      • lugu lugu

        @Ludou 还有,我的wp后台,为什么没有单独的文章摘要。我首页的文章现在都是文章的正文。

        • Ludou

          @lugu 页面右上角 – 显示选项,勾选:摘要

  13. 木子月 木子月

    <?php the_content(); ?> 没有输出内容…是不是依赖别的标签啊 我木有下载你提供的那个,我在自己的html静态页面改的,我还是下载个看看吧…

    • 木子月 木子月

      @木子月 好吧- -没看到下面

    • Ludou

      @木子月 必须包含在主循环内,见文章第7点:
      if (have_posts()) :

      the_content();

      endif;

  14. kevin kevin

    ludou

    代码都是按你说的敲的 最后也核对过了 但是不显示内容 不知道什么问题

  15. 你的博客要逆天啊 你的博客要逆天啊

    为什么我的文章死活不现实呢?????

  16. Yutorpea

    想请教一下,single和page这两个页面究竟有啥区别?WP是怎么定义和区分的?

  17. 明

    如果文章内容太长,它会伸到sidebar那边去,是要在CSS那里修改吗?

  18. michael503

    加了<!– Column 1 /Content –>
    <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>

    怎么出现错误?Parse error: syntax error, unexpected end of file in F:\xampp\htdocs\wordpress\wp-content\themes\Aurelius\single.php on line 68

  19. wordpress

    很好的教程

  20. wordpress初学者

    博主,求教一个问题,系统默认的提交评论表单发生错误后会跳转到wp-comments-post.php,我想让它不跳转到这个页面,直接在当前评论页面返回一个错误提示,并且这个提示的内容也是可以修改的,请问要如何实现?谢谢!

  21. 杰客

    标题 日期 都显示正常就是内容不现实 我也不会加循环内容a

  22. Hstb Hstb

    <!– Column 1 /Content –>
    <?php if (have_posts()) : the_post(); update_post_caches($posts); ?>
    这段代码里"<?php if (have_posts())"和"the_post()"之前多打了一个冒号导致500

    • 露兜

      @Hstb 冒号是必须的。如果冒号和endif的写法报错,请改用 { }

  23. 张淡腾 张淡腾

    你好,网站出问题了。代码高亮不管用了

发表留言