Wordpress

WordPress: come aggiungere un’area widget personalizzata

di
Wordpress widget

In questo articolo vediamo come inserire un’area widget personalizzata in un tema WordPress.

Per prima cosa è assolutamente consigliabile creare un tema figlio (vedi: WordPress: cosa è un tema figlio (child theme) e perché utilizzarlo

Successivamente scriviamo queste righe di codice nel file functions.php per registrare la nostra nuova area widget. In questo esempio vogliamo creare un’area widget che sia disponibile sulla home page del sito (o sulla front page) utilizzando un tema figlio del template standard di WordPress: Twentytwenty.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
function new_widget_func() {
	register_sidebar(
		array(
			"name" => "Widget home centrale",
			"description" => "Widget nella home in posizione centrale",
			"id" => "widget-home-centrale",
			"before_widget" => "<div class='widget-home-centrale'>",
			"after_widget" => "</div>",
			"before_title" => "<h2>",
			"after_title" => "</h2>"
		)
	);
}
add_action( "widgets_init", "new_widget_func");
?>

Dove:

name = corrisponde al titolo dell'area widget che compare nel backoffice in Aspetto->Widget,
description = corrisponde alla descrizione del widget che compare nel backoffice in Aspetto->Widget,
id = identificativo univoco del widget, deve essere valorizzato come fosse uno slug (senza spazi, lettere accentate, ecc)
before_widget = il codice HTML che precede il widget
after_widget = il codice HTML che segue il widget
before_title = il codice HTML che precede il titolo del widget
after_title = il codice HTML che segue il titolo del widget

Fin qui abbiamo creato e inizializzato l’area, ora dobbiamo mostrarla nel frontend.
Per visualizzarla nella home utilizzando Twentytwenty dobbiamo andare a modificare il file index.php e copiarlo nella directory del nostro tema figlio.
Per posizionarla all’inizio della pagina subito sotto all’header, inseriremo questo codice:

1
2
3
4
5
6
7
8

<?php if(is_home() || is_front_page()): ?>
	<?php if( is_active_sidebar('widget-home-centrale')): ?>
		<div class="custom-widget-container">
			<?php dynamic_sidebar('widget-home-centrale'); ?>
		</div>
	<?php endif; ?>
 
<?php endif; ?>

subito prima di

<main id="site-content" role="main">

Abbiamo finito, ora non rimane che aggiungere un po’ di regole CSS. Per questo motivo abbiamo inserito l’area widget in un div contrassegnato con una classe custom-widget-container che possiamo utilizzare per adattare il layout alla pagina, infine abbiamo la possibilità di dare uno stile personalizzato al nostro widget utilizzando la classe CSS: widget-home-centrale che abbiamo precedentemente definito.

Ecco come viene in pratica:
Prova area widget wordpress

WordPress: cosa è un tema figlio (child theme) e perché utilizzarlo

di

di Mario Spada

WordPress è in assoluto il più diffuso CMS al mondo e detiene il 40% delle installazioni sui siti web che utilizzano piattaforme CMS (cfr: http://trends.builtwith.com/cms).

Anche per questo è disponibile sul Web una scelta di temi sia commerciali che open source veramente vasta. L’utilizzo di temi già preimpostati con la più svariata tipologia di layout grafico e strutturale, semplifica in modo sostanzioso il lavoro delle Web Agency. Quasi sempre però, una volta scelto il tema, è necessario intervenire sia sul CSS (il foglio stile) che sui template (i modelli strutturali) per adattarli alle proprie esigenze del progetto del sito web.

Per questa esigenza WordPress ci viene incontro mettendoci a disposizione i Child Themes (temi figlio) che ereditano dal Parent Theme (tema genitore) tutte le caratteristiche del modello scelto, permettendo però di sovrascriverle senza doverle modificare. Questo gioca un ruolo determinante nella riduzione dei tempi di sviluppo, e non è poco, visto che ormai per rimanere con i prezzi nel mercato, è necessario abbassare drasticamente i costi di sviluppo.

Quale è il vantaggio? Sta nel fatto che in informatica, la manutenzione del codice gioca un ruolo determinante nella sicurezza e nella sopravvivenza stessa dell’applicazione e se il tema scelto è stato prodotto da sviluppatori seri, verranno costantemente rilasciate nel tempo versioni aggiornate. Ora se noi abbiamo modificato direttamente il codice del nostro tema, non sarà possibile applicare gli aggiornamenti senza sovrascrivere e dunque perdere, le nostre modifiche. Se abbiamo invece derivato un tema figlio, sarà possibile aggiornare senza preoccupazioni il tema padre e mantenere quindi sicuro ed affidabile tutto il nostro lavoro.

Come creare un tema figlio di WordPress:

Il primo passo è di creare una directory nella cartella dei temi con il nome del nostro tema figlio, per esempio (utilizziamo come tema genitore “twentythirteen” che arriva già incluso nel pacchetto di WordPress):

wp-content
|
---themes
     |
     --- twentythirteen
     |
     --- twentythirteen-child

Creiamo dunque la cartella “twentythirteen-child” (N.B.: deve esistere la cartella del tema padre: “twentythirteen” con tutto il suo contenuto originale.)

Il secondo e fondamentale passo è quello di inserire nella cartella appena creata “twentythirteen-child” un file style.css con la seguente struttura di righe iniziali:


/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/
Description: Tema Child per il tema Twenty Thirteen
Author: Qui il vostro nome
Author URI: http://example.com/about/
Template: twentythirteen
Version: 0.1.0
*/

Questo è il solo file obbligatorio per far funzionare un tema figlio e le righe obbligatorie che determinano il funzionamento di un tema figlio sono: Theme Name e Template.

Adesso il nostro tema figlio è già funzionante ma non ha alcun foglio stile, se vogliamo ereditare quello del padre (consigliabile se non lo si vuole riscrivere interamente…) abbiamo due strade:

  1. Si importa direttamente il foglio stile del padre con @import all’interno del CSS del figlio (sconsigliato)
  2. Si aggiunge del codice nel file functions.php del tema figlio (consigliato!)

Ora è necessario spiegare che mentre il file “style.css” del nostro tema figlio sovrascrive quello del padre, il codice scritto nel file “functions.php” creato nella cartella del tema figlio viene aggiunto a quello del tema padre.

La soluzione 1 è più semplice perché non ci obbliga a creare un nuovo file “functions.php” all’interno del nostro tema figlio, ma è sconsigliato per motivi di prestazioni. Come spiegato in questo articolo, il parsing dei fogli stile eseguito dai browser sarebbe estremamente più lento.

La soluzione 2 richiede che vengano inserite le seguenti righe di codice nel file “functions.php” che deve essere creato ex-novo nella cartella del nostro tema figlio:


add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 0 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

In pratica facciamo caricare separatamente il foglio stile del padre direttamente da WordPress nell’head delle pagine e il CSS del figlio verrà caricato sempre per ultimo.

Infine una nota sull’utilizzo nel tema figlio dei riferimenti al percorso dei file:

Mentre normalmente nei temi viene utilizzata la funzione: get_template_directory_uri() per ottenere il percorso relativo dei file presenti nel tema, nel caso dei temi figli è necessario utilizzare: get_stylesheet_directory() che restituisce il percorso del foglio stile del tema figlio e dunque anche dei file presenti in questa cartella.

Sul sito del Codex di WordPress (da dove ho reperito gran parte di queste informazioni) c’è anche la spiegazione di come impostare l’internazionalizzazione (i18n) per le traduzioni dei file eventualmente presenti nei temi figli: https://codex.wordpress.org/it:Temi_Child#Internazionalizzazione

Riferimenti:

Utilizzare Bootstrap Studio per realizzare template WordPress

di

Oggi il mercato nel mondo del Web richiede che vengano realizzati template grafici accattivanti in tempi brevissimi, perché la disponibilità dei clienti ad investire grossi budget è sempre più limitata e la competizione con le grandi aziende che offrono soluzioni automatizzate “fai da te” incide in maniera determinante.

Normalmente le Web Agency acquistano template già pronti, adattandoli alle richieste del cliente, esistono centinaia di siti specializzati che offrono template moderni e completamente personalizzabili a prezzi abbordabili, fra i $40 e gli $80.

La domanda che mi sono fatto è: “esiste uno strumento economico per realizzare velocemente template unici per WordPress senza ricorrere all’acquisto di software preconfezionato?”

Per verificare questa ipotesi, mi sono avvalso della collaborazione di una collega che ha portato a termine un mio corso di Web Design e successivamente ha completato un tirocinio all’interno della Web Agency dove lavoravo.

Durante il tirocino abbiamo pensato di utilizzare un tool appositamente progettato per creare template HTML5 / CSS3 basato su Bootstrap, questo tool si chiama Bootstrap Studio e ha un costo di licenza base di $29 per verificare la possibilità di rispondere alla domanda che mi ero fatto.

Il design è volutamente semplice ma fresco e accattivante realizzandolo interamente con Bootstrap Studio, progettando tutte le pagine standard che devono essere presenti in ogni tema WordPress: Home, single, page, archive, ecc.

Una volta esportato l’HTML e tutti gli asset necessari, mi sono occupato di applicare il codice PHP necessario al funzionamento del tema in WordPress. Per questa operazione ho scelto di utilizzare un tema “naked” che fosse quanto più possibile adattabile ma allo stesso tempo contenesse già quel minimo di struttura per non dover riscrivere da zero le caratteristiche base dei temi WP. Il tema che ho scelto è disponibile su GitHub a questo indirizzo: https://github.com/edouardl/minimal-blank-theme

La trasformazione è stata piuttosto semplice anche se ha richiesto una serie di aggiustamenti che hanno portato via alcuni giorni di lavoro. In definitiva la soluzione adottata è senz’altro valida per progetti piuttosto piccoli, per progetti più complessi suggerisco strumenti più sofisticati come ad esempio: Pinegrow

WordPress: come caricare per ultimo il CSS del tema figlio

di

Wordpress e CSS In WordPress è importante utilizzare i temi figli, cioè dei temi personalizzabili derivati da un tema genitore dal quale ereditano tutte le caratteristiche (layout, CSS, ecc).
L’utilizzo di un tema figlio permette di personalizzare il layout agendo sui template e sul CSS senza modificare in alcun modo il tema genitore.
Il metodo corretto per generare un tema figlio è descritto in questo articolo.

Leggi tutto

WordPress: un widget per mostrare le miniature di una galleria di foto nella sidebar

di

Wordpress: un widget per mostrare le miniature di una galleriaQuesto widget è veramente semplicissimo, serve a mostrare in un riquadro le miniature (thumbnails) 64×64 pixel di una qualsiasi galleria di foto (photogallery) nativa di WordPress. L’installazione è immediata, basta includere nel file “functions.php” del tema attivo, il file con il codice che illustrerò qui sotto. Nell’area Aspetto -> widget sarà disponibile il widget: “MS Gallery Thumbs Widget”, è sufficiente trascinarlo nell’area dove lo si desidera posizionare e impostare nell’ordine:

Leggi tutto