Title: WP Foundation Shortcodes
Author: Adam Pery
Published: <strong>2015 年 9 月 20 日</strong>
Last modified: 2016 年 7 月 3 日

---

搜尋外掛

![](https://ps.w.org/wp-foundation-shortcodes/assets/banner-772x250.png?rev=1249595)

這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個
外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

![](https://ps.w.org/wp-foundation-shortcodes/assets/icon-256x256.png?rev=1249595)

# WP Foundation Shortcodes

 由 [Adam Pery](https://profiles.wordpress.org/adam1920/) 開發

[下載](https://downloads.wordpress.org/plugin/wp-foundation-shortcodes.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/wp-foundation-shortcodes/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/wp-foundation-shortcodes/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/wp-foundation-shortcodes/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/wp-foundation-shortcodes/#developers)

 [技術支援](https://wordpress.org/support/plugin/wp-foundation-shortcodes/)

## 外掛說明

WP Foundation Shortcodes Plugin makes your ZURB Foundation website to the most powerful
framework by styling your content with shortcodes.

[WP Foundation Shortcodes Demo](http://foundation.tadam.co.il/)

#### For best results use with Zurb Foundation 5 responsive theme

You can use ‘{}’ in every shortcode item, e.g. ‘[row {data-equalizer}]’, to get ‘
<div class=”row” data-equalizer>’.

#### Features:

 * Shortcodes are easy to use (first of all, make sure that the editing mode is 
   set to Visual)
 * No need to paste shortcode in editor
 * Add button control to TinyMCE editor
 * Select the shortcode you want to insert
 * Popup with choices of parameters
 * No additional JS or CSS files

All available shortcodes are conditionally divided into these groups:

 1.  Posts: posts grid, posts list, posts lightbox, posts cycle
 2.  Buttons: button, button groups, radio button group, split buttons, dropdown, button
     option group
 3.  Elements: label, blockquotes, icon, address, inline list, keystroke, horisontal
     rule, clear
 4.  Callouts & Prompts: alert box, panel, tooltip, banner, comments, service box, 
     categories, tags
 5.  Content: pricing table, progressbar, table, accordion, tabs, equalizer
 6.  Grid: grid, block grid
 7.  Widgets: google map, product card, product card with hover effects, social login
     buttons, pricing table recommended, pricing table animated
 8.  Media: orbit slider, silck slider, thumbnail, cliaring lightbox, video
 9.  Forms: switchers, range slider

The plugin contains a lot of shortcodes and widgets, we worked hard to make it easy
for you.

### Arbitrary section

Requires a theme built with Foundation 5.

### A brief Markdown Example

 1.  [label color=”secondary” corners=”round”]Round Secondary Label[/label]
 2.  [button color=”alert” size=”large” icon=”fa fa-exclamation-triangle”]Large Alert
     Button[/button]
 3.  [blockquote author=”Cicero” class=”my_custom_class”]At vero eos et accusamus et
     iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti 
     atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
     non provident, similique sunt in culpa qui officia deserunt mollitia animi, id
     est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio[/
     blockquote]
 4.  [icon icon=”fa-warning” size=”40px” color=”red” class=”my_custom_class”]Alert[/
     icon]
 5.  [range_slider direction=”horizontal” corners=”radius” class=”my_custom_class” 
     initial_value=”10″ start_value=”0″ end_value=”100″ step=”0″]
 6.  [address title=”Gaius Baltar” class=”my_custom_class”]123 Colonial Ave.
      Caprica
     City Caprica, 12345 g.baltar@example.com[/address]
 7.  [alert_box color=”alert” corners=”radius” class=”my_custom_class” icon=”fa-exclamation-
     triangle” close=”yes”]This is an alert with radius corners[/alert_box]
 8.  [dropdown button_text=”Down” button_size=”small” button_color=”alert” dropdown_autoclose
     =”yes” dropdown_open_on_hover=”no”]This is a link
      This is another Yet another[/
     dropdown]
 9.  [pricing_table title=”Standard” price=”$99.99″ description=”An awesome description”
     item_name_1=”1 Database” item_name_2=”5GB Storage” item_name_3=”20 Users” button_text
     =”Buy Now” link=”#” target=”_blank” class=”my_custom_class”]
 10. [progressbar value=”60″ color=”success” corners=”round” class=”my_custom_class”]
 11. [table caption=”Foundation table” colwidth=”20|100|50″ colalign=”left|left|center
     |left|right”]
      num|head1|head2|head3|head4 1|row1col1|row1col2|row1col3|100 2|
     row2col1|row2col2|row2col3|200 3|row3col1|row3col2|row3col3|300 4|row4col1|row4col2
     |row4col3|400 [/table]
 12. [accordions] [accordion title=”title1″ active=”yes”] tab content [/accordion] [
     accordion title=”title2″] another content tab
      [/accordion] [/accordions]
 13. [tabs direction=”horizontal” class=”my_custom_class”][tab title=’Title #1′] Tab
     1 content… [/tab] [tab title=’Title #2′] Tab 2 content… [/tab] [tab title=’Title#
     3′] Tab 3 content… [/tab][/tabs]
 14. [equalizers] [equalizer title=”Panel 1″] Panel 1 text … [/equalizer] [equalizer
     title=”Panel 2″] Panel 2 text … [/equalizer] [equalizer title=”Panel 3″] Panel
     3 a lot of text text text text… [/equalizer] [/equalizers]

[To full documentation](http://foundation.tadam.co.il/).

## 螢幕擷圖

 * [[
 * how it looks after installation
 * [[
 * shortcode pop-up in the TinyMCE Editor
 * [[
 * buttons example
 * [[
 * labels example
 * [[
 * range sliders example
 * [[
 * alerts example
 * [[
 * dropdowns example
 * [[
 * pricing table example
 * [[
 * progressbars example
 * [[
 * table example
 * [[
 * accordion example
 * [[
 * tabs example
 * [[
 * equalizer example

## 安裝方式

1.Upload:
 Unzip wp-foundation-shortcode.zip file, and upload ‘wp-foundation-shortcode’
folder to your plugins folder: /wp-content/plugins/

2.Activate:
 In the admin panel, click Plugins menu, active WP Foundation Shortcodes.

3.Use:
 Now you can see the new button in the TinyMCE Editor, use these button to
create great responsive pages/posts content. Pay attention, you need to use ‘Visual’
mode in TinyMCE Editor

1, 2, 3: You’re done!

## 常見問題集

  Can I use this if my theme isn’t built with Foundation 5?

Some elements will work if the theme is built with Foundation 4, but other than 
that, no. See [how to upgrade Foundation 4](http://foundation.zurb.com/docs/upgrading.html).

## 使用者評論

![](https://secure.gravatar.com/avatar/5fbc4a920a6f7fb0a0a54329037709b4ef231cad04aff6b04ea4ae8bee457afc?
s=60&d=retro&r=g)

### 󠀁[Awesome](https://wordpress.org/support/topic/awesom-13/)󠁿

 [nilahdad](https://profiles.wordpress.org/nilahdad/) 2018 年 4 月 18 日

Useful

![](https://secure.gravatar.com/avatar/208367cbe420b302278bb267df82cbd3876caee6e7b959bd85acbde5a621ddf8?
s=60&d=retro&r=g)

### 󠀁[Great plugin that does the job](https://wordpress.org/support/topic/great-plugin-that-does-the-job-2/)󠁿

 [davidlongftc](https://profiles.wordpress.org/davidlongftc/) 2018 年 2 月 20 日

Great plugin that is clear and simple to use. Some similar plugins are more visual
with icons but actually make it harder to find the item you are looking for. The
simple and clear text menus of this plugin make it quick and easy to get things 
done. Even our non-technical staff use it to add foundation elements to pages. It
also seems well maintained as we found others were horribly outdated. Good work 
keep it up!

![](https://secure.gravatar.com/avatar/f9d4502e9079e63dd1853135ee652fa945e09650825f19873f898f8a4db7a2ed?
s=60&d=retro&r=g)

### 󠀁[Its perfect!](https://wordpress.org/support/topic/its-perfect-26/)󠁿

 [rivet](https://profiles.wordpress.org/rivet/) 2017 年 3 月 31 日

I was looking for an easy table solution and this plugin in conjunction with a bit
of css works perfect! – Thanks

![](https://secure.gravatar.com/avatar/9ca10fff4ecce3f5bac480aa6e95c972c4bdcc1508eb351356294efc557b4149?
s=60&d=retro&r=g)

### 󠀁[Can't get it to work](https://wordpress.org/support/topic/cant-get-it-to-work-106/)󠁿

 [Kori Ashton](https://profiles.wordpress.org/webtegrity/) 2016 年 9 月 3 日

Was going to send this plugin out to over 12,000 viewers on our YT channel and can
NOT get it to work at all. None of the shortcodes work. Very bummed.

![](https://secure.gravatar.com/avatar/c109c9d0e771be74b1cb562db8ad336b1379b0b3df3e061683abd6c5a4126014?
s=60&d=retro&r=g)

### 󠀁[It's very functional](https://wordpress.org/support/topic/its-very-functional/)󠁿

 [gunberi](https://profiles.wordpress.org/gunberi/) 2016 年 9 月 3 日

Thanks for this very functional plugin.

![](https://secure.gravatar.com/avatar/5041ce218ba16e815e73c7f7cfbf9b2ea10a6b48ce911c907389389766018126?
s=60&d=retro&r=g)

### 󠀁[Just love it.](https://wordpress.org/support/topic/just-love-it-11/)󠁿

 [Skynet](https://profiles.wordpress.org/skynet2029/) 2016 年 9 月 3 日

Thanks to this plugin. 🙂

 [ 閱讀全部 6 則使用者評論 ](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/)

## 參與者及開發者

以下人員參與了開源軟體〈WP Foundation Shortcodes〉的開發相關工作。

參與者

 *   [ Adam Pery ](https://profiles.wordpress.org/adam1920/)

〈WP Foundation Shortcodes〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/wp-foundation-shortcodes/contributors)
為這個外掛做出的貢獻。

[將〈WP Foundation Shortcodes〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/wp-foundation-shortcodes)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/wp-foundation-shortcodes/)、
查看 [SVN 存放庫](https://plugins.svn.wordpress.org/wp-foundation-shortcodes/)，
或透過 [RSS](https://plugins.trac.wordpress.org/log/wp-foundation-shortcodes/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/wp-foundation-shortcodes/)。

## 變更記錄

#### 0.8.3

_Release Date – 03 July 2015_
 * Added option to switch off loading Font awesome*
Added option ‘free attributes’ for all shrortcode items * Font awesome CDN link 
updated to latest version

#### 0.7

_Release Date – 24 September 2015_
 *Bugs fixing

#### 0.6

_Release Date – 24 September 2015_
 * Allow shortcodes in widgets

#### 0.5.1

 * small design changes

#### 0.5

_Release Date – 18 September 2015_
 * Added ‘Posts Lightbox’ shortcode * Added ‘
Tags’ shortcode * Added ‘Categories’ shortcode * Added ‘Comments’ shortcode * Added‘
Banner’ shortcode * Added ‘Service Box’ shortcode * Added options in dashboard plugin
settings to enable/disable google map api and slick slider JS/CSS upload. It’s necessary
to avoid unnecessary scripts uploading * Font-awesome styles changed to CDN * Google
map api script changed to CDN * Slick slider script/styles changed to CDN * Added‘
Posts Cycle’ shortcode

#### 0.4

_Release Date – 10 September 2015_
 * Added ‘Posts Grid’ shortcode * Added ‘Posts
List’ shortcode

#### 0.3

_Release Date – 10 September 2015_
 * PHP Class structure changed * Added ‘Slick
Slider’ shortcode * Added ‘Clearing Lightbox’ shortcode * Admin menu page added *
Added ‘Button Groups’ shortcode * Added ‘Split Buttons’ shortcode * Added ‘Switch’
shortcode * Added ‘Inline List’ shortcode * Added ‘Link’ shortcode * Added ‘Panel’
shortcode * Added ‘Tooltip’ shortcode * Added ‘Hr’ shortcode * ‘Alert Box’ shortcode
improved, added types * Added ‘Product Card’ widget * Added ‘Product Card with hover
effects’ widget * ‘Progress’ shortcode improved, added colors * Added SCSS files
based on Compass * ‘Switch’ shortcode improved: added On & Off label * Added ‘Radio
Button Group’ shortcode * Added ‘Option Button Group’ shortcode * Added ‘Social 
Login Button’ shortcode

#### 0.2

_Release Date – 04 September 2015_
 * Fixed bug in ‘tabs’ shortcode * Fixed php 
notice messages * Documentation improved * Added ‘2 Columns Grid’ shortcode * Added‘
3 Columns Grid’ shortcode * Added ‘4 Columns Grid’ shortcode * Added ‘Blocks grid’
shortcode * Added ‘Google Map’ shortcode * Added ‘Video’ shortcode * Added ‘Orbit’
shortcode * Added ‘Thumbnail’ shortcode

#### 0.1

_Release Date – 01 September 2015_
 * first version

## 中繼資料

 *  版本 **0.8.5**
 *  最後更新 **10 年前**
 *  啟用安裝數 **100+**
 *  WordPress 版本需求 ** 4.0 或更新版本 **
 *  已測試相容的 WordPress 版本 **4.5.33**
 *  語言
 * [English (US)](https://wordpress.org/plugins/wp-foundation-shortcodes/) 及 [Russian](https://ru.wordpress.org/plugins/wp-foundation-shortcodes/).
 *  [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/wp-foundation-shortcodes)
 * 標籤
 * [Wordpress foundation Shortcode](https://tw.wordpress.org/plugins/tags/wordpress-foundation-shortcode/)
   [Wordpress Shortcodes](https://tw.wordpress.org/plugins/tags/wordpress-shortcodes/)
   [Wordpress zurb foundation](https://tw.wordpress.org/plugins/tags/wordpress-zurb-foundation/)
   [zurb foundation](https://tw.wordpress.org/plugins/tags/zurb-foundation/)
 *  [進階檢視](https://tw.wordpress.org/plugins/wp-foundation-shortcodes/advanced/)

## 評分

 4.3 星，滿分為 5 星

 *  [  5 個 5 星使用者評論     ](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/?filter=5)
 *  [  0 個 4 星使用者評論     ](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/?filter=4)
 *  [  0 個 3 星使用者評論     ](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/?filter=3)
 *  [  0 個 2 星使用者評論     ](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/?filter=2)
 *  [  1 個 1 星使用者評論     ](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/wp-foundation-shortcodes/reviews/)

## 參與者

 *   [ Adam Pery ](https://profiles.wordpress.org/adam1920/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/wp-foundation-shortcodes/)

## 贊助

想要支援這個外掛的發展嗎？

 [ 贊助這個外掛 ](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GX2LMF9946LEE)