WordpressCMS主題開發02-製作頂部header.php和footer.php

huangbangqing12發表於2018-07-08

HeaderPHP

這一節課實現cms主題頂部和底部檔案的製作。

首先我們來看這個 cms 主題，它的頂部是哪一塊？

通過對比三個靜態頁面，公共的部分就是頂部，對吧。

header共用位置 - WordpressCMS主題開發02-製作頂部header.php和footer.php

製作header.php

所以，開啟主題資料夾，先新建一個header.php，開啟index.php，剪下頂部的公用程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head xmlns="">
    <title>打字賺錢★網上如何賺錢★網路兼職賺錢★如何掙錢_網上兼職是真的嗎</title>
    <meta content="-IdFVr_0K9w67HYlOx79ZgrF_O4kE_Zrh8aOMN9AE3U" name="google-site-verification" />
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta content="打字賺錢,網上如何賺錢,網路兼職賺錢,怎樣賺錢,如何掙錢,網路兼職,網賺" name="keywords" />
    <meta content="★網賺★揭祕網上如何賺錢的方法，提供網路兼職賺錢的專案，告訴你如何掙錢，怎樣賺錢，最好的網上兼職、網上賺錢和網路兼職賺錢方法!!!" name="description" /><script src="front_res/jquery.js" type="text/javascript"></script>
    <link href="<?php bloginfo('template_directory'); ?>/front.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo('template_directory'); ?>/whole.css" type="text/css" rel="stylesheet" />
    <link href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" rel="stylesheet" /><script type="text/javascript">
function g(o){
    return document.getElementById(o);
}
function HoverLi(m,n,counter){
    for(var i=1;i<=counter;i++){
        g('tb_'+m+i).className='normaltab';
        g('tbc_'+m+i).className='undis';
    }
    g('tbc_'+m+n).className='dis';
    g('tb_'+m+n).className='curr';
}
</script>  <script language=javascript>
    var VerifyCodeTimes=1;
    function refreshcode() {
    document.getElementById("imgshowcode").src = "http://shop.liweihui.com/image.jsp?" + +(VerifyCodeTimes++);}
    </SCRIPT>
  </head>
  <body xmlns="">
    <!--頁頭Begin--><!--頁頭Begin-->
<div class="top cbody">
<div class="toplogo"><a href="#"><img height="50" alt="網上如何賺錢" width="200" src="<?php bloginfo('template_directory'); ?>/img/logo2.gif" /></a>&nbsp;&nbsp;</div>
<div class="toplogo"></div>
<p></p>
</div>
<!--頁頭End--><!--導航欄Begin-->
<div class="topmenu cbody1">
<ul>
  <li class="thisclass"><a href="index.html">首 頁</a> </li>
  <li class="thisclass"><a href="99seo/index.htm">久久專題</a></li>
  <li class="thisclass"><a href="seo/index.htm">網店賺錢</a></li>
  <li class="thisclass"><a href="wz/index.htm">網賺雜談</a></li>
  <li class="thisclass"><a href="tech/index.htm">網賺方法</a></li>
  <li class="thisclass"><a href="xiangmu/index.htm">免費網賺專案</a></li>
  <li class="thisclass"><a href="zy/index.htm">免費資源推薦</a></li>
  <li class="thisclass"><a target="_blank" href="down/index.htm">下載中心</a></li>
  <li class="thisclass"><a target="_blank" href="jeecms/topic.html"><span style="font-size: 10.5pt; font-family: 宋體; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">◆</span>免費網賺視訊<span style="font-size: 10.5pt; font-family: 宋體; mso-bidi-font-size: 12.0pt; mso-font-kerning: 1.0pt; mso-bidi-font-family: 'Times New Roman'; mso-ascii-font-family: 'Times New Roman'; mso-hansi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA">◆</span></a>&nbsp;</li>
  <li class="thisclass"><a target="_blank" href="jeecms/Guestbook.html">留言板</a></li>
