zoukankan      html  css  js  c++  java
  • 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’); ?></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 来区分!

  • 相关阅读:
    笔试题 输出金字塔 面试经典
    C++ 函数, 虚函数, 纯虚函数
    EJB 根据beanName引用EJB
    【J2EE性能分析篇】JVM参数对J2EE性能优化的影响【转】
    C++ 引用和指针作为函数参数的例子。请不要拍砖
    lucene 总结
    二维数组按列序号排序 面试经典
    http://www.linuxidc.com/Linux/201004/25494.htm
    银行取款费用
    PHP 生成 csv 文件时乱码解决
  • 原文地址:https://www.cnblogs.com/hsapphire/p/1691198.html
Copyright © 2011-2022 走看看