從無到有開發自己的Wordpress博客主題---局部模板的準備
阿新 • • 發佈：2018-10-09
about design meta 之前 oot header 關於我 star des
毫無疑問，我們媒體頁面都會有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博客主題---局部模板的準備