Gist Embed Stylesheets: nuovo plugin per WordPress

WordPress, lo sappiamo tutti ormai, è uno dei migliori CMS sul mercato (nonché il mio preferito)!.

Di WordPress mi piace soprattutto la grande documentazione, la comunità e la sua enorme flessibilità.

Ad esempio, qui sul mio blog ho già postato degli snippet di codici (mini plugin, in un certo senso) per estendere le funzionalità di WordPress.

Questi snippet, come avrete notato, li ospito su Gist e qui sul blog vengono semplicemente incorporati.

Purtroppo però, WordPress non supporta ancora l’embed da Gist tramite l’omonima funzione embed (come invece possibile per tanti altri servizi come YouTube, facebook e tanti altri) e quindi – soprattutto da mobile – tocca prendere l’URL Gist e piazzarlo in un blocco di codice HTML (da PC è più semplice dato che su browser desktop nel sito Gist è presente un comodo pulsante per ottenere direttamente il codice HTML da inserire <script *>)

Per esempio per incorporare questo Gist https://gist.github.com/SalvatoreNoschese/4e3552cb9a504fb49102f6b0ac5a03eb dovremmo mettere questo codice con tag script in un blocco html (non molto comodo, in effetti).

<script src="https://gist.github.com/*name*/*id*.js"></script>

e fatto questo ci ritroveremmo – soprattutto nel caso di lunghi file – con tanto codice tutto incorporato in un unico blocco per l’intera lunghezza (esteticamente un po’ un disastro).

Per facilitare le cose, ho creato un plugin che adesso vi illustrerò.


Gist Embed Stylesheets 🎨

Con questo plugin, si ottiene una pagina nel pannello Impostazioni di WordPress per personalizzare al meglio i nostri Snippet di codice.

Il plugin non usa traduzioni tramite .po/.mo (ho usato stringhe già presenti in WordPress, quindi è già tradotto praticamente in tutte le lingue).

Come si può notare, abbiamo ace-editor per modificare il CSS già presente di default, una lista di temi (presenti sia per Gist che per l’editor e quindi anche sincronizzati), un live preview che incorpora il file Gist precedente e che fa anche da guida. Infine possiamo notare la presenza di un comodo pulsante “Download” e la rimozione dei riferimenti grafici a Gist.

Esempio di inserimento veloce tramite [***]

Risultato:

Nel caso in cui sul vostro blog abbiate già dei Gist tramite <script ***></script>, il plugin funzionerà lo stesso applicando tutte le personalizzazioni.


Per i più curiosi, le regex usate:

https://regex101.com/r/zB0qQw/2
https://regex101.com/r/TSBPf5/2

Direi che è tutto!

… Ah no, manca il download del plugin 😅


Fatemi sapere cosa ne pensate (potete vedere diverse anteprime su molti degli articoli presenti su questo blog) ☺️


ShareMe:

facebook icontwitter iconwhatsapp icontelegram iconemail iconprint icon

Vedi anche:




Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.


Login utente 👤

Accedi | Registrati | Password dimenticata?


Usa la Ricerca 🔎

Una citazione…

Di me alcuni parleranno benissimo, altri malissimo e tutti avranno i loro buoni motivi per farlo.Salvatore Noschese