Vuoi cambiare un colore, nascondere un elemento o modificare un font sul tuo sito WordPress<\/a> senza toccare i file del tema? Il CSS personalizzato<\/strong> ti permette di sovrascrivere qualsiasi stile del tema senza rischiare di perdere le modifiche con un aggiornamento. In questa guida ti spiego tutti i metodi disponibili, dal pi\u00f9 semplice al pi\u00f9 avanzato.<\/p>\n Modificare il file style.css<\/span> del tema \u00e8 la tentazione pi\u00f9 comune, ma \u00e8 un errore. Ogni volta che il tema viene aggiornato, i tuoi cambiamenti vengono sovrascritti e persi. Anche usando un tema child, le modifiche al CSS possono diventare difficili da gestire se non sono organizzate. I metodi descritti in questa guida mantengono il tuo CSS personalizzato separato dal tema, protetto dagli aggiornamenti e facile da modificare.<\/p>\n Il modo pi\u00f9 semplice per aggiungere CSS personalizzato \u00e8 il campo integrato di WordPress. Vai su Aspetto > Personalizza > CSS aggiuntivo<\/strong>. Qui trovi un editor con anteprima in tempo reale: scrivi il tuo CSS e vedrai immediatamente l’effetto sulla pagina. Ad esempio, per cambiare il colore dei link:<\/p>\n Il CSS aggiuntivo viene salvato nel database di WordPress, non nei file del tema. Questo significa che sopravvive agli aggiornamenti del tema e puoi anche cambiare tema senza perderlo. \u00c8 il metodo consigliato per piccole modifiche estetiche.<\/p>\n Per modificare un elemento specifico, devi conoscere il suo selettore CSS<\/strong>. Usa gli strumenti per sviluppatori del browser (F12) per ispezionare l’elemento. Clicca con il tasto destro sull’elemento che vuoi modificare e seleziona “Ispeziona”. Il pannello mostra il codice HTML dell’elemento e tutti gli stili CSS applicati. Da qui puoi identificare la classe o l’ID da usare nel tuo CSS personalizzato.<\/p>\n Ad esempio, se vuoi modificare il titolo del sito e l’ispettore mostra che ha la classe site-title<\/span>, il tuo CSS sar\u00e0:<\/p>\n Se il tuo CSS non ha effetto, potrebbe essere sovrascritto dagli stili del tema. In quel caso, aggiungi !important<\/span> dopo il valore per forzare la priorit\u00e0, ma usalo con parsimonia.<\/p>\n Per modifiche pi\u00f9 estese, un tema child<\/strong> \u00e8 la soluzione migliore. Il tema child eredita tutti gli stili del tema genitore e ti permette di aggiungere o sovrascrivere CSS nel suo file style.css<\/span>. Le modifiche nel tema child non vengono toccate dagli aggiornamenti del tema genitore.<\/p>\n Il file style.css<\/span> del tema child deve importare gli stili del genitore e aggiungere le personalizzazioni dopo:<\/p>\n Questo metodo \u00e8 ideale quando hai decine o centinaia di righe di CSS personalizzato, perch\u00e9 il file \u00e8 pi\u00f9 facile da organizzare e versionare rispetto al campo CSS aggiuntivo del Customizer.<\/p>\n Se preferisci un’interfaccia grafica senza creare un tema child, plugin come Simple Custom CSS and JS<\/strong> offrono un editor dedicato nella bacheca di WordPress. Puoi creare fogli di stile separati, organizzarli per funzionalit\u00e0 e scegliere se caricarli nell’header o nel footer. Il plugin supporta anche l’aggiunta di JavaScript personalizzato.<\/p>\n Un altro approccio \u00e8 usare il plugin Code Snippets<\/strong>, che permette di aggiungere CSS tramite snippet PHP usando la funzione wp_add_inline_style()<\/span>. Questo metodo \u00e8 pi\u00f9 tecnico ma offre il vantaggio di poter condizionare il CSS in base alla pagina, al tipo di contenuto o al ruolo dell’utente.<\/p>\n Per gli sviluppatori, il modo pi\u00f9 pulito di aggiungere un foglio di stile personalizzato \u00e8 tramite il file functions.php<\/span> del tema child. Crea un file CSS separato e registralo con WordPress:<\/p>\n Questo metodo separa il CSS personalizzato in un file dedicato, lo carica correttamente tramite il sistema di WordPress e permette di gestire le dipendenze e il versioning. \u00c8 la best practice per progetti professionali.<\/p>\n A volte vuoi applicare stili solo a determinate pagine. WordPress aggiunge automaticamente classi CSS al tag body<\/span> che identificano il tipo di pagina. Ad esempio, la homepage ha la classe home<\/span>, le pagine singole hanno page-id-XX<\/span> e gli articoli hanno single-post<\/span>. Puoi sfruttare queste classi per CSS specifico:<\/p>\n Se vuoi personalizzare il design del tuo sito WordPress senza rischiare di rompere nulla, il team di SoccorsoWP<\/a><\/strong> pu\u00f2 modificare stili, layout e aspetto grafico del tuo sito in modo professionale. Apri un ticket<\/a> e trasforma il tuo sito nel modo che desideri.<\/p>\n","protected":false},"excerpt":{"rendered":" Come aggiungere CSS personalizzato a WordPress senza modificare il tema Vuoi cambiare un colore, nascondere un elemento o modificare un font sul tuo sito WordPress…<\/p>\n","protected":false},"author":1,"featured_media":25806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"CSS personalizzato WordPress: come aggiungerlo senza rischi","_seopress_titles_desc":"Come aggiungere CSS personalizzato a WordPress senza modificare il tema. Customizer, tema child, plugin e functions.php a confronto.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[742],"tags":[],"class_list":["post-25805","post","type-post","status-publish","format-standard","has-post-thumbnail","category-temi"],"_links":{"self":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/comments?post=25805"}],"version-history":[{"count":0,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25805\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media\/25806"}],"wp:attachment":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media?parent=25805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/categories?post=25805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/tags?post=25805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Perch\u00e9 non modificare direttamente i file del tema<\/h2>\n
Il campo CSS aggiuntivo nel Customizer<\/h2>\n
a {\n color: #e74c3c;\n}\na:hover {\n color: #c0392b;\n}<\/pre>\nTrovare il selettore CSS giusto<\/h2>\n
.site-title {\n font-size: 28px;\n font-weight: 700;\n letter-spacing: 1px;\n}<\/pre>\nCSS personalizzato con un tema child<\/h2>\n
\/*\nTheme Name: MioTema Child\nTemplate: tema-genitore\n*\/\n\n\/* Le personalizzazioni vanno qui *\/\n.header-container {\n background-color: #2c3e50;\n padding: 20px 0;\n}\n\n.footer-widget {\n margin-bottom: 30px;\n}<\/pre>\nAggiungere CSS con un plugin<\/h2>\n
CSS personalizzato tramite functions.php<\/h2>\n
function carica_css_personalizzato() {\n wp_enqueue_style(\n 'custom-style',\n get_stylesheet_directory_uri() . '\/css\/custom.css',\n array(),\n '1.0.0'\n );\n}\nadd_action('wp_enqueue_scripts', 'carica_css_personalizzato');<\/pre>\nCSS condizionale per pagine specifiche<\/h2>\n
\/* Solo sulla homepage *\/\n.home .hero-section {\n padding: 80px 0;\n}\n\n\/* Solo sulla pagina Contatti (ID 42) *\/\n.page-id-42 .entry-content {\n max-width: 600px;\n margin: 0 auto;\n}<\/pre>\nServe aiuto con la personalizzazione?<\/h2>\n