內容簡介
這個外掛增加了一組 WordPress 短碼以及一個簡單的 TinyMCE 下拉式選單，可用於加入Bulma元件。
使用方法
在 WordPress 編輯器中使用 Bulma 下拉式選單最簡單，也可以手動輸入短碼。
欄位
欄位用於創建響應式網格：
[bulma-columns]
[bulma-column]
您的内容...
[/bulma-column]
[bulma-column]
您的内容...
[/bulma-column]
[/bulma-columns]
[bulma-column] 短碼接受一個 type 參數：
[bulma-column type="is-8"][/bulma-column]
由於 WordPress 短碼系統的限制，嵌套相同短碼將失效。如果要解決此問題，可以使用其他短碼以產生欄位：
// 將失效
[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]
// 能正常工作
[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]
可嵌套達五個層級 (column、column-1、column-2、column-3、column-4)。
按鈕
創建標記 <a href="#" class="button">Your Content</a>。
接受三個參數:
type – 接受類名 – 預設為 ‘is-primary’
link – 接受字符串 – 預設為 ‘#’
icon – 接受有效的font-awesome圖示名稱
例如：[bulma-button type="is-primary" link="www.example.com" icon="github"]Star on GitHub[/bulma-button]。
圖示
創建標記<span class="icon"><i class="fa fa-<icon name>></i></span>"。
接受兩個參數:
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]
