<\/div>#################################，刪除以上類似程式碼，改成：######
<\/pre>######好，現(xiàn)在打開你的測試部落格主頁，看看我們製作的主題是否還可以正常工作，答案是可以的，跟原來幾乎沒什麼兩樣，但還是一片混亂。 ###get_header()###就相當於將###header.php###中的程式碼拷貝到目前的php檔案。接下來，我們將仔細探討###header.php###中的動態(tài)內容。 ###header.php###將會被所有的範本頁面（首頁、分類頁、頁面、標籤頁等）所包含，所以###header.php###中程式碼應該是動態(tài)，適合不同頁面的，所以這裡面需要用到PHP程式碼，而不是單純的HTML。下面讓我們一起來修改###header.php###：#########1、更改#########我們都知道不同頁面的title都是不一樣，而且title的設定還會直接影響SEO的效果，所以這裡應該要謹慎設定。以下提供一種SEO優(yōu)化的title寫法，將###<title>Aurelius | Blog<\/title>###改成：###<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 \"搜索結果\"; echo \" - \"; bloginfo('name');\n\t} elseif (is_404() ) {\n\t\techo '頁面未找到!';\n\t} else {\n\t\twp_title('',true);\n\t} ?><\/title><\/pre>###以上新增的php程式碼運用了條件判斷，針對不同的頁面採用不同title，這裡解釋這幾個條件標籤。 ############is_home()###：目前頁面為首頁時傳回true#########is_category()###：目前頁面為分類頁時傳回true #########is_single()###：當前頁面為單一文章頁時傳回true#########is_page()###：目前頁面為單一頁面時傳回true# ########到目前為止，可能你對這些條件判斷標籤還沒有深入的認識，也搞不懂到底是用了這些標籤會對主題造成怎樣的影響的，隨著我們教程的進一步深入，你會慢慢理解的。如果你不喜歡上面title的寫法，可以自行上網(wǎng)搜尋相關程式碼：###WordPress SEO title############2、更改樣式表style.css路徑######## ##在此之前你看到的首頁都是混亂的，原因是還沒載入css樣式?，F(xiàn)在我們一起把樣式加上去。你可以在###header.php###中找到這段程式碼：######<pre class='brush:php;toolbar:false;'><link rel=\"stylesheet\" href=\".\/style.css\" type=\"text\/css\" media=\"screen\" \/><\/pre>#######聰明的你可能問：###wp-content\\themes\\Aurelius###目錄下不是已經(jīng)有一個###style.css### 嗎？那為什麼 ###header.php### 沒有載入css呢？結果你是可以看到的，頁面一篇混亂，可以確定確實沒有載入到css。因為這是WordPress的主題，是要被WordPress的主程式調用，經(jīng)過層層解析才能把你的部落格顯示出來，而不是簡簡單單的html靜態(tài)網(wǎng)頁檔。正確的改法：######<pre class='brush:php;toolbar:false;'><link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text\/css\" media=\"screen\" \/><\/pre>###<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，你可以在搜索引擎中輸入關鍵字：<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管理后臺 - 設置 - 常規(guī)那里更改。以后制作你自己的WordPress主題的時候，你可參照上面的說明對你的主題進行修改。<\/p><h3 id=\"title-4\"><strong>5、添加訂閱feed鏈接<\/strong><\/h3><p>相信每個已發(fā)布的WordPress博客主題都會提供feed訂閱，當然我們的主題也應該提供這樣的功能。在<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的動作，要讓這些插件能夠正常的工作，也讓你的主題有更好的兼容性，你應該添加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>關于添加網(wǎng)頁描述和關鍵字，可以查看我之前寫過的文章：<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)的內容，并不是你博客上的頁面。現(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><\/div>\n<p>下面兩篇文章介紹了WordPress選單的製作方法，也可以參考：<\/p>\n<ul style=\"list-style-type: disc;\">\n<li>\n<p><a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/501253.html\" target=\"_blank\">#WordPress製作主題導覽選單的方法(一)<\/a><\/p> <\/li>\n<li><p><a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/501328.html\" target=\"_blank\">WordPress製作主題導覽選單的方法(二)<\/a><\/p><\/li>\n<\/ul>\n<h3 id=\"title-8\"><strong>9、刷新快取<\/strong><\/h3> <p>在<code><body>
<h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1><\/code>前面，<code><\/head><\/code>後面加入PHP程式碼，用於提高程式運作效率：<code><?php flush(); ?><\/code><\/p>\n<h3 id=\"title-9\"><strong>總結<\/strong><\/h3>\n<p>好了，本次練習到此結束！現(xiàn)在總結一些今天講到的比較重要的知識點：<\/p>\n<ul>\n<li>\n<code><?php get_header(); ?><\/code> 從目前主題資料夾中包含header.php文件<\/li>\n<li>\n<code>is_home()，is_single()，is_category()<\/code>等幾個條件判斷標籤<\/li>\n<li>\n<code><?php bloginfo('stylesheet_url'); ? ><\/code> 輸出主題資料夾中style.css檔案的路徑<\/li>\n<li>\n<code><?php bloginfo('pingback_url'); ?><\/code> 輸出部落格pingback網(wǎng)址<\/li>\n<li>\n<code><?php bloginfo('template_url'); ?><\/code> 輸出部落格主題目錄URL<\/li>\n<li>\n<code><?php echo get_option('home'); ?> ;<\/code> ?輸出你的部落格首頁網(wǎng)址<\/li><li><code><?php bloginfo('name'); ?><\/code> 輸出你的部落格名稱<\/li>\n<li>\n<code># <?php bloginfo('description'); ?><\/code> 輸出部落格描述<\/li>\n<li>\n<code><?php wp_head(); ?><\/code> 用於包含WordPress程式輸出頭部資訊<\/li>\n<li>\n<code><?php wp_list_categories(); ?><\/code> 用於列出部落格分類頁<\/li>\n<li>\n<code><?php wp_list_pages(); ? ><\/code> 用來列出部落格頁面<\/li>\n<\/ul>\n<p>到目前為止你的部落格還只能看到主頁，不要灰心，凡事一步一腳印，以後教學會慢慢深入的。最後提供經(jīng)過本次修改後的<code>Aurelius<\/code>主題文件，你可以用文字編輯器打開看看，跟你修改的文件比較比較（尤其是<code>header.php<\/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=\"WordPress主題製作全過程（五）：製作header.php\" ><\/a><\/p>\n<p>推薦學習：《<a href=\"https:\/\/ipnx.cn\/cms\/wordpress\/\" target=\"_blank\">WordPress教學<\/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/zh-tw/" 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="社群" class="head_nava head_nava-template1">社群</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/zh-tw/article.html" title="文章" class="languagechoosea on">文章</a>
<a href="http://ipnx.cn/zh-tw/faq/zt" title="合集" class="languagechoosea">合集</a>
<a href="http://ipnx.cn/zh-tw/wenda.html" title="問答" class="languagechoosea">問答</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="學習" class="head_nava head_nava-template1_1">學習</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/zh-tw/course.html" title="課程" class="languagechoosea on">課程</a>
<a href="http://ipnx.cn/zh-tw/dic/" title="程式設計字典" class="languagechoosea">程式設計字典</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/zh-tw/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
<a href="http://ipnx.cn/zh-tw/toolset/website-source-code" title="網(wǎng)站源碼" class="languagechoosea">網(wǎng)站源碼</a>
<a href="http://ipnx.cn/zh-tw/toolset/php-libraries" title="PHP 函式庫" class="languagechoosea">PHP 函式庫</a>
<a href="http://ipnx.cn/zh-tw/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
<a href="http://ipnx.cn/zh-tw/toolset/website-materials" title="網(wǎng)站素材" class="languagechoosea on">網(wǎng)站素材</a>
<a href="http://ipnx.cn/zh-tw/toolset/extension-plug-ins" title="擴充插件" class="languagechoosea on">擴充插件</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/zh-tw/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="休閒" class="head_nava head_nava-template1_3">休閒</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/zh-tw/game" title="遊戲下載" class="languagechoosea on">遊戲下載</a>
<a href="http://ipnx.cn/zh-tw/mobile-game-tutorial/" title="遊戲教程" class="languagechoosea">遊戲教程</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('zh-tw')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="搜尋" onclick="searchs('zh-tw')"><img src="/static/imghw/find.png" alt="搜尋"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">繁體中文<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:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:;" 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">目錄</div>
<div id="wjcelcm34c" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
<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-刷新快取-strong" title="<strong>9、刷新快取</strong>" ><strong>9、刷新快取</strong></a>
</div>
<div id="wjcelcm34c" class="Article_Details_main1L2s ">
<a href="#strong-總結-strong" title="<strong>總結</strong>" ><strong>總結</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/zh-tw/" title="首頁"
class="phpgenera_Details_mainL1a">首頁</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/zh-tw/cms/"
class="phpgenera_Details_mainL1a">CMS教程</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/zh-tw/cms/wordpress/"
class="phpgenera_Details_mainL1a">＆＃＆按</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>WordPress主題製作全過程（五）：製作header.php</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">WordPress主題製作全過程（五）：製作header.php</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/zh-tw/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/zh-tw/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>前面為大家介紹了《<a href="http://ipnx.cn/cms/wordpress/501086.html" target="_blank">WordPress主題製作全過程（四）：小試牛刀</a>》，本文繼續(xù)為大家?guī)怼禬ordPress主題製作全過程（五）：製作header.php》 ，下面一起來看吧~</p>
<p>你可以嘗試用文字編輯器開啟從<a href="http://ipnx.cn/cms/wordpress/501085.html" target="_blank" textvalue="WordPress主題制作全過程（三）：HTML靜態(tài)模板制作">WordPress主題製作全過程（三）：HTML靜態(tài)模板製作</a>下載到的<code>.html </code> 文件，不知道你有沒有發(fā)現(xiàn)他們頭部的程式碼都非常的相似呢？其實我們可以提取這部分相似的程式碼，放到一個單獨的檔案<code>header.php</code>中，各個頁面想用這部分程式碼的時候再用php的<code>include()</code>或者WordPress的<code>get_header()</code>包含進去，省的每個頁裡面都要寫這部分程式碼，更改起來也可以達到一改全改的目的。 </p>
<p><strong>再次提醒：</strong>如果你不打算動手寫程式碼，這個系列教學就別看了，對你無益！ </p>
<p>接著我們上次創(chuàng)建的主題目錄<code>wp-content\themes\Aurelius</code>，在該目錄下新建一個php檔案<code>header.php</code>#，我們提取出<code>index.php</code>中的頭部程式碼複製貼上到<code>header.php</code>中，下面的程式碼就是目前<code>header.php</code>中的所有程式碼了(當然不同主題的頭部程式碼都是不一樣，在你實際的專案中可以自定決定)：</p>
<div rel="HTML" class="code"><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><p>再用文字編輯器開啟<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></p><div rel="PHP" class="code"></div><p><code></code><code></code><code></code><code></code><code></code><code></code></p><h3 id="title-0"><strong></strong></h3><p><code></code></p><p></p><ul><li><code></code></li><li><code></code></li><li><code></code></li><li><code></code></li></ul><p><code></code></p><h3 id="title-1"><strong></strong></h3><p><code></code></p><div rel="HTML" class="code"></div><p><code></code><code></code><code></code></p><div rel="PHP" class="code"></div>#################################，刪除以上類似程式碼，改成：######<pre class='brush:php;toolbar:false;'><?php get_header(); ?></pre>######好，現(xiàn)在打開你的測試部落格主頁，看看我們製作的主題是否還可以正常工作，答案是可以的，跟原來幾乎沒什麼兩樣，但還是一片混亂。 ###get_header()###就相當於將###header.php###中的程式碼拷貝到目前的php檔案。接下來，我們將仔細探討###header.php###中的動態(tài)內容。 ###header.php###將會被所有的範本頁面（首頁、分類頁、頁面、標籤頁等）所包含，所以###header.php###中程式碼應該是動態(tài)，適合不同頁面的，所以這裡面需要用到PHP程式碼，而不是單純的HTML。下面讓我們一起來修改###header.php###：#########1、更改<title>#########我們都知道不同頁面的title都是不一樣，而且title的設定還會直接影響SEO的效果，所以這裡應該要謹慎設定。以下提供一種SEO優(yōu)化的title寫法，將###<title>Aurelius | Blog###改成：###<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>###以上新增的php程式碼運用了條件判斷，針對不同的頁面採用不同title，這裡解釋這幾個條件標籤。 ############is_home()###：目前頁面為首頁時傳回true#########is_category()###：目前頁面為分類頁時傳回true #########is_single()###：當前頁面為單一文章頁時傳回true#########is_page()###：目前頁面為單一頁面時傳回true# ########到目前為止，可能你對這些條件判斷標籤還沒有深入的認識，也搞不懂到底是用了這些標籤會對主題造成怎樣的影響的，隨著我們教程的進一步深入，你會慢慢理解的。如果你不喜歡上面title的寫法，可以自行上網(wǎng)搜尋相關程式碼：###WordPress SEO title############2、更改樣式表style.css路徑######## ##在此之前你看到的首頁都是混亂的，原因是還沒載入css樣式?，F(xiàn)在我們一起把樣式加上去。你可以在###header.php###中找到這段程式碼：######<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
#######聰明的你可能問：###wp-content\themes\Aurelius###目錄下不是已經(jīng)有一個###style.css### 嗎？那為什麼 ###header.php### 沒有載入css呢？結果你是可以看到的，頁面一篇混亂，可以確定確實沒有載入到css。因為這是WordPress的主題，是要被WordPress的主程式調用，經(jīng)過層層解析才能把你的部落格顯示出來，而不是簡簡單單的html靜態(tài)網(wǎng)頁檔。正確的改法：######<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鏈接。現(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，你可以在搜索引擎中輸入關鍵字：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管理后臺 - 設置 - 常規(guī)那里更改。以后制作你自己的WordPress主題的時候，你可參照上面的說明對你的主題進行修改。
5、添加訂閱feed鏈接
相信每個已發(fā)布的WordPress博客主題都會提供feed訂閱，當然我們的主題也應該提供這樣的功能。在</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的動作，要讓這些插件能夠正常的工作，也讓你的主題有更好的兼容性，你應該添加wp_head()函數(shù)。打開header.php，在</head>前面添加以下代碼即可：
<?php wp_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
關于添加網(wǎng)頁描述和關鍵字，可以查看我之前寫過的文章：WordPress使用經(jīng)驗（一）獨立的Description 和 Keywords
8、顯示菜單欄
目前菜單欄有Home、Blog和Contact Us幾個菜單，不過這些都是靜態(tà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>下面兩篇文章介紹了WordPress選單的製作方法，也可以參考：
9、刷新快取
在<body>前面，</head>後面加入PHP程式碼，用於提高程式運作效率：<?php flush(); ?>
總結
好了，本次練習到此結束！現(xiàn)在總結一些今天講到的比較重要的知識點：
-
<?php get_header(); ?> 從目前主題資料夾中包含header.php文件
-
is_home()，is_single()，is_category()等幾個條件判斷標籤
-
<?php bloginfo('stylesheet_url'); ? > 輸出主題資料夾中style.css檔案的路徑
-
<?php bloginfo('pingback_url'); ?> 輸出部落格pingback網(wǎng)址
-
<?php bloginfo('template_url'); ?> 輸出部落格主題目錄URL
-
<?php echo get_option('home'); ?> ; ?輸出你的部落格首頁網(wǎng)址 <?php bloginfo('name'); ?> 輸出你的部落格名稱-
# <?php bloginfo('description'); ?> 輸出部落格描述
-
<?php wp_head(); ?> 用於包含WordPress程式輸出頭部資訊
-
<?php wp_list_categories(); ?> 用於列出部落格分類頁
-
<?php wp_list_pages(); ? > 用來列出部落格頁面
到目前為止你的部落格還只能看到主頁，不要灰心，凡事一步一腳印，以後教學會慢慢深入的。最後提供經(jīng)過本次修改後的Aurelius主題文件，你可以用文字編輯器打開看看，跟你修改的文件比較比較（尤其是header.php），看看你改得怎麼樣？
推薦學習：《WordPress教學》
以上是WordPress主題製作全過程（五）：製作header.php的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！
如何用PHP搭建社交分享功能 PHP分享接口集成實戰(zhàn)
Jul 25, 2025 pm 08:51 PM
如何用PHP結合AI實現(xiàn)文本糾錯 PHP語法檢測與優(yōu)化
Jul 25, 2025 pm 08:57 PM
PHP調用AI智能語音助手 PHP語音交互系統(tǒng)搭建
Jul 25, 2025 pm 08:45 PM
PHP打造博客評論系統(tǒng)變現(xiàn) PHP評論審核與防刷策略
Jul 25, 2025 pm 08:27 PM
PHP實現(xiàn)商品庫存管理變現(xiàn) PHP庫存同步與報警機制
Jul 25, 2025 pm 08:30 PM
如何用PHP結合AI做圖像生成 PHP自動生成藝術作品
Jul 25, 2025 pm 07:21 PM
超越燈堆：PHP在現(xiàn)代企業(yè)體系結構中的作用
Jul 27, 2025 am 04:31 AM
PHP集成AI語音識別與轉寫 PHP會議記錄自動生成方案
Jul 25, 2025 pm 07:06 PM
