WordPress 主题教程 #4b:Header 模板 2

Header 模板 2是从零开端创立 WordPress 主题教程系列教程的第四篇第二局部。最后说一次,开端之前务必先读下前面的日志。这篇会完成 Herder 模板,并且开端引见 DIV Box 模型。

第1步:开启 XAMPP 和翻开 index.php
– 启动 Xampp
– 翻开 Tutorial 的主题文件夹
– 翻开阅读器,在地址栏输入 http://localhost/wordpress
– 返回主题文件夹,用记事本翻开 index.php

第2步:给博客的标题添加 H1 的标签
如今,index.php 的代码是:

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

给它添加

标签。H1 标签意义是标题一。HTML 一共能够有7级标题:H1,H2,H3,H4,H5,H6。依照默许,H1是字体最大而H6是则最小。

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

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

保管,返回阅读器并刷新。

第3步:添加博客描绘
调用博客的描绘,则在博客标题链接的下面输入以下代码: <?php bloginfo(’description’); ?>。

如今变成了:

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

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

保管并刷新阅读器,能够看到在博客标题链接的下面呈现博客的描绘,我们能够到 WordPress 管理后下修正博客的描绘。

<?php – 开端 PHP 代码
bloginfo(’description’) – 调用博客信息,这里的是描绘
; – 中止调用
?> 完毕 PHP 代码

第4步:DIV 标签
这步将引见一个新的标签 — DIV。

给以上代码添加

标签:

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

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

保管,刷新阅读器,应该看到没有任何变化

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

第5步:添加 Header DIV 标签
添加 id=”header” 到 DIV 标签,如下:

保管并刷新阅读器。

同样也没有改动,这里给 DIV 标签指定了 ID ,由于将会有更多的 DIV 标签或者无形的盒子,我们运用 ID 来辨别!

微信扫一扫,关注微信公众号,获取最新资讯

留下回复

您的电邮不会被公布 必填字段标记为*