{"id":228912,"date":"2022-10-13T19:46:00","date_gmt":"2022-10-13T16:46:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228912"},"modified":"2022-11-09T04:46:04","modified_gmt":"2022-11-09T01:46:04","slug":"creazione-di-un-controllo-di-selezione-link-cmb2-personalizzato-per-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/creazione-di-un-controllo-di-selezione-link-cmb2-personalizzato-per-wordpress\/","title":{"rendered":"Creazione di un controllo di selezione link CMB2 personalizzato per WordPress"},"content":{"rendered":"\n

In questo tutorial vedremo come creare un controllo personalizzato per estendere la funzionalit\u00e0 di CMB2<\/a> (Custom Meta Boxes 2) di WebDevStudios<\/a>.<\/p>\n

Sviluppo siti web (e applicazioni web) con WordPress<\/a> CMS (Content Management System), e quando arriva un nuovo progetto puoi garantire che ci sar\u00e0 l’obbligo per me di sviluppare ‘Custom Meta Box’ per consentire all’utente di avere un controllo accurato sul contenuto e sul layout dei siti.<\/p>\n

Descriver\u00f2 in dettaglio come ho creato il Link Picker di controllo CMB2 per CMB2<\/a> (disponibile in tutti i buoni repository di plugin di WordPress). Uno screenshot di cui pu\u00f2 essere visto di seguito.<\/p>\n

Il controllo CMB2 "Link Picker" in azione<\/p>\n

Il selettore di link attiva la finestra di dialogo "Inserisci\/modifica link" incorporata in WordPress quando fai clic sul pulsante "Scegli". Questo pu\u00f2 essere visto nello screenshot qui sotto:<\/p>\n

\"CreazionePremendo il pulsante puoi scegliere da un link (o aggiungerne uno tuo)<\/p>\n

Sono sicuro che sarai d’accordo sul fatto che avere un controllo come questo \u00e8 incredibilmente utile se vuoi dare agli editori del tuo sito la possibilit\u00e0 di aggiungere un collegamento e anche cercare in WordPress i suoi collegamenti interni, piuttosto che dover tagliare e incollare i collegamenti in un collegamento campo.<\/p>\n

Introduzione \/ Storia<\/h2>\n

Per chi non lo sapesse, una meta box risiede nella schermata dell’editor di un post di WordPress e probabilmente conterr\u00e0 vari controlli dei moduli (caselle di testo, elenchi a discesa, caselle di controllo ecc…). Questi controlli consentono agli utenti del tuo sito Web di modificare facilmente una parte di testo o una funzionalit\u00e0 personalizzata sul sito.<\/p>\n

\"Creazione\"CreazioneUn esempio di meta box con vari controlli del modulo<\/p>\n

WordPress ti consente di creare meta box utilizzando funzioni (come [add_meta_box](https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/)<\/code>), ma la creazione di meta box in questo modo pu\u00f2 essere un processo lungo, con molte ripetizioni di codice (soprattutto se desideri utilizzare gli stessi controlli del modulo in pi\u00f9 progetti).<\/p>\n

Perch\u00e9 CMB2?<\/h2>\n

Alcuni di voi potrebbero aver sentito parlare di Advanced Custom Fields<\/a> (ACF) che fornisce una GUI (Graphical User Interface) che consente di creare meta box direttamente con WordPress.<\/p>\n

ACF secondo me non \u00e8 un ottimo strumento<\/strong> per nessuna soluzione web scalabile. Il plug-in fa troppo affidamento sui dati archiviati all’interno del database. Ci\u00f2 causa problemi durante la distribuzione delle modifiche a un sito, poich\u00e9 non puoi semplicemente inviare il codice e visualizzare le modifiche all’istante. Invece devi rifare il lavoro sui vari ambienti di distribuzione (staging, live, et al). Quindi avevamo bisogno di una soluzione che ci permettesse di creare meta box in modo programmatico. Immettere CMB2.<\/p>\n

Prima di adottare CMB2, in precedenza abbiamo utilizzato HM Custom Meta Box<\/a> di quegli adorabili umani di Human Made<\/a> (che \u00e8 iniziato come un fork del precursore di WebDevStudio di CMB2,).<\/p>\n

Abbiamo adorato le Meta Box personalizzate HM e, con i pi\u00f9 semplici frammenti di codice, abbiamo potuto creare rapidamente Meta Box personalizzate per fare praticamente qualsiasi cosa!<\/p>\n

\"CreazioneEsempio di markup delle Meta Box personalizzate HM (questo \u00e8 il markup per la Meta Box di Instagram nel primo screenshot)<\/p>\n

Allora perch\u00e9 passare a CMB2? Bene, HM Custom Meta Boxes sfortunatamente non stava ottenendo molto amore (ho parlato con il suo sviluppatore principale ed \u00e8 un uomo molto molto impegnato), mentre CMB2 stava andando avanti con nuove funzionalit\u00e0, nuovi controlli e aveva guadagnato trazione nella community di WordPress con molte persone che lo adottano e rilasciano plug-in per estenderlo (incluse molte delle nostre agenzie partner).<\/p>\n

Infine, come avrai capito, lavorare con CMB2 \u00e8 incredibilmente semplice come ci eravamo abituati, poich\u00e9 entrambe le piattaforme condividono un antenato comune.<\/p>\n

Esercitazione<\/h2>\n

Prima di iniziare, ognuno ha la propria serie di ideali su come creare un plugin per WordPress, e io ne ho provati alcuni, tuttavia il tutorial su " Root Composition in WordPress<\/a> " di Tom J Nowell, ha completamente cambiato il mio modo di lavorare. Trovo il suo approccio pulito, semplice e rende la manutenzione futura di qualsiasi plug-in un gioco da ragazzi. Se prendi il sorgente del plug-in Link Picker per CMB2<\/a>, puoi vedere i metodi che insegna nella pratica.<\/p>\n

Costruire la forma<\/h3>\n

Per costruire il form che rende il Link Picker, la prima cosa che dobbiamo fare \u00e8 agganciarci cmb2_render_[control_name]<\/code>all’azione. Poich\u00e9 ho chiamato questo controllo ‘link_picker’, possiamo completare l’hook in questo modo:<\/p>\n

<?php\nadd_action( 'cmb2_render_link_picker', array( $this, 'cmb2_render_link_picker' ), 10, 5 );\n`\n<\/code><\/pre>\n
Per quelli di voi che non capiscono davvero l’ add_action<\/code>hook, funziona come segue:<\/p>\n
    \n
  1. Il primo argomento cmb2_render_link_picker<\/code>\u00e8 il nome dell’hook a cui vogliamo agganciarci.<\/li>\n
  2. Il secondo argomento array( $this, 'cmb2_render_link_picker' )<\/code>\u00e8 la funzione che vogliamo chiamare quando viene eseguito questo hook. Nota che lo sto avvolgendo in un array, con $this<\/code>come primo parametro, perch\u00e9 sto chiamando la funzione all’interno di una classe. Se non stai lavorando con le classi puoi semplicemente usare il nome della funzione cmb2_render_link_picker<\/code>.<\/li>\n
  3. Il 10<\/code>, \u00e8 l’ordine in cui vogliamo che la funzione si attivi (pi\u00f9 basso \u00e8 il numero, prima si attiva quando viene chiamata l’azione).<\/li>\n
  4. \u00c8 5<\/code>la quantit\u00e0 di parametri che verranno passati alla funzione che sto chiamando (questo diventer\u00e0 chiaro a breve).<\/li>\n<\/ol>\n
    Successivamente creiamo la funzione che render\u00e0 il modulo:<\/p>\n
    <?php\n\npublic function cmb2_render_link_picker( $field, $value, $object_id, $object_type, $field_type_object) {\n\u2026\n}\n`\n<\/code><\/pre>\n
    Ho lasciato il "DocBlock" nel codice sopra che descrive cosa cmb2_render_link_picker()<\/code>fa ciascuno dei parametri passati nella funzione.<\/p>\n
    Nota che la mia funzione inizia con la public<\/code>dichiarazione. Anche questo \u00e8 perch\u00e9 sto lavorando all’interno di una classe. Se non lavori con le classi puoi ometterlo.<\/p>\n
    Il valore di questo campo viene passato alla funzione tramite il $value<\/code>parametro. Nel caso di questo campo, passeremo attraverso un array, poich\u00e9 il nostro controllo ha tre elementi separati:<\/p>\n