從無到有開發本身的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最簡單的修改完成了，如今他已經能夠成功供頁面調用了，後面修改超連接以及增長鉤子的任務，咱們放到後面用到的時候再來作。