毫无疑问，我们媒体页面都会有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博客主题---局部模板的准备的更多相关文章

  1. 从无到有开发自己的Wordpress博客主题---主页模板

    在只做完成了header和footer的模板之后,我们首先在之前Hello World的基础上做一个最简单的调用测试 //修改index.php内容如下 <?php get_header(); ...

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

    注意这里说的是代码环境准备哦,而不是L(M)AMP运行环境哦,运行环境会在后述文章中在写. 一.在本地初始化git环境并且链接上gitee 1.在gitee上创建一个项目托管你的代码 这个不在赘述,按 ...

  3. 从无到有开发自己的Wordpress博客主题---Wordpress主题的构造

    在这篇教程中,主要是对Wordpress的主题的构造进行分析,以方便今后的开发工作. 本来打算就引用一下别人已经有的文档就好了,但还是想从头到尾捋一遍,也方便自己梳理学习. 1.Wordpress主题 ...

  4. 从无到有开发自己的Wordpress博客主题---运行环境准备

    目前只做本地开发,只在本地搭建测试环境,最后会在服务器的CentOS中搭建正式环境,我使用的是Mac,最简单的办法就是安装MAMP. 1.下载并安装MAMP 下载地址:https://www.mamp ...

  5. 从无到有开发自己的Wordpress博客主题---创建主题

    上一篇教程,我们已经安装了Wordpress,我们可以成功的登录到Wordpress后台,接下来的任务就是创建我们自己的主题. 要想创建一个Wordpress主题,就必须按照Wordpress的规则, ...

  6. 20款时尚的 WordPress 博客主题【免费下载】

    在这篇文章中,我们收集了20款时尚的 WordPress 博客模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单 ...

  7. 开源免费的WordPress个人博客主题推荐

    二次元动漫类个人主题 Sakura 功能强大,美观大气,二次元动漫专属 演示地址:https://2heng.xin/theme-sakura/ 开源地址:https://github.com/mas ...

  8. 基于docker搭建wordpress博客网站平台

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用. WordPre ...

  9. 巨杉Tech | 十分钟快速搭建 Wordpress 博客系统

    介绍 很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数 ...

随机推荐

  1. Word 中设置图、表、公式、代码要与正文之间行间距

    一.概述 在撰写论文等文档时,常常对图.表.公式.代码要与正文之间行间距有要求.例如: (5)图.表.公式.代码要与正文之间有6磅的行间距. 二.设置方式 选中 图/表/公式/代码 与 图题/表头/- ...

  2. UEditor文本编辑器

    Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质 外,还采用了分层理念,使开 ...

  3. PAT 天梯赛 L1-014. 简单题 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-014 AC代码 #include <iostream> #include <cstdio&g ...

  4. $git学习总结系列（4）——gitignore文件

    有时候工作区中会有我们创建的一些密码配置文件,或者自动生成的一些临时文件,比如python代码编译产生的.pyc文件和java代码编译产生的.class文件等,我们在提交代码的时候没有必要把这些文件也 ...

  5. hadoop15---activemq

    java JMS技术 JMS是规范,activeMQ是实现. 用于在两个应用程序之间,或分布式系统中发送消息,进行异步通信. 它类似于JDBC,JDBC 是可以用来访问许多不同关系数据库的 API. ...

  6. Java经纬读坐标的距离计算

    问题引出: 今天遇到经纬度坐标转换距离的工作,根据网站登录者的IP确定登录者目前的位置信息,将其经纬度信息与所有的营业厅的经纬度进行对比,网页上显示出距离登录者最近的营业厅地址,本打算就做一个二维坐标 ...

  7. JMeter并发性测试

    JMeter并发性测试 一.JMeter简介 JMeter是apache公司基于java开发的一款开源压力测试工具,体积小,功能全,使用方便,是一个比较轻量级的测试工具,使用起来非常简单.因为jmet ...

  8. hadoop源码分析

    hadoop 源代码分析(一) Google 的核心竞争技术是它的计算平台.HadoopGoogle的大牛们用了下面5篇文章,介绍了它们的计算设施. GoogleCluster:http://rese ...

  9. Json -- 语法和示例，javascript 解析Json

    1. 语法 JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不 ...

  10. Nginx的长链接

    网站使用程序discuz3访问都正常,只有用户登录存在异常,具体就是:用户登陆后会马上显示未登录,然后刷新一下又变成了登录中 这个问题的原因显然是由于session导致,后台有多个web机器,当用户登 ...