WordPress non ha una soluzione nativa per organizzare i contenuti in tabs. Ci sono vari plugin che svolgono bene il loro compito, ma si tratta pur sempre di aggiungere un plugin. Ho cercato una impostazione compatibile con Gutenberg e funzionante con le classi aggiuntive di style, con o senza aggiunta di poche righe di javascript, dove indispensabile. Non è stato semplice perché il codice normalmente utilizzato in html comprende soluzioni non sempre compatibili con WP.
Ho cercato di trovare le soluzioni per diversi usi di tabs:
- Il più semplice apri/chiudi utilizzando l’elemento HTML
<details>che crea un widget di divulgazione in cui le informazioni sono visibili solo quando il widget viene attivato in uno stato “aperto”. È necessario fornire un riepilogo o un’etichetta utilizzando l’elemento<summary>. E’ possibile la chiusura di un solo elemento cliccato e non quella contestuale degli altri, per cui si possono avere contemporaneamente più elementi aperti; oppure l’apertura di un solo elemento per volta. - Il sistema a fisarmonica chiamato “accordion” è un controllo attraverso il quale vengono nascosti e mostrati determinati blocchi di dati in base all’interazione con l’utente. E’ prevista la chiusura contestuale degli altri blocchi quando si clicca su uno, con scorrimento dei titoli.
- Tabs orizzontali e verticali con maggiore libertà di style, che prevedono l’apertura di un solo blocco di contenuti per volta e con possibilità di inserire i vari moduli di Gutenberg, compreso il blocco “Query Loop” per post che verranno aggiornati dinamicamente.
- Usi speciali di tabs come mega menu.
L’utilizzo delle TAB, schede, è una buona soluzione per raggruppare contenuti in uno spazio molto piccolo. Ad esempio application form molto complessi, con molte variabili e campi da gestire. E’ anche un modo per razionalizzare delle caratteristiche tecniche e/o delle specifiche relative ad un oggetto.
Avevo scartato inizialmente l’uso di one-page-scroll, che pure su qualche sito viene consigliato, perché inadatto a svolgere questo compito in quanto il link sull’ancora # causa il salto della pagina verso l’ancora del testo. In realtà può essere usato l’attributo :target.