WORDPRESS
由underscores開始的WORDPRESS THEME實作記錄

wordpress theme

用Wordpress要Custom Theme有多種方法,可以用現有的Theme直接改(千萬不要這樣做!XD),可以起Child Theme,也可以自己起一個新Theme。

今次用underscores起一個新Theme,並記錄了製作過程。

因為只是第一次起新Wordpress Theme(之前都只起Child Theme),所以實在無心得可言,如有錯漏懇請指正!

製作Wordpress Theme需要的技能:HTML/CSS/略懂PHP

製作Wordpress Theme的步驟

  1. 到_s下載Theme
  2. 套用_s的Theme
  3. 更改Wordpress內容
  4. 設計版面
  5. 修改檔案
  6. 測試

1. 到_s下載Theme

underscores

_s,即underscores是一個Generate Blank Theme的網站,由Automattic營運,Wordpress亦是由Automattic營運的。

在_s輸入自己的Theme名後按Generate就可。

2. 套用_s的Theme

blank theme

套用後會見到類似的版面, CSS都被Reset了。

3. 更改Wordpress內容

發表數篇文章(Post)和頁面(Page), 並設置選單(Navigation Bar),文章內包括h1、h2、h3、ul、ol、img、blockquote等會用到的Tag。

在文章下留言,加要用的的Wordpress小工具(widgets)。

文章內容可用Lorem Ipsum亂數假文產生器中文版)。

4. 設計版面

版面結構

版面基本上可分為四部份(如上圖),設計時可以以此作為考慮,當然其實各部分的內容也可自行修改,不顯示也可,另外亦要考慮到在不同Screen Size的顯示問題。

今次的Theme用到的素材都在ヒバナ下載,設計時可用紙畫,也可用PhotoShop或直接用HTML做個Static的版面 ←廢話XD

5. 修改檔案

在_s的Blank Theme中包括的檔案如下

  • inc
    • custom-header.php
      Customise Header用,例如可加Image到Header (_s的Theme本來Header沒有Image的)
    • customizer.php
      提取在Admin版面設定的資料用,預設有header_textcolor
    • extras.php
      Custom functions that act independently of the theme templates ← 不知實際用途XD
    • jetpack.php
      加Infinite Scroll,例如不用按下一頁就可提取到下一頁的內容
    • template-tags.php
      有不同頁面都會用到的Display Function,例如每個Article的Posted On,Tag的顯示格式
  • js
    • customizer.js
      Bind在customise.php提取的資料用
    • navigation.js
      在Small Device時會Toggle Navigation Bar用
    • skip-link-focus-fix.js
      改正按Tab鍵時的表現用
  • languages
  • layouts
    • content-sidebar.css
      版面顯示是[content(loop)][sidebar]的CSS
    • sidebar-content.css
      版面顯示是[sidebar][content(loop)]的CSS
  • 404.php
    404(not found)的版面
  • archive.php
    顯示連結到Site Entry的版面
  • comments.php
    討論/留言的版面(一般置於Post / Page Article的下方)
  • content-none.php
    搜尋不到Post時的版面
  • content-page.php
    頁面(Page)的版面
  • content-search.php
    顯示搜尋結果的版面
  • content-single.php
    按入獨立的文章(Post)後的版面
  • content.php
    Loop的文章(Post)的版面
  • footer.php
    Footer的版面
  • functions.php
    Theme的Function,例如設定小工具(Widgets)的顯示格式,Admin可在Panel Customise的內容等
  • header.php
    Header的版面
  • index.php
    首頁的版面
  • page.php
    頁面(Page)的版面
  • README.md
    Read Me
  • rtl.css
    Support顯示方式是由右至左的語言, 例如阿拉伯文
  • screenshot.png
    Theme的Screenshot, 在Admin Panel選Theme時會見到
  • search.php
    Search的版面
  • sidebar.php
    Sidebar的版面
  • single.php
    按入獨立的文章(Post)後的版面
  • style.css
    Theme的StyleSheet

雖然包括的檔案不少,但不是每個檔案都要改
(Underline了的是今次的Theme有修改到的檔案)

我的做法是先改會Display的Content,然後再改CSS。做完Desktop Version再做Responsive。

例如本身_s的設定標籤(Tag)和分類(Category)都是放在文章的內容下方,而我想放在上方,就先改content-search.php/content-single.php/content.php/template_tags.php(因為我將Tag和Category分開在不同位置顯示)

改CSS時,檢視原始碼就可看到各Element的Class和ID去做修改。各瀏覽器也有Developer Tools方便在Development時用,例如可在Browser改CSS,這樣就不用Refresh都見到修改CSS後的效果。

6. 測試

修改完Code後,就到不同頁面進行測試和用各樣Function,例如搜尋有結果和沒結果的文章,到沒有該文章編號的網址查看404的表示模式等。

當然Testing未必完善,例如我現在實際使用新Theme時就找到想要修改的地方了 XD

總結

大家也試試用_s起Theme吧 :D

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">