Buonasera,
ho installato il template per il design delle scuole v2.15 e tutto funziona correttamente.
Come suggerito su github ho creato un tema child facendo una copia completa della cartella del template e aggiungendo il suffisso -child. Adesso volevo aggiornare la nuova versione ma non so come fare per non perdere le personalizzazioni (ho modificato le opzioni nei menu a tendina da dentro il template e l’interlinea tra queste dal file style.css, se sostituisco la cartella -child queste modifiche vanno perse) e sto incominciando anche a dubitare se il tema child dovesse essere creato così, mi potreste dare una mano?
Non è la cartella del child che deve essere sostituita quando si aggiorna il tema. È quella del tema “padre” - o meglio, i suoi contenuti.
È per questo che le customizzazioni rimangono anche dopo un update: se stanno nella cartella del child, non vengono toccate.
Il riferimento al tema padre rimane fisso: è la riga nello style.css del child con:
* Template: design-scuole-wordpress-theme
(o come altro avrai chiamato la sua cartella, se è stata rinominata), e anche quello non deve cambiare.
Ma attenzione, che la procedura che hai seguito per creare il child non è quella corretta. Un child theme di WP non è una copia completa del padre.
È una cartella, anche vuota, con un file style.css come unico elemento obbligatorio - e anche quello stylesheet potrebbe essere a sua volta vuoto, a parte l’intestazione obbligatoria che definisce il child theme.
Vedi la guida a:
Lo stylesheet child viene di solito accodato di default, e poi volendo c’è spazio per ulteriori customizzazioni attraverso un eventuale functions.php.
NB: il suffisso non è obbligato, il tema si può chiamare come si vuole.
Vedo ora, le istruzioni per il child theme nel repo del tema scuole dicono proprio di “duplicare” tutto e rinominare con “-child”.
Ma sono perlomeno fuorvianti, se non del tutto errate.
Non c’è nessuna “duplicazione” da fare. La documentazione andrebbe corretta.
Grazie mille,
sto creando per bene il tema child allora.
Nella cartella ho caricato il file style.css e funziona, tuttavia io avevo modificato anche il file scuole.css nella directory assets/css, come faccio a fare in modo che funzioni anche quello?
Inoltre avevo cambiato le opzioni nei menu dropdown, i link del footer e dell’header, devo rifarle a mano o posso fare in modo di riportare anche quelle? grazie mille per la risposta
WP permette l’override diretto dei template php del padre da parte del child.
Sempre che siano stati inclusi attraverso get_template_part() o get_theme_file_path(). Se sono veri template, come ad es footer.php, l’override è previsto. Per gli script sotto /inc/, invece no, e bisogna trovare altre strade.
Per override diretto intendo che un template php del child che nel padre ha lo stesso nome e la stessa posizione viene caricato di preferenza.
Le risorse di pagina, stylesheet e js, usano un sistema diverso: sono accodate con una serie di regole di priorità.
Per fare correzioni o sostituzioni lì, si deve intervenire in questa coda.
Ma se le correzioni sono poche, per CSS è più semplice sfruttare la sua naturale cascade: basta aggiungere allo stylesheet del child solo le regole css da sovrascrivere, con il “peso” opportuno. E se lo stylesheet è stato accodato correttamente, cioè dopo gli altri, una regola di pari peso con selettore identico si sovrappone già naturalmente a quella originaria da correggere.
Scusa non sono esperto di queste cose, potresti spiegare in maniera più semplice ciò che devo fare?
Io nel file scuole.css ho modificato solo l’interlinea delle opzioni nei menu dropdown scaricandolo, aprendolo su notepad++ e poi ricaricandolo via ftp, mentre le modifiche nei menu le ho fatte da dentro al template su Aspetto->Menu
Per le correzioni ai css, se come nel tuo caso non sono molte, basta isolare ed estrarre (con i dev tools del browser) le regole da modificare.
Nello style.css del child, inserisci solo la regola che ti serve, e solo per la parte modificata che ti serve. Il resto viene “ereditato” dallo stylesheet originario, mentre la tua correzione si sovrappone e ha la precedenza. Sempreché il child accodi il suo stylesheet a modo - altrimenti bisogna lavorare sui “pesi” di specificità del css.
Fatta come si deve, è un po’ più comoda, “pulita” e leggibile di una modifica sul file originale, visto anche che scuole.css è minificato e compresso.
I menù, se li hai compilati dal backoffice di WP, non dipendono dal child theme.
Pensavo ti riferissi ad altre modifiche sull’html dei template di testata e piede.
Però, se sei passato da un cambio di nome del tema e da una sua disattivazione/riattivazione, ho paura che la procedura di installazione del tema scuole faccia piazza pulita di tutti i menù.
Perfetto grazie mille. Faccio le modifiche e vi aggiorno. Teoricamente però se dovessi aggiornare il tema padre scomparirebbero i menu o solo se nell’aggiornare tocco qualcosa nel child?
I menù vengono cancellati solo dalla procedura di attivazione del tema (quella del tema scuole, intendo. È una scelta fatta qui, non una caratteristica generale di Wordpress), quindi solo disattivando e riattivando il tema. Se si cambiasse nome alla sua cartella, ad esempio - che non è un’evenienza comune.
Le semplici modifiche ai file sia del padre sia del child non comportano una reinstallazione, e neanche la sostituzione del padre con una copia aggiornata, o un cambio di versione di uno dei temi.
Grazie mille per il supporto. Ho ricreato tutti i menu manualmente e adesso funziona, anche aggiornando il tema. Al momento ricreare la directory assets/css/scuole.css non applica le modifiche perchè viene utilizzato quello del tema padre, ho risolto modificando il file nel tema padre per adesso, se avete idee su come fare potreste consigliarmi?
È normale che i file css del padre non vengano sostituiti con quelli analoghi del child, questo succede automaticamente solo con i template php.
Come si diceva prima, la soluzione più veloce è una monkey patch delle regole di scuole.css da correggere, sovrascritte da altre corrispondenti messe nello style.css del child. La “cascata” (sovrapposizione di regole) è il modo normale in cui CSS funziona, e si può sfruttare anche qui.
Il file scuole.css rimane dov’è, com’è.
Certamente anche modificare il “padre” non è vietato, ma 1) si perde il vantaggio del child negli aggiornamenti, e 2) si crea di fatto un fork del tema, che poi però va curato e seguito. E a questo punto tanto varrebbe usare solo il fork, messo sotto controllo versione git. Per personalizzazioni complesse può essere inevitabile, ma per poche modifiche semplici sembra troppo lavoro.
Perfetto grazie. Nono non vorrei fare un fork perché appunto l’unica modifica che ho fatto è stata portare il valore line-height da 1.5 a 1. Hai qualche link che spiega come creare un monkey patch? Ho cercato online ma non so se ho trovato quelli giusti perché parlano tutti di PHP e non menzionano il CSS.
Grazie mille
Forse ti ho inavvertitamente sviato; in effetti “monkey patch” non è il termine più appropriato, lo usavo (e ogni tanto si usa) solo per analogia - fa pensare a un hack, ma appunto CSS lavora proprio così di suo, per sovrapposizioni di regole.
Non sapendo quanta familiarità hai con l’argomento, ti suggerirei comunque di ripassare il funzionamento di base di CSS, è più semplice poi intuire dove mettere le mani.
In brevissimo, la sostanza è questa. Una regola css può venire sovrascritta da una analoga che la segue, o che ha più “peso”. Es.:
a { color:#fff } a { color:#000 } /* 000 prevale */
div a { color:#fff } a { color:#000 } /* fff prevale (se il selettore corrisponde) */
Grazie mille per il supporto. Purtroppo avendo pochissima familiarità con l’argomento, anche se ho capito come funziona il CSS non mi ha aiutato molto.
Ho comunque risolto perchè ho trovato il sito di questa scuola https://liceoberchet.edu.it/ dove hanno fatto un monkey patch sui colori dei pulsanti dei menu a tendina, quindi ho copiato ciò che hanno fatto loro dai Dev Tools e riadattato al mio caso, aggiungendo queste righe al file style.css del child:
#sub-nav ul.nav-list .menu-dropdown-simple li:not(.menu-title) a,.sticky-main-nav ul.nav-list .menu-dropdown-simple li:not(.menu-title) a {
line-height: 1 !important;
}
Grazie mille per l’aiuto