<\/div>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 <\/code>header.php to the current php file. Next, we'll take a closer look at the dynamic content in <\/code>header.php. <\/code>header.php will be included in all template pages (home page, category page, page, tag page, etc.), so the code in <\/code>header.php should be dynamic and suitable for different pages , so PHP code needs to be used here, not simple HTML. Let's modify <\/code>header.php:<\/code><\/p>1. Change <strong><\/strong><\/h3>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 <p><title>Aurelius | Blog<\/title><code> to: <\/code><pre class='brush:php;toolbar:false;'><title><?php if ( is_home() ) {\n\t\tbloginfo('name'); echo \" - \"; bloginfo('description');\n\t} elseif ( is_category() ) {\n\t\tsingle_cat_title(); echo \" - \"; bloginfo('name');\n\t} elseif (is_single() || is_page() ) {\n\t\tsingle_post_title();\n\t} elseif (is_search() ) {\n\t\techo \"搜索結(jié)果\"; echo \" - \"; bloginfo('name');\n\t} elseif (is_404() ) {\n\t\techo '頁面未找到!';\n\t} else {\n\t\twp_title('',true);\n\t} ?><\/title><\/pre><\/p> The PHP code added above uses conditional judgment to target different The pages use different titles. Here are some conditional tags explained. <p><\/p><ul><li>is_home()<code>: Returns true when the current page is the homepage <\/code><\/li><li>is_category()<code>: Returns true when the current page is a category page <\/code><\/li><li>is_single()<code>: Returns true when the current page is a single article page<\/code><\/li><li>is_page()<code>: Returns true when the current page is a single page<\/code><\/li><\/ul>So far, maybe you don’t have a deep understanding of these conditional judgment tags, and you don’t understand how using these tags will affect the theme. As our tutorial progresses, Go deeper and you will slowly understand. If you don’t like the way the title is written above, you can search for relevant codes online: <p>WordPress SEO title<code><\/code><\/p><h3 id=\"title-1\">2. Change the style.css path of the style sheet<strong><\/strong><\/h3>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 in <p>header.php<code>: <\/code><\/p><pre class='brush:php;toolbar:false;'><link rel=\"stylesheet\" href=\".\/style.css\" type=\"text\/css\" media=\"screen\" \/><\/pre><div rel=\"HTML\" class=\"code\"><\/div> If you are smart, you may ask: <p>wp-content\\themes\\Aurelius<code> Isn’t there already a <\/code>style.css<code> in the directory? So why is <\/code>header.php<code> 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: <\/code><\/p><pre class='brush:php;toolbar:false;'><link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text\/css\" media=\"screen\" \/><\/pre><div rel=\"PHP\" class=\"code\"><p><code>bloginfo('stylesheet_url')<\/code>輸出的是你的主題css文件絕對網(wǎng)址，如http:\/\/localhost\/wp\/wp-content\/themes\/Aurelius\/style.css，WordPress程序會自動識別你的WordPress安裝地址，當前啟用的主題，自動輸出這個style.css鏈接。現(xiàn)在你可以試著更改一下，然后刷新一下你的博客首頁，查看網(wǎng)頁源代碼，style.css的鏈接是不是變成你的了？頁面是否可以正常顯示了呢？<\/p><p>如果你的css文件不是style.css，且不是在主題根目錄下，那怎么辦呢？我們可以用<code><?php bloginfo('template_url'); ?><\/code>來獲取主題根目錄的URL，如你的主題css文件是<code>abc.css<\/code>，那么我們可以這樣寫：<code><?php bloginfo('template_url'); ?>\/abc.css<\/code>，如果是在子目錄css下那就這樣：<code><?php bloginfo('template_url'); ?>\/css\/abc.css<\/code>。同樣加載js文件也是這樣。<\/p><p>不過，還有幾張圖片的路徑不對，還不能顯示出來，現(xiàn)在我們一起用文本編輯器打開<code>index.php<\/code>、<code>archive.php<\/code>、<code>contact.php<\/code>、<code>full_width.php<\/code>、<code>page.php<\/code>和<code>single.php<\/code>，給這些圖片加上正確的URL，搜索代碼，將所有的：<code>src=\"images\/<\/code>，批量替換成<code>src=\"<?php bloginfo('template_url'); ?>\/images\/<\/code>?，F(xiàn)在再刷新你的主頁，看文章的縮略圖是否可以正常顯示。<code><?php bloginfo('template_url'); ?><\/code>用于輸出主題目錄的URL。<\/p><h3 id=\"title-2\"><strong>3、添加pingback<\/strong><\/h3><p>至于什么是pingback，你可以在搜索引擎中輸入關(guān)鍵字：<code>WordPress pingback<\/code>，就可以得到你想要的答案了。如果你需要這個功能，可以在<code><head><\/code>里面添加以下代碼：<\/p><div rel=\"PHP\" class=\"code\"><pre class='brush:php;toolbar:false;'><link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" \/><\/pre><\/div><h3 id=\"title-3\"><strong>4、更改博客名稱和描述<\/strong><\/h3><p>在<code>header.php<\/code>，下面兩行代碼用于顯示博客名稱和描述：<\/p><div rel=\"HTML\" class=\"code\"><pre class='brush:php;toolbar:false;'><h1 id=\"logo\" class=\"grid_4\">Aurelius<\/h1>\n<h2 class=\"grid_12 caption clearfix\">Our <span>blog<\/span>, keeping you up-to-date on our latest news.<\/h2><\/pre><\/div><p>上面是靜態(tài)代碼，現(xiàn)在做如下修改：<\/p><div rel=\"PHP\" class=\"code\"><pre class='brush:php;toolbar:false;'><h1 id=\"logo\" class=\"grid_4\"><a href=\"<?php echo get_option('home'); ?>\/\"><?php bloginfo('name'); ?><\/a><\/h1>\n<h2 class=\"grid_12 caption clearfix\"><?php bloginfo('description'); ?><\/h2><\/pre><\/div><p>現(xiàn)在你的博客首頁看到的就是你博客名稱和描述了，并且logo也是一個鏈接指向你的博客首頁。我們這里說說這些php代碼的作用。<\/p><ul><li><code><?php echo get_option('home'); ?><\/code> 輸出你的博客首頁網(wǎng)址<\/li><li><code><?php bloginfo('name'); ?><\/code> 輸出你的博客名稱<\/li><li><code><?php bloginfo('description'); ?><\/code> 輸出博客描述<\/li><\/ul><p>博客名稱和描述可以在WordPress管理后臺 - 設(shè)置 - 常規(guī)那里更改。以后制作你自己的WordPress主題的時候，你可參照上面的說明對你的主題進行修改。<\/p><h3 id=\"title-4\"><strong>5、添加訂閱feed鏈接<\/strong><\/h3><p>相信每個已發(fā)布的WordPress博客主題都會提供feed訂閱，當然我們的主題也應(yīng)該提供這樣的功能。在<code><\/head><\/code>之前添加以下代碼：<\/p><div rel=\"HTML\" class=\"code\"><pre class='brush:php;toolbar:false;'><link rel=\"alternate\" type=\"application\/rss+xml\" title=\"RSS 2.0 - 所有文章\" href=\"<?php echo get_bloginfo('rss2_url'); ?>\" \/>\n<link rel=\"alternate\" type=\"application\/rss+xml\" title=\"RSS 2.0 - 所有評論\" href=\"<?php bloginfo('comments_rss2_url'); ?>\" \/><\/pre><\/div><h3 id=\"title-5\"><strong>6、添加wp_head<\/strong><\/h3><p>有些插件需要在網(wǎng)頁頭部執(zhí)行一些類如添加一些js或css的動作，要讓這些插件能夠正常的工作，也讓你的主題有更好的兼容性，你應(yīng)該添加wp_head()函數(shù)。打開<code>header.php<\/code>，在<code><\/head><\/code>前面添加以下代碼即可：<\/p><div rel=\"PHP\" class=\"code\"><pre class='brush:php;toolbar:false;'><?php wp_head(); ?><\/pre><\/div><p>現(xiàn)在打開你的博客主頁，查看源代碼，<code><\/head><\/code>前面是不是多了以下類似代碼（這些都是<code>wp_head()<\/code>的功勞）：<\/p><div rel=\"HTML\" class=\"code\"><pre class='brush:php;toolbar:false;'><link rel=\"EditURI\" type=\"application\/rsd+xml\" title=\"RSD\" href=\"http:\/\/ludou.co.tv\/blog\/xmlrpc.php?rsd\" \/>\n<link rel=\"wlwmanifest\" type=\"application\/wlwmanifest+xml\" href=\"http:\/\/ludou.co.tv\/blog\/wp-includes\/wlwmanifest.xml\" \/> \n<link rel='index' href='http:\/\/ludou.co.tv' \/>\n<meta name=\"generator\" content=\"WordPress 2.9.2\" \/><\/pre><\/div><h3 id=\"title-6\"><strong>7、添加Description 和 Keywords<\/strong><\/h3><p>關(guān)于添加網(wǎng)頁描述和關(guān)鍵字，可以查看我之前寫過的文章：<a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/501101.html\" target=\"_blank\" title=\"WordPress添加Description 和 Keywords\" textvalue=\"WordPress使用經(jīng)驗（一）獨立的Description 和 Keywords\">WordPress使用經(jīng)驗（一）獨立的Description 和 Keywords<\/a><\/p><h3 id=\"title-7\"><strong>8、顯示菜單欄<\/strong><\/h3><p>目前菜單欄有Home、Blog和Contact Us幾個菜單，不過這些都是靜態(tài)的內(nèi)容，并不是你博客上的頁面。現(xiàn)在我們將菜單欄換成你的菜單，這里只在菜單欄中列出頁面page，當然你也可以再放置分類，根據(jù)你的喜好來吧，將header.php中：<\/p><div rel=\"HTML\" class=\"code\"><pre class='brush:php;toolbar:false;'><ul id=\"navigation\" class=\"grid_8\">\n\t<li><a href=\"contact.html\"><span class=\"meta\">Get in touch<\/span><br \/>\n\t\tContact Us<\/a><\/li>\n\t<li><a href=\"blog.html\" class=\"current\"><span class=\"meta\">Latest news<\/span><br \/>\n\t\tBlog<\/a><\/li>\n\t<li><a href=\"index.html\"><span class=\"meta\">Homepage<\/span><br \/>\n\t\tHome<\/a><\/li>\n<\/ul><\/pre><\/div><p>改成：<\/p><div rel=\"PHP\" class=\"code\"><pre class='brush:php;toolbar:false;'><ul id=\"navigation\" class=\"grid_8\">\n\t<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>\n\t<li <?php if (is_home()) { echo 'class=\"current\"';} ?>><a title=\"<?php bloginfo('name'); ?>\" href=\"<?php echo get_option('home'); ?>\/\">主頁<\/a><\/li>\n<\/ul><\/pre><p>The following two articles introduce how to make WordPress menus, you can also refer to: <\/p>\n<ul style=\"list-style-type: disc;\">\n<li>\n<p><a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/501253.html\" target=\"_blank\">How to make WordPress theme navigation menu (1)<\/a><\/p> <\/li>\n<li><p><a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/501328.html\" target=\"_blank\">How to create a theme navigation menu in WordPress (2)<\/a><\/p><\/li>\n<\/ul>\n<h3 id=\"title-8\"><strong>9. Refresh the cache<\/strong><\/h3> <p>Add PHP code in front of <code><body>
<h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1><\/code> and after <code><\/head><\/code> to improve program running efficiency: <code><?php flush(); ?><\/code><\/p>\n<h3 id=\"title-9\"><strong>Summary<\/strong><\/h3>\n<p>Okay, this exercise is over! Now summarize some of the more important knowledge points mentioned today: <\/p>\n<ul>\n<li>##<?php get_header(); ?><code> Include the header.php file from the current theme folder <\/code>\n<\/li>\n<li>is_home(), is_single(), is_category()<code> and several other conditional judgment tags<\/code>\n<\/li>\n<li><?php bloginfo('stylesheet_url'); ? ><code> Output the path to the style.css file in the theme folder<\/code>\n<\/li>\n<li><?php bloginfo('pingback_url'); ?><code> Output the blog pingback URL<\/code>\n<\/li>\n<li><?php bloginfo('template_url'); ?><code> Output the blog theme directory URL<\/code>\n<\/li>\n<li><?php echo get_option('home'); ?> ;<code> Output your blog homepage URL<\/code><\/li><li><?php bloginfo('name'); ?><code> Output your blog name<\/code>\n<\/li>\n<li> <?php bloginfo('description'); ?><code> Output blog description<\/code>\n<\/li>\n<li><?php wp_head(); ?><code> Used to include the WordPress program output header Department information<\/code>\n<\/li>\n<li><?php wp_list_categories(); ?><code> Used to list blog category pages<\/code>\n<\/li>\n<li><?php wp_list_pages(); ? ><code> Used to list blog pages<\/code>\n<\/li>\n<\/ul>So far, you can only see the homepage of your blog. Don’t be discouraged. Take everything one step at a time. The tutorials will be gradually in-depth in the future. Finally, the <p>Aurelius<code> theme file after this modification is provided. You can open it with a text editor and compare it with the file you modified (especially <\/code>header.php<code>). See How are you doing? <\/code><\/p>\n<p style=\"text-align: center;\"><a rel=\"nofollow\" href=\"https:\/\/xiazai.ludou.org\/aurelius_header.zip\" target=\"_blank\"><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/024\/63f426bd9d92a141.jpg\" alt=\"The whole process of WordPress theme creation (5): making header.php\" ><\/a><\/p> Recommended study: \"<p>WordPress Tutorial<a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/\" target=\"_blank\">\"<\/a><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://ipnx.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://ipnx.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://ipnx.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://ipnx.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://ipnx.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://ipnx.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://ipnx.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://ipnx.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://ipnx.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1L">
<div id="wjcelcm34c" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="wjcelcm34c" class="Article_Details_main1L1">Table of Contents</div>
<div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Change-lt-title-gt-strong-strong" title="1. Change <title><strong></strong>" >1. Change <title><strong></strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#Change-the-style-css-path-of-the-style-sheet-strong-strong" title="2. Change the style.css path of the style sheet<strong></strong>" >2. Change the style.css path of the style sheet<strong></strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-添加pingback-strong" title="<strong>3、添加pingback</strong>" ><strong>3、添加pingback</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-更改博客名稱和描述-strong" title="<strong>4、更改博客名稱和描述</strong>" ><strong>4、更改博客名稱和描述</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-添加訂閱feed鏈接-strong" title="<strong>5、添加訂閱feed鏈接</strong>" ><strong>5、添加訂閱feed鏈接</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-添加wp-head-strong" title="<strong>6、添加wp_head</strong>" ><strong>6、添加wp_head</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-添加Description-和-Keywords-strong" title="<strong>7、添加Description 和 Keywords</strong>" ><strong>7、添加Description 和 Keywords</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-顯示菜單欄-strong" title="<strong>8、顯示菜單欄</strong>" ><strong>8、顯示菜單欄</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-Refresh-the-cache-strong" title="<strong>9. Refresh the cache</strong>" ><strong>9. Refresh the cache</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-Summary-strong" title="<strong>Summary</strong>" ><strong>Summary</strong></a>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/cms/"
class="phpgenera_Details_mainL1a">CMS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/cms/wordpress/"
class="phpgenera_Details_mainL1a">WordPress</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>The whole process of WordPress theme creation (5): making header.php</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">The whole process of WordPress theme creation (5): making header.php</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/member/287557.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/287/557/5bef70171e9f3249.jpg" src="/static/imghw/default1.png" alt="青燈夜游">
</a>
<div id="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/member/287557.html" class="author_name">青燈夜游</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Feb 21, 2023 am 10:21 AM</span>
<div id="wjcelcm34c" class="Articlelist_txts_infos">
<span id="wjcelcm34c" class="Articlelist_txts_infoss on">php</span>
<span id="wjcelcm34c" class="Articlelist_txts_infoss ">wordpress</span>
</div>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> I introduced you to "<a href="http://ipnx.cn/cms/wordpress/501086.html" target="_blank">The whole process of WordPress theme production (4): A small test </a>". 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~</p>
<p>You can try to use a text editor to open the <a href="http://ipnx.cn/cms/wordpress/501085.html" target="_blank" textvalue="WordPress主題制作全過程（三）：HTML靜態(tài)模板制作">.html downloaded from </a>WordPress theme production process (3): HTML static template production<code> </code> 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 <code>header.php</code>. When each page wants to use this part of the code, use php's <code>include()</code> or WordPress's <code>get_header()</code> 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. </p>
<p><strong>Remind me again: </strong>If you don’t plan to write code, don’t read this series of tutorials, it will not be helpful to you! </p>
<p>Then the theme directory we created last time<code>wp-content\themes\Aurelius</code>, create a new php file <code>header.php</code> in this directory, we extract# Copy and paste the header code in ##index.php<code> into </code>header.php<code>. The following code is all the code currently in </code>header.php<code> (different themes of course The header codes are all different and can be customized in your actual project): </code></p><pre class='brush:php;toolbar:false;'><!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="logo" class="grid_4">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 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
<div class="hr grid_12 clearfix"> </div></pre><div rel="HTML" class="code"></div> Then use a text editor to open <p>index.php<code>, </code>archive.php<code>, </code>contact.php<code>, </code>full_width.php<code>, </code>page.php<code> and </code>single.php<code>, Delete the above similar code and change it to: </code></p><pre class='brush:php;toolbar:false;'><?php get_header(); ?></pre><div rel="PHP" class="code"></div>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. <p>get_header()<code> is equivalent to copying the code in </code>header.php<code> to the current php file. Next, we'll take a closer look at the dynamic content in </code>header.php<code>. </code>header.php<code> will be included in all template pages (home page, category page, page, tag page, etc.), so the code in </code>header.php<code> should be dynamic and suitable for different pages , so PHP code needs to be used here, not simple HTML. Let's modify </code>header.php<code>:</code></p><h3 id="Change-lt-title-gt-strong-strong">1. Change <title><strong></strong></h3>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 <p><title>Aurelius | Blog 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 "搜索結(jié)果"; 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
So far, maybe you don’t have a deep understanding of these conditional judgment tags, and you don’t understand how using these tags will affect the theme. As our tutorial progresses, Go deeper and you will slowly understand. If you don’t like the way the title is written above, you can search for relevant codes online:
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 in
header.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文件絕對網(wǎng)址，如http://localhost/wp/wp-content/themes/Aurelius/style.css，WordPress程序會自動識別你的WordPress安裝地址，當前啟用的主題，自動輸出這個style.css鏈接?，F(xiàn)在你可以試著更改一下，然后刷新一下你的博客首頁，查看網(wǎng)頁源代碼，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文件也是這樣。
不過，還有幾張圖片的路徑不對，還不能顯示出來，現(xiàn)在我們一起用文本編輯器打開index.php、archive.php、contact.php、full_width.php、page.php和single.php，給這些圖片加上正確的URL，搜索代碼，將所有的：src="images/，批量替換成src="<?php bloginfo('template_url'); ?>/images/?，F(xiàn)在再刷新你的主頁，看文章的縮略圖是否可以正常顯示。<?php bloginfo('template_url'); ?>用于輸出主題目錄的URL。
3、添加pingback
至于什么是pingback，你可以在搜索引擎中輸入關(guān)鍵字：WordPress pingback，就可以得到你想要的答案了。如果你需要這個功能，可以在<head>里面添加以下代碼：
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
4、更改博客名稱和描述
在header.php，下面兩行代碼用于顯示博客名稱和描述：
<h1 id="logo" class="grid_4">Aurelius</h1>
<h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
上面是靜態(tài)代碼，現(xiàn)在做如下修改：
<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>
現(xiàn)在你的博客首頁看到的就是你博客名稱和描述了，并且logo也是一個鏈接指向你的博客首頁。我們這里說說這些php代碼的作用。
<?php echo get_option('home'); ?> 輸出你的博客首頁網(wǎng)址<?php bloginfo('name'); ?> 輸出你的博客名稱<?php bloginfo('description'); ?> 輸出博客描述
博客名稱和描述可以在WordPress管理后臺 - 設(shè)置 - 常規(guī)那里更改。以后制作你自己的WordPress主題的時候，你可參照上面的說明對你的主題進行修改。
5、添加訂閱feed鏈接
相信每個已發(fā)布的WordPress博客主題都會提供feed訂閱，當然我們的主題也應(yīng)該提供這樣的功能。在</head>之前添加以下代碼：
<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
有些插件需要在網(wǎng)頁頭部執(zhí)行一些類如添加一些js或css的動作，要讓這些插件能夠正常的工作，也讓你的主題有更好的兼容性，你應(yīng)該添加wp_head()函數(shù)。打開header.php，在</head>前面添加以下代碼即可：
現(xiàn)在打開你的博客主頁，查看源代碼，</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
關(guān)于添加網(wǎng)頁描述和關(guān)鍵字，可以查看我之前寫過的文章：WordPress使用經(jīng)驗（一）獨立的Description 和 Keywords
8、顯示菜單欄
目前菜單欄有Home、Blog和Contact Us幾個菜單，不過這些都是靜態(tài)的內(nèi)容，并不是你博客上的頁面?，F(xiàn)在我們將菜單欄換成你的菜單，這里只在菜單欄中列出頁面page，當然你也可以再放置分類，根據(jù)你的喜好來吧，將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 <body> and after </head> 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
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
So far, you can only see the homepage of your blog. Don’t be discouraged. Take everything one step at a time. The tutorials will be gradually in-depth in the future. Finally, the
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?
Recommended study: "
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!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to use PHP to build social sharing functions PHP sharing interface integration practice
Jul 25, 2025 pm 08:51 PM
How to use PHP combined with AI to achieve text error correction PHP syntax detection and optimization
Jul 25, 2025 pm 08:57 PM
PHP creates a blog comment system to monetize PHP comment review and anti-brush strategy
Jul 25, 2025 pm 08:27 PM
PHP calls AI intelligent voice assistant PHP voice interaction system construction
Jul 25, 2025 pm 08:45 PM
How to use PHP to combine AI to generate image. PHP automatically generates art works
Jul 25, 2025 pm 07:21 PM
PHP realizes commodity inventory management and monetization PHP inventory synchronization and alarm mechanism
Jul 25, 2025 pm 08:30 PM
Beyond the LAMP Stack: PHP's Role in Modern Enterprise Architecture
Jul 27, 2025 am 04:31 AM
PHP integrated AI speech recognition and translator PHP meeting record automatic generation solution
Jul 25, 2025 pm 07:06 PM
