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

时间 2019-12-08

标签从无到有开发本身 wordpress 博客主题局部模板准备栏目 Wordpress 繁體版

原文原文链接

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

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

开始以前，咱们把模板所用到的全部静态文件好比图片，css，js等拷贝到主题根目录，否则后面的工做没法继续。css

一、headerhtml

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

<!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的跟路径而不是你主题的跟路径。jquery

咱们能够经过bloginfo函数来获得主题的路径函数

blog_info('template_url');

举个例子，咱们调用css目录下的base.css，其余文件都是同理网站

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

二、footerurl

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

<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最简单的修改完成了，如今他已经能够成功供页面调用了，后面修改超连接以及增长钩子的任务，咱们放到后面用到的时候再来作。