WordPress 主题教程 #4b:Header 模板 2
Header 模板 2是从零开始创建 WordPress 主题教程系列教程的第四篇第二部分。最后说一次,开始之前务必先读下前面的日志。这篇会完成 Herder 模板,并且开始介绍 DIV Box 模型。
第1步:开启 XAMPP 和打开 index.php
- 启动 Xampp
- 打开 Tutorial 的主题文件夹
- 打开浏览器,在地址栏输入 http://localhost/wordpress
- 返回主题文件夹,用记事本打开 index.php
第2步:给博客的标题添加 H1 的标签
<script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
现在,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 标签
<script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
这步将介绍一个新的标签 -- 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 主题教程 #4b:Header 模板 2相关推荐
- WordPress 主题教程 #2:模板文件和模板
模板文件(template files)和模板(template)是从零开始创建 WordPress 主题系列教程的第二篇.开始之前,你要确保你已经看过WordPress 主题教程 #1:介绍,否则你 ...
- jquery toggle_响应式WordPress主题教程–第6部分– jQuery Toggle菜单
jquery toggle 视频教程详细信息 名称 响应式WordPress主题教程–第6部分– jQuery Toggle菜单 描述 我们将继续在导航菜单上进行操作. 在这一部分中,我们写了一口jQ ...
- WordPress 主题教程 #4a:Header 模板
Header 模板是从零开始创建 WordPress 主题系列教程的第四篇.前面我向你讲解了如何安装和启动 XAMPP,安装 WordPress 主题以及介绍了 PHP 语言的最基本语言,这篇我们将继 ...
- wordpress 主题教程-笔记
前言:代码参考 ,如无特别说明,下面所说的文件,都在 主题目录下. https://blog.wpjam.com/m/wp-theme-lesson-3-starting-indexphp/ http ...
- WordPress 主题教程 #5:主循环
调用博客日志的主循环(The Loop)是 WordPress 中最重要的 PHP 代码集,几乎所有的页面都会用到它.这也是从零开始创建 WordPress 主题系列教程的第五篇. 在开始继续学习之前 ...
- WordPress 主题教程 #3:开始 Index.php
开始 Index.php 是从零开始创建 WordPress 主题系列教程的第三篇.在介绍了 WordPress 主题的一些规则和术语,以及对 WordPress 模板和模板文件了解之后,现在是开始动 ...
- WordPress 主题教程 #6:侧边栏
侧边栏是从零开始创建 WordPress 主题系列教程的第六篇,这一篇我们主要讲解 WordPress 主题的侧边栏,让你很快掌握它的结构,并能编码和样式化它. 在开始侧边栏之前,这是现在 index ...
- WordPress 主题教程 #5c:日志元数据
日志元数据是从零开始创建 WordPress 主题系列教程的五篇的第三部分,今天我们将开始讲解日志的元数据(Postmetadata):日期(date),分类(categories),作者(autho ...
- WordPress 主题教程:从零开始制作 WordPress 主题
从零开始制作 WordPress 主题其实不难,只要你从现在开始认真阅读这个教程,一步一步认真学习,你就会成为一个 WordPress 主题制作高手.至少你会修改现有主题. 网络上已经有很多关于制作 ...
最新文章
- Redis单例、主从模式、sentinel以及集群的配置方式及优缺点对比
- 接到面试通知你该做什么?
- Unrecognised tag: 'build'
- vue使用webPack打包发布后页面显示空白
- canvas笔记-阴影的使用
- UnityShader15:前向渲染
- Linux镜像资源收集
- java for循环内执行多线程
- RTSP RTMP HLS HTTP全功能流媒体播放器SkeyeExPlayer开发计划
- 电气simulink常用模块_自动化设备电气图纸常用元件符号
- Mac 激活win10-报错:所请求的操作需要提升特权
- 半加器和全加器的维基百科
- 「学点C语言系列」02 判断年份是否为闰年
- 为何excel中数据无法计算机,造成Excel表格打不开的几种原因及解决办法
- 基于原始影像数据的深度学习模型预测脑龄可获得可靠的遗传生物标志物
- 牛客小白月赛8 F-数列操作 (有序表)
- addoption php,无忧建站-ajax+php无刷新二级联动下拉菜单(省市联动)源码
- 一个涂鸦笔记本的自定义View第三方库
- php框架体验demo,thinkphp3.1.3demo
- 西门子PLC S7-200SMART编程软件安装与通信
热门文章
- The Castle(信息学奥赛一本通-T1250)
- 信息学奥赛一本通C++语言——1077:统计满足条件的4位数
- 58 MM配置-评估和科目设置-OBYC配置自动记账
- 高通qcc芯片天梯图_芯片性能天梯榜“爆冷”,骁龙888无法撼动麒麟9000的王位...
- RabbitMq 持久化(转)
- [ ERROR ] Can not init Myriad device: NC_ERROR
- transformer中patch与token?
- 用于故障诊断的残差收缩网络
- 外部表在Hive中的使用
- [Unity] 使用 Visual Effect Graph 制作射击枪焰特效