Title: JKL Pricing Tables Author: jekkilekki Published: 2015 年 6 月 4 日 Last modified: 2015 年 9 月 18 日 --- 搜索插件 ![](https://ps.w.org/jkl-pricing-tables/assets/banner-772x250.jpg?rev=1174062) **该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起 使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。 ![](https://ps.w.org/jkl-pricing-tables/assets/icon-256x256.jpg?rev=1174062) # JKL Pricing Tables 作者：[jekkilekki](https://profiles.wordpress.org/jekkilekki/) [下载](https://downloads.wordpress.org/plugin/jkl-pricing-tables.1.1.1.zip) * [详情](https://cn.wordpress.org/plugins/jkl-pricing-tables/#description) * [评价](https://cn.wordpress.org/plugins/jkl-pricing-tables/#reviews) * [安装](https://cn.wordpress.org/plugins/jkl-pricing-tables/#installation) * [开发进展](https://cn.wordpress.org/plugins/jkl-pricing-tables/#developers) [支持](https://wordpress.org/support/plugin/jkl-pricing-tables/) ## 描述 I’ve wanted to add SIMPLE Pricing Tables to my website for a while but many of the plugins I tried out were either Freemium (requiring me to purchase the full version in order to unlock the full functionality) or more complicated than I actually wanted. THIS plugin is exceptionally simple. 1. Step 1: Type the shortcode tags `[jkl-pricing-table] ... [/jkl-pricing-table]` 2. Step 2: Add an `
    ` ordered list for your Pricing Table 3. Step 3: Tweak until it looks right Requires WordPress 3.5 and PHP 5. #### Special Features * Styled like [Zurb Foundation 5 Pricing Tables](http://foundation.zurb.com/docs/components/pricing_tables.html) * Utilizes CSS3 for interesting transition effects (like scaling) #### How the Plugin works 1. The shortcode expects an ordered list of ordered lists 2. The primary ordered list is the names of your Pricing Options (Basic, Business, etc) 3. The secondary ordered lists are the content within your Pricing Options 4. Using jQuery, the plugin finds each element within the ordered lists and adds specific CSS classes to them based on their order (see below) 5. The SECOND Pricing Option is always set to be “popped out” by default and when another table is not hovered over #### Translations * English (EN) – default * Korean (KO) – upcoming If you want to help translate the plugin into your language, please have a look at the `.pot` file which contains all definitions and may be used with a [gettext] editor. If you have created your own language pack, or have an update of an existing one, you can send your [gettext .po or .mo file] to me so that I can bundle it in the plugin. #### Contact Me If you have questions about, problems with, or suggestions for improving this plugin, please let me know at the [WordPress.org support forums](https://wordpress.org/support/plugin/jkl-pricing-tables) Want updates about my other WordPress plugins, themes, or tutorials? Follow me [@jekkilekki](http://twitter.com/jekkilekki) #### Acknowledgements This plugin uses: * [jQuery](http://jquery.com/) licensed under MIT License or GNU General Public License (GPL) Version 2 #### License This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA ### How To #### How To Use the Plugin 1. Type the shortcode tags 2. Create an ordered list `
      ` within the tags 3. Type the heading for your first table in the first `
        ` item and hit return 4. TAB the `
          ` in to add the remainder of your content for the first table 5. Un-indent the `
            ` to write the heading of your second table 6. TAB in for the remainder of the content in your second table 7. Rinse, repeat for multiple tables (supports up to 5 in a row) #### Example of Usage ``` [jkl-pricing-table]
            1. Basic
              1. $150
              2. Logo only
              3. Content 1
              4. Content 2
              5. Deliverables
              6. Select Now
            2. Business
              1. $250
              2. Logo + Business Cards
              3. Content 1
              4. Content 2
              5. Deliverables
              6. Select Now
            [/jkl-pricing-table] ``` #### Special CSS Classes and How to Style the Plugin The plugin uses jQuery to dynamically add the following CSS classes to the ordered list elements. Use these classes in your Custom CSS if you want to change things. 1. `.pricing-table` = Each first level ordered list item (`
            1. `) 2. `.price` = The FIRST second level list item (`
                1. `) 3. `.description` = The SECOND second level list item 4. List items after this have no special styling until the end 5. `.deliverables` = The SECOND-TO-LAST second level list item 6. `.cta-button` (Call To Action button) = The LAST second level list item (it should be an `` link) 7. `.button` = The `` link in the `.cta-button` list item When applying custom CSS to change the design of your plugin, please reference these classes as `.pricing-table .class` #### Example of CSS Classes after jQuery assigns them ``` [jkl-pricing-table]
                  1. Basic
                    1. $150
                    2. Logo only
                    3. Content 1
                    4. Content 2
                    5. Deliverables
                    6. Select Now
                  2. Business
                    1. $250
                    2. Logo + Business Cards
                    3. Content 1
                    4. Content 2
                    5. Deliverables
                    6. Select Now
                  [/jkl-pricing-table] ``` ## 屏幕截图 [⌊The default view of the Pricing Tables⌉⌊The default view of the Pricing Tables⌉[ The default view of the Pricing Tables [⌊Hovering over the first Table⌉⌊Hovering over the first Table⌉[ Hovering over the first Table [[ [[ ## 安装 #### Automatic installation 1. Log into your WordPress admin 2. Go to `Plugins -> Add New` 3. Search for `JKL Pricing Tables` 4. Click `Install Now` 5. Activate the Plugin #### Manual installation 1. Download the Plugin 2. Extract the contents of the .ZIP file 3. Upload the contents of the `jkl-pricing-tables` directory to your `/wp-content/ plugins` folder of your WordPress installation 4. Activate the Plugin from the `Plugins` page #### Documentation Full documentation of the Plugin and its uses can (later) be found at its [GitHub page](https://github.com/jekkilekki/plugin-jkl-pricing-tables) ## 常见问题 Tips As a general rule, it is always best to keep your WordPress installation and all Themes and Plugins fully updated in order to avoid problems with this or any other Themes or Plugins. I regularly update my site and test my Plugins and Themes with the latest version of WordPress. How can I change the style of the plugin to match my website? Each element contains its own unique CSS identifier under `.pricing-tables`, allowing you to hook into those in your own Custom CSS stylesheet. How can I add more tables? Simply add another `
                    ` item. Why aren’t the table items the same size? Try to keep the content of each of your `
                  1. ` elements to approximately the same length in order to keep the size of the pricing tables consistent. i.e. if one of your `
                  2. ` elements is 2 lines long, try to make EVERY table at the same `
                  3. ` element also be 2 lines long. (See some examples at my documentation site – upcoming). ## 评价 此插件暂无评价。 ## 贡献者及开发者 「JKL Pricing Tables」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ jekkilekki ](https://profiles.wordpress.org/jekkilekki/) [帮助将「JKL Pricing Tables」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/jkl-pricing-tables) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/jkl-pricing-tables/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/jkl-pricing-tables/)，或通过[RSS](https://plugins.trac.wordpress.org/log/jkl-pricing-tables/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/jkl-pricing-tables/)。 ## 更新日志 #### 1.1.1 * Fixes pricing-table list items margin CSS code #### 1.1 * Makes tables responsive on window resize * Fixes some CSS code #### 1.0 * Initial release ## 额外信息 * 版本 **1.1.1** * 最后更新：**11 年前** * 活跃安装数量 **10+** * WordPress 版本 ** 3.0 或更高版本 ** * 已测试的最高版本为 **4.2.39** * 语言 * [English (US)](https://wordpress.org/plugins/jkl-pricing-tables/) * 标签 * [content](https://cn.wordpress.org/plugins/tags/content/)[jquery](https://cn.wordpress.org/plugins/tags/jquery/) [pricing](https://cn.wordpress.org/plugins/tags/pricing/)[shortcode](https://cn.wordpress.org/plugins/tags/shortcode/) [tables](https://cn.wordpress.org/plugins/tags/tables/) * [高级视图](https://cn.wordpress.org/plugins/jkl-pricing-tables/advanced/) ## 评级 尚未提交反馈。 [您的评价](https://wordpress.org/support/plugin/jkl-pricing-tables/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/jkl-pricing-tables/reviews/) ## 贡献者 * [ jekkilekki ](https://profiles.wordpress.org/jekkilekki/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/jkl-pricing-tables/) ## 捐助 您愿意支持这个插件的发展吗? [ 捐助此插件 ](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=567MWDR76KHLU)