Wordprss topic creation tutorial (5): create a header file-header. php

Generally, the headers of all pages on our website are similar to those at the bottom, so we can put these similar codes into a file and load the header and the bottom file in each template file, in this way, we do not need to write the header and bottom files for each template, and the modification is convenient. after the header file is changed, all pages will take effect.

Generally, the headers of all pages on our website are similar to those at the bottom, so we can put these similar codes into a file and load the header and the bottom file in each template file, in this way, we do not need to write the header and bottom files for each template, and the modification is convenient. after the header file is changed, all pages will take effect.

In the previous tutorial, we created a header file header under the content \ themes \ Aurelius folder. php, and then index. extract (cut) the header code in php and write it to this file:

   
  Aurelius | Blog 
 
         
     Aurelius     
     
 
 
         
  
  
Get in touch Contact Us
         
  
  
Latest news Blog
         
  
  
Homepage Home
     
 
 
           
     Our blog, keeping you up-to-date on our latest news.      

 

Save the header file and add the code before index. php:

 

The get_header () function automatically loads the header in the topic folder. php file, so the file name of the header file is named header. php then uses the get_deader () function to edit other files in the topic folder: archive. php, contact. php, full_width.php, page. php and single. php: delete the above code and change it

 

Now that the header file has been created, the next task is to edit the header file header. php and change the static html code in it to dynamic php code.
FirstWe need to change the information. generally, we need to change the title information to the following: Article page title | website name, of course, you can also change it based on your own seo, for example, some people add the website description in the title. In header. phpAurelius | BlogChange to the following code:

<? Php if (is_home () {bloginfo ('name'); echo "-"; bloginfo ('Description');} elseif (is_category () {single_cat_title (); echo "-"; bloginfo ('name');} elseif (is_single () | is_page () {single_post_title ();} elseif (is_search ()) {echo "search result"; echo "-"; bloginfo ('name');} elseif (is_404 () {echo 'page not found! ';} Else {wp_title ('', true) ;}?>

The above code identifiesIt is necessary to set the information in different forms. </P>

Several judgment functions are explained as follows:

1. Is_home (): Returns true if the current page is the home page

2. Is_category (): Returns true if the current page is a category page.

3. Is_single (): Returns true if the current page is a single article page

4. Is_page (): Returns true if the current page is a single page

5. For more information, see WordPress documentation: condition tag

Therefore, if you want to create a topic based on your needs, it will be inconvenient if you do not use php. Therefore, I personally suggest you study php if you want to create a topic.

Step 2: Modify the path of the css file.
Find the following code in the header. php file:

May you ask, isn't there a style.css file in the topic folder? Why didn't I load the style sheet when I visited the website?

Because the path of the style sheet. /style.css is actually the root directory of the website. we will talk about it later. if you don't want others to easily see that your website uses the wordprss program, you can change the path of images, style sheets, and other files, such as the studio, and move the images and style sheets to the root directory of the website, in the webpage code, there will be no wp-content/themes or other paths available on the wordprss site. Okay, change the above code

Bloginfo () functions are frequently used. function parameters and usage are as follows:

Bloginfo('stylesheet_url'automatically outputs the absolute URL of the style.css file under the website topic folder, such as http: // localhost/wp-content/themes/Aurelius/style.css

However, the paths of several images are incorrect and cannot be displayed. open the index in a text editor. php, archive. php, contact. php, full_width.php, page. php and single. php, add the correct URL to these images, search for code, and replace all: src = "images/, in batches with src =" /Images /. Refresh your home page and check whether the article is properly displayed by 10 × 150.

Step 3:To change the blog name and description, we need to change the blog name and description to the information we set in the background. the following code in header. php:

Id = "logo" class = "grid_4"> Aurelius class = "grid_12 caption clearfix"> Our blog, keeping you up-to-date on our latest news.

Modify:

Id = "logo" class = "grid_4"> href =" /"> Class = "grid_12 caption clearfix">

We can see that bloginfo and get_bloginfo are functions, so these two functions are often used.

Step 4:Add wp_head.

The wp_head function is important for the topic of the plug-in. generally, if the plug-in needs to load css files and js files, they are all output through the wp_head () function. In the header. php fileAdd:

Go to your website and view the source code of the webpage.The following code is added to the tag:

Of course, these codes are redundant, such as the program version? It is insecure to tell others the program version. We will discuss how to remove the redundant header information in future tutorials.

Step 5:Display menu bar

The current menu has several menu items, but they are static. we hope to control them in the background and find the following code in header file header. php:

 

 
 
      
  
  
Get in touch Contact Us
      
  
  
Latest news Blog
      
  
  
Homepage Home
  
 
 

 

Modify the function to load the menu:

  'menu_order', 'container_id'=>'menu','menu_id'=>'navigation') ); ?>

 

However, if you have added a menu function, you have to have a menu control in the background. Therefore, you need to register a menu in the background. Add the following code to functions. php:

// Register the menu if (function_exists ('register _ nav_menus ') {register_nav_menus (array ('primary' = >__ ('main navigation menu '),));}

After entering the background, you can see the topic support menu in the background. This function is the latest menu function, which is different from the original one. The wp_nav_menu function has more parameters. I will not explain them here. you can search for them on the official website ..

Up to now, although your topic can control the header code from the background, you can only see one page, because only the header is dynamic and other locations are static.

However, there is another important information in the header file that is not added, that is, the description and keywords. This will be explained in the next tutorial.