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.


Bunlar da İlginizi Çekebilir
WordPress Tema Kodlama Eğitimi Ücretsiz

Bu sayfada ücretsiz tema Kodlama eğitimini paylaşacağız. Bunun için html bir şablonu kullanacağız. Sırayla eğitimler tek tek eklenecektir.   Ders 1: WordPress Temasını Tanıyalım  

WordPress Yönetim Paneli Footer Alanındaki Versiyon Bilgisini Kaldırmak

WordPress sitenizdeki footer kısmında yer alan versiyon bilgisini gizlemek isteyebilirsiniz. Bunun için iki kod paylaşacağım. Birinci kod Yönetici dahil tüm kullanıcılardan kaldırıyor. İkinci kod ise yönetici hariç diğer kullanıcılardan kaldırıyor. 1. Kod: Yönetici dahil tüm kullanıcılardan kaldırır. function my_footer_shh() { remove_filter( ‘update_footer’, ‘core_update_footer’ ); } add_action( ‘admin_menu’, ‘my_footer_shh’ ); 2. Kod: Yönetici hariç diğer kullanıcılardan […]

Warning: Cannot modify header information – headers already sent by output started at pluggable.php on line 945 Hatasının Kesin Çözümü

WordPres Sitemde ön uç profil sayfası hazırlarken şifre değiştirirkrn aşağıdaki hatayı veriyordu. Şifre değişiyor fakat hata bir türlü düzelmiyordu.

Yorum Yok
Yazımız ile ilgili fikirlerinizi paylaşırsanız mutlu oluruz.

39 + = 46