Özel bir WordPress meta kutusu nasıl oluşturulur

Özel bir WordPress meta kutusu nedir?

Özel meta kutuları, WordPress çekirdeğinde bulunan ve WordPress'te "kutudan çıkar çıkmaz" otomatik olarak kullanıma sunulan standart meta kutuların yanı sıra gönderilere, sayfalara ve özel gönderi türlerine ek bilgilerin eklenmesine izin verir.

Farkında olsanız da olmasanız da, bir süredir meta kutuları kullanıyorsunuz. Pano widget'ları, düzenleyici, özel alanlar, öne çıkan görsel, kategoriler ve etiketler gibi şeyler meta kutularına örnektir.

Özel bir WordPress meta kutusu nasıl oluşturulur

Ek bir meta kutu, belki projeniz için biraz daha özel bir şey oluşturmanız gerektiğinde ne olur? Harika seçenekler olabilecek özel meta kutuları oluşturmaya yardımcı olan mevcut eklentiler var. Gideceğiniz yolun bu olduğuna karar verseniz bile, özel meta kutuları başlığı altında neler olup bittiğine dair temel kavramları anlamak yine de önemlidir.

Logonuzu duyarlı hale getirmek için CSS Sprite kullanın

CSS spritelarını hatırlıyor musunuz? Bunlar, tek bir dosyada birleştirilmiş bir grup farklı grafiktir ve bunları duyarlı bir logo oluşturmak için kullanacağız. Tarayıcı performansını optimize etmek için kullanılan bir tekniktir...

Bu çok basit meta kutuyu oluşturduğumuzda kavramları çok yüksek düzeyde gözden geçireceğiz. İşimiz bittiğinde, bir ürün başlığı girmemize izin verecek özel bir meta kutumuz olacak.

Basitten başlasak da, bu fikrin daha karmaşık ihtiyaçlar için genişletilebileceğini unutmayın. Özel bir meta kutusuna eklenebilecek birçok seçenek ve ek özellik vardır. Onay kutuları, dosya yükleme vb. gibi şeylerin tümü, özel bir meta kutusunun olası özellikleridir. Bu öğretici, alanları biçimlendirmek için gerekli olan CSS'ye aşina olduğunuzu varsayar. Stili tartışmak için çok fazla ayrıntıya girmeyeceğiz, ancak bu, meta kutunuz çalışmaya başladıktan sonra kolayca yapılabilecek bir şeydir.

Özel meta kutusunu geliştirme

Meta kutuları için özel kod, functions.php'ye veya bir eklentiye dahil edilebilir. Bu örnek, gerekli kodu bir eklenti biçiminde içerecektir. Bu, kullanıma hazır eksiksiz bir dosya oluşturmak için adım adım kopyalanabilir.

Codex rehberinizdir

Henüz değilse, Codex en iyi arkadaşınız olacaktır. Farklı argümanların farklı seçenekleri vardır ve Codex bunu ayrıntılı olarak açıklayacaktır. Codex'in iyi bilmeniz gereken bir şey olduğunu belirtmekte fayda var.

Önce Yerel Olarak Test Edin

İşte bu eğitim için tek ve tek sorumluluk reddi. Lütfen bunu önce yerel bir geliştirme ortamında deneyin. Hepimiz hayatımızda küçük bir macerayı takdir etsek de, hiç kimse, özellikle canlı bir sitede ölümün beyaz ekranını sevmez. Bu öğreticide adım adım ilerleyeceğiz ve ilerledikçe ortaya çıkan bağımlılıklar var. Bu nedenle, yarıda bir kaydetme yapmanın bir hataya neden olma olasılığı yüksektir.

Birinci adım: başlık oluşturun ve eklentiye yerleştirin

Bir eklenti oluşturmak karmaşık gelebilir, ancak tüm eklentilerin yüzlerce satır olması gerekmez. Eklentiler çok basit olabilir ve bu buna harika bir örnek. wp-content klasörüne giderseniz, bir eklentiler klasörü göreceksiniz. İçinde bir custom-post-meta-box.php dosyası bulunan custom-post-meta-box adlı yeni bir klasör oluşturun. Bu, üzerinde çalışacağınız dosyadır.

