Yazı Alanına Özel Resim Metabox Ekleme

Merhaba, bazen WordPress’in öne çıkarılmış görsel özelliği yeterli gelmeyebiliyor. Ek bir resim yükleme alanına ihtiyaç olabiliyor.
Tema kodlamalarında bu ihtiyaca yönelik yaptığım araştırmalarda karşıma bir kod yapısı çıktı. Sizinle paylaşmak istedim. Maalesef yeterli Türkçe kaynak yok. Tema temel kodlamalarda kaynak var ama ince kodlamalarda kaynak sıkıntısı var. Bu web sitesini de bu kaynak sıkıntısından dolayı açtık. Türkçe kaynak olması için. Eğer aklınıza takılan bir sorun olursa mesaj alanından yazabilirsiniz.

Şimdi gelelim kodlara.

Öncelikle resim-metabox.php gibi bir sayfa açalım. Bunun içine aşağıdaki kodları kopyalayalım.

<?php
	
function textdomain_include_myuploadscript() {
    /*
     *Her sayfada komut dosyalarını yüklememek için ek koşullar eklemenizi öneririm
     * like:
     * if ( !in_array('post-new.php','post.php') ) return;
     */
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
// Bu alanı kendinize göre düzenleyiniz.
    wp_enqueue_script( 'yukle', get_stylesheet_directory_uri() . '/assets/js/yukle.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'textdomain_include_myuploadscript' );

function textdomain_image_uploader_field( $name, $value = '') {
    $image = ' button">Upload image';
    $image_size = 'full'; // Burada küçük resim boyutu (150x150)
    $display = 'none'; // "görüntüyü kaldır" button

    if( $image_attributes = wp_get_attachment_image_src( $value, $image_size ) ) {

        // $image_attributes[0] - image URL
        // $image_attributes[1] - image width
        // $image_attributes[2] - image height

        $image = '"><img src="' . $image_attributes[0] . '" style="max-width:95%;display:block;" />';
        $display = 'inline-block';

    } 

    return '
     <div>
       <a href="#" class="textdomain_upload_image_button' . $image . '</a>
       <input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
        <a href="#" class="textdomain_remove_image_button" style="display:inline-block;display:' . $display . '">Resim Kaldır</a>
    </div>';
}

/*
 * Yeni Meta box Ekle
 */
add_action( 'admin_menu', 'textdomain_meta_box_add' );

function textdomain_meta_box_add() {
    add_meta_box('textdomaindiv', // meta box ID
        'Diğer Ayarlar', // meta box başlık
        'textdomain_print_box', // meta kutusu HTML'yi basan callback işlevi
        'post', // yazı tipi nereye eklenecek
        'normal', // öncelik
        'high' ); // posizyon
}

/*
 * Meta Box HTML
 */
function textdomain_print_box( $post ) {
    $meta_key = 'second_featured_img';
    echo textdomain_image_uploader_field( $meta_key, get_post_meta($post->ID, $meta_key, true) );
}

/*
 * Meta Box verilerini kaydet
 */
add_action('save_post', 'textdomain_save');

function textdomain_save( $post_id ) {
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
        return $post_id;

    $meta_key = 'second_featured_img';

    update_post_meta( $post_id, $meta_key, $_POST[$meta_key] );

    // yüklenen resmi bu yayına ekleme satırı:
    // wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) );

    return $post_id;
}

Daha sonra bir yukle.js diye bir js dosyası oluşturun ve içine aşağıdaki js kodlarını kaydedin.

jQuery(function($){
    /*
     * Select/Upload image(s) event
     */
    $('body').on('click', '.textdomain_upload_image_button', function(e){
        e.preventDefault();

            var button = $(this),
                custom_uploader = wp.media({
            title: 'Insert image',
            library : {
                // uncomment the next line if you want to attach image to the current post
                // uploadedTo : wp.media.view.settings.post.id, 
                type : 'image'
            },
            button: {
                text: 'Use this image' // button label text
            },
            multiple: false // for multiple image selection set to true
        }).on('select', function() { // it also has "open" and "close" events 
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $(button).removeClass('button').html('').next().val(attachment.id).next().show();
            /* if you sen multiple to true, here is some code for getting the image IDs
            var attachments = frame.state().get('selection'),
                attachment_ids = new Array(),
                i = 0;
            attachments.each(function(attachment) {
                attachment_ids[i] = attachment['id'];
                console.log( attachment );
                i++;
            });
            */
        })
        .open();
    });

    /*
     * Remove image event
     */
    $('body').on('click', '.textdomain_remove_image_button', function(){
        $(this).hide().prev().val('').prev().addClass('button').html('Upload image');
        return false;
    });

});

resim-metabox.php dosyasında bu alanı kendinize göre düzenleyin diye bir kısım var. Ordaki js yolunu kendinize göre düzenleyiniz.
Bu kadar. İyi kodlamalar.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

2 + 4 =