WP 003 – Tema e tema-child

Appunti relativi alla mia prima installazione di WordPress. Le seguenti indicazioni sono visualizzabili su questo sito per esclusivo uso personale. Il sottoscritto non si ritiene responsabile di problemi derivanti dall'utilizzo di tali indicazioni. P.S. - Alcuni contenuti potrebbero risultare obsoleti.

Torna all’elenco WordPress

Il tema che ho utilizzato per questa installazione è digital-agency-lite. L’ho scelto per due motivi:

Mi sembra abbastanza “spartano” e spero mi possa permettere alcune personalizzazioni
Offre la possibilità di scegliere un layout personalizzato (1, 2 o 3 colonne nella sezione Personalizza -> VW Settings -> Impostazioni generali)

Costruzione del tema child

Bisogna creare due file. Il primo, style.css, dovrà contenere le seguenti istruzioni:

/*
Theme Name: Digital Agency Lite - Child
Theme URI: https://NONE
Description: Tema child per Digital Agency Lite
Author: Vito Cafazzo
Author URI: https://NONE
Template: digital-agency-lite
Version: 1.0.0
*/

Theme Name: Digital Agency Lite - Child

Theme URI: https://NONE

Description: Tema child per Digital Agency Lite

Author: Vito Cafazzo

Author URI: https://NONE

Template: digital-agency-lite

Version: 1.0.0

Il contenuto deve essere personalizzato e bisogna stare attenti alla voce Template. Per lei si deve dichiarare esattamente il nome della directory del template padre che si trova all’interno della cartella /wp-content/themes.

Il secondo file, functions.php, dovrà contenere:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );

function enqueue_parent_theme_style() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

A questo punto portarsi all’interno della cartella /wp-content/themes, creare una nuova cartella: NOMETEMA-child (nel mio caso digital-agency-lite-child) e copiare al suo interno i due file creati. Il tema figlio è pronto per per essere abilitato.

Cosa farne si scoprirà successivamente.

Problema

In alcuni temi, il caricamento del CSS figlio non “va a buon fine”, o meglio non viene caricato nell’ordine voluto (su questo fare riferimento alla funzione add_action). Ho utilizzato, quindi, per functions.php, il seguente codice che utilizza anche il terzo parametro di add_action: $priority.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 11 );
function enqueue_parent_theme_style() {
	wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 11 );

function enqueue_parent_theme_style() {

wp_enqueue_style( 'child-style', get_stylesheet_uri() );

}

Layout

Gli elementi del layout che a me interessano (nel caso del layout ad 1 colonna) si dispongono nel seguente modo.

// Disposizione DIV per le PAGINE 
// -------------------------------------------------
<main id="maincontent" class="middle-align" role="main"> 
    <div class="container">
   		<div id="content-vw">
    		<h1> TITOLO </h1>

// Disposizione DIV per ARTICOLI e RICERCA
// -----------------------------------------------
<div class="container">
	<main id="maincontent" class="middle-align" role="main">
		<header>
			<h1 class="entry-title"> TITOLO </h1> 
		</header>

// Disposizione DIV per le PAGINE

// -------------------------------------------------

<h1> TITOLO </h1>

// Disposizione DIV per ARTICOLI e RICERCA

// -----------------------------------------------

<h1 class="entry-title"> TITOLO </h1>

</header>

Il tema presenta una “fastidiosa” icona di caricamento che, devo dire, rompe le scatole. Ho individuato il richiamo a tale icona nel div con id=status. Per risolvere ho usato il display:none; all’interno del CSS

File nelle sottocartelle

Il tema che sto usando per questa installazione (non tutti i temi lo fanno) permette di “lavorare” anche sui file PHP che si trovano all’interno di sottocartelle.

Per fare ciò basta ricreare la struttura ad albero del file-system. Ad esempio se mi interessa modificare il file single-post-layout.php che si trova all’interno della cartella template-parts del tema padre, basta creare, all’interno del tema figlio la cartella template-parts e inserire al suo interno il file, da modificare, single-post-layout.php.

Settaggi per digital-agency-lite

Tenuto conto che alcune delle personalizzazioni sono state realizzate con CSS dedicati, molti elementi sono stati settati dal pannello di controllo del tema (Personalizzazione).

Tipografia a tema >>> Tipografia del contenuto >>> Colore di etichetta di ancoraggio
Tipografia a tema >>> Tipografia globale >>> Tutti i colori della sezione
VW Settings >>> Impostazioni dei post sul blog >>> Post settings >>> Abilitazion/Disabilitazione/Modifica attributi dei post: data, autore, paginazione etc. etc.
VW Settings >>> Impostazioni dei post sul blog >>> Related post settings >>> Disabilitati
VW Settings >>> Impostazioni dei post sul blog >>> Single post settings >>> Post navigation text
VW Settings >>> Impostazioni generali >>> Layout di larghezza e impostazione ad una colonna
VW Settings >>> 404 page settings >>> Pagina 404 riscritta nel tema-child
Denominazione del sito >>> Logo, titolo, icona etc. etc.

Altre personalizzazioni non sono state usate, ma per nuove tipologie di siti potranno essere molto utili.

Problemi con aggiornamenti del tema

Dopo un aggiornamento del tema, si è presentato un link di navigazione che non avevo impostato. Soluzione: Aspetto -> Personalizza -> Impostazione dei post sul blog – > Single post settings: disattivare Single post breadcrump (prima voce dell’elenco). La procedura descritta vale solo per i post, per tutte le altre pagine il problema rimane. Non resta che disabilitare .bradcrumbs in style.css con display:none;