WordPress Yönetici Listesi Tabloları: Hızlı Düzenleme İşlevini Genişletin

Şimdiye kadar, WordPress'teki Yönetici Tabloları hakkındaki makale dizimizde, yeni sütunların nasıl ekleneceği de dahil olmak üzere WordPress Yönetici Tablolarının düzenini özelleştirmenin çeşitli yollarını inceledik. Serinin bu son makalesinde, düşünmek isteyebileceğiniz bir özelleştirmeye daha göz atacağız… Yönetici Tablolarında bulunan 'Hızlı Düzenleme' işlevini genişletme.

Başlayalım!

Hızlı Düzenleme Alanını Genişletme

Bu öğreticideki örneğimiz için, makalemizle ilgili bazı ek bilgilere bağlantı veren bir url ile dolduracağımız bir 'Kaynak' olarak tanımlanacak bir URL görüntüleyecek özel bir alan ekleyeceğiz. Gönderiler Admin ekranının Hızlı Düzenleme alanında nasıl eklenebileceğini ve bu alana yapılan güncellemelerin nasıl kaydedileceğini göreceğiz.

Birinci Adım: Özel Alanı Ekleyin

WordPress Özel Alanlarını Kullanmaya Başlarken makalemizde 'Kaynak' alanının nasıl oluşturulacağını inceledik. Kısa olması adına, bu talimatları burada tekrarlamayacağız. Elbette istediğiniz herhangi bir Özel Alanı oluşturabilirsiniz.

'Kaynak' özel alanını veya bu konuda başka herhangi bir özel alanı nasıl eklediğimizi bilmiyorsanız, lütfen bununla ilgili makalemize bir göz atın. Uygun bir özel alan ekledikten sonra bir sonraki adıma geçme zamanı.

İkinci Adım: Özel Sütunu Ekleyin

Yönetici Tablomuza özel bir sütun eklememiz gerekiyor. Bunu nasıl yapacağınızı, WordPress Yönetici Tablolarını Özelleştirme: Başlarken makalemizde ayrıntılı olarak açıkladık. Bir göz atın ve adımları izleyin.

Sonuç olarak, aktif temanızın functions.php dosyasında şuna benzer bir kod bulmalısınız:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

Şimdiye kadar, Mesajlar Yöneticisi tablosunda yeni sütunu görmüş olmalısınız.

Özel Hızlı Düzenleme Kutusunu Ekle

Gönderiler listesi tablomuza gidelim ve gönderilerimizden birinin altındaki 'Hızlı Düzenleme' bağlantısını tıklayalım.

Burada göreceğimiz, WordPress'in Hızlı Düzenleme ekranında sunduğu tüm varsayılan seçeneklerdir. Şu anda yeni 'Kaynak' alanımızı görmeyeceğiz.

Bunu, WordPress'in sağladığı quick_edit_custom_box kancasını kullanarak ekleyeceğiz. Bu eylem, özel sütunlar dahil her sütun için bir kez yürütülerek 'Hızlı Düzenleme' modundaki tüm varsayılan eylemleri ayrıştırır.

Şu şekilde yapılandırılmıştır: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Parametreler, düzenlenecek sütunun adı olan $column_name , post type slug olan $post_type ve gerekirse sınıflandırma adı için $taxonomy .

functions.php dosyanıza aşağıdaki satırları ekleyin:

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

Lütfen PHP kodundaki 'source' alan değerini $post->source; .

Şimdi, sayfayı yenilerseniz ve tekrar 'Hızlı Düzenleme'ye tıklarsanız, şimdi 'kaynak' alanını doğru bir değerle görmelisiniz.

Üçüncü Adım: Satır İçi Düzenlemeyi Kaydet

Veri girişini özel alanımıza kaydetmek için, bir gönderi güncellendiğinde tetiklenen save_post eylemini kullanacağız.

Hızlı düzenlemeler üzerinde çalıştığımız örneğimizde, save_post yürütüldükten sonra gönderi verileri $_POST içinde saklanır.

