从无到有开发自己的Wordpress博客主题---局部模板的准备

毫无疑问，我们媒体页面都会有header和footer，这些用到的内容几乎是一样的。

从无到有，我们先不考虑后面可能用到的Search和Comment等的模板，后面的我会在文本最后面追加。

开始之前，我们把模板所用到的所有静态文件比如图片，css，js等拷贝到主题根目录，不然后面的工作无法继续。

1、header

header是每个页面公共的部分，具体怎么着，这里不做赘述，直接拷贝到header.php修改内容如下

<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>首页_齐建伟个人博客</title>
<meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,齐建伟" />
<meta name="description" content="齐建伟的个人博客，记录我的程序人生" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/comm.js"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<header class="header-navigation" id="header">
  <nav><div class="logo"><a href="/">齐建伟个人博客</a></div>
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <ul id="starlist">
      <li><a href="index.html">网站首页</a></li>
      <li><a href="share.html">我的相册</a></li>
      <li><a href="list.html">我的日记</a></li>
      <li><a href="about.html">关于我</a></li>
      <li><a href="gbook.html">留言</a></li>
      <li><a href="info.html">内容页</a></li>
      <li><a href="infopic.html">内容页</a></li>
    </ul>
</nav>
</header>

在这里我们需要注意一点就是，js和css的路径问题，这样子直接运行肯定会是出错的，因为网站的跟路径是Wordpress的跟路径而不是你主题的跟路径。

我们可以通过bloginfo函数来得到主题的路径

blog_info('template_url');

举个例子，我们调用css目录下的base.css，其他文件都是同理

<link href="<?php bloginfo('template_url'); ?>/css/base.css" rel="stylesheet">

2、footer

和header同样的道理，先把底部公共的代码拷贝到footer.php，修改内容到你想要的样子

<footer>
  <p>Design by <a href="https://www.jerryqi.cn" target="_blank">齐建伟个人博客</a> <a href="http://www.miitbeian.gov.cn/">湘ICP备17016214号-1</a></p>
</footer>
<a href="#" class="cd-top">Top</a>
</body>
</html>

至此，header和footer最简单的修改完成了，现在他已经可以成功供页面调用了，后面修改超链接以及增加钩子的任务，我们放到后面用到的时候再来做。

 

posted @ 2018-10-09 18:32  齐建伟  阅读(396)  评论(0)  编辑  收藏  举报