內容目錄
WordPress 玩到一段時間後，就會想挑戰自行開發一個佈景主題，在開發時要了解 WordPress 一些核心基礎，這是一些比較重要的概念…
每個環節都會逐一介紹，讓在開發時可以了解，建議需要有靜態頁面(html、css寫好)才著手進行。
1.WordPress主題開發的核心概念1：模板層次結構
可以幫助你了解 WordPress主題開發的第一件事就是了解所有這些主題文件的功能，Web開發的人來說，其中某些可能是顯而易見的，例如 style.css 成為 CSS 樣式規則的方法，可是在 WordPress模板層次結構是 WordPress有用和復雜的基礎。
模板層次結構中的所有文件都有一些共同點：
- 都是名稱以.php結尾
- 內部包含一個版本的“循環”（有關此內容的更多資訊，請參見下一部分）
- 主要包含HTML和一些 PHP代碼
我們要開始製作網站時，你要知道 WordPress 是建築材料行，只要使用 WordPress 蓋房子(架設網站)，就必須遵守他們的使用說明書，當我們在生產組裝階段，會需要從 WordPress 倉庫 (數據庫)，抓取對應的螺絲(WordPress hook)名稱，讓我們的網站能夠順利地完工，把WordPress 想成一棵大樹，綑綁著不同的數據資料，如：想要讀取文章，這只是一個大樹中的分支點。
WordPress 官方模板層次結構，你可以在這麼查看完整資訊
A.兩個文件創建好佈景主題
其實創建好 WordPress主題僅需要兩個文件 -style.css 和 index.php，我們為了要讓網站成功執行，至少必須有一個分支線，連接到 index.php，雖然有些人會使用 hone.php 來整合網站樣式，但你會發現 WordPress 主題都必須具有index.php 模板文件，因為假如沒有更合適的模板文件可以使用，WordPress 會默認這個頁面。
再來使用 ftp 進入網站資料夾中，從 wp-content > theme 的路徑進入主題文件夾，你會看到 WordPress 默認主題- twentyfifteen，twentyfourteen，twentythirteen -和 index.php文件，你可以新增一個新目錄：mywordpress。
在自定義主題文件夾中，創建 style.css，內容包含一條註釋，告訴 WordPress 說我有一個佈景主題是什麼名稱，作者，描述等。
style.css 文件內容：
/*
Theme Name: my WordPress
Author: sandy chen
Description: Bootstrap Blog template converted to WordPress
Version: 0.0.1
Tags: bootstrap
*/然後，將這兩個文件 -index.html和blog.css- 上傳到自訂文件夾，重命名 index.html 為 index.php，這時你會發現，WordPress 佈景主題多一個默認主題，如果說要換圖片，只要把圖片名稱取為 screenshot.png 上傳即可。
B.自訂CSS 如何串接到 WordPress ?
利用 Bootstrap快速架設好靜態頁面，我們主要 CSS 和 JS文件通過 CDN 加載，但我的本端 CSS 文件沒有載入成功，可能是代表我的路徑有問題，如果使用連接到 blog.css <link href=”blog.css”>，他的連結位置是在 startwordpress.dev(網址)/blog.css，但不存在，因此語法必須這樣寫：
在 index.php 的開頭找到連接到 CSS 位置
<link href="blog.css" rel="stylesheet" />改成：
<link href="<?php echo get_bloginfo('template_directory'); ?>/blog.css" rel="stylesheet">
如果無法成功加載CSS，請單擊“查看源代碼”，然後在代碼中找到CSS文件的路徑是否有錯誤，確保 blog.css 保存在正確的位置。
C. 分割出-header、footer、nav、content、sidebar
現在內容都在 index.php 中，我們都知道網站有頭(header)、脖子(nav)、身體(content)又包含 手 (sidebar)、腳(footer)，因此分出這個幾個區塊，開始切割時，你必須了解 html 架構。
1.分割出-header 包含 nav
<!DOCTYPE html>~</head>內容剪貼到 header.php，並且新增 <?php wp_head(); ?>，在 index.php header 位置新增 <?php get_header(); ?> 代表請他讀取這支檔案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Template for Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo get_bloginfo( 'template_directory' );?>/blog.css" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>
2.分割出-footer
頁尾與頁頭的處理相同，將資料剪貼到 footer.php 檔案，並且在</body>之前新增 <?php wp_footer(); ?>，然後在index.php footer 位置新增 <?php get_footer(); ?>。
</div> <!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<?php wp_footer(); ?>
</body>
</html>3.分割出-content
將建立 content.php ，將內容貼入，留下大容器及欄位的樣式「row」和「col-sm-8 blog-main」，並且在 index.php content 位置新增 <?php get_template_part( ‘content’, get_post_format() ); ?>
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>
This blog post shows a few different types of content that's supported and styled with
Bootstrap. Basic typography, images, and code are all supported.
</p>
<hr />
<!-- the rest of the content -->
</div>
<!-- /.blog-post -->4.分割出-sidebar
大多數網站，特別是博客，都會有一個側面區域，用於存檔，標籤，類別，廣告之類的內容，新增一個 sidebar.php ，程式碼剪下貼入，並且在 index.php sidebar 位置新增 <?php get_sidebar(); ?>
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>
Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit
amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<!-- More archive examples -->
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div>
<!-- /.blog-sidebar -->5.最後你的 index.php 會長成這樣：
<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php get_template_part( 'content', get_post_format() ); ?>
</div> <!-- /.blog-main -->
<?php get_sidebar(); ?>
</div> <!-- /.row -->
<?php get_footer(); ?>D. WordPress 常見的命名方式
以下是 WordPress 特定檔案，包含常用到的 index.php、style.css 與 functions.php
style.css 最主要的樣式表
rtl.css 若佈景主題有從右到左的文字，則會自動讀這份樣式設定
index.php 首頁模板，若佈景主題包含模板，至少必須要有此份模版
comments.php 留言模板
front-page.php 首頁顯示靜態頁面時可作為首頁模版
home.php 首頁模板，且由此頁優先作為首頁模板，詳情可以閱讀 Template Hierarchy
single.php 日誌（文章）模板
single-{post-type}.php 自訂日誌（文章）類別用模板
page.php 網誌分頁模版（例如關於我們、聯絡我們等頁）
category.php 文章分類模板
tag.php 標籤模版
taxonomy.php 其他分類模板
author.php 作者模版
date.php 日期、時間模版
archive.php 搜尋類別模版，包含且會被 category.php、author.php 或 date.php 覆蓋
search.php 搜尋結果模版
attachment.php 附件模版
image.php 圖片附件模版
404.php 當網頁或搜尋內容找不到時呈現的模版關於自訂佈景主題的介紹，可以看 WordPress 文件。
1.一般設定：
我們需要配置WordPress的一般設定，例如：網站標語、網站敘述，我們該如何對應在程式碼當中呢?
在 header.php 中，將title標籤和main h1標籤的內容更改為以下代碼：
<?php echo get_bloginfo( 'name' ); ?> /*網站標題*/
<?php echo get_bloginfo( 'description' ); ?> /*網站敘述*/
<a href="<?php echo get_bloginfo( 'wpurl' );?>"><!-- site title --></a> /*標題帶回到部落格主頁上*/ 完整代碼：<div class="blog-header">
<h1 class="blog-title"><a href="<?php echo get_bloginfo( 'wpurl' );?>"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<p class="lead blog-description"><?php echo get_bloginfo( 'description' ); ?></p>
</div>WordPress主題開發的核心概念2：知道如何使用循環方式處理內容
WordPress主題開發實際上依賴於掌握“循環”在WordPress中的工作方式，所有內容都是通過循環生成的。
1.index.php 內文循環方式
文章循環本身非常簡單：
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- contents of the loop -->
<?php endwhile; endif; ?>index.php 文章新增迴圈的內容，所有內容都會重複，內容包含文章標題，日期，內容和評論
<?php get_header(); ?>
<div class="row">
<div class="col-sm-8 blog-main">
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
?>
</div> <!-- /.blog-main -->
<?php get_sidebar(); ?>
</div> <!-- /.row -->
<?php get_footer(); ?>2.content.php 部落格循環方式
content.php 新增，the_title();是博客文章的標題，the_date();顯示日期，the_author();作者以及the_content();您的文章內容。
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?> by <a href="#"><?php the_author(); ?></a></p>
<?php the_content(); ?>
</div><!-- /.blog-post --
3.sidebar.php 側邊欄循環方式
sidebar.php 新增 Archives<li>下的所有s 並將其更改為此代碼：
<h4>About</h4>
<p><?php the_author_meta( 'description' ); ?> </p>
<h4>Archives</h4> <ol class="list-unstyled"> <?php wp_get_archives( 'type=monthly' ); ?> </ol>完整程式碼：
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p><?php the_author_meta( 'description' ); ?> </p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<?php wp_get_archives( 'type=monthly' ); ?>
</ol>
<!-- /.blog-sidebar -->
4.header.php文件選單調整
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<?php wp_list_pages( '&title_li=' ); ?>
</nav>
</div>
</div>WordPress主題開發的核心概念3：添加功能去新增一次 functions.php
在 WordPress主題的 functions.php是編寫所有相關PHP函數的地方，每次頁面載入時將主題加載到 WordPress中，因此在編輯 functions.php 時要非常小心，為了真正了解 WordPress佈景開發（和外掛），必須深入了解，WordPress 掛鉤
>>待續
