Gli utenti che si apprestano ad utilizzare WordPress o hanno a che fare con il CMS già da qualche tempo, sanno perfettamente che tra i punti di forza della piattaforma vi è sicuramente l’elevato numero di plugin e temi reperibili online.
Se la ricerca e l’installazione di questi ultimi è un’operazione intuitiva ed alla portata di tutti, la procedura avviene direttamente dalla dashboard del CMS e con modalità simili a quelle di un classico motore di ricerca, la modifica ulterirore dei template richiede invece una buona conoscenza di HTML e CSS.
Il plugin di oggi, che anticipiamo subito non è gratuito, rappresenta la soluzione ideale per coloro che non hanno familiarità con i linguaggi di programmazione citati ma desiderano ugualmente mettere mano al template del proprio portale. Vediamo di introdurre e conoscere meglio il plugin in questione, CSS Hero.
Introduzione e funzionalità
Il plugin si integra con il tema WordPress in uso (CSS Hero è supportato da numerosi temi, anche “premium”, verificate ad ogni modo la lista presente online) consentendo di intervenire direttamente sui vari elementi che lo compongono. L’approccio adottato è identico a quello di un classico editor visuale nel quale le modifiche apportate dall’utente vengono applicate in tempo reale sulla pagina (WYSIWYG, what you see is what you get).
Dopo aver comprato il pacchetto desiderato (il più conveniente è la licenza d’utilizzo per 1 sito a 29$/anno) ed attivato il plugin, il bottone azzurro di CSS Hero apparirà infine in sovrimpressione sul sito. Una volta cliccato su quest’ultimo sarà generata un’anteprima che diventerà a tutti gli effetti il vostro “cantiere di lavoro”: insieme all’anteprima farà infatti la sua apparizione anche la barra degli strumenti del plugin.
La barra degli strumenti in alto a destra
Il primo bottone delle barra verticale consente di selezionare l’elemento sul quale si desidera interagire. Spostando il cursore sui vari elementi, il plugin evidenzierà anche le relative “parti” di codice CSS utilizzate dal tema WordPress per quel determinato elemento. Ad esempio nello screen qui di seguito è stato selezionato un classico TAG H1.
Modifica di un elemento del tema
Avete notato la dicitura “single page article content H1”? E’ esattamente la parte di codice che identifica l’elemento che vogliamo modificare. Selezionandolo dalla barra degli strumenti in alto a destra avremo infine accesso alla sezione di personalizzazione avanzata che, come mostra il prossimo screen, consente di agire direttamente su testi, sfondo, bordo, margini etc.
Nella prossima puntata continueremo a parlare delle funzionalità del plugin soffermandoci inoltre sull’ottimizzazione del tema per utenti mobile.
