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

Snippy

外掛說明

Use Snippy to quickly create your own custom shortcodes.

A Snippy shortcode is built by combining bits. A bit can be a file, like a Stylesheet or a Script, or a piece of code, like HTML, CSS or JavaScript.

The “code” bits can contain placeholders, which are automatically made accessible as shortcode attributes.

Time for a quick example.

Let’s create a shortcode to embed YouTube videos. We’ll add an HTML bit and set the it’s value to the YouTube embed iframe.

<iframe src="https://youtube/embed/JZYYJY4yoK4"/>

Now to make this bit a bit more flexible we will replace the YouTube video id with a placeholder value {{id}}.

<iframe src="https://youtube/embed/{{id}}"/>

Yay! We’ve finished our first bit!

Now we can create a new Snippy shortcode and add the YouTube iFrame HTML bit. After saving the shortcode we can use our new and shiny YouTube shortcode in the text editor.

[youtube id=JZYYJY4yoK4]

Ready for more?

The below 3 minute YouTube video shows how you can use Snippy to turn a jQuery plugin into a WordPress plugin.

螢幕擷圖

  • Creating an HTML bit containing a YouTube iframe snippet and setting the {{id}} placeholder.
  • Creating a [youtube] shortcode that makes use of the YouTube iframe snippet.
  • Adding the shortcode to the page and setting a YouTube video id.

安裝方式

  1. Download the zip file.
  2. Log into WordPress, hover over Plugins and click Add new
  3. Click on the Upload Plugin button.
  4. Select the zip file you downloaded.
  5. Click Install Plugin.
  6. Click Activate.
  7. Navigate to the ‘Snippy’ menu on the left and setup your first shortcode.

常見問題集

Can I use JavaScript or CSS files instead of HTML

Yes, you can select JS and CSS files to be added to a bit, Snippy will automatically load the files when the shortcode is used on a page.

Please note that your server might prevent uploading files with a .js or .css extension. If that’s the case you have to alter the server security settings to allow uploading of these files.

How do I define placeholders

You can define placeholders in bits by wrapping text in brackets like this: {{placeholder}}.

Suppose you want to create a placeholder for a YouTube video. You’d replace the YouTube video id with {{id}}.

<iframe src="https://youtube/embed/{{id}}"/>

Now the attribute id is available in any shortcode that uses the YouTube HTML bit.

[youtube id=JZYYJY4yoK4]
How do I set a placeholder default value

Placeholder default values can be set by following the placeholder name with a semicolon and then the default value.

{{name:John Doe}}
Which default placeholders can I use

The following list of placeholders have a special function:

  • {{content}} is always replaced with the content wrapped by your shortcode.
  • {{date_today}} is replaced with an ISO8601 representation of today’s date.
  • {{date_tomorrow}} is replaced with an ISO8601 representation of today’s date.
  • {{unique_id}} is replaced with a uniquely generated id.
  • {{shortcode_id}} is replaced with the id of the current shortcode.
  • {{bit_id}} is replaced with the id of the current bit.
  • {{page_id}} is replaced with the current page id.
  • {{page_relative_url}} relative url to the current page.
  • {{page_absolute_url}} absolute url to the current page (includes the domain).
  • {{theme}} current theme name.
  • {{theme_root_uri}} theme directory URI.
  • {{template_directory_uri}} current theme directory URI.
  • {{admin_url}} current admin url.
  • {{nonce_field:action,name}} generate a nonce field.

使用者評論

2017 年 11 月 29 日 1 則留言
Worked fine with me with some explanation from Pqina. Easy flow, easy use when you have your files ready!
2017 年 11 月 18 日 1 則留言
Dear Rik, Thanks for this plugin! Is it possible for you to make a basic video to explain, for example, changing colors of buttons on a page using this plugin? I see a lot of potential, but only have a basic knowledge of HTML, CSS, and JS. Regards
2017 年 10 月 2 日 1 則留言
This is by far the most amazing plugin I've found for wordpress. As someone who makes custom themes, I want to provide the ability to organize elements in wp-admin without all of the bloat of Visual Composer or similar. I can organize all of the elements/fluid-stripes a user needs (call to action, faq, contact information, etc) and then can organize that information in wp-admin versus in static page-slug.php pages. This is exactly what I have been looking for for months now, and I'm so excited to have finally found it.
2017 年 7 月 30 日 1 則留言
Great little tool, highly recommended. Even wrote a little post about it too https://www.sitecreate.io/want-add-custom-css-js-wordpress-pages-use-snippy/
閱讀全部 5 則使用者評論

參與者及開發者

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

參與者

將〈Snippy〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

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

變更記錄

1.4.1

  • Test with WordPress 5.3

1.4.0

  • Add {{admin_url}} and {{nonce_field}} placeholders.

1.3.5

  • Fixed problem where snippy shortcode menu was rendered before doctype

1.3.4

  • Fixed problem where paging would not work

1.3.3

  • Tested with WordPress 5.0.0

1.3.0

  • When using multiple placeholders with the same name, they will only show up once
  • Add bit_id and shortcode_id placeholders

1.2.0

  • HTML bits can now contain shortcodes
  • Add more placeholders

1.1.1

  • Fix problem where shortcode and bits tables would not show paging control

1.1.0

  • Add “local” or “remote” resource bit which makes possible the option to include CDN resources.
  • Add a starter set of dynamic placeholders
  • Only admin can now edit Snippy shortcodes

1.0

  • Initial release