首页 > 主题开发 > cms主题开发 > WordpressCMS主题开发02-制作顶部header.php和footer.php
2018
05-10

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

这一节课实现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="https://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="https://www.xuhss.com/jeecms/ArtiSearch.do" id="searchForm">
  <div class="topsearch box">
  <div class="title"></div>
  <div id="page_search_left">
<script>

来到网站前台,现在是这个样子:

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

现在我想把 时间 右移,也就是放到最右边。因为这个位置以后是要留给搜索框使用的。

那么现在就需要添加一个div(<div style=”float:right”></div>):

</script>
<form target="_blank" action="https://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对应的就是这一块:

页脚公用位置 - 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>

添加完成后,页脚就长这个样子:

页脚的丰富链接最后的效果 - WordpressCMS主题开发02-制作顶部header.php和footer.php

最后编辑:
作者:虚幻
这个作者貌似有点懒,什么都没有留下。

留下一个回复