文章目录
显示
这一节课实现cms主题顶部和底部文件的制作。
首先我们来看这个 cms 主题，它的顶部是哪一块？
通过对比三个静态页面，公共的部分就是顶部，对吧。
制作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="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> <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>来到网站前台，现在是这个样子：
现在我想把 时间 右移，也就是放到最右边。因为这个位置以后是要留给搜索框使用的。
那么现在就需要添加一个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的制作。
header.php制作完成之后，我们再来制作footer.php。
在主题文件夹下，创建一个footer.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>全部剪切到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>添加完成后，页脚就长这个样子：
