[WordPress] 外掛分享： WP-ShowHide

內容簡介

WP-ShowHide 外掛允許使用者在文章或頁面中隱藏內容，並透過點擊連結來顯示或隱藏該內容，類似於 Engadget 的新聞稿格式。此外掛提供簡單的短碼使用方式，讓內容顯示更具互動性。

【主要功能】
• 隱藏與顯示內容的短碼功能
• 支援多種內容類型的顯示
• 可自訂顯示與隱藏的文字
• 提供 CSS 樣式自訂功能
• 預設內容隱藏選項

外掛標籤

開發者團隊

原文外掛簡介

By default the content is hidden and user will have to click on the “Show Content” link to toggle it. Similar to what Engadget is doing for their press releases. Example usage: [showhide type="pressrelease"]Press Release goes in here.[/showhide]
Usage

By default, content within the showhide shortcode will be hidden.
Example: [showhide]Press release content goes in here.[/showhide]

Default Values: [showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

You can have multiple showhide content within a post or a page, just by having a new type.

Example: [showhide type="links" more_text="Show Links (%s More Words)" less_text="Hide Links (%s Less Words)"]Links will go in here.[/showhide]

If you want to set the default visibility to display.

Example: [showhide hidden="no"]Press release content goes in here.[/showhide]

You can style the content via CSS that is generated by the plugin. Here is a sample of the generated HTML. Note that pressrelease is the default type.

With the example above, here are the following styles you can use in your CSS:

.sh-link { }
.sh-toggle { }
.sh-content { }
.pressrelease-link { }
.pressrelease-link.sh-hide .sh-toggle { }
.pressrelease-link.sh-show .sh-toggle { }
.pressrelease-content { }
.pressrelease-content.sh-hide { }
.pressrelease-content.sh-show { }

Development
https://github.com/lesterchan/wp-showhide
Credits

Plugin icon by Freepik from Flaticon

Donations
I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it. If not feel free to use it without any obligations.
Breaking Changes
Version 2.0.0 rewrites the front-end JavaScript. The shortcode and its attributes are unchanged, so your posts do not need editing — but the generated HTML is different, so custom CSS and JavaScript may need updating.

The toggle is now a instead of . CSS targeting .sh-link A must become .sh-link .sh-toggle. The plugin ships a small inline style so the button still renders as a plain text link rather than a native button.
The inner has been removed. The label now sits directly on the button, so anything targeting that ID should target .sh-toggle instead.
Hidden content now uses the hidden attribute instead of style="display: none;". If your CSS sets display on .sh-content it will now win over [hidden]; add .sh-content[hidden] { display: none; } or raise your specificity.
jQuery is no longer enqueued by this plugin. If your theme was relying on WP-ShowHide to pull jQuery onto the page, enqueue it yourself.
The global showhide_toggle() function has been removed. Nothing replaces it. To toggle a block programmatically, click its .sh-toggle button; to react to a toggle, listen for the sh-link:toggle event.
Internet Explorer is no longer supported. The script uses Element.closest() and the CustomEvent constructor.
Repeating the same type within one post now appends a counter to the element IDs (pressrelease-content-1, pressrelease-content-1-2, …). The first occurrence keeps its original ID, so this only affects posts that were previously emitting duplicate IDs anyway. Style by class rather than ID if you use this pattern.

The sh-link:more, sh-link:less and sh-link:toggle events are not a breaking change — they still fire on the .sh-link element and still bubble, so existing jQuery( ... ).on( 'sh-link:toggle', ... ) handlers keep working.

延伸相關外掛

Hide PostsHide Posts 外掛提供簡單的清單功能，讓使用者可以控制每篇文...Catch IDsCatch IDs 是一個簡單且輕量化的外掛，可在管理區塊表格中顯...WP Hide Post這個外掛強在幫助你完全控制文章的顯示方式。在 WordPress 網...Hide Featured Image有些情況下，我們可能想在某個單獨的文章頁面上顯示特色圖片...ShowID for Post/Page/Category/Tag/Comment這個外掛會在後台的編輯文章/頁面/分類/標籤/評論/媒體/使用...AH Display Widgets這個外掛可以讓你輕鬆在特定頁面中隱藏小工具。在每個小工具...WP Hide Show Featured Image這個外掛提供了隱藏所有文章和頁面的精選圖片的選項。 功能 ...Simply Show IDs這個外掛可以輕鬆地在管理頁面的表格中查看文章、頁面、媒體...Content Visibility for Divi BuilderContent Visibility for Divi Builder（Divi Builder 內容可...Pojo Device Widget請注意：此外掛僅適用於Pojo Framework的使用者 – Pojo是付費...Show Pages URL List「Show pages URL list」是一個簡單的外掛，允許您查看您 Wor...Hide Content by User Role for WPBakery這個外掛為 WPBakery 頁面編輯器中的所有元素添加設置，以根...Show User Registration Date「顯示使用者註冊日期」是一個小型的 WordPress 外掛，可在 W...Show User ID「Show User ID」是一款小型的外掛，可在 WordPress 儀表板的...Plugins List功能 此外，外掛還具有以下功能： 可透過短代碼在任何頁面上...