wordpress主题制作教程(十):制作文章单页模板single.php

您现在的位置:阿树工作室->wordpress主题教程->基础教程  2012.7.25  浏览数:39,982

在前一篇教程中我们已经只做好了index.php,这个文件可以当首页使用,也可以当分类、标签等归档页使用,这篇教程我们来制作一下文章的具体页面-文章单页模板,如果我们没有但页模板single.php,那么就会使用index.php文件来代替,不过对于文章单页,我们还需要添加一些其他的信息,比如版权申明、相关文章、评论等等,所以我们应该另外制作一个模板,在我们下载的主题文件夹下面已经有了single.php文件。你可以试着删除这个文件,然后再去看看用index.php显示文章的效果。

用编辑器打开主题文件夹下面的single.php文件,在前面的教程中我们已经将这个文件中的头部、底部、侧边栏代码替换成了加载对应模板的代码。对于文章单页,我们的文章框架代码页需要放在一个循环中,只不过到了单页面,只循环一次。所以你完全可以将index.php里面的代码全部复制过来,再添加,修改。

一、文章标题
找到文章标题:

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

还记得我们上篇教程讲的获取文章链接、标题的代码吗?

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

二、文章标签:

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

改成

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

三、日期
将日期改为:

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

四、评论数

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

改成

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

五、文章内容。
先将文章的图片删了,删除下面的代码:

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

然后将所有文章内容,即: 和 之间的代码全部删除,替换成:

  1. <?php the_content(); ?>

六、评论和返回首页

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

改成:

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

好了,前面说过文章单页的内容页需要放在一个循环语句中(事实上是我们需要在输出文章的前面执行the_post()函数,这个函数会生成文章变量$post)。
在的后面添加代码,效果:

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

然后在代码

  1. </div>
  2. <?php get_sidebar(); ?>

的前面,注意咯。“的前面”添加代码,完成效果:

  1. </div>
  2. <?php else : ?>
  3. <div class="errorbox">
  4. 没有文章!
  5. </div>
  6. <?php endif; ?>
  7. <?php get_sidebar(); ?>

这里的操作跟首页差不多,不过这里只需要输出一篇文章,所以while添加与否没有多大关系,需要提醒的是,一定要记住添加了if,就得有endif,添加了while,就得有endwhile。
可能其他语法不会这样用,其实这里你也可以改成用{}的。比如:

  1. <?php if( have_posts() ){ the_post();?>
  2. <!--文章代码-->
  3. <?php } ?>

OK,文章单页制作方法就完成了。

!转载请注明来自:阿树工作室-wordpress主题定制,制作教程(wordpress主题定制-阿树工作室)

本篇教程之前的几篇教程是

  • wordpress主题制作教程(九):制作index.php文件
  • wordpress主题制作教程(八):制作侧边栏sidebar.php
  • wordpress主题制作教程(七):制作底部文件-footer.php

本篇教程之后的几篇教程是

  • wordpress主题制作教程(十一):评论模板comments.php
  • wordpress主题制作教程(12):单页面模板page.php

