Vi siete mai chiesti come alcuni plugin aggiungano dei box nei vostri articoli nella parte amministrazione? Oggi impareremo a farlo.
Come prima cosa apriamo il file functions.php del tema e aggiungiamo queste righe di codice :
|
1 2 3 4 5 6 7 8 9 10 11 |
function custom_meta_box_markup() { } function add_custom_meta_box() { add_meta_box("custom-meta-box", "Custom Meta Box", "custom_meta_box_markup", "post", "normal"); } add_action("add_meta_boxes", "add_custom_meta_box"); |
Se avete fatto tutto correttamente negli articoli troverete una schermata simile :
Come vedete abbiamo aggiunto un box di nome Custom Meta Box. Vi spiego come funzionano i parametri di add_meta_box.
- Il primo parametro sarebbe l’id di riferimento al metabox, deve essere univoco.
- Il secondo parametro è il nome che visualizzeremo sopra al metabox, in questo caso visualizziamo Custom Meta Box.
- Il terzo parametro sarebbe la funzione che deve richiamare per visualizzare le informazioni legate al metabox, vi farò vedere dopo cosa possiamo inserire.
- Il quarto parametro sarebbe il tipo di pagina a cui deve aggiungere il metabox, in questo caso “post” si riferisce agli articoli, ma voi potete mettere ad esempio “page” che sarebbe riferito alle pagine o un qualsiasi custom post type.
- Il quinto parametro è la posizione del nostro metabox, in questo caso è “normal” quindi andrà sotto la descrizione dell’articolo. Gli altri parametri consentiti sono “advanced” e “side”.
Adesso aggiungiamo delle informazioni al nostro metabox, prendiamo la funzione custom_meta_box_markup e sostituiamola con questa:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
function custom_meta_box_markup($post) { ?> <div> <label for="meta-box-text">Text</label> <input name="meta-box-text" type="text" value="<?php echo get_post_meta($post->ID, "meta-box-text", true); ?>"> <br> <label for="meta-box-select">Select</label> <select name="meta-box-select"> <?php $option_values = array(1, 2, 3); foreach($option_values as $key => $value) { if($value == get_post_meta($post->ID, "meta-box-select", true)) { ?> <option selected><?php echo $value; ?></option> <?php } else { ?> <option><?php echo $value; ?></option> <?php } } ?> </select> <br> <label for="meta-box-checkbox">CheckBox</label> <?php $checkbox_value = get_post_meta($post->ID, "meta-box-checkbox", true); if($checkbox_value == "") { ?> <input name="meta-box-checkbox" type="checkbox" value="true"> <?php } else if($checkbox_value == "true") { ?> <input name="meta-box-checkbox" type="checkbox" value="true" checked> <?php } ?> </div> <?php } |
Se avete fatto tutto correttamente dovreste avere una grafica simile a questa :
Come potete vedere abbiamo aggiunto tre tipi di input. Voi potete aggiungere qualsiasi cosa, basta che inserite tutto nella funzione “custom_meta_box_markup”.
Come salvare i dati della metabox WordPress
Adesso salviamo i dati appena creati all’interno del singolo articolo, cosi da non perdere le informazioni.
Aggiungiamo queste righe di codice sempre nel file functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function save_custom_meta_box($post_id, $post) { if(!current_user_can("edit_post", $post_id)) return $post_id; if(defined("DOING_AUTOSAVE") && DOING_AUTOSAVE) return $post_id; $slug = "post"; if($slug != $post->post_type) return $post_id; $meta_box_text_value = ""; $meta_box_select_value = ""; $meta_box_checkbox_value = ""; if(isset($_POST["meta-box-text"])) { $meta_box_text_value = $_POST["meta-box-text"]; } update_post_meta($post_id, "meta-box-text", $meta_box_text_value); if(isset($_POST["meta-box-select"])) { $meta_box_select_value = $_POST["meta-box-select"]; } update_post_meta($post_id, "meta-box-select", $meta_box_select_value); if(isset($_POST["meta-box-checkbox"])) { $meta_box_checkbox_value = $_POST["meta-box-checkbox"]; } update_post_meta($post_id, "meta-box-checkbox", $meta_box_checkbox_value); } add_action("save_post", "save_custom_meta_box", 10, 2); |
La funzione come vedete, fa un controllo se esistono i campi e se il tipo di post è quello da voi scelto, se soddisfa i requisiti andrà a salvare i nuovi dai nel vostro articolo.
Abbiamo concluso, con questo metodo potrete customizzare come volete i vostri articoli, pagine o custom post type !
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
C’è un errore alla riga 25 dell’ultimo codice,
dovrebbe essere meta-box-select e non meta-box-dropdown
Saluti
Grazie Antonino, mia svista. Corretto il codice.