WP-ShowHide

Descripción

WP-ShowHide hides part of a post behind a button, so something long — a press release, a changelog, a spoiler — does not fill the page until a reader asks for it. The button says how many words it is hiding, which is what Engadget does with their press releases. Example usage: [showhide type="pressrelease"]Press Release goes in here.[/showhide]

There is nothing to configure and no settings screen. Every choice the plugin offers is an attribute of the shortcode that makes it, so two toggles in the same post can behave differently.

Features

• One shortcode, [showhide], usable any number of times in a post or page
• A Show/Hide block for the block editor, holding the content it hides as ordinary blocks and rendering exactly what the shortcode renders
• A button rather than a link, with aria-expanded and aria-controls, so the toggle works from the keyboard and reads correctly to a screen reader
• Labels that count the words they are hiding
• No jQuery, and no script at all on a page that uses neither the shortcode nor the block
• Custom DOM events on every toggle, for themes that want to react to one

Donaciones

Paso la mayor parte de mi tiempo libre creando, actualizando, manteniendo y dando soporte para mis plugins. Si realmente te encantan mis plugins y podrías ahorrarme un par de dólares, realmente lo agradeceré. Si no, se libre de usarlos sin ninguna obligación.

Uso

1. Por defecto, el contenido entre los shortcodes «showhide» está oculto.
2. Ejemplo: [showhide]El contenido de la nota de prensa va aquí.[/showhide]

3. Valores por defecto: [showhide type="pressrelease" more_text="Mostrar nota de prensa (%s palabras más)" less_text="Ocultar nota de prensa (%s palabras menos)" hidden="yes"]

4. Puedes tener múltiples contenidos de tipo «showhide» en una entrada o página, únicamente asignando «type» diferentes.

5. Ejemplo: [showhide type="links" more_text="Mostrar enlaces (%s palabras más)" less_text="Ocultar enlaces (%s palabras menos)"]Los enlaces irán aquí.[/showhide]

6. Si quieres establecer la visibilidad predeterminada que mostrar.

7. Ejemplo: [showhide hidden="no"]El contenido de la nota de prensa va aquí.[/showhide]

Block editor

There is a Show/Hide block too, filed under Text in the inserter. It holds the content it hides as ordinary blocks — paragraphs, images, anything — so that content is written and edited in place instead of being typed into a field as markup, and it stays visible while you are editing. The Show/Hide panel in the sidebar carries the same four choices the shortcode attributes carry: the type, the two button labels, and whether it starts hidden.

The shortcode is unchanged and still supported. It is not deprecated, posts that use it need no editing, the block and the shortcode render the same markup, and one post can hold both.

1. Puedes dar estilo al contenido mediante CSS que es generado por el plugin. Aquí hay una muestra del HTML generado. Ten en cuenta que «pressrelease» es el «type» por defecto.

<div id="pressrelease-link-1" class="wp-showhide sh-link pressrelease-link sh-hide">
  <button type="button" class="sh-toggle" aria-expanded="false" aria-controls="pressrelease-content-1"
          data-sh-more="Show Press Release (4 More Words)"
          data-sh-less="Hide Press Release (4 Less Words)">Show Press Release (4 More Words)</button>
</div>
<div id="pressrelease-content-1" class="wp-showhide sh-content pressrelease-content sh-hide" hidden>Content</div>

1. Con el ejemplo de arriba, aquí están algunos estilos que puedes usar en tu 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 { }

1. Every toggle fires three events on the .sh-link element, and all three bubble, so one listener on the document covers every toggle on the page: sh-link:more when a toggle opens, sh-link:less when it closes, and sh-link:toggle on both.