Questo articolo è di carattere tecnico, serve a me per ricordarmi la struttura del codice degli elementi utilizzati nel sito.
Ignoralo pure, oppure fatti un bel trip gratuito e molto colorato. :)
Indice dei contenuti
- Classi e stili
- ★ Codici HTML utili
- Lettore multimediale
- Appoggio file multimediali [MEDIA]
- Cassetti espandibili (e articoli antiquati)
- Indice dei contenuti manuale
- Gestione recensioni (in lettura, in pausa, ecc.)
- Collegare un link a JQuery Colorbox
- Footnote
- Note
- Linee guida generali
Classi e stili
Di seguito alcune classi di stili personalizzate da usare all'interno degli articoli.
Viene usata prevalentemente nel testo preformattato <pre> per forzare il word wrap, perché di default non va automaticamente a capo.
Questo è un testo preformattato senza la classe a_capo. Il testo continua su un'unica riga, a meno che non sia stato inserito un invio a capo.
Questo è un testo preformattato con la classe a_capo. Il testo va a capo automaticamente quando raggiunge il limite delle dimensioni della pagina.
Nota: questo non vale per tutti i browser. I più stupidi — Safari per esempio — forzano sempre automaticamente il word wrap, spezzando codice che magari nelle intenzioni di chi lo ha pubblicato doveva apparire su un'unica riga.
Classe da utilizzare per "avvicinare" una nuova lista a una precedente, in modo che tutte le voci appaiano uniformi. Può essere utile nel caso fosse necessario creare una divisone (ad esempio col "leggi tutto"), oppure per assegnare una differente visibilità a una delle due (farla apparire soltanto agli amministratori, ecc).
Va applicata unicamente alla seconda lista (e ad altre eventualmente successive).
Nota: non sempre è necessaria. Per esempio all'interno dei cassettini le voci di due liste differenti sono allineate correttamente; quindi usalo quando necessario (nell'indice a inizio articolo, per esempio).
Esempio:
- Questa è la prima voce della prima lista
- Questa è la seconda voce della prima lista
- Questa è la prima voce della seconda lista
- Questa è la seconda voce della seconda lista
Esempio con la classe appendi_lista:
- Questa è la prima voce della prima lista
- Questa è la seconda voce della prima lista
- Questa è la prima voce della seconda lista
- Questa è la seconda voce della seconda lista
blinking_cursor riduce la distanza verticale della piccola immagine col medesimo nome che utilizzo come cursore lampeggiante quando voglio inserire una sorta di testo da computer anni '80. È necessario assegnarla (unicamente) al paragrafo che precede il cursore (in questo caso "OK").
Esempio:
?SYNTAX ERROR
OK
censura permette di censurare parole o frasi in modo che diventino evidenti soltanto passandoci sopra il mouse.
centrato permette di centrare velocemente un testo.
come in questo caso.
compact va usato solo nei blocchi di tipo TAB per ridurre lo spazio tra le linguette.
Questo è un blocco TAB standard.
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
Questo è un blocco TAB con classe compact.
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
-vuoto-
L'ho utilizzato, per esempio, nella sezione lo Hobbit della mia Tolkien-libreria.
dead_link viene utilizzato quando un sito linkato all'interno di un articolo non è più raggiungibile.
Esempio:
Questo sito web non esiste più.
dialogo consente di trasformare una comune lista in una sorta di dialogo tra personaggi:1Questo perché l'intelligentissimo html prevede di utilizzare delle immagini in sostituzione dei bullet ma non dei semplici caratteri alfanumerici; così ho rimediato con il CSS.
- Questa è una semplice lista di tre elementi
- In effetti appare proprio
- Come una normalissima lista
- Io invece sono una lista
- formattata con la classe dialogo
- Non sono molto più figa?
Un simpatico effetto di testo fuori sincronia che però, oltre alla classe, ha bisogno anche del parametro data-text valorizzato (solitamente con lo stesso contenuto di testo, ma non obbligatoriamente).
Sintassi
<div class="glitch" data-text="TESTO">TESTO</div>
indent crea una indentazione di 25 pixel nella prima riga di un paragrafo. Quando si vuole che tutti i paragrafi di un articolo siano indentati, come nel caso dell'articolo sul primo capitolo della Compagnia dell'Anello, è più veloce inserire .entry-content { text-indent: 25px; } nel campo Extra CSS.
noindent rimuove l'indentazione, specialmente nel caso in cui sia stata impostata nel campo Extra CSS.
indice è utilizzata per nascondere gli indici degli articoli molto lunghi dalla home page, dalla ricerca o dagli archivi. Compariranno soltanto all'interno degli articoli.
nascondi fa l'esatto contrario: mostra qualcosa in home page, ricerca o archivi ma non all'interno degli articoli. Per esempio se è necessario inserire messaggi particolari (come nel caso di alcune pagine dinamiche).
nascosto nasconde un elemento ovunque.
La classe light inserisce una trasparenza del 50% a un elemento.
La classe verylight inserisce una trasparenza del 15% a un elemento.
Separa in modo evidente gli elementi di una lista.
- Questa è una lista standard.
- Tutte le voci sono vicine.
- Ideale per un indice.
- Questa invece è una lista con classe lista_larga.
- Le voci sono molto più distanti. È ideale quando il testo contenuto è molto lungo, e questo crea dei paragrafi.
- In questo modo tutto è più pulito.
Formatta il Testo in Maiuscoletto.
Finora ho utilizzato questa classe prevalentemente per l'elemento TAB. Rimuove il padding e i bordi sinistro e destro all'interno del DIV, in modo che le immagini possano mantenere la dimensione standard di 666/730 pixel (così non si sputtana il watermark), e non sono costretto a modificarle.
Esempio di TAB normale:
Esempio di TAB con classe nopadding:
Generalmente è meglio utilizzare la formattazione del testo di Gutenberg ma, in caso di esigenze particolari possono sono disponibili queste classi:
| piccolo | 0.8em |
| medio | 1.2em |
| grande | 1.5em |
La classe segreto serve a nascondere un link all'interno del testo. Non viene mostrato sottolineato e il suo colore è molto vicino a quello del testo normale. È è possibile identificarlo osservando il cambiamento del cursore quando il mouse gli passa sopra.
Sintassi:
<span class="segreto">LINK</span>
Questo è un esempio di un link nascosto.
La classe sticky permette di bloccare un elemento in cima alla pagina quando si scrolla in basso. Inserendola all'interno di un contenitore, per esempio un <div>, questa rimarrà confinata all'interno.
Esempio:
Da questo momento Spok rimarrà in cima alla pagina fino al termine di questo cassetto.
Le classi underline e sottolineato (liberamente intercambiabili per comodità) sottolineano un testo, visto che di default WordPress non offre questa possibilità.
La classe zoom consente di applicare un simpatico effetto zoom sulle immagini (generalmente associate a un link):
Di default il testo all'interno delle tabelle è allineato a sinistra ma è possibile assegnare una di queste classi speciali al campo "Avanzate" > "Classe/i CSS aggiuntiva/e" per modificare questo comportamento:
| tabella_sx | Allineamento a sx (default) |
| tabella_c | Allineamento al centro |
| tabella_dx | Allineamento a destra |
Ci sono quattro classi di colore per formattare il codice CSS o HTML mostrato in questo SDK, ma possono essere impiegate ovunque.
| col_tag | Evidenzia la punteggiatura. |
| col_cmd | Evidenzia i comandi. |
| col_par | Evidenzia i parametri o, in corsivo, le classi. |
| col_val | Evidenzia i valori. |
esempio
<img src="pippo.png" title="Questo è un esempio">
Quando utilizzate all'interno di un blocco di testo preformattato, si può assegnare la classe codice al <pre> e usare nomi di classe semplificati: tag, cmd, par, val.
★ Codici HTML utili
Simboli| ⌘ | ⌥ ⌃ |
| ☆ | ☆ |
| ★ | ★ |
| ’ | ’ 2Questo apostrofo è da utilizzare all'interno di stringhe HTML contenute tra virgolette singole, come ad esempio i nomi di libri e videogiochi all'interno dei tag expand. |
| « | « |
| » | » |
| ← | ← |
| → | → |
| ↑ | ↑ |
| ↓ | ↓ |
| ↔ | ↔ |
| ↵ | ↵ |
| ▪ | ▪ |
| • | • |
| ¹ | ¹ |
| ² | ² |
| ³ | ³ |
| © | © |
| ® | ® |
| ™ | ™ |
| € | € |
| ± | ± |
| ♥ | ♥ |
| ♦ | ♦ |
| ♣ | ♣ |
| ♠ | ♠ |
| ’ | ’ | per quando l’apice normale da fastidio ai DB |
| “ | “ | |
| ” | ” | “virgolette finali alte” |
| „ | „ | “virgolette finali basse„ |
| « | « | |
| » | » | |
| < | < | |
| > | > | |
| [ | [ | |
| ] | ] |
| ⇧ | ⁕ | ♪ | ♫ | ♬ | ⭑ | ⭒ | |||
| ➀ | ➁ | ➂ | ➃ | ➄ | ➅ | ➆ | ➇ | ➈ | ➉ |
| ➊ | ➋ | ➌ | ➍ | ➎ | ➏ | ➐ | ➑ | ➒ | ➓ |
Lettore multimediale
Per inserire un lettore multimediale minimo WP mette a disposizione il blocco "audio". Sfortunatamente è poco configurabile e, per esempio, non si può disattivare l'opzione per il download (potrebbe causare qualche grana di carattere legale).
È pertanto preferibile inserire il seguente HTML personalizzato:
<!-- player multimediale --> <figure class="wp-block-audio"><audio autoplay src="URL_FILE" controls controlslist="nodownload"></audio><figcaption>ARTISTA_E_NOME_BRANO</figcaption></figure>
Se vuoi evitare l'autostart, rimuovi il parametro autoplay.
Esempio:
Appoggio file multimediali [MEDIA]
Quando inserisci file multimediali da linkare al sito, oppure materiale temporaneo di appoggio, l'URL da linkare esternamente è
http://www.lemonskin.net/io/[MEDIA]/[cartella]/[file]
[cartella] può essere [files], [immagini], video3Sì perché, per qualche strano cazzo di motivo, non si possono usare le parentesi quadre con questo termine che sembrerebbe di sistema., ecc…
Cassetti espandibili (Collapse-o-matic)
Crea due blocchi Shortcode [/] e in mezzo inserisci il testo da includere nel cassetto, utilizzando i normali blocchi:
Sintassi
[expand title="TITOLO" expanded="true" id="nome_anchor"] ... [/expand]
I parametri principali sono title, expanded e id. Se è necessario inserire della formattazione all'interno del title utilizza tag e apici singoli. expanded di default è false, quindi inseriscilo con true soltanto se vuoi che il cassetto appaia aperto.
id permette di assegnare un anchor che, se aggiunto a un URL, consente di far aprire automaticamente il cassetto (purtroppo non funziona per i link interni alla pagina).
Esistono altri parametri come trigclass e targclass, che consentono di assegnare classi rispettivamente al "bottone" principale e al contenuto.
Per esempio, se vuoi che il titolo del cassetto sia rosso, usa questa sintassi:
[expand title="TITOLO" trigclass="rosso"]
Ed ecco il risultato:
Questo cassetto ha il titolo rossoNota: rosso è una classe che ho definito nel CSS del sito.
startwrap e endwrap consentono di aggiungere testo prima e dopo il titolo, ma finora non li ho mai usati.
Per creare cassetti all'interno di altri cassetti utilizza il tag [expandedsub*]…[/expandedsub*] dove * corrisponde a un numero:
[expand title="Cassetto di primo livello"] [expandsub1 title="Cassetto di secondo livello"] ... [expandsub2 title="Cassetto di terzo livello (aperto)" expanded="true"] ... [/expandsub2] [/expandsub1] [/expand]
Esempio:
Cassetto di primo livello…
Cassetto di terzo livello (aperto)…
Articolo antiquato
Ci sono articoli che col tempo sono diventati inutili, oppure sono stati sostituiti da altri più recenti. Se non li ho eliminati è perché contengono ancora informazioni degne di nota.
Per marchiare un post come "antiquato" è sufficiente inserire un cassetto espandibile con la seguente sintassi (inseriscila tra parentesi quadre in uno shortcode):
expand title="Articolo antiquato" expanded="true" trigclass="trigclass_antiquato" targclass="targclass_antiquato"
Questo sarà il risultato:
Questo articolo è superato. Molto probabilmente è stato sostituito da uno più recente o completamente abbandonato perché non più valido. Ho deciso di tenerlo perché contiene informazioni che ritengo comunque interessanti.4Maggiori informazioni sugli articoli antiquati.
Di seguito puoi aggiungere un link all'articolo che lo ha sostituito, se presente.
Verrà inoltre creato un bordino tratteggiato intorno all'intero articolo, come mostrato da questo paragrafo.
Per realizzare questo effetto, senza dover impazzire modificando mezzo WordPress, ho utilizzato una funzione CSS nuovissima: :has
Potrebbe non funzionare su browser meno recenti o in versione mobile.
Indice dei contenuti manuale
Solitamente, per inserire all'interno di un articolo un indice dei contenuti, è sufficiente utilizzare l'apposito blocco di WordPress (chiamato Publishpress). Però, siccome questo include automaticamente tutti i titoli, anche quelli minori come gli H3 degli aggiornamenti (che il più delle volte vanno ignorati), a volte è necessario crearne uno manuale.
Inserisci un titolo H2 denominato "Indice" e un semplice elenco (una lista, insomma) e aggiungi gli anchor delle sezioni a mano.
Infine assegna a entrambi i blocchi la classe indice, in modo che non appaiano nella home (o nelle ricerche).
Gestione recensioni (in lettura, in pausa, ecc.)
Quando necessario, è possibile impostare alcune recensioni in particolari stati: in lettura, in pausa, stop e nascosto.
[expand ... trigclass="lettura/pausa/stop/no" targclass="lettura/pausa/stop/no"]
trigclass gestisce la scritta che apparirà al posto del voto ("In lettura", "In pausa", oppure niente nel caso di "stop"). Se il valore è "no" allora l'intera recensione risulterà nascosta.
Se targclass è valorizzato (con una di queste stringhe) nasconderà tutti i campi. In realtà il risultato sarà lo stesso indipendentemente dal valore, ma li ho previsti tutti per comodità: basta inserirli uguali e non si sbaglia.
Nel caso in cui trigclass sia impostata come "no", la valorizzazione di targclass è facoltativa.
Collegare un link a JQuery Colorbox
La classe colorbox-link-x, dove x è necessariamente un numero, trasforma automaticamente il link in una finestra Jquery Colorbox.
Se si vogliono creare gruppi di immagini basta assegnare lo stesso numero.
Aggiungendo un valore nel tag title di <a> è possibile aggiungere una didascalia al box che si apre, ma poi apparirà anche quando si sposta il mouse sopra il link.
Se, al contrario, non si vuole che un link a una immagine venga automaticamente inglobato in una finestrella colorbox (per esempio se si vuole aprirla in un nuovo tab perché di dimensioni troppo grandi), è sufficiente aggiungere la classe colorbox-off al tag <img> e, naturalmente includere in <a> il parametro:
target="_blank"
Il trucchetto funziona pure con i video5Ogni tanto va anche coi siti web, ma è molto picky a riguardo, per cui eviterei. ma, nel caso di Youtube, è necessario rispettare il seguente formato:
<a href="http://www.youtube.com/embed/CODICE?rel=0&wmode=transparent&vq=hd720&autoplay=1" class="colorbox-link-1">video</a>
Dove CODICE identifica il video.
Altri formati, come ad esempio quello che si copia e incolla direttamente dal sito di Youtube, non funzionano, perché è necessario che il video sia embedded.
Il parametro rel=0 evita che alla fine della visione vengano mostrati i video suggeriti mentre wmode dovrebbe scongiurare un po' di conflitti tra Flash e lo z-index degli elementi nella pagina.
Footnote
Per inserire delle note nel testo6Come questa. puoi utilizzare il bottone F³ nella barra dei blocchi. Questo inserisce un tag <mfn> … </mfn>.
In alternativa anche [footnote] … [/footnote] va bene, ma Gutenberg è un po' schizzinoso coi shortcode, per cui è preferibile il primo sistema.
Per coerenza generale utilizza sempre i footnote dopo la parola interessata, senza alcuno spazio.
Se è a conclusione di una frase, inseriscilo sempre dopo il punto.7In questo modo.
Se invece c'è una virgola8Inseriscimi qui., mettilo prima.
Note
Per trasformare un paragrafo in una nota è sufficiente utilizzare la classe nota.
Per default la nota è marroncina. Anche i link.
Ma aggiungendo anche le classi grigia / grigio, rossa / rosso, gialla / giallo, verde, blu (mantenendo comunque nota e separandole con uno spazio), è possibile colorarla:
Ciao, io sono una nota grigia.
Ciao, io sono una nota rossa.
Ciao, io sono una nota gialla.
Ciao, io sono una nota verde.
Ciao, io sono una nota blu.
Il colore dei link contenuti si adatterà automaticamente.
Linee guida generali
Il capolettera va messo generalmente nel primo paragrafo.
Se sta male allora meglio non metterlo. Se sta male nel primo ma bene nel secondo allora mettilo lì.
Non si dovrebbe, ma questo blog è mio e faccio come mi pare. :)
Gli aggiornamenti vanno inseriti con questo formato (titolo H4):
Aggiornamento: XX Mese Anno
Se hai bisogno di una funzione (javascript) che copi nella clipboard il contenuto di un campo, utilizza CopiaClip().