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

最新推荐文章于 2023-12-21 13:53:15 发布

虚坏叔叔

最新推荐文章于 2023-12-21 13:53:15 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/biggbang/article/details/81024423

版权

这一节课实现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

虚坏叔叔

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
WordpressCMS主题开发02-制作顶部header.php和footer.php

这一节课实现cms主题顶部和底部文件的制作。首先我们来看这个 cms 主题，它的顶部是哪一块？通过对比三个静态页面，公共的部分就是顶部，对吧。header共用位置 - WordpressCMS主题开发02-制作顶部header.php和footer.php制作header.php所以，打开主题文件夹，先新建一个header.php，打...
复制链接

扫一扫