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

MDL Shortcodes

外掛說明

Note: The plugin has been adopted and is under development. A lighter version is now available and more releases will be pushed in the near future. Stay tuned and report bugs or code inconsistencies.

*Note:** A new version is coming with fully compatible editor blocks, design patterns, a reusable block library and a UI kit.

Read more on getButterfly.

Acknowledgements

Special thanks to:

螢幕擷圖

  • MDL Shortcodes settings in the WordPress Customizer. Get there by clicking the "MDL Shortcodes Options" wp-admin menu item (next to "Appearance" menu item).

  • Shortcodes render in the wp-admin Visual Editor when Shortcake (Shortcode UI) plugin is active.

  • With Shortcake (Shortcode UI) plugin activated you'll be able to click "Add Media" then "Insert Post Element" then select one of the shortcodes to customize.

  • Example Shortcake (Shortcode UI) interface for building a MDL Button shortcode.

  • Front-end example: MDL Icon, MDL Badge, MDL Button

  • Front-end example: MDL Card pulling in post info (blurred out) and MDL Card with manually-entered text.

  • Front-end example: MDL Grids and MDL Cells

  • Front-end example: MDL Tabs

  • Front-end example: MDL Menu

  • Front-end example: MDL Tooltip

安裝方式

  1. Upload to your plugins folder, usually wp-content/plugins/
  2. Activate the plugin on the plugins screen.
  3. Configure the plugin from Settings -> MDL Shortcodes (coming soon).

常見問題集

What shortcodes are available?

  • mdl-badge
  • mdl-button
  • mdl-card
  • mdl-cell
    • These do the same but exist so they can be nested without closing/breaking parent shorcodes:
    • mdl-cell-a
    • mdl-cell-b
    • mdl-cell-c
    • mdl-cell-d
    • mdl-cell-e
    • mdl-cell-f
    • mdl-cell-g
    • mdl-cell-h
    • mdl-cell-i
    • mdl-cell-j
    • mdl-cell-k
    • mdl-cell-l
    • mdl-cell-m
    • mdl-cell-n
    • mdl-cell-o
    • mdl-cell-p
    • mdl-cell-q
    • mdl-cell-r
    • mdl-cell-s
    • mdl-cell-t
    • mdl-cell-u
    • mdl-cell-v
    • mdl-cell-w
    • mdl-cell-x
    • mdl-cell-y
    • mdl-cell-z
  • mdl-grid (no UI)
    • These do the same but exist so they can be nested without closing/breaking parent shorcodes:
    • mdl-grid-a
    • mdl-grid-b
    • mdl-grid-c
    • mdl-grid-d
    • mdl-grid-e
    • mdl-grid-f
    • mdl-grid-g
    • mdl-grid-h
    • mdl-grid-i
    • mdl-grid-j
    • mdl-grid-k
    • mdl-grid-l
    • mdl-grid-m
    • mdl-grid-n
    • mdl-grid-o
    • mdl-grid-p
    • mdl-grid-q
    • mdl-grid-r
    • mdl-grid-s
    • mdl-grid-t
    • mdl-grid-u
    • mdl-grid-v
    • mdl-grid-w
    • mdl-grid-x
    • mdl-grid-y
    • mdl-grid-z
  • mdl-icon
  • mdl-menu
  • mdl-nav (no UI)
  • mdl-tab-group (no UI)
  • mdl-tab
  • mdl-tooltip

What are some shortcode examples?

When you install and activate the MDL Shortcodes plugin, a new Page will be created. It will be titled “MDL Shortcodes Plugin Demo Examples” and is only a Draft, not Published. You can click in to edit this page; go to the Text Editor (not Visual Editor) to see the shortcodes in use. Note that this will be the page you preview when clicking the “MDL Shortcodes Options” wp-admin menu link to pick your CSS colors.