wordpress主题制作教程(十):制作文章单页模板single.php相关推荐

  1. php做一个文章页面,wordpress主题制作教程(十):制作文章单页模板single.php

    在前一篇教程中我们已经只做好了index.php,这个文件可以当首页使用,也可以当分类.标签等归档页使用,这篇教程我们来制作一下文章的具体页面-文章单页模板,如果我们没有但页模板single.php, ...

  2. wordpress网站文章内容页模板主题开发制作教程

    内容页模板主题是网站中的重中之重,是主要承载我们的网站内容的页面,也是为用户展示结果的界面,那么wordpress网站文章内容页模板主题开发制作教程主要将的就帮我们顺利的学会主题开发,主要的内容有,标 ...

  3. wordpress网站单页模板主题开发制作

    单页模板主题一般通常用在不需要经常更新的页面上,像我们常见的关于我们,企业文化.联系我们,都属于单页面,相对来说比较简单,内容也比较单一.单页的主要调用方法和文章页很相似,常见的网站单页主要有以下部分 ...

  4. 【视频教程】帝国CMS制作网站系列教程08—单页模板的制作

    作为一个程序员,搭建一个自己的博客网站是件非常容易的事情,但是作为很多非程序员非计算机专业的学习者来讲,可能就需要花点时间进行学习,而如果你想通过自学来学习怎么制作一个属于自己的网站的话,那这套帝国C ...

  5. 烟雨黑帽SEO程序演示:AI智能模板在线制作制作神器-单域名版+多域名版-一键批量制作黑帽程序所使用的单页模板

    烟雨黑帽SEO程序演示:AI智能模板在线制作制作神器-单域名版+多域名版-一键批量制作黑帽程序所使用的单页模板 烟雨黑帽SEO程序演示:AI智能模板制作神器,用于一键制作黑帽程序模板.零基础小白神器, ...

  6. php详情页模板怎么做,WordPress自定义文章详情页模板

    想要让某个特定分类文章页面样式区别于其他分类,我们可以自定义模板来实现.今天我们分享一下WordPress自定义文章详情页模板,首先在所用WordPress主题根目录新建一个名称 single-wor ...

  7. 业务展示类网站高保真原型模板库、企业品牌官网、公司业务介绍、产品展示及营销、首页模板、内页模板、单页模板、整站模板、导航、轮播、横幅、列表、客户、案例、页脚、动态面板、母版、页面事件、窗口函数

    本作品是一套专为业务展示类网站而推出的原型模板库,适用于制作企业品牌官网.公司业务介绍.产品展示及营销等各类网站.作品中包含了符合目前主流展示类网站设计风格的丰富模板及素材,并以UI设计稿级别的高保真 ...

  8. 一款全屏展示的流量卡官网单页模板源码

    介绍: 一款fullpage.js制作全屏展示的流量卡官网单页模板 这个是一个单页源码没有后台的,下载之后自行通过源码修改文字图片即可 具体的就不多介绍了,用的上的伙伴就下载拿走吧! 网盘下载地址: ...

  9. 便利贴--43{vue3+ts+setup+ArcoDesign 表格和表单 单页模板(整合)} --舍弃--不删--不更新

    便利贴--43{vue3+ts+setup+ArcoDesign 表格和表单 单页模板(整合)} --舍弃--不删--不更新 前言 tableOnce.vue affuxFormModal.vue 前 ...

最新文章

  1. python lxml 安装及应用
  2. 【FFmpeg】FFmpeg 帮助文档使用
  3. 如何知道自己的研究课题是不是领域热点?
  4. Anaconda 安装 Python 库(MySQLdb)的方法
  5. Oracle——17概要文件
  6. java gui 连接mysql数据库
  7. Vue全家桶 之 Vue基础
  8. Pycharm最新版本安装教程
  9. 我们的开源项目-2013年度开源社区线下聚会《JEECG微云快速开发平台-SAAS企业应用在线开发与微信移动应用》PPT分享
  10. 产业链人士:苹果明年将推出OLED屏iPad
  11. 结构优化设计with OPtiStruct
  12. 关于机器人方面的sci论文_机器人期刊_SCI
  13. 微信小程序获取openid(用户唯一身份识别)
  14. 微型计算机的最少配是,只有SD卡大小的微型电脑 配Atom处理器
  15. [BZOJ]4987: Tree 树形DP
  16. Java中的UTF-8、UTF-16编码字符所占字节数
  17. php生成gif1009php生成gif,怎样将几张图片做成会动的GIF的动态图像?GIF动画制作软件,将图片制作成GIF动图...
  18. WPF工控组态软件之温度计
  19. PHP 获取浏览器以及版本号
  20. 何谓SRIO——RapidIO之旅从这里开始

热门文章

  1. CentOS7 ab压力测试安装与解释
  2. [28000][Microsoft][SQL server native client 10.0][SQL server]用户‘sa’登录失败。(18456)
  3. 一些免费的api接口
  4. 计算机考研951,2017年辽宁石油化工大学计算机与通信工程学院951数据结构考研题库...
  5. 华勤技术冲刺上交所主板上市:计划募资55亿,半年收入达500亿元
  6. 单反相机 · 乐趣 · 生活
  7. 论文阅读 2021 —— DRO: Deep Recurrent Optimizer for Structure-from-Motion
  8. 编译tolua——3、以pbc为例子,添加第三方库
  9. 中国移动提NFV引入三大方向:VoLTE、物联网、固定接入
  10. java:听歌姿势~~o(*^@^*)o之酷我