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

Posted jerryqi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从无到有开发自己的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最简单的修改完成了,现在他已经可以成功供页面调用了,后面修改超链接以及增加钩子的任务,我们放到后面用到的时候再来做。

 

以上是关于从无到有开发自己的Wordpress博客主题---局部模板的准备的主要内容,如果未能解决你的问题,请参考以下文章

从无到有开发自己的Wordpress博客主题---代码环境准备

妈蛋,googleapi用不了了,wordpress博客加载超慢,怎么破

大牛们是如何开发 WordPress 主题的?

wordpress博客D8主题插件WP-UserAgent用法 PHP

Wordpress是有啥作用

wordpress是啥