WordPress Özel Alan / Meta Box Kullanımı ve Advanced Custom Fields Eklentisi

YouTube'ta Takip Et →

WordPress’te özel alanlar, hazırladığınız web sitesinin özel ihtiyaçlarını karşılamak için kullanılır. WordPress, sayfanıza içerik girerken kategori, öne çıkan görsel, açıklama metni gibi birkaç veri girebileceğiniz alan sunsa da, bundan çok daha fazlasına ihtiyacınız olabilir. Portfolyo sayfası hazırlarken müşterinizi de ayrı bir alanda belirtmek isteyebilir ya da araba galerisi sayfası hazırlarken araba özelliklerinin girmek için birkaç farklı özel alana ihtiyacınız olabilir. Bu özel alanları içerik ekleme bölümüne yazmayız, çünkü sayfanın tasarımını değiştirmemiz gerektiğinde ya da bu alanlarla ilgili küçük bir değişiklik bile yapmamız gerektiğinde tüm içerikleri baştan düzenlemeye çalışmak doğru ve profesyonelce bir yaklaşım da değildir.

Eklenti Kullanmadan WordPress’in Custom Fields Özelliği Nasıl Kullanılır?

Kendi oluşturduğumuz temada ve yine kendi oluşturduğumuz custom post type’larda eklenti kullanmadan custom field oluşturmak istediğimizde, öncelikle temamızın functions.php dosyasının support özelliğine, yeni içerik eklerken girdiğimiz sayfada custom fields alanının görünmesi için ‘custom-fields’ ibaresini eklememiz gerekiyor.

'supports' => array( 'title', 'editor', 'thumbnail','custom-fields'),

Custom Field oluştururken, müşteri olarak bir içerik eklediğimizi düşünelim. single.php dosyalarında, eklediğimiz custom field’ı görüntülemek için de aşağıdaki kod yapısını kullanıyoruz. Aynı zamanda eğer alan boşsa da, sayfada görünmemesini sağlıyoruz.

<?php if(get_post_meta($post->ID, 'musteri',true)): ?>
    Müşteri: <?php echo get_post_meta($post->ID, 'musteri',true); ?>
<?php endif; ?>

Advanced Custom Fields (Gelişmiş Özel Alanlar) Eklentisi ile Özel Alan (Custom Fields) Oluşturma

WordPress’te özel alanlar (custom fields) için bir eklenti kullanıyoruz ki tema yapımı ile ilgilenenler için WordPress’in en başarılı eklentilerinden biri. Advanced Custom Fields (ACF) WordPress’e kurmamız gereken eklentinin ismi. Bu eklenti ile admin panelinde özel alanlar oluşturup, temamızda bu özel alanlara girilen verilerin görünmesini sağlayabiliyoruz. Eklentiyi kurduktan sonra yönetim panelinin sol tarafındaki menüde Custom Fields (Özel Alanlar) başlığı altında eklentimiz görünecek. Sonrasında çalışmalarımıza başlayabiliriz.

Yeni bir özel eklemek için Custom Fields (Özel Alanlar) menüsünün altındaki Add New (Yeni Ekle) sayfasını açalım. Bu sayfa üzerinde ilk olarak basit bir metin alanı oluşturalım. Bu metin alanı yönetim panelinde, görünmesini istediğimiz yerde görünecek ve buraya girilen kayıt yine temamız içerisinde görünmesini istediğimiz yerde görünecek.

Text

Field oluşturmak için gerekli bilgileri girdikten ve Field Type olarak Text’i seçtikten sonra bu özel alanın hangi sayfada çıkması gerektiğini seçiyoruz. Kaydettikten sonra aşağıdaki kodu tema dosyamıza yazıyoruz. Field ID yazan yeri, oluşturduğumuz özel alanın ismiyle değiştirmeyi unutmuyoruz.

<?php the_field('field_id'); ?>

Aşağıdaki kod şablonunu da kullanabiliyoruz.

<?php
$field = get_field('field_id');
echo $field; 
?>

If else koşulu ile birlikte özel alanları kullanmak da isteyebiliriz. Eğe özel alan dolu değilse göstermemesi gibi.

<?php 
$field = get_field('field_id');
	if($field):
	echo $field; 
endif; ?>

Textfield ve WYSIWYG Editörü