</ul>
</div>
<!--導航欄End--> <!--頁頭End--><!--搜尋欄Begin--><script type="text/javascript">
function searchFormSubmit() {
    if(document.getElementById('searchKey').value==''){
        alert('請輸入搜尋內容');
        return false;
    }
    document.getElementById('searchForm').submit(); 
}
</script>
<form target="_blank" action="http://www.xuhss.com/jeecms/ArtiSearch.do" id="searchForm">
  <div class="topsearch box">
  <div class="title"></div>
  <div id="page_search_left"><a href="xm/241.htm" target="_blank">任務網賺</a> | <a href="xm/266.htm" target="_blank">遊戲網賺</a> | <a href="xm/271.htm" target="_blank">調查網賺</a> |　<a href="xm/283.htm" target="_blank">其他網賺</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 10.5pt; font-family: 宋體;"><a href="qq/index.html" target="_blank"></a><span style="font-size: 10.5pt; font-family: 宋體;"> </span></span><script>
        <!--var day="";
        var month="";
        var ampm="";
        var ampmhour="";
        var myweekday="";
        var year="";
        mydate=new Date();
        myweekday=mydate.getDay();
        mymonth=mydate.getMonth()+1;
        myday= mydate.getDate();
        year= mydate.getFullYear();
        if(myweekday == 0)
        weekday=" 星期日 ";
        else if(myweekday == 1)
        weekday=" 星期一 ";
        else if(myweekday == 2)
        weekday=" 星期二 ";
        else if(myweekday == 3)
        weekday=" 星期三 ";
        else if(myweekday == 4)
        weekday=" 星期四 ";
        else if(myweekday == 5)
        weekday=" 星期五 ";
        else if(myweekday == 6)
        weekday=" 星期六 ";
        document.write(year+"年"+mymonth+"月"+myday+"日 "+weekday);
        //-->
      </script></div>
  <div style="clear: both;"></div>
  </div>
</form>

然後開啟header.php，貼上進去。

然後，在首頁中，我們需要呼叫header.php，就是這個模板標籤：<?php get_header();?>

然後貼上到index.php中。

<?php get_header();?>
<!--搜尋欄End--><!--共同關注Begin-->

    <div class="page_row">

可以來到網站前臺測試下，沒有問題。

接下來，我們來優化header.php

修改標題

把：

<title>打字賺錢★網上如何賺錢★網路兼職賺錢★如何掙錢_網上兼職是真的嗎</title>

更改為：

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' | '; } ?> <?php bloginfo('name'); ?></title>

刪除無用程式碼

刪除：

<meta content="-IdFVr_0K9w67HYlOx79ZgrF_O4kE_Zrh8aOMN9AE3U" name="google-site-verification" />

編碼格式的呼叫

把：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

更改為：

<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />

刪除內容和關鍵詞

刪除：

    <meta content="打字賺錢,網上如何賺錢,網路兼職賺錢,怎樣賺錢,如何掙錢,網路兼職,網賺" name="keywords" />
    <meta content="★網賺★揭祕網上如何賺錢的方法，提供網路兼職賺錢的專案，告訴你如何掙錢，怎樣賺錢，最好的網上兼職、網上賺錢和網路兼職賺錢方法!!!" name="description" />

可以通過seo外掛來實現。

刪除無用程式碼

刪除：

<script src="front_res/jquery.js" type="text/javascript"></script>

儲存，來到網站前臺，沒有變化，說明修改成功了。

首先，需要把首頁變成自己的模板標籤程式碼：

<li class="thisclass"><a href="<?php echo get_option('home'); ?>">首 頁</a> </li>

再往下面我們看到非常多的導航程式碼，我們通過迴圈遍歷wordpress的分類目錄來替換掉這些多餘的程式碼，最後就像這樣：

<ul>
  <li class="thisclass"><a href="<?php echo get_option('home'); ?>">首 頁</a> </li>
  <?php
    $args=array(
    'orderby' => 'id',
    'order' => 'ASC'
    );

    $categories=get_categories($args);

    foreach($categories as $category) {
    echo '<li class="thisclass"><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a></li>';
    }
    ?>
</ul>

再來到網站前臺，重新整理一下，選單上就顯示的是分類目錄了。

再往下看還發現了一個問題：搜尋框並沒有出現，關於搜尋框，我們會在後面的課程中簡介，現在先把多餘的程式碼刪除，最後剩下這段：