For universal reference, here are some shortcode examples:

  • MDL Icon with custom color and background color: [mdl-icon icon="router" color="mdl-color-text--pink" bgcolor="mdl-color--black" class="hello special"]
  • MDL Badge: [mdl-badge badgetext="Followers" data="74"]
  • MDL Button: [mdl-button type="fab" icon="flip_to_front" url="http://www.getmdl.io/components/index.html#buttons-section" target="_blank"]
  • MDL Card pulling in a single Post’s info and overriding the excerpt text: [mdl-card postid="382" menu="info" menulink="http://www.getmdl.io/components/index.html#cards-section" menutarget="_blank" mediaplacement="mediaarea" supporting="Overriding excerpt text here... that is, if it had an excerpt." actionstarget="_blank" shadow="2"]
  • MDL Card with manual/custom content: [mdl-card title="Custom Title Text Here" menu="info" menulink="http://www.getmdl.io/components/index.html#cards-section" menutarget="_blank" supporting="Supporting text here." actions="An MDL Card" actionsicon="event" shadow="2"]
  • MDL Grid with MDL Cell 8 + MDL Cell 4: [mdl-grid][mdl-cell size=8]something here that will be 8 columns wide[/mdl-cell][mdl-cell]something here that will be 4 columns wide, since 4 is the default size[/mdl-cell][/mdl-grid]
  • MDL Tabs: [mdl-tab-group][mdl-tab title="Starks" active="true"]content here[/mdl-tab][mdl-tab title="Lannisters"]content here[/mdl-tab][/mdl-tab-group]
  • MDL Menu: [mdl-menu nav="37"]
  • MDL Tooltip: [mdl-tooltip text="XML"]eXtensible Markup Language[/mdl-tooltip]

Don’t forget most of these shortcodes have a user interface (UI) to make it easy to create them (so you don’t have to manually enter all that shortcode garbly-gook).

These components will be styled as seen at http://www.getmdl.io/components/ unless customized.

Does MDL Shortcodes work with my theme?

The styling of all these components is essentially self-contained. Due to the nature of implementing the shortcodes (they require the Icon Font, CSS, and JS files to be loaded), this plugin can feel like it “takes over” your theme’s styling. In summary, yes, it should WORK with your theme (not cause PHP or other errors), but it may not LOOK GREAT with your theme (although that doesn’t mean it can’t with some tweaks).

How can I override the Roboto font being used everywhere?

This comes from the MDL stylesheet (CSS). It can be easily overridden via Easy Google Fonts.

Can I use my own version of the CSS (e.g. Sass)?

Yup. There are a few filters for that.

Why does this plugin add the MDL styling to the wp-admin area?

In order to render shortcode previews in the TinyMCE Visual Editor, the 3 MDL files are loaded whenever there’s a TinyMCE Visual Editor present. This obviously happens on Page/Post Editing screens, but it can also happen elsewhere in wp-admin. It shouldn’t be causing any issues other than styling inconsistencies among wp-admin screens.

使用者評論

2016 年 9 月 3 日
Exactly what i needed and was looking since long time,i am very happy 🙂 , thanks alot to the developer, one think if u could help me that will be great. That is "how to set (decrese actually) MDL card size when having separte image placement ". Even if image size is decreased the height remains the same. please tell me Hiw can i achieve that in custom CSS 🙂 thanks
閱讀全部 1 則使用者評論

參與者及開發者

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

參與者

將 MDL Shortcodes 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.0.5

  • UPDATE: Updated WordPress compatibility
  • UPDATE: Updated required PHP version

1.0.4

  • UPDATE: Updated plugin tags
  • UPDATE: Updated changelog
  • UPDATE: Updated readme.txt (in progress)
  • UPDATE: Removed demo page
  • UPDATE: Removed plugin settings page (based on Customizer)
  • UPDATE: Refactoring of several classes
  • UPDATE: Removed TGM Plugin Activation dependency
  • UPDATE: Removed Shortcake UI dependency (no shortcode builder available)
  • UPDATE: Prepared plugin for next big release with user options, help, documentation and shortcode builder
  • UPDATE: Updated WordPress compatibility
  • UPDATE: Updated required PHP version
  • UPDATE: Removed included language file and prepared the plugin for native internationalisation (i18n)

1.0.3

  • Move TGM Plugin Activation file to ‘inc’ directory to avoid it showing up as a separate plugin in site’s list of plugins

1.0.2

  • Updated to load MDL Version 1.0.6

1.0.1

  • Updated to load MDL Version 1.0.5 instead of 1.0.4

1.0

  • Initially uploaded to WordPress.org on September 14, 2015