WordPress theme tutorial # 4b: Header template 2

Header Template2 is the fourth part of the WordPress theme tutorial series from scratch. For the last time, you must read the previous log before starting. This article will complete the herder template and introduce the DIV box model.

Step 2: Enable XAMPP and enable index. php

-Start XAMPP
-Open the theme folder of tutorial.
-Open a browser and enter http: // localhost/WordPress in the address bar.
-Return to the topic folder and use NotePad to open it.Index. php

Step 2: add the H1 tag to the blog title

Now,Index. phpOfCodeYes:

<A href = "<? PHP bloginfo ('url');?> "> <? PHP bloginfo ('name');?> </A>

Add<H1>And</H1>Label. The H1 label indicates heading 1. HTML can have a total of 7 levels of titles: H1, H2, H3, H4, H5, H6. By default, H1 is the largest font, while H6 is the smallest.

The added index. php file is:
<H1> <a href = "<? PHP bloginfo ('url');?> "> <? PHP bloginfo ('name');?> </A>

Save, return to the browser, and refresh.

Step 2: Add a blog description

To call the blog description, enter the following code under the blog title link:<? PHP bloginfo ('description');?>.

Now it becomes:

<H1> <a href = "<? PHP bloginfo ('url');?> "> <? PHP bloginfo ('name');?> </A>
<? PHP bloginfo ('description');?>

Save and refresh the browser. You can see the blog description below the blog title link. You can modify the blog description under WordPress management.

<? PHP-Start PHP code
Bloginfo ('description ')-Call the blog information, which is described here.
;-Stop calling
?>End PHP code

Step 2: div label

This step introduces a new tag -- Div.

Add<Div>And</Div>Tags:

<Div>

<H1> <a href = "? PHP bloginfo ('url');?> "> <? PHP bloginfo ('name');?> </A> <? PHP bloginfo ('description');?>

</Div>

Save and refresh the browser. You should see no changes

You can setDivThink of it as an invisible box ). Here it setsBlog title LinkAndBlog descriptionSeparated from other things. If you do not apply a style to it, it is nothing more than a separate content. We can use it later.Style.cssThis file de-styles this invisible box. We can attach the DIVBorder (borders),Fill (paddings),Blank Page (margins),Background Color),Background Image (background images)And other things.

Step 2: add the header Div tag

AddId = "Header"To the DIV tag, as follows:
<Div id = "Header">

Save and refresh the browser.

This is also not changed.DivTag specifiedIDBecause there will be more Div labels or invisible boxes, we use ID to differentiate!