WordPress 佈景主題-開發筆記

WordPress 玩到一段時間後,就會想挑戰自行開發一個佈景主題,在開發時要了解 WordPress 一些核心基礎,這是一些比較重要的概念…

每個環節都會逐一介紹,讓在開發時可以了解,建議需要有靜態頁面(html、css寫好)才著手進行。

1.WordPress主題開發的核心概念1:模板層次結構

可以幫助你了解 WordPress主題開發的第一件事就是了解所有這些主題文件的功能,Web開發的人來說,其中某些可能是顯而易見的,例如 style.css 成為 CSS 樣式規則的方法,可是在 WordPress模板層次結構是 WordPress有用和復雜的基礎。

模板層次結構中的所有文件都有一些共同點:

  • 都是名稱以.php結尾
  • 內部包含一個版本的“循環”(有關此內容的更多資訊,請參見下一部分)
  • 主要包含HTML和一些 PHP代碼

我們要開始製作網站時,你要知道 WordPress 是建築材料行,只要使用 WordPress 蓋房子(架設網站),就必須遵守他們的使用說明書,當我們在生產組裝階段,會需要從 WordPress 倉庫 (數據庫),抓取對應的螺絲(WordPress hook)名稱,讓我們的網站能夠順利地完工,把WordPress 想成一棵大樹,綑綁著不同的數據資料,如:想要讀取文章,這只是一個大樹中的分支點。

WordPress 佈景主題-開發筆記 1

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 上傳即可。

WordPress 佈景主題-開發筆記 2

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的一般設定,例如:網站標語、網站敘述,我們該如何對應在程式碼當中呢?

WordPress 佈景主題-開發筆記 3

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 --

屏幕截圖2015年10月17日下午9 52 06

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 -->

屏幕截圖2015年10月17日下午10 14 54

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 掛鉤

 

>>待續



		
×

目錄

給想要積極架設網站卻不知如何下手的人​

現在網路上很多人教自行架設網站,但是我們都很苦惱不知道該如何孵出自己網頁內容,甚至不知道該如何整理出自己的網站內容。

我提供網站架設準備清單,讓你可以快速蒐集網站資料,讓你在做網站的時候有想法。