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

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

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

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

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

制作header.php

所以，打开主题文件夹，先新建一个header.php，打开index.php，剪切顶部的公用代码：

  
    
    
    
    
    
    
    
      
  
  
    

  






  
首 页 
  
久久专题
  
网店赚钱
  
网赚杂谈
  
网赚方法
  
免费网赚项目
  
免费资源推荐
  
下载中心
  
◆免费网赚视频◆ 
  
留言板


 

  

  

  
任务网赚 | 游戏网赚 | 调查网赚 |　其他网赚       
  

  

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

然后，在首页中，我们需要调用header.php，就是这个模板标签：

然后粘贴到index.php中。

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

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

修改标题

把：

更改为：

删除无用代码

删除：

编码格式的调用

把：

更改为：

删除内容和关键词

删除：

可以通过seo插件来实现。

删除无用代码

删除：

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

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

首 页 

再往下面我们看到非常多的导航代码，我们通过循环遍历wordpress的分类目录来替换掉这些多余的代码，最后就像这样：

  
首 页 
   'id',
    'order' => 'ASC'
    );

    $categories=get_categories($args);

    foreach($categories as $category) {
    echo '
name ) . '" ' . '>' . $category->name.'
';
    }
    ?>

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

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

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

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

footer.php

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

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

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

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

对应的代码就是：

- 管理登录 -  网络兼职是真的吗 - 网上如何赚钱 - 网络兼职赚钱 - 网上兼职是真的吗 - 网上兼职赚钱 

Powered by 网上怎么赚钱 站长QQ：1050654008，欢迎友情链接

全部剪切到footer.php中。

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

接着顺手把index.php这些注释的代码给删除了：

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

然后我们把footer.php中多余的代码也删除掉：

最后剩下这些就可以了：

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

”>全站链接1 | 
”>全站链接1 | 
”>全站链接1

添加完成后，页脚就长这个样子：

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