ProgressBar

[WordPress][教學][架站] 基本使用#07. 文章格式與客製化的關係(Post Type)

[WordPress][教學][架站] 基本使用#07. 文章格式與客製化的關係(Post Type)

作者: 進度條編輯群更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. 文章格式與客製化的關係 (所屬課程)


以下正式開始文章


這次要講的東西是在Wordpress文章編輯器裡頭,文章有「格式」可以做選擇,如下圖所示

 

 

一般是比較少文章會特別講WordPress格式的內容,因為每一個樣式(Theme)的版型格式是不一樣的,而且不一定每一個樣式都有效果,是要看所選擇的樣式(Theme)有沒有支援你所選擇的效果,除了選擇預設的之外,我們也可以動手來客製化WordPress格式的檔案。

 

格式的目的跟頁面的樣板目的有點像,只是文章格式是一次賦予多個外觀,例如介紹歌曲聲音的頁面它應該與介紹餐廳的外觀不一樣。但是你同時會有很多篇文章是介紹歌曲的,所以會自動被這些文章使用到,而頁面的樣板可能全網站只會用一次而已。

 

我們目前是用WordPress內建的「2017」的樣式,那麼我們可以利用Brackets開啟格式的,程式碼來看
路徑在「wp-content -> themes -> twentyseventeen -> template-parts->posts」。

注意如果你用的不是2017你看到的可能會完全不一樣。

 

 

點選post資料夾展開後,會看到有七個php程式碼檔案 : 

「  content-audio.php
     content-excerpt.php
     content-gallery.php
     content-image.php
     content-none.php
     content-video.php
     content.php              」

 

拿 content-audio 來舉例,在程式行裡頭加了

<h1>進度條</h1>

然後儲存程式碼檔案。

 

補充:
這邊要注意content-*.php 是2017的樣式邏輯,一般樣式post是對應到single.php。

至於2017在哪邊動手腳,則當然是在single.php與content.php摟!
不過這樣的寫法並不見得直覺,所以就不帶大家看這部分了。

 

 

之後回到文章編輯頁面,選擇「格式->音訊」,因為我們改的content-audio的內容,對應到的就是格式裡頭的"音訊",然後按發表。

 

 

然後點選到文章發布頁面,就可以看到,剛才我們打的程式碼,『<h1>進度條</h1> 』就在文章裡頭顯示出來了。

 

 

格式是為了因應文章可能會有很多種的種類,如音樂類的文章和影片類的文章就會有不一樣的格式,也因此我們可以到程式碼裡面,針對格式來做客製化。

從以上的路徑及撰寫檔案方式來客製化樣式,會是WordPress比較可以接受的,當然你也可以直接利用php來達到一樣的效果。

最後,有些樣式(theme)也未必有支援樣式,而且有些有支援的也未必有很大的改變,甚至看不出來有變化了甚麼地方。

 

這就是再進階的運用中為何會需要學習PHP與WordPress API的原因之一,因為WordPress的樣式各家邏輯可能完全不同。常常在某個樣式中常用到的手法在另外一個樣式完全用不到。要弄清楚的話還是要有些基本的程式實力會比較好。

 

 

圖文系列教學: WordPress 新手基本操作

進度條編輯群

進度條編輯群

線上課程

2026 AI實戰基礎篇

2026 AI實戰基礎篇

Laravel 後端PHP架站,API Server與訂閱軟體全攻略

Laravel 後端PHP架站,API Server與訂閱軟體全攻略

WordPress - 從頭教起的網站架設

WordPress - 從頭教起的網站架設

程式客製WooCommerce,WordPress購物系統全解析

程式客製WooCommerce,WordPress購物系統全解析

Electron 跨平台桌面程式,建立點餐系統與裝置控制

Electron 跨平台桌面程式,建立點餐系統與裝置控制

C語言 - 近代程式語言的基礎

C語言 - 近代程式語言的基礎

ES6,ReactJS與Webpack,前端JavaScript全攻略

ES6,ReactJS與Webpack,前端JavaScript全攻略

從零開始的SQL語法與資料庫設計 - 以MySQL來攻略

從零開始的SQL語法與資料庫設計 - 以MySQL來攻略

Linux雲端伺服器,用AWS暸解Apache與Nginx

Linux雲端伺服器,用AWS暸解Apache與Nginx

HTML, CSS, JavaScript, jQuery 網頁從零開始

HTML, CSS, JavaScript, jQuery 網頁從零開始

Git程式版本管控 - 由簡單到難

Git程式版本管控 - 由簡單到難

網路關鍵字佔領技術,微創業與數位行銷正規作戰方式

網路關鍵字佔領技術,微創業與數位行銷正規作戰方式

快速開發,從頭教起的Ruby on Rails後端之旅

快速開發,從頭教起的Ruby on Rails後端之旅

行動第一! 使用Bootstrap建立響應式RWD網站!

行動第一! 使用Bootstrap建立響應式RWD網站!