Elenchi puntati in WordPress

Il tema di WordPress standard TwentySeventeen è molto semplice e facilmente leggibile.
L’ho scelto per questo blog in attesa di qualcosa di meglio, se e quando verrà in futuro.

Una cosa però con non mi piace di questo tema è che i punti degli elenchi vengono visualizzati al di fuori del blocco di testo.
Non mi piace questa caratteristica perché a mio avviso rende meno leggibile gli elenchi puntati che invece dovrebbero semplificare il flusso del testo.

Una soluzione facile a questo problema è aggiungere un piccolo frammento di codice nel CSS personalizzato

1
2
3
.entry-content li {
    list-style-position: inside;
}

Questo allinea il punto al blocco di testo e indenta il contenuto.

Tuttavia si presenta un secondo problema: dalla seconda riga di testo in poi, in ogni punto, il testo è allineato al punto non alla prima riga.
Di nuovo, rende meno leggibile il testo ed è anche brutto a vedersi.
La soluzione definitiva è riportare tutti punti all’esterno, in modo che tutte le righe del testo di ogni singolo punto siano allineate, e poi spostare l’intero elenco puntato a destra.

1
2
3
4
5
.entry-content li {
    list-style-position: outside;
    padding-left: 10px;
    margin-left:20px;
}

Immagini, ci siamo

Dopo mesi a spaccarmi la testa e infinite discussioni con il creatore della libreria che JARVIS usa per manipolare la Wiki, ho trovato il problema che impediva il caricamento delle immagini.

Inutile dire che era di una stupidità estrema e che si risolveva meno di 5 secondi, capendo dove bisognava guardare.

Ad ogni modo, negli scorsi giorni ho importato tutte le immagini da HT e ci ho giocato un po’.
Come prima cosa le ho importate brutalmente lasciando fare tutto alla wiki. Il risultato era funzionale, ma molte informazioni andavano perse. Sono quindi passato a scrivere dinamicamente anche la pagina che MediaWiki mostra quando si accede all’immagine.

Vedete per esempio sul sito di test il file File:Specie!vulcan-deserto.jpg
Qualche annotazione:

  • ignorate il fatto che ci siano molte versioni identiche della stessa immagine.
    Deriva dal fatto che ho fatto prove su prove senza curarmi di cancellare perché in questa fase non ha senso.
    Sul sito definitivo ovviamente questo non accadrà.
  • Il nome dell’immagine in WikiTrek è generata concatenando in nome della sottocartella di HT con il nome dell’immagine, sostituendo la barra dritta con un punto esclamativo.
    Nella sezione “Dettagli” ci sono indicati il nome nuovo e quello vecchio.
  • La parte di Licenza è ancora tutta da scrivere.
    Demanderei la cosa a un template, ma vorrei sentire i vostri suggerimenti.
  • La sezione HyperTrek riporta la data di scaricamento e lo URI originale.
    Poi in due sottocapitoli ho copiato la Descrizione e lo ImageTag.
  • Le immagini non sono visibili in tutte le relative pagine perché devo rielaborarle, potete vedere qualche esempio, sempre sul sito di test, nelle pagine T’Pol e The Naked Now.

Playing Side

La Sidebar di un sito basato su MediaWiki è un luogo interessante dove aggiungere informazioni importanti.
Nel mio caso, l’idea era di aggiungere qualche link a risorse esterne relative a Wikitrek ma che non fossero incorporate nella wiki vera e propria.
Mi sembrava quindi una buona idea aggiungere una sezione apposita nella sidebar.

Una breve ricerca su internet mi ha portato alla pagina dove trovare tutte le informazioni per personalizzarla.
È bastato quindi aggiungere poche righe di testo a https://wikitrek.org/index.php/MediaWiki:Sidebar per ottenere il risultato voluto. In particolare, si tratta di aggiungere elementi a un elenco puntato facendo precedere il sito al nome:

1
2
3
4
5
* Link Esterni
** https://blog.wikitrek.org | Blog di WikiTrek
** https://wikitrek.slack.com | Gruppo di collaborazione WikiTrek su Slack
** https://www.facebook.com/wikitrek | Pagina Facebook
** https://twitter.com/wikitrekorg | Account Twitter

Il risultato era pratico, ma a mio avviso poco gradevole esteticamente.
Mi sarebbe piaciuto per esempio aggiungere le icone dei relativi siti a sinistra del collegamento, non solo per rendere la barra più bella ma anche per facilitare la navigazione potendo identificare la destinazione del link con un colpo d’occhio.

Qualche tentativo di inserire le immagini direttamente nel testo della pagina ha dato esito negativo. Ho pensato quindi di effettuare una modifica nel CSS per ottenere il risultato.
Di nuovo, una breve ricerca in internet mi ha indicato la strada: per ogni elemento della Sidebar, il motore di MediaWiki genera un ID univoco basato sul testo della etichetta, quindi è stato facile effettuare una modifica come questa:

1
2
3
4
5
6
7
8
9
li#n-Account-Twitter {
background-image: url(//abs.twimg.com/favicons/favicon.ico);
background-size: 16px;
background-position: top left; background-repeat: no-repeat;
}

li#n-Account-Twitter a {
padding-left: 20px;
}

Per ottenere un risultato non solo funzionale, ma anche più bello da vedere.

esterni