GG资源网

WordPress主题开发教程五:编写Header模板(二)(wordpress主题制作教程(十):制作文章单页模板single.php)

WordPress主题开发教程五:编写Header模板(二)

第1步:开启 XAMPP 和打开 index.php

  • – 启动 Xampp
  • – 打开 Tutorial 的主题文件夹
  • – 打开浏览器,在地址栏输入 http://localhost/wordpress
  • – 返回主题文件夹,用记事本打开 index.php

第2步:给博客的标题添加 H1 的标签

现在,index.php 的代码是:

<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

给它添加 <h1> 和 </h1> 标签。H1 标签意思是标题一。HTML 一共可以有7级标题:H1,H2,H3,H4,H5,H6。按照默认,H1是字体最大而H6是则最小。

添加之后的的 index.php 文件是:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

保存,返回浏览器并刷新。

第3步:添加博客描述

调用博客的描述,则在博客标题链接的下面输入以下代码:

<?php bloginfo(’description’); ?>

现在变成了:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1><?php bloginfo(’description’); ?>

保存并刷新浏览器,可以看到在博客标题链接的下面出现博客的描述,我们可以看到 WordPress 管理后下修改博客的描述。

<?php – 开始 PHP 代码bloginfo(’description’) – 调用博客信息,这里的是描述; – 停止调用?> 结束 PHP 代码

第4步:DIV 标签

下一步将介绍一个新的标签 — DIV。

给以上代码添加 <div> 和 </div>标签: <div> <h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1><?php bloginfo(’description’); ?> </div>

保存,刷新浏览器,应该看到没有任何变化

可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开来。如果没有对它进行样式化,它无非是单独的内容,以后我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 DIV 附上 边框(borders),填充(paddings), 页面空白(margins),背景颜色(background color),背景图片(background images),以及其他一些东东。

第5步:添加 Header DIV 标签

添加 id=”header” 到 DIV 标签,如下:

<div id=”header”>

保存并刷新浏览器。

同样也没有改变,这里给 DIV 标签指定了 ID ,因为将会有更多的 DIV 标签或者无形的盒子,我们可以使用 ID 来区分!

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

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

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

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

由于网站搬家,部分链接失效,如无法下载,请联系站长!谢谢支持!
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途!
3. 分享目的仅供大家学习和交流,请不要用于商业用途!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 本站所有资源来源于站长上传和网络,如有侵权请邮件联系站长!
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
9. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
10.如果您购买了某个产品,而我们还没来得及更新,请联系站长或留言催更,谢谢理解 !
GG资源网 » WordPress主题开发教程五:编写Header模板(二)(wordpress主题制作教程(十):制作文章单页模板single.php)

发表回复

CAPTCHAis initialing...