Bunu başarmak için gereken kod aşağıdaki gibidir ve functions.php dosyasına eklenmelidir:

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

Hayır bu yapılmadı, alanın giriş değerini “https://random.url” gibi başka bir şeye değiştirmeyi deneyelim ve sağ alttaki güncelleme düğmesine basalım.

Kaynak alanımızdaki değerin beklendiği gibi güncellendiğini unutmayın. Ancak, Hızlı Düzenleme düğmesine tekrar tıklarsanız ve özel alanınıza bir kez daha bakarsanız (bizim durumumuzda 'Kaynak'), düzenleme kutusundaki değerin değişmediğini göreceksiniz.

Değeri ne kadar değiştirirseniz değiştirin, değişikliği her zaman Yönetici tablosu sütun hücresinde göreceksiniz, ancak bu giriş Hızlı Düzenleme alanına yansıtılmayacaktır.

Yani niye bu gerçekleşti?

'source' alan değerini $post->source; . Hızlı Düzenleme içeriği, kullanıcı 'düzenle' düğmesine bastığında doldurulur; bu, dinamik olarak oluşturulduğu ve yönetici sonrası ekranı yüklendiğinde önceden doldurulmadığı anlamına gelir. Admin ekranına girdiğimizde yeni değer yerine her zaman doldurulan değeri göreceğimiz için meta verilerimizi PHP kodumuz üzerinden alarak doğru gösteremiyoruz.

Bunun yerine JavaScript kullanarak değerlerimizi toplamamız gerekiyor. Bu yüzden devam etmeden önce önceki PHP kodumuza gideceğiz ve bu satırı değiştirerek yankılanan değeri kaldıracağız…

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…Bununla birlikte:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

Dördüncü Adım: JS Kullanarak Girdi Değerlerini Alma

İlk olarak, functions.php dosyanıza şu satırları ekleyerek JS betiğimizi eklememiz gerekecek:

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

Örneğin, bir extend-quick-edit.js dosyası oluşturur ve onu aktif tema klasörünüzün altına koyarsanız, yukarıdaki kodda 'UNIQUE-SCRIPT-NAME'i 'extend-quick-edit-script' gibi bir şeyle değiştirmelisiniz. ' ve get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

array('jquery','inline-edit-post' ) betiğimiz jQuery kullandığından jQuery ekledik ve orijinal inline-edit-post işlevinin değiştirileceğini tanımladık.

extend-quick-edit.js içerik şöyle görünecektir:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

Burada yaptıklarımızı biraz açalım.

İlk olarak, daha fazla incelemek isterseniz, /wp-admin/js/inline-edit-post.js WordPress çekirdek dosyasında tanıtılan inlineEditPost.edit nesnesini alıyoruz. Böylece şimdi $inline_editor değişkeninde nesnenin bir kopyasına sahibiz.

Bundan sonra, mevcut olanı $ inlineEditPost.edit $inline_editor.apply( this, arguments); ve hemen ardından istediğimiz ekstra işlevselliği eklemek.

Bu nedenle, JS kodumuzun sonraki satırlarında, sonunda yapacağımız şey, hızlı düzenleme alanının 'Kaynak' giriş alanının değerini 'Kaynak' sütun hücresinin değeriyle değiştirmektir.

Şimdi her şey beklendiği gibi çalışmalı. Değeri kaydeder ve hızlı düzenleme alanını yeniden açarsanız, Kaynak girişi de değiştirilmelidir.

Özel sütunuyla birlikte özel bir alan zaten kayıtlıysa, iş akışımız şöyle görünür:

Çözüm

Yönetici Listesi tablolarının Hızlı Düzenleme modülüne özel bir alan eklemek kolay değildir. Ancak, düzenli olarak güncellenen bir alan ekliyorsanız, uzun vadede çok zaman kazandırabilir. Her zaman olduğu gibi, WordPress'te elde edilebilecekler oldukça sınırsızdır. Kullanıma hazır, kapsamlı özelleştirmeye izin verir, ancak bazı ek kodlamalarla yapamayacağınız pek bir şey yoktur!