1 / 16

WordPress 佈景開發

WordPress 佈景開發. Claire Chang. WordPress 簡介. 一個以 PHP 和 MySQL 為平台的自由開源的部落格軟體和內容管理系統 。 使用 者可以安裝和切換主題 。 主題可讓 使用者不改變部落格內容和結構的情況下更改介面和 WordPress 站點的功能 。 WordPress 非常流行的一個特性是它豐富的外掛模組架構，外掛模組能使使用者和開發者擴充功能 WordPress 程式的功能。當前 WordPress 外掛模組資料庫中有超過 18000 個外掛模組 ，包括 SEO 、控制項等等 。. 安裝後初始樣貌.

cathy
Télécharger la présentation

WordPress 佈景開發

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WordPress佈景開發 Claire Chang

  2. WordPress簡介 • 一個以PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統。 • 使用者可以安裝和切換主題。主題可讓使用者不改變部落格內容和結構的情況下更改介面和WordPress站點的功能。 • WordPress非常流行的一個特性是它豐富的外掛模組架構，外掛模組能使使用者和開發者擴充功能WordPress程式的功能。當前WordPress外掛模組資料庫中有超過18000個外掛模組，包括SEO、控制項等等。

  3. 安裝後初始樣貌

  4. 後台管理介面(wp-admin)

  5. WordPress基本操作 • 在WordPress裡，網頁分文章及頁面。 • 頁面網頁中的固定頁面,不經常更新,例如關於我們、聯絡資訊。 • 文章網頁中的經常性變更頁面,常更新,例如最新資訊、我的作品。 • 每一篇文章及頁面都可以設定是否開啟迴響，迴響是類似留言版的地方，會顯示在網頁的下方。 • 外掛及佈景主題皆可以在官網下載或尋找免費支援，許多免費外掛或主題也有提供功能較完整的付費版本，此為WordPress的主要營收來源。

  6. WordPress佈景主題開發 • WordPress的佈景檔案有： • style.css佈景CSS樣式 • header.php各頁共用的網頁頭部 • footer.php各頁共用的網頁底部 • sidebar.php邊欄模組 • index.php首頁 • single.php單頁文章 • page.php網誌分頁 • comments.php迴響模版 • functions.php佈景設定 • archive.php文章彙整 • 404.php 找不到頁面 • search.php站內搜尋結果

  7. 頁面層級結構 • WordPress的頁面有層級的結構存在，當12個php檔案並沒有全部都存在時，便會自動尋找前一層級的來替代。 • 一個佈景主題裡至少要有style.css及index.php

  8. 頁面結構關係圖

  9. single.php單篇文章類 • single-{post_type}.phpsingle-{post_type}.php的意思就是假設你有另外一個自定義文章類別（custom posy type），如slider，你就可以在佈景目錄內新增一個single-slider.php，然候這個檔案內就可以放針對這個類別做不一樣的樣式、設 計。 • single.php一般文章。 • index.php首頁

  10. page.php網站頁面類 • 自訂模版（template-{name}.php）這個是常常拿來做客製化的頁面、或者是特別的效果功能。 • page-{slug}.phpslug在WordPress中叫做文章代稱，通常如果你的固定連結是用文章名稱，然候你去修改，這代稱就是你修改的連結。而page-{slug}.php的用途就是可以對特定頁面做設計，例如關於我們頁面，就可以在上面做special於別的頁面的設計。 • page-{id}.php這個page-{id}.php就是可以指定某頁面的模版，與page-{slug}.php差不多，只是選取方式改用頁面ID來選而以。 • page.php網站頁面。 • index.php

  11. category.php文章分類類 • category-{slug}.php同樣是使用分類代稱來做選取的動作，例如分類代稱是hareware，就可以用category-hareware.php來顯示hareware的分類。 • category-{id}.php就是使用分類ID來選取分類。 • category.php分類的顯示，若此檔案不存在便會以archive.php來取代 • archive.php • index.php

  12. 其他類別（1） • tag.php文章標籤類 • 與category.php相同，只是檔名中category的部分都改成tag.php。 • archive.php文章彙整類 • archive-{post_type}.php • 用來顯示自定義文章類別（custom posy type）的列表（非單頁）。 • archive.php • 之前介紹過的archive.php。 • index.php • arthur.php文章作者類 • author-{nicename}.php • 使用作者的暱稱來做選取。 • author-{id}.php • 使用作者的ID來做選取。 • author.php • archive.php • index.php

  13. 其他類別（2） • search.php搜尋結果類 • search.php • 用來顯示搜尋結果的網頁，不過建議直接使用Google的站內搜尋功能。 • comment.php文章迴響類 • comment.php • 之前介紹過的文章迴響頁。 • comment-popup.php • 這個是使用彈跳視窗來顯示迴響，不過極少使用，參考就好。

  14. 開發第一個風格 • 宣告新佈景的方式是在wp-content/themes/mytheme下創建style.css • 輸入以下資訊 • 然後創立index.php

  15. 手機版主題-index.php • 「版面整體寬度」，建議設定100%，這樣在行動裝置上，可以依照不同的尺寸有不一樣的相容性，例如我們調整為手機板會看到適合手機板的樣式。 • 如果調整成平板之類的，則可以看到整體畫面會拉寬，不會因為本身是手機板，而當平板存取的時候還是小框框。這應該是有點自適應網頁(Responsive Web Design)的概念。 • 因為手機、平板等行動裝置因為畫面比PC桌上型電腦小，所以在文章清單的呈現上，最好是清楚明瞭，以列表式為佳，而且不要有內容摘要，最好是一張圖搭配標題與發表時間。至於頁碼功能可以直接套用桌面版或是變成大按鈕的設計。

  16. 有用資源 • Theme專用函數一覽表https://codex.wordpress.org/Template_Tags • Theme裡的迴圈http://codex.wordpress.org/The_Loop • 主題製作教程http://www.hksilicon.com/kb/articles/3808

More Related