The whole process of WordPress theme creation (5): making header.php
I introduced you to "The whole process of WordPress theme production (4): A small test ". This article continues to bring you "The whole process of WordPress theme production (5): Making header.php" , let’s take a look at it together~
You can try to use a text editor to open the .html downloaded from WordPress theme production process (3): HTML static template production files, I wonder if you have noticed that the codes in their headers are very similar? In fact, we can extract this part of similar code and put it into a separate file header.php. When each page wants to use this part of the code, use php's include() or WordPress's get_header() is included, and this part of the code must be written in every page in the province. If you change it, you can achieve the purpose of making a complete change.
Remind me again: If you don’t plan to write code, don’t read this series of tutorials, it will not be helpful to you!
Then the theme directory we created last timewp-content\themes\Aurelius, create a new php file header.php in this directory, we extract# Copy and paste the header code in ##index.php into header.php. The following code is all the code currently in header.php (different themes of course The header codes are all different and can be customized in your actual project):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Aurelius | Blog</title> <!-- Stylesheets --> <link rel="stylesheet" href="./style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper" class="container_12 clearfix"> <!-- Text Logo --> <h1 id="Aurelius">Aurelius</h1> <!-- Navigation Menu --> <ul id="navigation" class="grid_8"> <li><a href="contact.html"><span class="meta">Get in touch</span><br /> Contact Us</a></li> <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br /> Blog</a></li> <li><a href="index.html"><span class="meta">Homepage</span><br /> Home</a></li> </ul> <div class="hr grid_12 clearfix"> </div> <!-- Caption Line --> <h2 id="Our-nbsp-span-blog-span-nbsp-keeping-nbsp-you-nbsp-up-to-date-nbsp-on-nbsp-our-nbsp-latest-nbsp-news">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2> <div class="hr grid_12 clearfix"> </div>Then use a text editor to open
index.php, archive.php, contact.php, full_width.php, page.php and single.php, Delete the above similar code and change it to:
<?php get_header(); ?>Okay, now open your test blog homepage to see if the theme we made can still work normally. The answer is yes, follow It turned out to be almost the same, but still chaos.
get_header() is equivalent to copying the code in header.php to the current php file. Next, we'll take a closer look at the dynamic content in header.php. header.php will be included in all template pages (home page, category page, page, tag page, etc.), so the code in header.php should be dynamic and suitable for different pages , so PHP code needs to be used here, not simple HTML. Let's modify header.php:
1. Change <strong></strong>
We all know that the titles of different pages are It’s different, and the title setting will also directly affect the SEO effect, so you should set it carefully here. The following provides an SEO-optimized title writing method. Change
to: <title><?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 "搜索结果"; echo " - "; bloginfo('name');
} elseif (is_404() ) {
echo '页面未找到!';
} else {
wp_title('',true);
} ?></title> The PHP code added above uses conditional judgment to target different The pages use different titles. Here are some conditional tags explained.
- is_home()
: Returns true when the current page is the homepage - is_category()
: Returns true when the current page is a category page - is_single()
: Returns true when the current page is a single article page - is_page()
: Returns true when the current page is a single page
WordPress SEO title
2. Change the style.css path of the style sheet
Before this, the home page you saw was in chaos because the css style has not been loaded. Now let's add the styles together. You can find this piece of code inheader.php:
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />If you are smart, you may ask:
wp-content\themes\Aurelius Isn’t there already a style.css in the directory? So why is header.php not loading css? As you can see the result, the page is in a mess, and you can be sure that the css is not loaded. Because this is a theme of WordPress, it needs to be called by the main program of WordPress, and your blog can be displayed after layers of analysis, rather than a simple html static web page file. Correct modification:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
bloginfo('stylesheet_url')输出的是你的主题css文件绝对网址，如http://localhost/wp/wp-content/themes/Aurelius/style.css，WordPress程序会自动识别你的WordPress安装地址，当前启用的主题，自动输出这个style.css链接。现在你可以试着更改一下，然后刷新一下你的博客首页，查看网页源代码，style.css的链接是不是变成你的了？页面是否可以正常显示了呢？
如果你的css文件不是style.css，且不是在主题根目录下，那怎么办呢？我们可以用<?php bloginfo('template_url'); ?>来获取主题根目录的URL，如你的主题css文件是abc.css，那么我们可以这样写：<?php bloginfo('template_url'); ?>/abc.css，如果是在子目录css下那就这样：<?php bloginfo('template_url'); ?>/css/abc.css。同样加载js文件也是这样。
不过，还有几张图片的路径不对，还不能显示出来，现在我们一起用文本编辑器打开index.php、archive.php、contact.php、full_width.php、page.php和single.php，给这些图片加上正确的URL，搜索代码，将所有的：src="images/，批量替换成src="<?php bloginfo('template_url'); ?>/images/。现在再刷新你的主页，看文章的缩略图是否可以正常显示。<?php bloginfo('template_url'); ?>用于输出主题目录的URL。
3、添加pingback
至于什么是pingback，你可以在搜索引擎中输入关键字：WordPress pingback，就可以得到你想要的答案了。如果你需要这个功能，可以在里面添加以下代码：
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
4、更改博客名称和描述
在header.php，下面两行代码用于显示博客名称和描述：
<h1 id="Aurelius">Aurelius</h1> <h2 id="Our-nbsp-span-blog-span-nbsp-keeping-nbsp-you-nbsp-up-to-date-nbsp-on-nbsp-our-nbsp-latest-nbsp-news">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
上面是静态代码，现在做如下修改：
<h1 id="logo" class="grid_4"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>
现在你的博客首页看到的就是你博客名称和描述了，并且logo也是一个链接指向你的博客首页。我们这里说说这些php代码的作用。
-
<?php echo get_option('home'); ?>输出你的博客首页网址 -
<?php bloginfo('name'); ?>输出你的博客名称 -
<?php bloginfo('description'); ?>输出博客描述
博客名称和描述可以在WordPress管理后台 - 设置 - 常规那里更改。以后制作你自己的WordPress主题的时候，你可参照上面的说明对你的主题进行修改。
5、添加订阅feed链接
相信每个已发布的WordPress博客主题都会提供feed订阅，当然我们的主题也应该提供这样的功能。在之前添加以下代码：
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" />
6、添加wp_head
有些插件需要在网页头部执行一些类如添加一些js或css的动作，要让这些插件能够正常的工作，也让你的主题有更好的兼容性，你应该添加wp_head()函数。打开header.php，在前面添加以下代码即可：
<?php wp_head(); ?>
现在打开你的博客主页，查看源代码，前面是不是多了以下类似代码（这些都是wp_head()的功劳）：
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ludou.co.tv/blog/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml" /> <link rel='index' href='http://ludou.co.tv' /> <meta name="generator" content="WordPress 2.9.2" />
7、添加Description 和 Keywords
关于添加网页描述和关键字，可以查看我之前写过的文章：WordPress使用经验（一）独立的Description 和 Keywords
8、显示菜单栏
目前菜单栏有Home、Blog和Contact Us几个菜单，不过这些都是静态的内容，并不是你博客上的页面。现在我们将菜单栏换成你的菜单，这里只在菜单栏中列出页面page，当然你也可以再放置分类，根据你的喜好来吧，将header.php中：
<ul id="navigation" class="grid_8"> <li><a href="contact.html"><span class="meta">Get in touch</span><br /> Contact Us</a></li> <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br /> Blog</a></li> <li><a href="index.html"><span class="meta">Homepage</span><br /> Home</a></li> </ul>
改成：
<ul id="navigation" class="grid_8">
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
<li <?php if (is_home()) { echo 'class="current"';} ?>><a title="<?php bloginfo('name'); ?>" href="<?php echo get_option('home'); ?>/">主页</a></li>
</ul>The following two articles introduce how to make WordPress menus, you can also refer to:
9. Refresh the cache
Add PHP code in front of and after to improve program running efficiency: <?php flush(); ?>
Summary
Okay, this exercise is over! Now summarize some of the more important knowledge points mentioned today:
- ##<?php get_header(); ?>
Include the header.php file from the current theme folder - is_home(), is_single(), is_category()
and several other conditional judgment tags -
Output the path to the style.css file in the theme folder -
Output the blog pingback URL -
Output the blog theme directory URL - Output your blog homepage URL</li> <li> <?php bloginfo('name'); ?><code> Output your blog name
-
Output blog description -
<?php wp_head(); ?>
Used to include the WordPress program output header Department information -
Used to list blog category pages -
Used to list blog pages
Aurelius theme file after this modification is provided. You can open it with a text editor and compare it with the file you modified (especially header.php). See How are you doing?
WordPress Tutorial"
The above is the detailed content of The whole process of WordPress theme creation (5): making header.php. For more information, please follow other related articles on the PHP Chinese website!
Can I learn WordPress in 3 days?Apr 09, 2025 am 12:16 AMCan learn WordPress within three days. 1. Master basic knowledge, such as themes, plug-ins, etc. 2. Understand the core functions, including installation and working principles. 3. Learn basic and advanced usage through examples. 4. Understand debugging techniques and performance optimization suggestions.
Is WordPress a CMS?Apr 08, 2025 am 12:02 AMWordPress is a Content Management System (CMS). It provides content management, user management, themes and plug-in capabilities to support the creation and management of website content. Its working principle includes database management, template systems and plug-in architecture, suitable for a variety of needs from blogs to corporate websites.
What is the WordPress good for?Apr 07, 2025 am 12:06 AMWordPressisgoodforvirtuallyanywebprojectduetoitsversatilityasaCMS.Itexcelsin:1)user-friendliness,allowingeasywebsitesetup;2)flexibilityandcustomizationwithnumerousthemesandplugins;3)SEOoptimization;and4)strongcommunitysupport,thoughusersmustmanageper
Should I use Wix or WordPress?Apr 06, 2025 am 12:11 AMWix is suitable for users who have no programming experience, and WordPress is suitable for users who want more control and expansion capabilities. 1) Wix provides drag-and-drop editors and rich templates, making it easy to quickly build a website. 2) As an open source CMS, WordPress has a huge community and plug-in ecosystem, supporting in-depth customization and expansion.
How much does WordPress cost?Apr 05, 2025 am 12:13 AMWordPress itself is free, but it costs extra to use: 1. WordPress.com offers a package ranging from free to paid, with prices ranging from a few dollars per month to dozens of dollars; 2. WordPress.org requires purchasing a domain name (10-20 US dollars per year) and hosting services (5-50 US dollars per month); 3. Most plug-ins and themes are free, and the paid price ranges from tens to hundreds of dollars; by choosing the right hosting service, using plug-ins and themes reasonably, and regularly maintaining and optimizing, the cost of WordPress can be effectively controlled and optimized.
Is WordPress still free?Apr 04, 2025 am 12:06 AMThe core version of WordPress is free, but other fees may be incurred during use. 1. Domain names and hosting services require payment. 2. Advanced themes and plug-ins may be charged. 3. Professional services and advanced features may be charged.
Is WordPress easy for beginners?Apr 03, 2025 am 12:02 AMWordPress is easy for beginners to get started. 1. After logging into the background, the user interface is intuitive and the simple dashboard provides all the necessary function links. 2. Basic operations include creating and editing content. The WYSIWYG editor simplifies content creation. 3. Beginners can expand website functions through plug-ins and themes, and the learning curve exists but can be mastered through practice.
Why would anyone use WordPress?Apr 02, 2025 pm 02:57 PMPeople choose to use WordPress because of its power and flexibility. 1) WordPress is an open source CMS with strong ease of use and scalability, suitable for various website needs. 2) It has rich themes and plugins, a huge ecosystem and strong community support. 3) The working principle of WordPress is based on themes, plug-ins and core functions, and uses PHP and MySQL to process data, and supports performance optimization.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Atom editor mac version download
The most popular open source editor
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