</script>
<form target="_blank" action="http://www.xuhss.com/jeecms/ArtiSearch.do" id="searchForm">
  <div class="topsearch box">
  <div class="title"></div>
  <div id="page_search_left">
<script>

來到網站前臺，現在是這個樣子：

You must be logged in to view the hidden contents.

現在我想把時間右移，也就是放到最右邊。因為這個位置以後是要留給搜尋框使用的。

那麼現在就需要新增一個div（<div style=”float:right”></div>）：

</script>
<form target="_blank" action="http://www.xuhss.com/jeecms/ArtiSearch.do" id="searchForm">
  <div class="topsearch box">
  <div class="title"></div>
  <div id="page_search_left">
  <div style="float:right"></div>
<script>

然後把js程式碼放到這個div裡面：

  <div style="float:right">
    <script>
        <!--var day="";
        var month="";
        var ampm="";
        var ampmhour="";
        var myweekday="";
        var year="";
        mydate=new Date();
        myweekday=mydate.getDay();
        mymonth=mydate.getMonth()+1;
        myday= mydate.getDate();
        year= mydate.getFullYear();
        if(myweekday == 0)
        weekday=" 星期日 ";
        else if(myweekday == 1)
        weekday=" 星期一 ";
        else if(myweekday == 2)
        weekday=" 星期二 ";
        else if(myweekday == 3)
        weekday=" 星期三 ";
        else if(myweekday == 4)
        weekday=" 星期四 ";
        else if(myweekday == 5)
        weekday=" 星期五 ";
        else if(myweekday == 6)
        weekday=" 星期六 ";
        document.write(year+"年"+mymonth+"月"+myday+"日 "+weekday);
        //-->
      </script>
    </div>

來到網站前臺，你會發現，日期已經往右停靠了。

以上就是關於header.php的製作。

footer.php

header.php製作完成之後，我們再來製作footer.php。

在主題資料夾下，建立一個footer.php檔案

footer.php對應的就是這一塊：

.png - WordpressCMS主題開發02-製作頂部header.php和footer.php

對應的程式碼就是：

<div class="foot">
<div class="foot_pic"><a href="#"><img width="200" height="50" alt="網上如何賺錢" src="<?php bloginfo('template_directory'); ?>/img/logo2.gif" /></a></div>
<div class="left foot_msg">- <a target="_blank" href="login/Jeecms.html"><span style="color: rgb(255, 255, 255);">管理登入</span></a>&nbsp;-&nbsp;&nbsp;<a target="_blank" href="#">網路兼職是真的嗎</a> - <a target="_blank" href="#">網上如何賺錢</a> - <a target="_blank" href="#">網路兼職賺錢</a>&nbsp;-&nbsp;<u><font color="#810081"><a target="_blank" href="#">網上兼職是真的嗎</a></font></u> -&nbsp;<a target="_blank" href="#">網上兼職賺錢&nbsp;</a><script src="http://s11.cnzz.com/stat.php?id=2202510&amp;web_id=2202510&amp;show=pic" language="JavaScript"></script><br />
Powered by&nbsp;<a target="_blank" href="index.html">網上怎麼賺錢</a>&nbsp;站長QQ：1050654008，歡迎友情連結</div><script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F35c1be6dc19f280fafcfb18f5a5ca6eb' type='text/javascript'%3E%3C/script%3E"));
</script>
<div style="clear: both;"></div>
</div>

全部剪下到footer.php中。

然後回到index.php呼叫footer.php:

<?php get_footer();?>

接著順手把index.php這些註釋的程式碼給刪除了：

