{"id":32,"date":"2020-10-12T20:22:01","date_gmt":"2020-10-12T18:22:01","guid":{"rendered":"http:\/\/vitocafazzo.it\/site_Wp\/?p=32"},"modified":"2022-10-14T21:56:21","modified_gmt":"2022-10-14T19:56:21","slug":"wp-003-tema-e-tema-child","status":"publish","type":"post","link":"https:\/\/vitocafazzo.it\/site_Wp\/2020\/10\/12\/wp-003-tema-e-tema-child\/","title":{"rendered":"WP 003 \u2013 Tema e tema-child"},"content":{"rendered":"\n<p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/vitocafazzo.it\/site_Wp\/appunti-wordpress\/\" data-type=\"URL\" data-id=\"https:\/\/vitocafazzo.it\/site_Wp\/appunti-wordpress\/\">Torna all&#8217;elenco<strong> WordPress<\/strong><\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"180\" height=\"120\" src=\"https:\/\/vitocafazzo.it\/site_Wp\/wp-content\/uploads\/2020\/10\/APP_Wordpress.jpg\" alt=\"\" class=\"wp-image-595\"\/><\/figure>\n<\/div>\n\n<p>Il tema che ho utilizzato per questa installazione \u00e8 <strong>digital-agency-lite<\/strong>. L&#8217;ho scelto per due motivi:<\/p>\n<ul>\n<li>Mi sembra abbastanza &#8220;spartano&#8221; e spero mi possa permettere alcune personalizzazioni<\/li>\n<li>Offre la possibilit\u00e0 di scegliere un layout personalizzato (<em>1, 2 o 3 colonne<\/em> nella sezione <em>Personalizza -&gt; VW Settings -&gt; Impostazioni generali<\/em>)<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\">Costruzione del tema child<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bisogna creare due file. Il primo, <em><strong>style.css<\/strong><\/em>, dovr\u00e0 contenere le seguenti istruzioni:<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:css decode:true \" title=\"style.css\">\/*\nTheme Name: Digital Agency Lite - Child\nTheme URI: https:\/\/NONE\nDescription: Tema child per Digital Agency Lite\nAuthor: Vito Cafazzo\nAuthor URI: https:\/\/NONE\nTemplate: digital-agency-lite\nVersion: 1.0.0\n*\/<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Il contenuto deve essere personalizzato e bisogna stare attenti alla voce <strong>Template<\/strong>. Per lei si deve dichiarare esattamente il nome della directory del template <strong>padre<\/strong> che si trova all&#8217;interno della cartella <em>\/wp-content\/themes<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il secondo file, <strong><em>functions.php<\/em><\/strong>, dovr\u00e0 contenere: <\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:php decode:true \" title=\"functions.php\">&lt;?php\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );\nfunction enqueue_parent_theme_style() {\n\twp_enqueue_style( 'parent-style', get_template_directory_uri().'\/style.css' );\n}\n?&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A questo punto portarsi all&#8217;interno della cartella <em>\/wp-content\/themes<\/em>, creare una nuova cartella: <strong>NOMETEMA-child<\/strong> (nel mio caso <strong>digital-agency-lite-child<\/strong>) e copiare al suo interno i due file creati. Il tema figlio \u00e8 pronto per per essere abilitato.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cosa farne si scoprir\u00e0 successivamente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Problema<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In alcuni temi, il caricamento del CSS figlio non &#8220;va a buon fine&#8221;, o meglio non viene caricato nell&#8217;ordine voluto (su questo fare riferimento alla funzione <a rel=\"noreferrer noopener\" href=\"https:\/\/sodocumentation.net\/it\/wordpress\/topic\/6561\/funzione--add-action---\" target=\"_blank\">add_action<\/a>). Ho utilizzato, quindi, per <strong><em>functions.php<\/em><\/strong>, il seguente codice che utilizza anche il terzo parametro di <strong>add_action<\/strong>: <strong>$priority<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:php decode:true \" title=\"functions.php\">&lt;?php\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 11 );\nfunction enqueue_parent_theme_style() {\n\twp_enqueue_style( 'child-style', get_stylesheet_uri() );\n}\n?&gt;<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Layout<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Gli elementi del layout che a me interessano (nel caso del layout ad <strong>1 <\/strong>colonna) si dispongono nel seguente modo.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:xhtml decode:true \" title=\"Disposizione DIV visualizzando i contenuti come HTML\">\/\/ Disposizione DIV per le PAGINE \n\/\/ -------------------------------------------------\n&lt;main id=\"maincontent\" class=\"middle-align\" role=\"main\"&gt; \n    &lt;div class=\"container\"&gt;\n   \t\t&lt;div id=\"content-vw\"&gt;\n    \t\t&lt;h1&gt; TITOLO &lt;\/h1&gt;\n\n\/\/ Disposizione DIV per ARTICOLI e RICERCA\n\/\/ -----------------------------------------------\n&lt;div class=\"container\"&gt;\n\t&lt;main id=\"maincontent\" class=\"middle-align\" role=\"main\"&gt;\n\t\t&lt;header&gt;\n\t\t\t&lt;h1 class=\"entry-title\"&gt; TITOLO &lt;\/h1&gt; \n\t\t&lt;\/header&gt;<\/pre><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/vitocafazzo.it\/site_Wp\/wp-content\/uploads\/2020\/10\/Tema_layout.jpeg\" alt=\"\" class=\"wp-image-396\" width=\"466\" height=\"381\"\/><\/figure>\n<\/div>\n\n<p>Il tema presenta una &#8220;fastidiosa&#8221; icona di caricamento che, devo dire, <em>rompe le scatole<\/em>. Ho individuato il richiamo a tale icona nel <code>div<\/code> con <code>id=status<\/code>. Per risolvere ho usato il <code>display:none;<\/code> all&#8217;interno del CSS<\/p>\n\n\n<h3 class=\"wp-block-heading\">File nelle sottocartelle<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il tema che sto usando per questa installazione (non tutti i temi lo fanno) permette di &#8220;lavorare&#8221; anche sui file PHP che si trovano all&#8217;interno di sottocartelle. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per fare ci\u00f2 basta ricreare la <em>struttura ad albero<\/em> del file-system. Ad esempio se mi interessa modificare il file <em>single-post-layout.php<\/em> che si trova all&#8217;interno della cartella <em>template-parts<\/em> del tema padre, basta creare, all&#8217;interno del tema figlio la cartella <em>template-parts<\/em> e inserire al suo interno il file, da modificare,  <em>single-post-layout.php<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Settaggi per <strong>digital-agency-lite<\/strong><\/h3>\n\n\n<p>Tenuto conto che alcune delle personalizzazioni sono state realizzate con CSS dedicati, molti elementi sono stati settati dal pannello di controllo del tema (Personalizzazione).<\/p>\n<ul>\n<li>Tipografia a tema <strong>&gt;&gt;&gt; <\/strong>Tipografia del contenuto <strong>&gt;&gt;&gt; <span style=\"color: #003366;\">Colore di etichetta di ancoraggio<\/span><\/strong><\/li>\n<li>Tipografia a tema <strong>&gt;&gt;&gt; <\/strong>Tipografia globale <strong>&gt;&gt;&gt; <span style=\"color: #003366;\">Tutti i colori della sezione<\/span><\/strong><\/li>\n<li>VW Settings <strong>&gt;&gt;&gt; <\/strong>Impostazioni dei post sul blog <strong>&gt;&gt;&gt; <\/strong>Post settings <strong>&gt;&gt;&gt; <span style=\"color: #003366;\">Abilitazion\/Disabilitazione\/Modifica attributi dei post: data, autore, paginazione etc. etc.<\/span><\/strong><\/li>\n<li>VW Settings <strong>&gt;&gt;&gt; <\/strong>Impostazioni dei post sul blog <strong>&gt;&gt;&gt; <\/strong>Related post settings <strong>&gt;&gt;&gt; <span style=\"color: #003366;\">Disabilitati<\/span><\/strong><\/li>\n<li>VW Settings <strong>&gt;&gt;&gt; <\/strong>Impostazioni dei post sul blog <strong>&gt;&gt;&gt; <\/strong>Single post settings <strong>&gt;&gt;&gt; <\/strong><span style=\"color: #800000;\"><span style=\"color: #003366;\"><strong>Post navigation text<\/strong><\/span>&nbsp;<\/span><\/li>\n<li>VW Settings <strong>&gt;&gt;&gt; <\/strong>Impostazioni generali &nbsp;<strong>&gt;&gt;&gt; <span style=\"color: #003366;\">Layout di larghezza e impostazione ad una colonna&nbsp;<\/span><\/strong><\/li>\n<li>VW Settings <strong>&gt;&gt;&gt; <\/strong>404 page settings&nbsp;&nbsp;<strong>&gt;&gt;&gt;<span style=\"color: #003366;\"> Pagina 404 riscritta nel tema-child<\/span><\/strong><\/li>\n<li>Denominazione del sito&nbsp; <strong>&gt;&gt;&gt; <span style=\"color: #003366;\">Logo, titolo, icona etc. etc.<\/span><\/strong><\/li>\n<\/ul>\n\n\n<p class=\"wp-block-paragraph\">Altre personalizzazioni non sono state usate, ma per nuove tipologie di siti potranno essere molto utili.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Problemi con aggiornamenti del tema<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Dopo un aggiornamento del tema, si \u00e8 presentato un<strong> link di navigazione<\/strong> che non avevo impostato. <strong>Soluzione<\/strong>: Aspetto -> Personalizza -> Impostazione dei post sul blog &#8211; > Single post settings: disattivare <code>Single post breadcrump<\/code> (prima voce dell&#8217;elenco). La procedura descritta vale solo per i post, per tutte le altre pagine il problema rimane. Non resta che disabilitare<code> .bradcrumbs<\/code> in <strong>style.css<\/strong> con <code>display:none;<\/code><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Torna all&#8217;elenco WordPress Il tema che ho utilizzato per questa installazione \u00e8 digital-agency-lite. L&#8217;ho scelto per due motivi: Mi sembra abbastanza &#8220;spartano&#8221; e spero mi possa permettere alcune personalizzazioni Offre la possibilit\u00e0 di scegliere un layout personalizzato (1, 2 o 3 colonne nella sezione Personalizza -&gt; VW Settings -&gt; Impostazioni generali) Costruzione del tema child [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-homexxxxxxxxxxx"],"_links":{"self":[{"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":5,"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":1895,"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/posts\/32\/revisions\/1895"}],"wp:attachment":[{"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vitocafazzo.it\/site_Wp\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}