WordPress Shortcode
WordPress Shortcode

WordPress Shortcode/短代碼/簡碼是什麼?如何使用短代碼?

從 WordPress 2.5 版開始, WordPress 支持所謂的 Shortcodes 短代碼,引入它們是為了創建要在文章內容中使用的巨集指令,是一個相當方便且保持內容簡潔的代碼工具。
目錄

什麼是 WordPress Shortcode/短代碼/簡碼?

display posts wordpress shortcode
WordPress Shortcode/短代碼/簡碼

WordPress Shortcode 中文稱作-短代碼或簡碼,指的是一些用中括號 [ ] 包住的語法(例如:[rab_library_test]),程式會根據這些短代碼,顯示該短代碼定義的內容,所以 Shortcode 可以很方便的為文章、頁面或產品增加功能。

現在的 WordPress 外掛很多都提供短代碼,讓使用者可以簡單地將所需功能或視覺呈現在任何地方,像是 WodrPress 的文章、頁面編輯區也可以貼上短代碼,這些短代碼也可以重複使用。

為了安全起見,禁止在 WordPress 內容中運行 PHP;為了允許與內容進行動態互動,在 WordPress 2.5 版中提供了簡碼。短代碼是可用於與內容進行動態互動的巨集指令。例如,根據發佈到文章中的圖像創建圖集或展現影片。

每一個 Shortcode 都是工程師的心血,並不是真的程式只有一行,其實背後的程式碼可能相當複雜,但為了讓大家使用方便,所以有 Shortcode 的方式讓使用者可以自行在網頁上放在想放的地方,這也是WordPress開發出來的好用地方之一。

為什麼要使用短代碼/簡碼?

短代碼/簡碼是保持內容整潔和語義的一種有價值的方法,同時允許最終用戶某種方式以編程方式更改其內容的表示方式。

當最終用戶使用短代碼將圖集添加到其文章中時,他們使用的數據最少,以指示應該如何顯示圖集。

好處:

  • 沒有將標記添加到文章內容中,這意味著可以輕鬆地在運行中或以後的狀態下操縱標記和樣式。
  • 簡碼也可以接受參數,從而使用戶可以根據實例修改簡碼的行為。

有關WordPress短代碼(WordPress Shortcode)及其用法的示例,可以參考WordPress.com短代碼,儘管其中一些精選的短代碼是WordPress.com獨有的。

圖庫的短代碼如下所示:

[gallery]

短代碼也可以與其他屬性一起使用,如以下示例所示:

[gallery ID =“ 123” size =“ medium”]

這兩個示例都將顯示一個圖庫,當為其編寫HTML標記並將其與上傳的圖片保持同步時,將很難維護該圖庫。通過使用簡碼,圖庫的標記將被動態且自動地創建。

在後台使用 WordPress Shortcode 短代碼

在文章、頁面編輯後台點選方塊+號,選擇短代碼,會出現短代碼區塊再將欲使用的短代碼貼上去即可。

短代碼
短代碼區塊

WordPress 內置以下短代碼(點擊連結可以查看官方詳細介紹及使用方法):

[caption] –使您可以在內容周圍加上字幕

[gallery] –允許您顯示圖像庫

[audio] –允許您嵌入和播放音頻檔案

[video] –允許您嵌入和播放影片檔案

[playlist] –允許您顯示音頻或影片檔案的集合

[embed] –允許您包裝嵌入的物品

下面示範以 [ audio ] 短代碼插入音訊,使用以下短代碼。

[audio src="https://rab.tw/wp-content/uploads/2021/04/Instant-Crush-Corbyn-Kites.mp3"]

短代碼參數

以下為幾個常見的基本參數、屬性,可以簡易設定短代碼:

  • id:唯一的 HTML ID ,可以在你的CSS裡進行相關修改。(無預設)
  • class:可以在CSS中使用的自定義類。(無預設)
  • src:來源,圖片、音訊或影片檔案的位置。
  • align:對齊方式。
  • width:寬度。在中標題的寬度(以像素為單位)是必需的,並且必須具有大於或等於1的值。如果未提供,則將不進行字幕處理,並且字幕內容將通過。

Elementor 短代碼

許多WordPress外掛都有提供短代碼,Elementor 也有。

複製短碼的內容,就可以將 Elementor的內容呈現在文章或頁面中。

短代碼 1
elementor 短碼

以下以短代碼示範 Elementor popup按鈕:

資料來源:ShortcodeShortcode Common APIsWordPress.org Shortcode

延伸閱讀:

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3
Related Post
最新文章
WP Engine 與 WordPress 爭議:開源社群與商業利益的對立

WP Engine 與 WordPress 最近因品牌混淆和商標使用費問題爆發了激烈的法律糾紛。這場爭議不僅揭示了商業利益與開源價值之間的緊張關係,還引發了 WordPress 社群內部的激烈討論。隨著雙方爭執的升級,這場糾紛可能會對整個開源軟體市場產生深遠影響,特別是關於商業化模式的未來發展。

google site:
Google 搜尋 site: 命令教學,精準搜尋特定網站

Google搜尋功能強大,但你知道如何限定搜尋範圍嗎?透過「site:」指令,你可以在指定的網站內進行搜尋,快速找到所需的資訊。這篇文章將帶你深入了解「site:」指令的用法,並提供實用的搜尋範例。

圖片優化、圖片格式
圖片優化新選擇!WebP、AVIF如何提升網站速度

網站圖片佔據了網頁的一大部分,圖片優化是提升網站速度的關鍵。傳統的 JPEG 和 PNG 格式雖然常見,但 WebP 和 AVIF 這兩種新興的圖片格式,在壓縮率和畫質上都有更出色的表現。本文將詳細介紹 WebP 和 AVIF 的特性、優缺點,並提供實用的優化技巧,幫助您打造一個快速、高效的網站。

Selected Post
精選文章
SSL憑證
SSL憑證/https是什麼?對網站SEO排名有很大的影響?

SSL(Secure Sockets Layer),也就是安全資料傳輸層憑證,是網頁伺服器與瀏覽器之間的加密通信安全技術,確保您的網站資料不容易被攔截。但它對於網站的SEO又有什麼影響呢?我們將解釋這個重要的議題,讓您更了解SSL憑證的作用。

什麼是VPS主機
VPS主機是什麼?網站效能升級的最佳選擇!

現今,網站及應用程式的需求不斷增加。如果你不是一個專業的網站開發人員,你可能會對虛擬專屬伺服器(VPS)主機一知半解。本文將向你說明VPS主機及其優勢,以及什麼是主機代管,讓你更容易理解並做出明智的選擇。

iconfinder_handshake_business_success_agreement_people_hand

聯絡我們