آموزش های زیادی در ساخت متاباکس وردپرس وجود دارد, کار متاباکس قابلیتی برای دریافت و یا نمایش اطلاعات است که می توانید قسمتی از صفحه در نوشته ایجاد کنید مثلا : جعبه دانلود , نمایش فیلم و آهنگ و غیره …

در این نوشته آموزش ساده در ساخت متاباکس نمونه جعبه دانلود خواهیم پرداخت.

یک فایل با نام 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 آن موجود است زیبا سازی کنید.