Pulsanti aggiuntivi al pannello di scrittura di WordPress

Come sapete, quando scrivete un articolo di WordPress, potete scegliere se usare l’interfaccia “Visuale” o quella “HTML”, selezionabili dalle due schede poste sopra il campo di scrittura dell’articolo. La differenza è sostanziale: con la versione HTML potete intervenire nel codice dell’articolo e usare alcuni tag HTML che altrimenti WordPress vi taglierebbe. Ora, avrete presente che la versione HTML del pannello è più o meno questa:

I pulsanti sono pochi, anche rispetto alla sua versione “Visuale”. Ma potete aggiungerne quanti ne volete e far scrivere ai pulsanti i tag che vi servono più spesso. Ecco come si presenta attualmente il mio pannello:

Ho aggiunto la seconda e terza riga di pulsanti che scrivono per me quei tag che uso di più e che scoccia dover scrivere a mano quando si modifica l’HTML (a me capita spesso). Aggiungere questi pulsanti personalizzati è davvero semplice: basta un plugin.

AddQuicktag

AddQuicktag è il plugin che ci serve e lo trovate nella directory ufficiale dei plugin di WordPress. Scaricatelo, decomprimetelo e copiatelo nella vostra directory /wp-content/plugins del vostro server. Attivatelo quindi dal pannello di gestione dei plugin. Dopo l’attivazione, vi ritroverete con un comando in più nella scheda “Impostazioni” dal nome “Add Quicktag”. In questa pagina troverete tre campi per ogni riga:

  • la prima contiene il nome che visualizzerete sul pulsante;
  • la seconda contiene il tag di apertura;
  • la terza quello di chiusura.

Ecco un esempio di alcuni miei “quicktag”:

Capire come funziona è molto semplice. La prima riga riguarda il tag H3 che non è presente come pulsante nel pannello HTML: aggiungetelo così come lo vedete in figura e salvate le opzioni. Provate a scrivere un articolo di esempio. Per usarlo basta premere il pulsante H3 che vi ritroverete nel pannello HTML e WordPress scriverà per voi <h3> che corrisponde al secondo campo (quello successivo al nome). Scrivete il titolo e quindi premete di nuovo il pulsante H3 che adesso chiuderà il tag con </h3>. Allo stesso modo funzionano tutti gli altri.

Capito questo, potete sbizzarrirvi ad inserire tutti i comandi che volete. Ad esempio: avete creato uno stile che vi crea un box colorato, con una icona a sinistra e vi scrive il testo usando un carattere diverso? Anziché ricordarvi come si chiama quello stile e anche per evitare di scrivere tutta la trafila, potete aggiungere un pulsante così:

  • primo campo: il nome che vi piace;
  • secondo campo: il tag di apertura come <div class="mio-stile">;
  • terzo campo: il tag di chiusura come </div>.

Dei tre campi solo il terzo può non essere riempito in alcuni casi, come ad esempio nel caso in figura del pulsante “Spezza pagina”. In questo caso WordPress scriverà per voi una sola stringa di testo (come in figura, nel secondo campo) e nulla come tag di chiusura. Questo perché quella stringa è un marcatore per indicare a WordPress quando spezzare un articolo/pagina in un’altra pagina (e non necessita di chiusura tag).

È evidente che questo plugin scrive il tag per voi, ma la modifica del tag HTML e la creazione di stili specifici dovrà essere fatta nel vostro file style.css. Tutti i pulsanti che vedete nella prima figura (tranne “Spezza pagina” e “Download”) fanno riferimento a stili che ho definito nel foglio stile: altrettanto dovrete fare voi. Ad esempio, se io sono solito evidenziare un testo, come questo:

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.

avrò creato uno stile apposito dal nome “evidenzia” e avrò creato un pulsante “Evidenzia” (potete usare il nome che volete e non è necessario che stile e pulsante abbiano lo stesso nome). Se non lo avrò fatto, il pulsante non avrà alcun effetto.