چگونه یک متاباکس در وردپرس ایجاد کنیم؟

آموزش های زیادی در ساخت متاباکس وردپرس وجود دارد, کار متاباکس قابلیتی برای دریافت و یا نمایش اطلاعات است که می توانید قسمتی از صفحه در نوشته ایجاد کنید مثلا : جعبه دانلود , نمایش فیلم و آهنگ و غیره …
در این نوشته آموزش ساده در ساخت متاباکس نمونه جعبه دانلود خواهیم پرداخت.
یک فایل با نام metabox.php ایجاد و در فایل functions.php فراخوانی می کنیم:
include_once('inc/metabox.php');
کد زیر را در فایل metabox.php اضافه می کنیم:
<?php add_action( 'add_meta_boxes', 'adding_meta_box' ); function adding_meta_box() { add_meta_box( 'meta_box_id', 'اطلاعات نوشته', 'frst_meta_box', 'post', 'normal', 'high' ); } function frst_meta_box( $post ) { $value = get_post_custom( $post->ID ); $title = isset( $value['title'] ) ? esc_attr( $value['title'][0] ) : ''; $link = isset( $value['link'] ) ? esc_attr( $value['link'][0] ) : ''; $dl = isset( $value['dl'] ) ? esc_attr( $value['dl'][0] ) : ''; $git = isset( $value['git'] ) ? esc_attr( $value['git'][0] ) : ''; $eye = isset( $value['eye'] ) ? esc_attr( $value['eye'][0] ) : ''; wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?> <p> <label for="title">عنوان پیوند : </label> <input type="text" name="title" id="title" value="<?php echo $title; ?>" /> </p> <p> <label for="link">تارنما : </label> <input type="text" name="link" id="link" value="<?php echo $link; ?>" /> </p> <p> <label for="dl">دانلود مستقیم : </label> <input type="text" name="dl" id="dl" value="<?php echo $dl; ?>" /> </p> <p> <label for="git">گیت هاب : </label> <input type="text" name="git" id="git" value="<?php echo $git; ?>" /> </p> <p> <label for="eye">پیش نمایش : </label> <input type="text" name="eye" id="eye" value="<?php echo $eye; ?>" /> </p> <?php } add_action( 'save_post', 'saving_meta_box' ); function saving_meta_box( $post_id ) { if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return; if( !current_user_can( 'edit_post' ) ) return; $accepted_field = array( 'a' => array('href' => array() ) ); if( isset( $_POST['title'] ) ) update_post_meta( $post_id, 'title', wp_kses( $_POST['title'], $accepted_field ) ); if( isset( $_POST['link'] ) ) update_post_meta( $post_id, 'link', wp_kses( $_POST['link'], $accepted_field ) ); if( isset( $_POST['dl'] ) ) update_post_meta( $post_id, 'dl', wp_kses( $_POST['dl'], $accepted_field ) ); if( isset( $_POST['git'] ) ) update_post_meta( $post_id, 'git', wp_kses( $_POST['git'], $accepted_field ) ); if( isset( $_POST['eye'] ) ) update_post_meta( $post_id, 'eye', wp_kses( $_POST['eye'], $accepted_field ) ); } ?>
کد های زیر در هر جای پوسته قرار دهید.
جعبه دانلود:
<?php ?> <?php if ( ot_get_option('c9') != "off" ) { ?> <div class="download has-text-centered"> <?php if(get_post_meta($post->ID,'dl',true)) : ?> <a href="<?php $key="dl"; echo get_post_meta($post->ID,$key,true); ?>" class="button is-info"><i class="fas fa-download"></i> دانلود مستقیم</a> <?php endif; ?> <?php if(get_post_meta($post->ID,'git',true)) : ?> <a href="<?php $key="git"; echo get_post_meta($post->ID,$key,true); ?>" class="button is-white"><i class="fab fa-github"></i> گیت هاب</a> <?php endif; ?> <?php if(get_post_meta($post->ID,'eye',true)) : ?> <a href="<?php $key="eye"; echo get_post_meta($post->ID,$key,true); ?>" class="button is-success"><i class="fas fa-desktop"></i> پیش نمایش</a> <?php endif; ?> </div> <?php } ?>
پیوند تارنما :
<?php $link = get_post_meta($post->ID, 'link', true); $title = get_post_meta($post->ID, 'title', true); if(!empty($link) || !empty($title)) : ?> <div class="tags has-addons toptag"> <span class="tag is-dark">پیوند</span> <span class="tag is-info links"> <?php if(!empty($link)) { ?> <a href="<?php echo $title; ?>"> <?php } if(!empty($title)) { ?> <?php echo $title; ?> <?php } ?> </a> </span> </div> <?php endif; ?>
این دو کد از چارچوب سی اس اس بلما (Bulma) استفاده شده است و شما می توانید با سی اس اس بخش جعبه دانلود و پیوند تارنما کد HTML آن موجود است زیبا سازی کنید.