当前位置：网站首页>WordpressCMS主题开发02-制作顶部header.php和footer.php

WordpressCMS主题开发02-制作顶部header.php和footer.php

2022-08-11 08:53:00 【51CTO】

这一节课实现cms主题顶部和底部文件的制作。

首先我们来看这个 cms 主题，它的顶部是哪一块？

通过对比三个静态页面，公共的部分就是顶部，对吧。

WordpressCMS主题开发02-制作顶部header.php和footer.php_网站前台

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>  </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> </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>      <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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.

然后打开header.php，粘贴进去。

然后，在首页中，我们需要调用header.php，就是这个模板标签：<?php get_header();?>

然后粘贴到index.php中。

       
       <?php get_header();?>
       
<!--搜索栏End--><!--共同关注Begin-->
       
    <div class="page_row">
      
1.
2.
3.
4.

可以来到网站前台测试下，没有问题。

接下来，我们来优化header.php

修改标题

把：

       
       <title>打字赚钱*网上如何赚钱*网络兼职赚钱*如何挣钱_网上兼职是真的吗</title>
      
1.

更改为：

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

删除无用代码

删除：

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

编码格式的调用

把：

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

更改为：

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

删除内容和关键词

删除：

       
           <meta content="打字赚钱,网上如何赚钱,网络兼职赚钱,怎样赚钱,如何挣钱,网络兼职,网赚" name="keywords" />
       
    <meta content="*网赚*揭秘网上如何赚钱的方法，提供网络兼职赚钱的项目，告诉你如何挣钱，怎样赚钱，最好的网上兼职、网上赚钱和网络兼职赚钱方法!!!" name="description" />
      
1.
2.

可以通过seo插件来实现。

删除无用代码

删除：

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

保存，来到网站前台，没有变化，说明修改成功了。

首先，需要把首页变成自己的模板标签代码：

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

再往下面我们看到非常多的导航代码，我们通过循环遍历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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

再来到网站前台，刷新一下，菜单上就显示的是分类目录了。

再往下看还发现了一个问题：搜索框并没有出现，关于搜索框，我们会在后面的课程中简介，现在先把多余的代码删除，最后剩下这段：

       
       </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>
      
1.
2.
3.
4.
5.
6.

来到网站前台，现在是这个样子：

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>
      
1.
2.
3.
4.
5.
6.
7.

然后把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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

来到网站前台，你会发现，日期已经往右停靠了。

以上就是关于header.php的制作。

footer.php

header.php制作完成之后，我们再来制作footer.php。

在主题文件夹下，创建一个footer.php文件

footer.php对应的就是这一块：

WordpressCMS主题开发02-制作顶部header.php和footer.php_php_02

.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> -  <a target="_blank" href="#">网络兼职是真的吗</a> - <a target="_blank" href="#">网上如何赚钱</a> - <a target="_blank" href="#">网络兼职赚钱</a> - <u><font color="#810081"><a target="_blank" href="#">网上兼职是真的吗</a></font></u> - <a target="_blank" href="#">网上兼职赚钱 </a><script src="http://s11.cnzz.com/stat.php?id=2202510&web_id=2202510&show=pic" language="JavaScript"></script><br />
       
Powered by <a target="_blank" href="index.html">网上怎么赚钱</a> 站长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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

全部剪切到footer.php中。

然后回到index.php调用footer.php:

       
       <?php get_footer();?>
      
1.

接着顺手把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 -->
      
1.
2.

到网站前台，刷新试试：应该也是成功的。、

然后我们把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>
      
1.
2.
3.
4.
5.

为了让页脚显得丰富一些，你可以添加一些全站链接：

       
       <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>
      
1.
2.
3.
4.
5.