[WordPress] 外掛分享： Bulma Shortcodes

type – 接受類名 – 預設為 ‘is-primary’
icon – 接受有效的font-awesome圖示名稱

方塊

新增 Bulma 方塊元素。

接受一個參數 type，預設為非全寬度框，在 WordPress 中主要用於為項目(如照片)添加強調效果。如果將類型設置為全寬度，它將表現為正常的 Bulma 方塊。

例如：

// 非全寬度
[bulma-box]Your content...[/bulma-box]

// 全寬度
[bulma-box type="full-width"]Your Content...[/bulma-box]

通知

添加 Bulma 通知元素。

接受一個參數 type。

例如： [bulma-notification type="is-primary"]Alert[/bulma-notification]

卡片

加入...。

原文外掛簡介

This plugin adds a collection of WordPress shortcodes for Bulma components as well as a simple TinyMCE dropdown to add them.
Usage
The easiest way to add shortcodes is through the Bulma dropdown in the WordPress editor. Alternatively, you can manually type out the shortcodes.
Columns
Columns are used to create a responsive grid:
[bulma-columns]
[bulma-column]
Your content...
[/bulma-column]
[bulma-column]
Your content...
[/bulma-column]
[/bulma-columns]

The [bulma-column] shortcode accepts a type argument:
[bulma-column type="is-8"][/bulma-column]

Due to limitations within the WordPress shortcode system, nesting identical shortcodes will break. To work around this, there are additional shortcodes you can use that will also produce columns:
// Will break
[bulma-columns]
[bulma-column]
[bulma-columns]
[bulma-column][/bulma-column]
[bulma-column][/bulma-column]
[/bulma-columns]
[/bulma-column]
[bulma-column]
[bulma-columns]
[bulma-column][/bulma-column]
[bulma-column][/bulma-column]
[/bulma-columns]
[/bulma-column]
[/bulma-columns]

// Will Work
[bulma-columns]
[bulma-column]
[bulma-columns-1]
[bulma-column-1][/bulma-column-1]
[bulma-column-1][/bulma-column-1]
[/bulma-columns-1]
[/bulma-column]
[bulma-column]
[bulma-columns-1]
[bulma-column-1][/bulma-column-1]
[bulma-column-1][/bulma-column-1]
[/bulma-columns-1]
[/bulma-column]
[/bulma-columns]

You can nest up to five levels deep with this system (column, column-1, column-2, column-3, column-4).
Button
Creates the tag Your Content.
Accepts three arguments:

type – Accepts class names – defaults to ‘is-primary’
link – Accepts strings – defaults to ‘#’
icon – Accepts valid font-awesome icon names

Ex: [bulma-button type="is-primary" link="www.example.com" icon="github"]Star on GitHub[/bulma-button].
Icon
Creates the tag Accepts two arguments:

type – Accepts class names – defaults to ‘is-primary’
icon – Accepts valid font-awesome icon names

Box
Adds a Bulma box element.
Accepts one argument, type. Defaults to NOT full-width box as this element in WordPress is mostly helpful for adding emphasis to an item like a photo. If type is set to full-width, it’ll behave like a normal Bulma box.
Ex:
// NOT full-width
[bulma-box]Your content...[/bulma-box]

// Full-width
[bulma-box type="full-width"]Your Content...[/bulma-box]

Notification
Adds a Bulma notification element.
Accepts one argument, type.
Ex: [bulma-notification type="is-primary"]Alert[/bulma-notification]
Card
Creates a Bulma Card element. This shortcode has several child codes:
[bulma-card]
[bulma-card-header][/culma-card-header]
[bulma-card-content][/bulma-card-content]
[bulma-card-footer][/bulma-card-footer]
[/bulma-card]

None of the shortcodes accept arguments.
[bulma-card-footer] can be given multiple footer items:

[bulma-card-footer]Item1|Item2|Item3[/bulma-card-footer]

// Will generate:

Menu
Creates a Bulma menu.
Ex:
[bulma-menu]
[bulma-menu-label]Label[/bulma-menu-label]
[bulma-menu-list]Item1|Item2[/bulma-menu-list]
[/bulma-menu]