Textfield, birden fazla satır için kullanılan metin alanları oluşturmak için kullandığımız özel alan türü. Kullanımı text (metin) alanıyla aynı. Ancak o şekilde yaptığımızda paragrafları paragraf olarak değil, tek düze yazı şeklinde gösterecek. Bunun önüne geçmek için aşağıdaki şekilde kod satırları kullanıyoruz. nl2br, new line to break anlamına geliyor.

<?php 
$field = get_field('field_id');
	if($field):
	echo nl2br($field); 
endif; ?>

Textfield’ları, WYSIWYG editörü ile birlikte kullanmak da mümkün. Field Type olarak Wysiwyg Editor seçeneğini seçmemiz gerekli. Bu seçenekle, tıpkı WordPress’in varsayılan editörü gibi sadece görsel girdi ya da sadece kodlardan oluşabilecek metin girdisi oluşturabiliyoruz. Tabii bu sefer nl2br kodunu kullanmamıza gerek yok. Media Upload butonun da iptal edebilme özelliği bu seçeneğin özellikleri arasında.

Bu içerik ilginizi çekebilir.

Özel alanlar eklerken Field Type seçenekleri size birçok özel alan türü eklemenize olanak tanıyor. Numara, e-posta adresi, URL adresi, parola gibi alanlar ile birlikte çok daha fazlasını oluşturabiliyorsunuz. Her biri kendi içinde farklı ve kullanışlı alt seçenekleri ile birlikte geliyor. Örneğin; e-posta alanı oluşturursanız o alana mutlaka e-posta girmeniz gerekiyor, ön yüzde de mailto ile birlikte yazarsanız maile link verecektir.

File Upload ve Image

İçerik eklerken dosya yükleyebileceğiniz ve ziyaretçilerinizin de o dosyayı indirmeleri için File Upload özelliğini kullanmamız gerekiyor. File Upload özelliğini görsel yükleme ve ziyaretçilerinize görsel sunma mantığıyla da kullanabilirsiniz. Sonuçta bu özellik size bir URL veriyor ve siz de o URL’yi istediğiniz gibi kullanabiliyorsunuz.

<?php 
$file = get_field('upload_file');
$fileurl = $file['url'];
?>

<?php if($file): ?>
	<a hreF="<?php echo $fileurl; ?>" download>Görseli İndir</a>
<?php endif;?>

Download kelimesi varken linke tıklarsanız dosya bilgisayarınıza inecektir, download kelimeisini kaldırırsanız görsel tarayıcınızda açılacaktır.

Özellikle görselleri görüntülemek için kullanılan Image alanını da aşağıdaki şekilde kullanabiliyoruz.

<?php 
$image = get_field('image');
$imageurl = $image['url'];
?>

<?php if($image): ?>
	<img src="<?php echo $image; ?>">
<?php endif;?>

Select, Checkboxes ve Radio Button

Birkaç seçenek arasında seçim yapmak için kullanılan Select’i Custom Field olarak kullanmak için seçenekleri aşağıdaki gibi girmeniz gerekiyor. Önce ID, sonra da size görünmesini istediğiniz seçenek. Varsayılan değer alanına da varsayılan olarak seçilmesini istediğiniz seçeneğin ID’sini yazmanız yeterli. Kullanılan programlar ve programlama dilleri ile bir örnek yapalım.

photoshop : Adobe Photoshop
illustrator : Adobe Illustrator
htmlcss : HTML ve CSS
wordpress : WordPress

Select’i sayfa içerisinde kullanmak için aşağıdaki kodlardan faydalanıyoruz.

<?php $programs = get_field('programs') ?>

<?php if($programs): ?>
	<strong>Programlar:</strong> <?php echo $programs['label']; ?>
<?php endif; ?

Yönetim panelinde Select Multiple Values seçeneğini seçerseniz de tekli değil, çoklu seçim yapmanıza olanak tanıyor. Return format kısmının Label olarak seçili olduğuna emin olun.

<?php $programs = get_field('programs') ?>
<?php echo implode($programs, ', '); ?>

Radyo butonlar tek seçim sağladıkları için aşağıdaki kodu kullanmamız yeterli.

<?php $program = get_field('programs') ?>
<?php echo $program; ?>

Button Groups

Seçimlerin tasarımları daha hoş birer buton halinde görünmesini istediğinizde kullanabilirsiniz.

Bu içerik ilginizi çekebilir.

True or False

True, false seçeneklerini de sayfa içerisinde if else döngüsü ile gösterebilirsiniz.

<?php $truefalsefield = get_field('truefalsefield ') ?>
<?php if($truefalsefield): ?>
	True
<?php else: ?>
	False
<?php endif; ?>