<!-- Mirrored from www.xuhss.com/ by HTTrack Website Copier/3.x [XR&CO'2010], Sat, 16 Apr 2011 11:12:31 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=GBK"><!-- /Added by HTTrack -->

到網站前臺，重新整理試試：應該也是成功的。、

然後我們把footer.php中多餘的程式碼也刪除掉：

最後剩下這些就可以了：

<div class="foot">
<div class="foot_pic"><a href="#"><img width="200" height="50" alt="網上如何賺錢" src="<?php bloginfo('template_directory'); ?>/img/logo2.gif" /></a></div>
<div class="left foot_msg"></div>
<div style="clear: both;"></div>
</div>

為了讓頁尾顯得豐富一些，你可以新增一些全站連結：

<div class="left foot_msg">
<a href=” <?php echo get_option('home'); ?>”>全站連結1</a> | 
<a href=” <?php echo get_option('home'); ?>”>全站連結1</a> | 
<a href=” <?php echo get_option('home'); ?>”>全站連結1</a>
</div>

新增完成後，頁尾就長這個樣子：

.png - WordpressCMS主題開發02-製作頂部header.php和footer.php

WordpressCMS主題開發01-首頁製作
2018-07-08
WordpressCMS主題開發06-分類頁面的文章呼叫和sidebar製作
2018-07-08
IDE
WordpressCMS主題開發07-製作分頁和麵包屑導航
2018-07-08
WordpressCMS主題開發08-CMS文章內容頁面的製作
2018-07-08
WordpressCMS主題開發03-如何製作幻燈片和tab式新聞框
2018-07-08
WordpressCMS主題開發09-製作內容頁面sidebar和文章瀏覽量功能
2018-07-08
IDE
WordpressCMS主題開發05-首頁sidebar製作和友情連結新增
2018-07-08
IDE
WordpressCMS主題開發10-新增搜尋框功能search.php
2018-07-08
PHP
windows10主題製作怎麼操作_windows10電腦主題如何自己製作
2020-07-17
Windows
零基礎創作專業wordpress網站02-安裝主題
2018-07-08
網站
WordPress主題製作進階#10自定義主頁
2018-09-30
WordpressCMS主題開發04-如何在首頁呼叫各個分類下的文章以及圖片欄目
2018-07-08
短視訊app製作，去除當前自帶的頂部導航欄
2022-05-05
APP
回到頂部和回到頂部按鈕的顯示隱藏
2018-09-29
MYSQL主從複製製作配置方案
2018-06-11
MySql
Android studio | 去除頂部標題欄
2024-06-12
Android
Tkinter (41) 定製和建立 ttk 主題和樣式
2020-08-28
元件化開發之私有庫製作以及常見問題
2019-03-04
元件化
《仙劍奇俠傳七》主題曲MV製作手帳
2021-01-04
製作chm檔案搜尋時總提示找不到主題的問題
2020-10-19
小程式開發製作公司哪家好
2018-09-19
以太橙系統模式開發製作
2019-04-22
模式
使用兔展教程和常見製作問題
2022-07-14
遊戲雜談：大製作遊戲和小製作遊戲，在開發思路方式上的差別
2023-12-26
遊戲
kafkaer：將 kafka主題和配置作為程式碼管理
2022-06-08
Kafka
短視訊商城原始碼，頂部標題欄的設定和更改
2021-10-09
原始碼
Windows 環境下，MySQL 的主從複製和主主複製
2019-03-12
WindowsMySql
windows環境下，Mysql的主從複製和主主複製
2018-07-20
WindowsMySql
視訊直播系統原始碼，頂部標題欄的隱藏和標題修改
2022-06-22
原始碼
WordPress主題 Hankin v2.0.1部落格主題模板
2022-02-20
MIUI小米主題和迪士尼中國達成授權合作推出專屬定製主題
2018-03-19
UI
關於南京開具製作費發票?
2020-06-25
用 Docker 製作的 Laravel 開發環境
2019-12-24
DockerLaravel開發環境
森林鏈系統軟體開發製作
2019-04-22
QuartzCode for Mac(動畫開發製作應用)
2022-01-04
quartzMac動畫
《Project DT》：主機動作遊戲，開發中
2021-02-18
Project遊戲
mysql資料庫的主從複製和主主複製實踐
2018-03-25
MySql資料庫
回到頂部效果之加速置頂
2019-02-16

WordpressCMS主題開發02-製作頂部header.php和footer.php

製作header.php

接下來，我們來優化header.php

修改標題

刪除無用程式碼

編碼格式的呼叫

刪除內容和關鍵詞

刪除無用程式碼

footer.php

相關文章