{"id":233522,"date":"2023-02-15T13:13:00","date_gmt":"2023-02-15T10:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233522"},"modified":"2022-11-11T00:08:53","modified_gmt":"2022-11-10T21:08:53","slug":"come-aggiungere-impostazioni-personalizzate-a-un-widget-esistente-in-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-aggiungere-impostazioni-personalizzate-a-un-widget-esistente-in-wordpress\/","title":{"rendered":"Come aggiungere impostazioni personalizzate a un widget esistente in WordPress"},"content":{"rendered":"\n

In questo post impareremo come aggiungere il tuo HTML personalizzato e le impostazioni a qualsiasi widget standard di WordPress o altri. Usando queste impostazioni impareremo diversi trucchi su come manipolare il comportamento dei widget di conseguenza.<\/p>\n

La prima parte; aggiungere e salvare le impostazioni personalizzate \u00e8 abbastanza semplice. La seconda parte dipende da cosa si vuole fare nello specifico e da quale widget si sta manipolando. In questo post ho incluso due esempi; saltare un widget in base a un’impostazione (per aggiungere impostazioni per controllare la visibilit\u00e0 del widget in determinati casi) e manipolare gli argomenti del menu del widget di navigazione di WordPress. L’esempio fornito per la seconda parte dovrebbe darti un buon indizio su come puoi gestire ci\u00f2 che vuoi fare.<\/p>\n

Aggiunta di impostazioni personalizzate a qualsiasi widget<\/h2>\n

Per aggiungere impostazioni personalizzate ai widget esistenti utilizziamo un’azione chiamata [in_widget_form](https:\/\/developer.wordpress.org\/reference\/hooks\/in_widget_form\/)<\/code>. Questa azione viene applicata alla funzione di tutti i widget form()<\/code>, che \u00e8 la funzione responsabile del rendering della parte amministrativa del widget.<\/p>\n

Con quel filtro otteniamo tre parametri ma in realt\u00e0 ci interessano solo il primo e il terzo. La prima \u00e8 l’istanza del widget che useremo per recuperare i nomi e gli ID dei campi appropriati e (facoltativamente) verificare a quale tipo di widget siamo agganciati. Il terzo parametro \u00e8 un array delle impostazioni salvate del widget, che dobbiamo usare per controllare lo stato salvato in precedenza delle nostre impostazioni.<\/p>\n

Il codice seguente aggiunger\u00e0 una casella di controllo con il nome dell’impostazione ‘ awp-custom-setting<\/code>‘. Regola il nome e l’HTML in base all’input di cui hai bisogno. Ci\u00f2 che \u00e8 importante \u00e8 utilizzare $widget->get_field_name()<\/code>per aggiungere ID e attributi appropriati name<\/code>a tutti i tuoi input. Il valore dei tuoi input dovrebbe essere popolato con ci\u00f2 che \u00e8 stato salvato in precedenza, e questo \u00e8 qualcosa che troverai nel parametro $instance<\/code>. Per le caselle di controllo puoi utilizzare la funzione di WordPress [checked](https:\/\/developer.wordpress.org\/reference\/functions\/checked\/)()<\/code>per generare l’attributo selezionato.<\/p>\n

add_action('in_widget_form', function($widget, $return, $instance) {\n    ?>\n    <p>\n        <input type=\"checkbox\" class=\"checkbox\" name=\"<?php echo $widget->get_field_name('awp-custom-setting'); ?>\" id=\"<?php echo $widget->get_field_name('awp-custom-setting'); ?>\" <?php checked(isset($instance['awp-custom-setting'])? $instance['awp-custom-setting']: 0); ?> \/>\n        <label for=\"<?php echo $widget->get_field_name('awp-custom-setting'); ?>\"><?php __('Activate something', 'txtdomain'); ?><\/label>\n    <\/p>\n    <?php\n}, 10, 3);<\/code><\/pre>\n
Dopo averlo aggiunto al functions.php<\/code>codice del tuo tema o del plug-in, tutti i widget dovrebbero ora ottenere una casella di controllo alla fine del loro modulo in admin.<\/p>\n
Scegli come target widget specifici<\/h3>\n
Se vuoi applicare le tue impostazioni solo a uno o ad alcuni widget specifici puoi confrontare la propriet\u00e0 id_base<\/code>nell’oggetto $widget<\/code>. Avrai bisogno di sapere che l’ID di base \u00e8: se non sei sicuro, fai semplicemente un var_dump($widget->id_base)<\/code>inside the hook, salva e controlla l’output per ogni widget in admin. Ad esempio, il widget di navigazione ha la base ID nav_menu<\/code>e il widget Archivi ha archives<\/code>.<\/p>\n
Nell’esempio seguente controlliamo se il widget \u00e8 un widget di navigazione. In caso contrario, la funzione viene annullata con un return<\/code>. Solo i widget di navigazione riceveranno la casella di controllo personalizzata:<\/p>\n
add_action('in_widget_form', function($widget, $return, $instance) {\n    if ($widget->id_base != 'nav_menu') {\n        return;\n    }\n\u00a0\n    ?>\n    <p>\n    ...<\/code><\/pre>\n
Dovresti ottenere l’impostazione in admin in questo modo:<\/p>\n
\"Come<\/a><\/p>\n
Quindi l’impostazione \u00e8 stata aggiunta, tuttavia al momento le tue impostazioni non vengono salvate. Risolviamolo.<\/p>\n
Salvataggio delle impostazioni personalizzate<\/h2>\n
Dobbiamo collegarci alla update()<\/code>funzione del widget per aggiornare le nostre impostazioni personalizzate.<\/p>\n
Per questo utilizziamo il filtro [widget_update_callback](https:\/\/developer.wordpress.org\/reference\/hooks\/widget_update_callback\/)<\/code>. Il processo di salvataggio delle nostre impostazioni \u00e8 esattamente come faresti quando scrivi una classe widget. Il filtro fornisce tre parametri; il primo \u00e8 l’array di istanza che verr\u00e0 salvato. Il secondo parametro \u00e8 lo stato che \u00e8 stato inviato al salvataggio del widget e il terzo \u00e8 il vecchio stato. Dobbiamo assicurarci di recuperare i nostri nuovi valori dal secondo parametro e aggiungerli al primo.<\/p>\n
Questo \u00e8 il modo in cui aggiorneremmo lo stato della nostra casella di controllo; come vogliamo salvare un valore true<\/code>o false<\/code>:<\/p>\n
add_filter('widget_update_callback', function($instance, $new_instance, $old_instance) {\n    $instance['awp-custom-setting'] = isset($new_instance['awp-custom-setting']);\n    return $instance;\n}, 10, 3);<\/code><\/pre>\n
Ricordarsi di adattare i nomi di input ai propri nomi di impostazione. Se stai aggiungendo pi\u00f9 input, devi ripetere l’operazione per ciascuno.<\/p>\n
Ora dovresti vedere che le tue impostazioni personalizzate vengono salvate in admin!<\/p>\n
Utilizzo delle impostazioni del widget personalizzate salvate<\/h2>\n
Come accennato in precedenza, questa parte dipende davvero da cosa vuoi che facciano le tue impostazioni. Sfortunatamente non \u00e8 cos\u00ec semplice perch\u00e9 la maggior parte dei widget non aggiunge filtri o hook nei loro output. Cominciamo con qualcosa di semplice; evitare di eseguire il rendering del widget a seconda delle impostazioni.<\/p>\n
Impedisci il rendering del widget in base all’impostazione personalizzata<\/h3>\n
Supponi di aggiungere impostazioni per quando il widget dovrebbe essere visibile; ad esempio nascondendolo in determinati modelli (nascondi nel modello dei risultati di ricerca, ma mostra in prima pagina e singolo) o reagisci ad altri stati di WordPress.<\/p>\n
Per questo possiamo usare il filtro [widget_display_callback](https:\/\/developer.wordpress.org\/reference\/hooks\/widget_display_callback\/)<\/code>. Tutto quello che dobbiamo fare \u00e8 controllare il parametro di istanza fornito per la nostra impostazione e tornare false<\/code>se non vogliamo eseguire il rendering del widget.<\/p>\n
Questo semplice codice eviter\u00e0 il rendering del widget se la casella di controllo personalizzata che abbiamo aggiunto sopra \u00e8 selezionata:<\/p>\n
add_filter('widget_display_callback', function($instance, $widget, $args) {\n    if ($instance['awp-custom-setting']) {\n        return false;\n    }\n    return $instance;\n}, 10, 3);<\/code><\/pre>\n
Probabilmente vuoi confrontare altri stati. Questo \u00e8 un semplice esempio in cui la nostra casella di controllo \u00e8 una casella di controllo per "Nascondi nelle visualizzazioni di post singoli". Verifichiamo semplicemente se ci troviamo attualmente in una visualizzazione di un singolo post con [is_singular](https:\/\/developer.wordpress.org\/reference\/functions\/is_singular\/)()<\/code>e se la casella di controllo \u00e8 selezionata, restituiamo false<\/code>.<\/p>\n
add_filter('widget_display_callback', function($instance, $widget, $args) {\n    if (is_singular() && $instance['awp-custom-setting']) {\n        return false;\n    }\n    return $instance;\n}, 10, 3);<\/code><\/pre>\n
Modifica delle impostazioni o dell’output del widget esistente<\/h3>\n
Un potente filtro da utilizzare per giocare con i widget esistenti \u00e8 [dynamic_sidebar_params](https:\/\/developer.wordpress.org\/reference\/hooks\/dynamic_sidebar_params\/)<\/code>. Dai un’occhiata alla pagina della documentazione per vedere quali parametri puoi modificare. Ad esempio puoi aggiungere classi personalizzate, puoi modificare le stringhe before_widget<\/code>HTML o after_widget<\/code>. Tuttavia questo vale per tutti i widget, anche admin e frontend. E con questo filtro non hai accesso all’istanza del widget (impostazioni salvate) o alle impostazioni del widget (es. tipo di widget).before_title``after_title<\/code><\/p>\n
Ovviamente dobbiamo almeno controllare le nostre impostazioni personalizzate. Quindi abbiamo bisogno di fare un po’ di codice per recuperare i valori di cui abbiamo bisogno.<\/p>\n
La prima cosa che possiamo fare \u00e8 accedere a una variabile globale $wp_registered_widgets<\/code>. Questo \u00e8 un array che contiene tutti i widget disponibili e registrati. Usando quel registro possiamo usare il parametro del filtro per trovare il widget specifico in cui ci troviamo attualmente. Una volta trovato il widget corrente, abbiamo accesso ai parametri del widget, come id_base<\/code>\u2013 che come abbiamo visto prima ci dice il tipo di widget.<\/p>\n
add_filter('dynamic_sidebar_params', function($params) {\n    global $wp_registered_widgets;\n\u00a0\n    $this_widget_id = $params[0]['widget_id'];  \/\/ Current widget ID\n    $this_widget = $wp_registered_widgets[$this_widget_id];\n    $widget_object = $this_widget['callback'][0];  \/\/ Current widget object\n\u00a0\n    \/\/ With $widget_object we have access to e.g. id_base for checking type of widget\n    if ($widget_object->id_base != 'nav_menu') {\n        return $params;\n    }\n\u00a0\n    return $params;\n});<\/code><\/pre>\n
Come puoi vedere in linea #9<\/code>possiamo finalmente verificare a quale tipo di widget ci troviamo attualmente. Nel codice sopra torno se il tipo di widget non \u00e8 un widget di navigazione poich\u00e9 la nostra impostazione personalizzata \u00e8 stata aggiunta solo per quei widget.<\/p>\n
Recupero delle impostazioni del widget salvate<\/h3>\n
Ma dobbiamo anche recuperare le impostazioni salvate per widget (inclusa la nostra impostazione personalizzata). Tutte le impostazioni salvate dei widget vengono archiviate nel database delle opzioni raggruppate per tipo di widget. Utilizzando una propriet\u00e0 nel registro dei widget possiamo utilizzare [get_option](https:\/\/developer.wordpress.org\/reference\/functions\/get_option\/)()<\/code>per recuperare le impostazioni salvate per il tipo di widget corrente. Il ritorno sar\u00e0 un array indicizzato in cui \u00e8 necessario utilizzare un altro parametro del filtro per trovare l’indice corrente (perch\u00e9 \u00e8 possibile aggiungere pi\u00f9 widget dello stesso tipo nella stessa barra laterale o in diverse barre laterali). \u00c8 pi\u00f9 facile mostrarlo con il codice che spiegarlo:<\/p>\n
    ...\n    if ($widget_object->id_base != 'nav_menu') {\n        return $params;\n    }\n\u00a0\n    $all_settings = get_option($widget_object->option_name);\n    $saved_settings = $all_settings[$params[1]['number']];\n    if ($saved_settings['my-custom-thing']) {\n        \/\/ Do your thing\n    }\n\u00a0\n    return $params;\n});<\/code><\/pre>\n
Finalmente otteniamo le impostazioni salvate del widget! Nel codice di esempio sopra, alla riga #9<\/code>, controlliamo se la nostra casella di controllo personalizzata \u00e8 selezionata o meno.<\/p>\n
Esempi<\/h3>\n
A questo punto, sta a te cosa vuoi fare. Ad esempio, puoi eseguire il rendering di un output dopo il titolo del widget, ma prima del contenuto del widget:<\/p>\n
    ...\n    if ($saved_settings['my-custom-thing']) {\n        $params[0]['after_title'] .= '<div>This appears before widget content<\/div>';\n    }\n    ...<\/code><\/pre>\n
Per casi d’uso pi\u00f9 reali, normalmente risolveresti la maggior parte aggiungendo determinati filtri a questo punto, chiamando add_filter()<\/code>a questo punto.<\/p>\n
Di seguito \u00e8 riportato un esempio di modifica degli argomenti del menu di navigazione aggiungendo un filtro se la nostra impostazione \u00e8 stata selezionata. Se era deselezionato, ci assicuriamo che il filtro sia stato rimosso. Il filtro per modificare gli argomenti per il rendering di un menu di navigazione \u00e8 widget_nav_menu_args<\/code>. Nel codice seguente ho definito una funzione da applicare a questo filtro che aggiunge un nuovo argomento agli argomenti del menu; un camminatore:<\/p>\n
    ...\n    if ($saved_settings['my-custom-thing']) {\n        add_filter('widget_nav_menu_args', 'awp_add_menu_walker', 10, 3);\n    } else {\n        remove_filter('widget_nav_menu_args', 'awp_add_menu_walker', 10);\n    }\n    return $params;\n});\nfunction awp_add_menu_walker($nav_menu_args, $nav_menu, $args) {\n    $nav_menu_args['walker'] = new AWP_Custom_Walker();\n    return $nav_menu_args;\n}<\/code><\/pre>\n
Il codice sopra \u00e8 un esempio di un caso d’uso in cui la casella di controllo personalizzata controlla se applicare o meno un menu walker al menu. Eccellente se si desidera che tutti i menu vengano visualizzati normalmente ma si desidera che l’opzione per widget di menu specifici venga visualizzata in modo diverso. Quello che fa il walker con l’output del menu dipende da te.<\/p>\n
Vedi sotto per il codice completo per aggiungere un’impostazione personalizzata a tutti i menu di navigazione, aggiornarla e applicare un menu walker.<\/p>\n
Si spera che questo sia sufficiente per capire come programmare ci\u00f2 che si desidera fare. Dipende davvero da cosa vuoi fare e dal tipo di widget con cui stai lavorando. Come accennato in precedenza, di solito la maggior parte delle modifiche pu\u00f2 essere risolta aggiungendo filtri per fare le tue cose in dynamic_sidebar_params<\/code>.<\/p>\n
Esempio completo: impostazione della casella di controllo personalizzata sui widget di navigazione per l’applicazione di un menu walker<\/h2>\n
Ecco il codice completo per aggiungere una casella di controllo personalizzata a tutti i widget del menu di navigazione di WordPress per l’utilizzo di un menu walker registrato. (Codice Walker non incluso)<\/p>\n
\/\/ Add custom setting to menu widgets\nadd_action('in_widget_form', function($widget, $return, $instance) {\n    \/\/ Add setting only to menu widgets\n    if ($widget->id_base != 'nav_menu') {\n        return;\n    }\n\u00a0\n    ?>\n    <p>\n        <input type=\"checkbox\" class=\"checkbox\" name=\"<?php echo $widget->get_field_name('activate-walker'); ?>\" id=\"<?php echo $widget->get_field_name('activate-walker'); ?>\" <?php checked(isset($instance['activate-walker'])? $instance['activate-walker']: 0); ?> \/>\n        <label for=\"<?php echo $widget->get_field_name('activate-walker'); ?>\"><?php __('Activate walker', 'txtdomain'); ?><\/label>\n    <\/p>\n    <?php\n}, 10, 3);\n\u00a0\n\u00a0\n\/\/ Update custom setting\nadd_filter('widget_update_callback', function($instance, $new_instance, $old_instance) {\n    $instance['activate-walker'] = isset($new_instance['activate-walker']);\n    return $instance;\n}, 10, 3);\n\u00a0\n\u00a0\n\/\/ Filter sidebar params to add filter if custom setting was activated\nadd_filter('dynamic_sidebar_params', function($params) {\n    global $wp_registered_widgets;\n\u00a0\n    $this_widget_id = $params[0]['widget_id'];\n    $this_widget = $wp_registered_widgets[$this_widget_id];\n    $widget_object = $this_widget['callback'][0];\n\u00a0\n    \/\/ Bail if not a menu widget\n    if ($widget_object->id_base != 'nav_menu') {\n        return $params;\n    }\n\u00a0\n    $all_settings = get_option($widget_object->option_name);\n    $saved_settings = $all_settings[$params[1]['number']];\n\u00a0\n    if ($saved_settings['activate-walker']) {\n        add_filter('widget_nav_menu_args', 'awp_add_menu_walker', 10, 3);\n    } else {\n        remove_filter('widget_nav_menu_args', 'awp_add_menu_walker', 10);\n    }\n\u00a0\n    return $params;\n});\n\u00a0\n\u00a0\n\/\/ Filter nav menu arguments to add walker\nfunction awp_add_menu_walker($nav_menu_args, $nav_menu, $args) {\n    $nav_menu_args['walker'] = new AWP_Custom_Walker();\n    return $nav_menu_args;\n}<\/code><\/pre>\n
Conclusione<\/h2>\n
Spero che questo post sia stato utile per risolvere le tue esigenze o darti alcuni suggerimenti su come puoi fare ci\u00f2 che devi fare!<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Come aggiungere impostazioni personalizzate a qualsiasi widget standard di WordPress. Con queste impostazioni impareremo come manipolare il comportamento dei widget di conseguenza.<\/p>\n","protected":false},"author":1,"featured_media":223663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,720,835,1110,804,804,835,928,720,928,844,844,865,865],"tags":[1168],"class_list":["post-233522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-guida-per-principianti","category-n-a","category-php-6","category-soggetti","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233522"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223663"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}