各版本下載點

• 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
• 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Bulma Shortcodes」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0 | trunk |

延伸相關外掛（你可能也想知道）

• Column Shortcodes 》此外掛提供簡單易用的短碼，在您的文章或頁面中輕鬆創建欄位。有時候，您只需要將網頁切成不同的欄位。使用此外掛，您只需選擇一個欄位的短碼，便可將欄位加...。
• Sidebar Widgets by CodeLights 》❗ 很抱歉，由於 SiteOrigin 的 widgets API 完全更改，CodeLights 不再支援 SiteOrigin Page Builder 的原生使用。解決方案：您仍然可以在純文字編輯器中創...。
• Shortcodes by Angie Makes 》Shortcodes by Angie Makes 外掛為您的 WordPress 主題新增一系列易於使用的短碼，這些短碼與 Angie Makes WordPress 主題 完美搭配。, 範例, 請到此查看這些...。
• Apollo13 Framework Extensions 》Apollo13 Framework Extensions 為建立在 Apollo13 Framework 上的主題增加了一些功能。這些功能包括：, , 設計匯入器, 基於 Apollo13 Framework 功能的短代...。
• ND Shortcodes 》預覽中的一些元件, 該外掛在你的頁面建構器（Elementor 或 WP Bakery Page Builder）中添加了一些有用的元件，可以非常容易地與你自己的主題集成。。
• Meks Flexible Shortcodes 》Meks Shortcodes 是一個外掛，可以在文章/頁面內的內容中加入一些漂亮的元素。您可以透過使用者介面中的短碼產生器面板快速插入所有元素。對於每個短碼標籤，...。
• Futurio Extra 》Futurio Extra 提供額外功能和選項給 Futurio 主題使用。, 該外掛需要免費的 WP 主題 Futurio 安裝才能使用。, Futurio Extra 帶來了新的小工具，可供 Elemen...。
• WP Shortcode by MyThemeShop 》WP Shortcode 讓使用者只需點擊一下，即可在 WordPress 增加性感的按鈕、警告提示、欄位佈局等各式各樣的選項。這款高級插件曾經只向MyThemeShop的高級會員提...。
• WP Date and Time Shortcode 》顯示當前、過去和未來日期或時間的簡碼。在您的文章和頁面中顯示今年、上一年、下一年、月份、日期等等。, 這可能是您網站所需的最後一個日期和時間簡碼插件...。
• WooCommerce Shortcodes 》這個外掛提供一個 TinyMCE 的下拉式按鈕，讓您可以使用所有 WooCommerce 短碼。, 請參閱 WooCommerce 包含的短碼清單。, 從 WooCommerce 2.2 開始，這個 Tiny...。
• WooCommerce Colors 》這款外掛在自訂選單上新增了一個名為 WooCommerce 的區塊，讓您輕鬆改變按鈕和 WooCommerce 元素的顏色。, 從 WooCommerce 2.3 開始，前端風格選項不再是 Woo...。
• Weaver Xtreme Theme Support 》這是 Weaver Xtreme 主題的支援外掛。此外掛提供了一系列有用的簡碼和小工具，旨在補充 Weaver Xtreme 主題。這些簡碼是根據成千上萬的 Weaver Xtreme 和先前...。
• TemplatesNext ToolKit 》這個外掛提供了許多必要的元素，如簡歷、團隊成員、推薦評價、輪播、WooCommerce 產品清單等等，使用短代碼、SiteOrigin Page Builder 或 Elementor widget ...。
• TCD Google Maps 》TCD Google Maps 提供簡單的短代碼以顯示 Google 地圖。您可以將短代碼放置於文章、頁面或文字小工具中，以顯示各種風格的 Google 地圖。, 多樣的設計, 方便...。
• Shortcake (Shortcode UI) 》Shortcake 可與 add_shortcode 搭配使用，提供使用者友善的介面來將 shortcode 加入文章中，並在內容編輯器中查看和編輯。, 安裝外掛後，您需要註冊 Shortcod...。