WordPress Shortcode (短代碼)教學 ,實際應用介紹

WordPress Shortcode教學就是本篇文章要介紹,常常在WordPress的各種外掛中很常見到的,使用Shortcode(短代碼/簡碼)的方式,加在網頁內容中,這裡就來介紹什麼是WordPress Shortcode吧!

What’s WordPress Shortcode?什麼是短代碼?什麼是簡碼?

WordPress Shortcode 中文有人稱是-短代碼或簡碼,指的是一些用中括號 [ ] 包住的語法(ex: [test]),程式會根據這些短代碼,顯示該短代碼定義的內容,所以Shortcode可以很方便的為文章或頁面或產品增加一些功能,或需要在很多地方重複出現的網頁內容。

 

WordPress Shortcode教學應用舉例-1:

用過WooCommerce購物車系統的電商使用者,應該都會發現WooCommerce的頁面結帳或者會員中心等等,都是在頁面放上一行Shortcode(範例如下圖),然後前台就神奇的有畫面了,當然是多虧工程師都寫好Shortcode的程式.

購物車結帳畫面的Shortcode:

Wordpress Shortcode

 

對應前台顯示的結帳畫面:

Wordpress Shortcode

 

WordPress Shortcode應用舉例-2:

如果畫面上有輪播圖片的人可能也用過,比如同一個輪播或影片,需要可以重複出現在好幾支商品或很多頁面,那也可以用Shortcode,假設我們用模組做的輪播圖片Shortcode,然後我們希望有兩個頁面都要顯示這組輪播,於是編輯兩個頁面的網頁內容,貼上這組Shortcode(參考下圖)

不同頁面貼上相同Shortcode,可以顯示相同的功能或畫面

Wordpress Shortcode 短代碼範例

 

前台都可以顯示相同的輪播內容:

Wordpress_Shortcode 短代碼應用範例

 

結語:

每一個Shortcode都是工程師的心血,並不是真的程式只有一行,其實有千千百百甚至萬萬行,但為了讓大家使用方便,所以有Shortcode的方式讓使用者可以自行在網頁上放在想放的地方,這也是WordPress開發出來的好用地方之一.

對設計師來說,Shortcode也是相當好用的唷!進行網頁設計的時候,也可以相對省時,因為可以重複利用做好的排版或輪播圖等等~

 

如果有網站設計需求或WordPress客製化外掛模組,歡迎留言聯絡:諮詢表單

 

推薦文章:

WORDPRESS 5大好用套件與外掛

WooCommerce介紹-WP最好用的電商系統

決定用WordPress設計網站前需要理解的事項

scrollTop