从无到有开发自己的Wordpress博客主题---局部模板的准备
2024-10-16 16:48:29
毫无疑问,我们媒体页面都会有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最简单的修改完成了,现在他已经可以成功供页面调用了,后面修改超链接以及增加钩子的任务,我们放到后面用到的时候再来做。
最新文章
- 创建ServiceArea
- Jackson ObjectMapper类使用解析
- [小北De编程手记] : Lesson 06 玩转 xUnit.Net 之 定义自己的FactAttribute
- java 线程的几种状态
- java基础-基础类型包装类型
- Intel 编译Boost库
- 黄油刀ButterKnife的使用
- Unity 网格合并
- Codeforces 1079C Playing Piano(记忆化搜索)
- 闪电侠 Netty 小册里的骚操作
- Python学习之高级数组(一)
- jQuery 初知
- Mybatis框架二:增删改查
- Kubernetes中的资源调度与资源管理
- [CodeVS1243]网络提速
- 【hihoCoder】【挑战赛#12】
- ActiveRecord初始化,可以实现jfinal系统启动完成后,再建立数据库连接
- springmvc @Valid 接收实体类时出现bean为null的问题
- Web服务器处理动态程序三种方式及Apache配置
- 探索Web Office Apps服务