Bir eklenti oluştururken, bu bilgilerin herhangi bir özel kodunuzdan önce göründüğünden emin olun:

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

Eklentiyi Etkinleştir

Henüz oraya herhangi bir kod koymamış olsak da, Plugins'e gidip Custom Meta Box'ı arayarak ve Activate'i seçerek eklentiyi aktif hale getirebiliriz. Henüz hiçbir şeyin değişmeyeceğini lütfen unutmayın.

İsteğe bağlı CSS

Bu isteğe bağlıdır, ancak bazı özel css eklemeyi planlıyorsanız, bunu eklenti dosyanıza kopyalayın. .css dosyasının eklentinizin css klasöründe bulunduğundan emin olun.

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

İkinci adım: meta kutusunu ekleme

add_meta_box işlevi, özel meta kutuları oluşturmak için kullanılır. Bu işlev yalnızca özel meta kutuların kaydedilmesi ve görüntülenmesinden sorumludur.

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

Panoya bir bakın, “Ürünlerimiz” başlığı görünüyor, ancak metnimizi girebileceğimiz bir metin alanı yok.

Üçüncü adım: yöneticiye meta kutu alanını ekleme

Bilgi için bir etiket ve alan olduğundan emin olmamız gerekiyor. Html kullanarak bu mümkündür.

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

<label> içine işlerin nasıl sarıldığını görüyor musunuz? Kullanıcının alanın ne olduğunu ve ne tür bilgilerin girilmesi gerektiğini anlamasına yardımcı olan açıklayıcı “Ürün Başlığı” metnini görüyoruz. Ayrıca yararlı bilgiler de ekleyen yer tutucu metin olduğunu unutmayın.

Girişiniz o kadar geniş olmayabilir. Tüm yer tutucu metnin gösterilebilmesi için bazı özel css yapıldı; etiketin genişliği %100'dür.

Dördüncü adım: Verileri kaydetme ve nonce kullanmanın önemi

Üçüncü Adımda metin girmiş ve metnin gerçekte kaydedilmediğini veya sayfada görüntülenmediğini fark etmiş olabilirsiniz. Bu adım gerçekten tüm sihrin gerçekleştiği yerdir.

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

Burada birkaç şey oluyor. Temel olarak, cmb_save_meta_box_data işlevi, tüm kaydetmenin gerçekleşmesi için ihtiyacımız olan şeydir. Nonce değeri ile güvenliğe odaklanacağız. Bu, kaydedilecek verilerin doğru kaynaktan gelmesini sağlayan bir güvenlik önlemidir. Ayrıca, gönderinin otomatik kaydetme veya düzeltme olmadığından emin olmak istiyoruz. Sonra nonce doğrulanacak ve kullanıcı kaydedebilir.

Artık güvenle kaydedebileceğimize göre, meta bilgiler sayfada bu şekilde görünüyor. Gördüğünüz gibi, kolayca şekillendirilebilir, ancak çalışır ve veriler kaydedilir.

Daha fazla okuma ve ödev

Gördüğünüz gibi, sadece birkaç adımda özel bir meta kutusuna sahip olabilirsiniz. Çoğu geliştirme projesinde olduğu gibi, aynı şeyi başarmanın birden çok yolu vardır, bu nedenle aynı görev için başka yaklaşımlar bulabilirsiniz.

Özel meta kutularına çok yüksek bir düzeyde baktık, bu nedenle bu kavramlara daha derin bir göz atmak isteyebilirsiniz. Özel meta kutularına daha fazla ihtiyaç duyduğunuzu düşünüyorsanız, daha fazla keşif için işte bazı harika kaynaklar:

• nonce hakkında daha fazla bilgi
• Meta Kutu Eklentisi
• add_meta_box işlevi için seçenekler