Telefono: +39 392 33 73 731

Wordpress: aggiungere tabelle responsive nel contenuto

Premessa: io non uso Gutenberg. Sintetizzo: fa schifo. Quindi utilizzo l'editor classico di Wordpress (per riportarlo default si installa il plugin Classic Editor, oltre 4 milioni di installazioni vorrà dire qualcosa). Oltre a questo uso WPBakery Page Bulder (Visual Composer) famosissimo editor in bundle con la maggioranza dei temi.

Purtroppo però rimane un limite per l'inserimento delle tabelle nel contenuto, non ci sono proprio nella toolbar del TinyMCE di Wordpress. Possiamo aggiungerle via codice html, ma non è un modo comodo. Forse la scelta di Wordpress dipende dal fatto che le tabelle sono brutte! brutte! brutte... e cattive! I vecchi guru del web l'hanno ripetuto in tutte le salse, appena si iniziarono a fare siti con il Box Model. Certo, nel design le tabelle sono odiose, però un conto è usarle per l'architettura delle pagine, e un conto è usarle quando si hanno dati intabellati, cioè per lo scopo naturale di una tabella!!!

Per riabilitare le tabelle nel TinyMCE si potrebbe modificare la toolbar via codice, però consiglio di usare un plugin, questo ci mette a disposizione qualche opzione in più. Installiamo quindi TinyMCE Advanced.

Le impostazioni si trovano in "Impostazioni -> TinyMCE Advanced". Possiamo agire su 4 toolbar, spostando, aggiungendo e rimuovendo i bottoni come ci piace di più, utilizzando il drag&drop. Nel mio caso preferisco le cose semplici, quindi due toolbar come si vede in figura.

Più in basso si trovano ulteriori opzioni, io ho attivato il menu contestuale al tasto destro del mouse, è molto comodo.
Inoltre ho disattivato la prima opzione che permette di ridimensionare le tabelle tramite il mouse. Questo perché non voglio contaminare il codice con dimensioni assolute, vengono poi sparpagliate in tutte le celle. Le tabelle vengono inserite con width 100% di default e le celle si adattano. Nel caso volessi fare delle eccezioni ho sempre la possibilità di usare la toolbar per inserire un valore fisso nelle celle che desidero.

A questo punto possiamo creare le tabelle utilizzando gli strumenti che si spiegano da soli, si possono modificare le impostazioni della tabella, le righe, e le celle. Non approfondisco in questo tutorial. Dico solo che le nuove toolbar del TinyMCE sono compatibili anche con WPBakery, come si vede in figura.

Rendere automaticamente responsive le tabelle

Il lavoro è fatto a metà, le tabelle sono inserite nelle pagine, però fanno schifo nei mobile, come era previsto.

La mia soluzione è una manipolazione Dom Document del contenuto che genera Wordpress, prima di inserirlo in pagina. Serve quindi aggiungere del codice PHP nel file "functions.php" del Child Theme.
Il codice fa un parsing dell'HTML, trova le tabelle, le inserisce dentro un div. Questo div ha una classe "table-responsive", se il tema ha Bootstrap, è probabile che siano già inclusi gli stili necessari. A riga 14 Ho aggiunto anche le classi "table table-bordered" per i tag delle tabelle, questi stili sono sempre compresi in Bootstrap, ma sono facoltativi, puoi rimuovere la riga.

add_filter('the_content', 'zod_responsive_tables');
function zod_responsive_tables($content) {
    if (!empty($content)){
        // questo evita i warning di errata chiusura tags
        libxml_use_internal_errors(true);

        $dom = new DOMDocument();
        $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));

        $div = $dom->createElement('div');
        $div->setAttribute('class', 'table-responsive');

        $tables = $dom->getElementsByTagName('table');

        foreach ($tables as $table)
        {
          $table->setAttribute('class', 'table table-bordered');
          $new_div_clone = $div->cloneNode();
          $table->parentNode->replaceChild($new_div_clone,$table);
          $new_div_clone->appendChild($table);
        }
        $html = $dom->saveHTML();
        return $html;
    }
}

Se il tuo tema non ha Boostrap, oppure manca la parte che formatta le tabelle, puoi aggiungere il seguente stile css, tipicamente nel file "style.css" del Child Theme.

Non solo aggiungo una scrollbar usando l'overflow-x, ma imposto anche una dimensione minima per la tabella contenuta nel div: questo perché le tabelle fluide, al 100%, nei mobile possono risultare troppo strette. Io ho impostato 400px ma puoi mettere la dimensione che si adatta meglio alle tue esigenze.

.table-responsive{
  display: block;
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
}
.table-responsive table{
  min-width: 400px;
}

Il risultato finale è come in figura.

Lunedì 20 Maggio 2019
(0 commenti)
CSS
PHP

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento