facebook email

Come creare controlli personalizzati per WP customizer

Ti trovi in:
  1. blog Come creare controlli personalizzati per WP customizer

Pubblicato il , aggiornato il 19 Dicembre 2021

Come creare controlli personalizzati per Wp customizer? Se vuoi aggiungere funzioni personalizzate per i controlli della schermata personalizza di wordpress dovrai estendere la classe WP_Customize_Control.

Con la funzione extends puoi aggiungere codice HTML, CSS e php ai tuoi controlli custom e generare azioni personalizzate per la schermata “personalizza”.

Se stai creando un tema per wordpress o semplicemente vuoi aggiungere controlli custom al backend del personalizza, questa è la soluzione, vediamo cosa fare.

help_outline

Come creare controlli personalizzati per Wp customizer

Per prima cosa apri il file functions.php del tuo tema child e inserisci questa funzione:

<?php
class Ekw_My_Custom_Control extends WP_Customize_Control{
  public $type = 'ekw_my_custom_control';
  public function render_content() {
    ?>
    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <?php

    <div>
      <input type="text" id="<?php echo esc_attr($this->id); ?>" name="<?php echo esc_attr($this->id); ?>_checkbox1" value="<?php echo $this->value();?>" <?php $this->link();?>>
    </div>
    <?php
  }
}
?>

Questa funzione crea un nuovo controllo personalizzato contenente un solo campo input di tipo testo ma puoi aggiungerne quanti ne vuoi.

In questa funzione dovrai far attenzione ad inserire:

  • Un tipo di controllo univoco (public $type = ‘ekw_my_custom_control’;)
  • la funzione render content() che genera il contenuto del tuo controllo
  • I campi di input necessari
  • Le variabili del punto successivo.

I parametri che puoi utilizzare sono:

  • $this->id: l’id univoco assegnato dalla funzione add_control()
  • $this->label: il label assegnato dalla funzione add_control()
  • $this->value(): il valore del campo input da salvare nel DB
  • $this->link(); necessario per far funzionare il tutto, viene assegnato al campo input di cui si vuole recuperare il valore per salvarlo nel DB
help_outline

Come salvare i valori nel database

Abbiamo detto che è necessario assegnare $this->link() al campo input di cui vogliamo recuperare il valore, altrimenti non verrà salvato alcun dato.

Non serve altro codice perché il customizer crea un campo ‘theme_mod’ con il valore recuperato con $this->link().

Per recuperare il tuo valore dovrai usare questo codice:

get_theme_mod('id-univoco-assegnato-con-add-control()');
help_outline

Come visualizzare il controllo custom nella schermata personalizza

Ora che abbiamo creato il nostro controllo personalizzato dobbiamo visualizzarlo nel database.

Per questo useremo le stesse funzioni per creare pannelli nella schermata personalizza, quindi add_panel(), add_sections(), add_settings() e add_control().

    $wp_customize->add_control(new Ekw_My_Custom_Control($wp_customize, 'my-custom-id', array(
      'label'    		=> 'Testo',
      'type'     		=> 'ekw_align_items', //tipo definito nella variabile $type in precedenza
      'settings'		=> 'your-settings-name',
      'section' => 'your-section-name’,
    )));
help_outline

controlli personalizzati per Wp customizer: Risoluzione conflitti con Javascript e jQuery

Se utilizzi Javascript o jQuery per assegnare valori ai tuoi campi input potresti riscontrare errori di salvataggio nel database da parte del customizer.

Questo succede anche con i campi di tipo “hidden” che ricevono valori da altre fonti ma non preoccuparti, la soluzione è molto semplice.

Se i valori non vengono inseriti dall’utente allora non si attiva la funzione che effettua il reload della pagina e che recupera i nuovi valori, basta quindi usare “.trigger(‘change’)” in questo modo:

$(document).on("click", 'input[name="my-custom-elem”]', function () {
   var value = “my-custom-value”;

   /* effettua il reload della pagina e assegna un nuovo valore all’input */
   $(‘input[type=”hidden”]’).val(value).trigger('change'); 
});

Ovviamente, l’input di tipo hidden deve avere assegnato il $this->link() tramite php.

Se può esserti utile, dai uno sguardo anche a come risolvere errore $ is not a function.

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message