WP-ShowHide

Popis

WP-ShowHide skryje část příspěvku za tlačítkem, takže delší text – tisková zpráva, seznam změn, spoiler – nezabere celou stránku, dokud si jej čtenář nevyžádá. Na tlačítku je uvedeno, kolik slov skrývá, což je způsob, jakým Engadget postupuje u svých tiskových zpráv. Příklad použití: [showhide type="pressrelease"]Tisková zpráva se vloží sem.[/showhide]

Není třeba nic konfigurovat a neexistuje žádná obrazovka s nastavením. Každá možnost, kterou plugin nabízí, je atributem shortcode, který ji vytváří, takže dvě přepínací tlačítka ve stejném příspěvku se mohou chovat odlišně.

Funkce

• Jeden zkrácený kód, [showhide], který lze v příspěvku nebo na stránce použít libovolný početkrát
• Blok „Zobrazit/Skrýt“ pro editor bloků, který obsahuje obsah, který skrývá, ve formě běžných bloků a zobrazuje přesně to, co zobrazuje shortcode
• Tlačítko namísto odkazu, s atributy aria-expanded a aria-controls, takže přepínání funguje pomocí klávesnice a je správně načteno čtečkou obrazovky
• Štítky, které počítají slova, která skrývají
• Žádné jQuery a vůbec žádný skript na stránce, která nepoužívá ani zkrácený kód, ani blok
• Vlastní události DOM při každém přepnutí, pro motivy, které na to chtějí reagovat

Dary

Většinu svého volného času jsem věnoval tvorbě, aktualizaci, údržbě a podpoře těchto pluginů. Pokud se vám moje pluginy opravdu líbí a mohli byste mi věnovat pár dolarů, velmi bych to ocenil. Pokud ne, můžete je klidně používat bez jakýchkoli závazků.

Použití

1. Ve výchozím nastavení bude obsah uvnitř zkráceného kódu „showhide“ skrytý.
2. Příklad: [showhide]Zde se vkládá obsah tiskové zprávy.[/showhide]

3. Výchozí hodnoty: [showhide type="pressrelease" more_text="Zobrazit tiskovou zprávu (o %s slovech více)" less_text="Skrýt tiskovou zprávu (o %s slovech méně)" hidden="yes"]

4. V příspěvku nebo na stránce můžete mít více částí obsahu, které lze zobrazit či skrýt, a to pouhým vytvořením nového typu.

5. Příklad: [showhide type="links" more_text="Zobrazit odkazy (%s slov navíc)" less_text="Skrýt odkazy (%s slov méně)"]Odkazy se vloží sem.[/showhide]

6. Pokud chcete nastavit výchozí viditelnost na „zobrazit“.

7. Příklad: [showhide hidden="no"]Zde se vkládá obsah tiskové zprávy.[/showhide]

Blokový editor

K dispozici je také blok „Zobrazit/Skrýt“, který najdete v nástroji pro vkládání v sekci „Text“. Obsahuje obsah, který skrývá, ve formě běžných bloků – odstavců, obrázků, čehokoli –, takže tento obsah lze psát a upravovat přímo na místě, místo aby se zadával do pole jako značkovací jazyk, a během úprav zůstává viditelný. Panel Zobrazit/Skrýt v postranním panelu obsahuje stejné čtyři možnosti jako atributy zkráceného kódu: typ, popisky dvou tlačítek a to, zda se blok zpočátku skrývá.

Zkrácený kód se nezměnil a je i nadále podporován. Není označen jako zastaralý, příspěvky, které jej používají, není třeba upravovat; blok i zkrácený kód generují stejný kód HTML a jeden příspěvek může obsahovat obojí.

1. Vzhled obsahu můžete upravit pomocí CSS, které plugin generuje. Zde je ukázka vygenerovaného HTML kódu. Vezměte na vědomí, že „pressrelease“ je výchozí typ.

<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. Na základě výše uvedeného příkladu můžete ve svém CSS použít následující styly:

.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. Každé přepnutí vyvolá tři události na prvku .sh-link, přičemž všechny tři se šíří nahoru, takže jeden posluchač v dokumentu pokryje všechna přepnutí na stránce: sh-link:more při otevření přepínače, sh-link:less při jeho zavření a sh-link:toggle při obou událostech.