Pravljenje interfejsa
Da bi napravili novi wordpress custom meta box potrebne su dve custom funkcije. Prva funkcije je glavna, ona pravi novi meta box (definiše naziv i label-u) i poziva drugu koja služi da prikaže unutrašnjost meta box-a.
Okvir meta box-a
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Adds a box to the main column on the Post and Page edit screens. function wpp_add_meta_box() { add_meta_box( 'wpp_section_id', // ID (also CSS ID) __( 'WPP metabox', 'wpp' ), // title 'wpp_meta_box_callback', // callback function, prints box content 'employee', // screen (post_type), 'side', // context (normal, side, advanced) 'high' // priority (low, core, high) ); } add_action( 'add_meta_boxes', 'wpp_add_meta_box' ); |
U prethodnom primeru za aktiviranje meta box-a je napravljena custom funkcija wpp_add_meta_box() a unutar nje se koristi wordpress-ova funkcija add_meta_box():
add_meta_box()
|
1 |
add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args ) |
Gde su parametri:
- $id
(string) (obavezno) HTML ‘id’ atribut - $title
(string) (obavezno) Naziv vidljiv krajnjem korisniku - $callback
(callback) (Obavezno) Funkcija koja ispisuje HTML na ekran. Prihvata max dva argumenta:
1.) $post objekat za post ili stranicu koja se trenutno gleda
2.) $metabox (niz) - $screen
(string) (opciono) Tip na kome će se pojaviti meta box (Može biti: ‘post’,’page’,’dashboard’,’link’,’attachment’,’custom_post_type’,’comment’ where custom_post_type is the custom post type slug) - $context
(string) (opciono) Deo ekrane gde se prikazuje odeljak “edit” (‘normal’, ‘advanced’, or ‘side’). - $priority
(string) (Opciono) Prioritet koji odredjuje mesto gde će se prikazati (‘high’, ‘core’, ‘default’ or ‘low’) - $callback_args
(array) (Opciono) Argumenti koji se prosledjuju callback funkciji. Callback funkcija će primiti $post objekat sa prosledjenim argumentima.
Unutrašnjosti Meta box-a
Ova druga funkcija tzv. callback function pravi unutrašnju formu meta box-a i poziva se iz prve funkcije koja pravi meta box okvir. Srž unutrašnjosti je najčešće HTML forma koja dozvoljava unos podataka.
Radi sigurnosti je neophodno koristiti zaštitu od malicioznog unosa pa ćemo unutar funkcije napraviti nonce, koji će kasnije pre snimanja podataka u bazu biti verifikovan.
Ukoliko je unešena vrednost polja i sačuvana u bazu neophodno je da to bude vidljivo u interfejsu tj. da ne nestane vrednost iz polja nakon akcije SAVE. Iz tog razloga je potrebno dodati deo koda koji vraća u polje vrednost polja.
Primer br.1
Kada se sve prethodno navedeno uzme u obzir funkcija bi ovako izgledala:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function myplugin_meta_box_callback( $post ) { // Add a nonce field so we can check for it later. wp_nonce_field( 'myplugin_save_meta_box_data', 'myplugin_meta_box_nonce' ); //Label iznad input polja echo '<label for="myplugin_new_field">'; _e( 'Description for this field', 'myplugin_textdomain' ); echo '</label> '; //Vraćanje vrednosti ako je već uneta u bazu, da bi mogli da je ispišemo u input polje $value = get_post_meta( $post->ID, '_my_meta_value_key', true ); //Input polje echo '<input type="text" id="myplugin_new_field" name="myplugin_new_field" value="' . esc_attr( $value ) . '" size="25" />'; } |
Primer br.2
Ukoliko se unutar meta box-a koristi input polje preko koga se unosi datum onda bi zbog dobrog “user experience” bilo dobro koristiti date picker. Date picker u sledećem primeru ćemo koristiti iz jQuery UI biblioteke.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function wpp_meta_box_callback( $post ) { // Add an nonce field so we can check for it later. wp_nonce_field( 'wpp_meta_box', 'wpp_meta_box_nonce' ); //Label iznad input polja echo '<label for="wpp_new_field">'; _e( 'Date', 'wpp' ); echo '</label> '; //Vraćanje vrednosti ako je već uneta u bazu, da bi mogli da je ispišemo u input polje $date_value = get_post_meta( $post->ID, '_date', true ); //Input polje za datum echo '<input type="text" id="wpp_date" name="wpp_date" value="' . esc_attr( $date_value ) . '" size="25" />'; ?> //Pozivanje javascript UI datepicker-a <script type="text/javascript"> jQuery(function($){ $("#wpp_date").datepicker(); }); </script> <?php } |
Čuvanje podataka custom filds-a
We need to verify this came from our screen and with proper authorization, because the save_post action can be triggered at other times.
|
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 |
function myplugin_save_meta_box_data( $post_id ) { //--------------------------------------------------------------------------------------------- //*********************** KONTROLA *********************************************************** //--------------------------------------------------------------------------------------------- // Check if our nonce is set. if ( ! isset( $_POST['myplugin_meta_box_nonce'] ) ) { return; } // Verify that the nonce is valid. if ( ! wp_verify_nonce( $_POST['myplugin_meta_box_nonce'], 'myplugin_save_meta_box_data' ) ) { return; } // If this is an autosave, our form has not been submitted, so we don't want to do anything. if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return; } // Check the user's permissions. if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) { if ( ! current_user_can( 'edit_page', $post_id ) ) { return; } } else { if ( ! current_user_can( 'edit_post', $post_id ) ) { return; } } //--------------------------------------------------------------------------------------------- //************ OK, it's safe for us to save the data now. ************************************ //--------------------------------------------------------------------------------------------- // Make sure that it is set. if ( ! isset( $_POST['myplugin_new_field'] ) ) { return; } // Sanitize user input. $my_data = sanitize_text_field( $_POST['myplugin_new_field'] ); // Update the meta field u bazi čiji je key skriven update_post_meta( $post_id, '_my_meta_value_key', $my_data ); } add_action( 'save_post', 'myplugin_save_meta_box_data' ); |
Meta box generator
Online generator
Odličan wordpres generator koda možete pogledati na stranici
http://jeremyhixon.com/tool/wordpress-meta-box-generator-v2-beta/
Evo generisanog koda za jedan label i jedan check box:
|
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 51 52 53 54 55 |
function proba_get_meta( $value ) { global $post; $field = get_post_meta( $post->ID, $value, true ); if ( ! empty( $field ) ) { return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) ); } else { return false; } } function proba_add_meta_box() { add_meta_box( 'proba-proba', __( 'Proba', 'proba' ), 'proba_html', 'post', 'advanced', 'default' ); } add_action( 'add_meta_boxes', 'proba_add_meta_box' ); function proba_html( $post) { wp_nonce_field( '_proba_nonce', 'proba_nonce' ); ?> <p>ovo je probni meta box</p> <p> <label for='proba_dali_je_ovo_check_box'><?php _e( 'Dali je ovo check box', 'proba' ); ?></label><br> <input type="text" name="proba_dali_je_ovo_check_box" id="proba_dali_je_ovo_check_box" value="<?php echo proba_get_meta( 'proba_dali_je_ovo_check_box' ); ?>"> </p> <p> <input type="checkbox" name="proba_cekiraj" id="proba_cekiraj" value="cekiraj" <?php echo ( proba_get_meta( 'proba_cekiraj' ) === 'cekiraj' ) ? 'checked' : ''; ?>> <label for="proba_cekiraj"><?php _e( 'cekiraj', 'proba' ); ?><\label> </p> <?php } function proba_save( $post_id ) { if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if ( ! isset( $_POST['proba_nonce'] ) || ! wp_verify_nonce( $_POST['proba_nonce'], '_proba_nonce' ) ) return; if ( ! current_user_can( 'edit_post', $post_id ) ) return; if ( isset( $_POST['proba_dali_je_ovo_check_box'] ) ) update_post_meta( $post_id, 'proba_dali_je_ovo_check_box', esc_attr( $_POST['proba_dali_je_ovo_check_box'] ) ); if ( isset( $_POST['proba_cekiraj'] ) ) update_post_meta( $post_id, 'proba_cekiraj', esc_attr( $_POST['proba_cekiraj'] ) ); else update_post_meta( $post_id, 'proba_cekiraj', null ); } add_action( 'save_post', 'proba_save' ); Usage: proba_get_meta( 'proba_dali_je_ovo_check_box' ) Usage: proba_get_meta( 'proba_cekiraj' ) |
ACF plugin
ACF je plugin koji pravi meta box-ove i unutar njih prilagodjene custom filds-e.