Il Customizer di WordPress fornisce un'interfaccia di anteprima dal vivo per personalizzare le impostazioni del tema. A differenza delle vecchie pagine Opzioni del Tema che richiedevano il ricaricamento della pagina per vedere le modifiche, il Customizer consente agli utenti di vedere le modifiche in tempo reale. Per gli sviluppatori di temi e plugin, l'API del Customizer fornisce un modo standardizzato per aggiungere opzioni di configurazione.<\/p>
Questa guida copre come aggiungere opzioni personalizzate al Customizer di WordPress, dalle impostazioni di base ai controlli avanzati con anteprima live.<\/p>
Il Customizer ha tre livelli: pannelli (sezioni principali), sezioni (gruppi di impostazioni all'interno di un pannello) e controlli (impostazioni individuali). I pannelli organizzano le sezioni, le sezioni organizzano i controlli e i controlli consentono agli utenti di modificare le impostazioni. Ogni impostazione deve avere un controllo registrato per apparire nel Customizer.<\/p>
Aggiungi tutto il codice del Customizer durante l'hook di azione customize_register. L'hook fornisce un oggetto $wp_customize che \u00e8 l'API principale per aggiungere pannelli, sezioni, impostazioni e controlli.<\/p>
Usa $wp_customize->add_panel() per creare un raggruppamento principale e $wp_customize->add_section() per creare sottogruppi all'interno dei pannelli. Ognuno accetta un ID e un array di argomenti che includono titolo, descrizione, priorit\u00e0 e capability. Le sezioni possono essere aggiunte senza un pannello genitore per strutture pi\u00f9 semplici.<\/p>
Usa titoli e descrizioni descrittivi e facili da usare. La descrizione appare come testo di suggerimento sotto il titolo della sezione nell'interfaccia del Customizer. Dai priorit\u00e0 alle tue sezioni in modo che le pi\u00f9 importanti appaiano per prime.<\/p>
Usa $wp_customize->add_setting() per registrare una modifica del tema. I parametri includono valore di default, tipo di trasporto ('refresh' o 'postMessage'), sanitize_callback e capability. Usa $wp_customize->add_control() per creare l'elemento UI per l'impostazione. WordPress fornisce tipi di controllo integrati: text, textarea, checkbox, select, radio, color, image e cropped_image.<\/p>
Usa il parametro 'transport' per controllare come vengono applicate le modifiche. 'refresh' ricarica l'intera anteprima. 'postMessage' aggiorna l'anteprima tramite JavaScript, che \u00e8 pi\u00f9 veloce e fluido ma richiede JavaScript personalizzato per applicare le modifiche.<\/p>
Per un'esperienza di anteprima live fluida, registra un file JavaScript di anteprima del customizer sull'hook customize_preview_init. Usa l'API wp.customize in questo file per ascoltare le modifiche alle impostazioni e applicarle all'anteprima in tempo reale. Collega le modifiche alle impostazioni con wp.customize(setting_id, function(value) { value.bind(function(to) { \u2026 }); }).<\/p>
Aggiorna le propriet\u00e0 CSS tramite jQuery o manipolazione diretta del DOM per un feedback immediato. Per le impostazioni di colore, imposta css(). Per le impostazioni di testo, aggiorna text(). Per i toggle di visibilit\u00e0, usa show()\/hide().<\/p>
Quando i tipi di controllo integrati non sono sufficienti, crea tipi di controllo personalizzati estendendo WP_Customize_Control. Sovrascrivi il metodo render_content() per generare HTML personalizzato per il tuo controllo. WordPress fornisce diverse classi di controllo di base: WP_Customize_Color_Control, WP_Customize_Image_Control, WP_Customize_Upload_Control e WP_Customize_Cropped_Image_Control.<\/p>
Registra la tua classe di controllo personalizzata con $wp_customize->register_control_type(). Questo dice al JavaScript del Customizer come gestire il tuo controllo personalizzato durante l'anteprima live.<\/p>
L'API del Personalizzatore \u00e8 il modo consigliato per aggiungere opzioni del tema in WordPress. Usa l'hook customize_register per aggiungere pannelli, sezioni, impostazioni e controlli. Usa postMessage per un'esperienza di anteprima live fluida. Crea tipi di controllo personalizzati per input specializzati. Il Personalizzatore fornisce un'interfaccia coerente e intuitiva che \u00e8 familiare a tutti gli utenti WordPress.<\/p>","protected":false},"excerpt":{"rendered":"
Come usare l'API Customizer di WordPress per aggiungere opzioni del tema e pannelli, sezioni, impostazioni e controlli del customizer per il tuo tema o plugin.<\/p>","protected":false},"author":3,"featured_media":1166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_primary_source":"","visibility_scope":"","ai_summary":"","ai_intent":"","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[7,6],"tags":[44,27,35],"ai_visibility":[],"class_list":["post-603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","category-wordpress","tag-api-first","tag-developer-to-founder","tag-saas"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts\/603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/comments?post=603"}],"version-history":[{"count":2,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts\/603\/revisions"}],"predecessor-version":[{"id":1308,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/posts\/603\/revisions\/1308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/media\/1166"}],"wp:attachment":[{"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/media?parent=603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/categories?post=603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/tags?post=603"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/aarkly.com\/it\/wp-json\/wp\/v2\/ai_visibility?post=603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}