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主题站提供一款专门做wordpress淘宝客的主题,粉红色的主页设计让这款主题更偏重女性化的产品,例如化妆品,女性...wordpress主题站经过测试该模板兼容网络主流浏览器,无变形和错位的情况,请网友放心使用。
wordpress主题wordpress博客主题:大气华丽的四色模板本资源系百度网盘分享地址
本文让我们来继续学习wordpress主题开发头部Header模板开发。 第1步:打开 XAMPP 和主题文件夹。 打开 Xampp,然后打开上次创建的主题文件夹,xampp/htdocs/wordpress/wp-content/themes/tutorial。我们应该看到上次...
WordPress 主题教程 WordPress 模板教程
第2步:给博客的标题添加 H1 的标签 现在,index.php 的代码是: 给它添加 和 标签。H1 标签意思是标题一。HTML 一共可以有7级标题:H1,H2,H3,H4,H5,H6。按照默认,H1是字体最大而H6是则最小。 添加...
wordpress主题WordPress国人主题:ET本资源系百度网盘分享地址
wordpress主题WordPressCMS主题:Techvibe本资源系百度网盘分享地址
wordpress主题WordPress CMS主题:SohoMag本资源系百度网盘分享地址
超详细WordPress主题制作教程: 从零基础开始制作,如果您有一些PHP语言基础学习本教程会更好或者您也可以访问https://blog.csdn.net/weixin_43103088/article/details/82819773博客来快速搭建一个主题。
WordPress_主题模板制作及修改教程
在WordPress主题开发教程一中我们已经知道开发主题所需的技能与工具,下面让我们来看看开发wordpress主题模板文件的结构。 WordPress 博客的每个页面是由多个模板文件组成的,下面是首页的例子: 在上图中,我们...
主题巴巴博客X主题zui新免授权版源码 WordPress主题模板主题巴巴博客X主题zui新免授权版源码 WordPress主题模板主题巴巴博客X主题zui新免授权版源码 WordPress主题模板主题巴巴博客X主题zui新免授权版源码 WordPress...
WordPress主题:deStyle WordPress主题:deStyle WordPress主题:deStyle WordPress主题:deStyle WordPress主题:deStyle
wordpress商城主题 woocommerce模板主题:XStore-6.3.4.rar
Wordpress主题:本地分类信息平台网站模板 CLASSIMA V2.0.7.2
wordpress主题:多功能商城模板Porto v5.21.zip wordpress主题:多功能商城模板Porto v5.21.zip
Wordpress Git主题 响应式CMS主题模板该主题可以用来搭建个人博客,素材下载网站,图片站等 主题特点: 兼容 IE9+、谷歌 Chrome 、火狐 Firefox 等主流浏览器 扁平化的设计加响应式布局,兼容电脑、和各个尺寸手机的...
超详细WordPress_主题教程:从零开始制作
WordPress动漫影视视频主题模板qinmeiV3.0 WordPress动漫影视视频主题模板qinmeiV3.0 WordPress动漫影视视频主题模板qinmeiV3.0 WordPress动漫影视视频主题模板qinmeiV3.0 WordPress动漫影视视频主题模板qinmeiV3.0
Wordpress 主题 模板 制作 教程 Wordpress 主题模板制作教程电子书