Customizer API ile, kullanıcılarımızın temamız üzerindeki hakimiyetini arttırabiliriz, temamıza profesyonel kontroller ekleyebilir ve kullanıcılarımızın, kod kullanmadan çeşitli özelleştirmeler yapabilmesini sağlayabiliriz. Customizer API, bütün bunları gerçekleştirmek için, yönetim panelinden gidilen, Görünüm->Özelleştir sayfasına yeni alanlar ekler.

Customizer API Alanları

Customizer API ile, Görünüm->Özelleştir sayfasına 4 farklı türden alan ekleyebiliriz. Bu alanlar şunlardır:

1. Panel (Panel)

Customizer API ile oluşturacağımız alanların hepsini içine alan bölümdür, kolondur. Bir nevi, ayarlarınız için oluşturacağınız bölümleri bir arada tutan çerçevedir.

Aşağıdaki resimde, kırmızı çerçeve içinde, Twenty Nineteen temasının panelini görüyorsunuz.

Bir tema oluşturduğunuzda WordPress, Görünüm->Özelleştir sayfasında, bu temaya ait bir de panel oluşturur. Eğer, yeni bir panel oluşturmazsanız, eklediğiniz bölümler temanız ile birlikte gelen bu panele ilave edilecektir.

Her tasarımcının ayrı bir yoğurt yiyişi vardır fakat WordPress teması yapanlar, genellikle yeni bir panel oluşturmazlar, var olan panele bölümler eklerler.

2. Bölümler (Sections)

Panel içindeki her bir bağımsız menü bir bölümdür.

Aşağıdaki resimde, her bir kırmızı çerçeve, Twenty Nineteen temasının panelinde oluşturulmuş bir bölümü göstermektedir.

3. Kontroller (Controls)

Panel üzerindeki bir bölüme tıkladığınızda, o bölüme ait kontrollerin bulunduğu yeni bir sayfa açılır. Her bir kontrol aslında bir çeşit form alanıdır. Aşağıda, “Ana sayfa ayarları” bölümüne tıklandığında açılan ve ‘Ana sayfa görüntülenmesi‘, ‘Ana Sayfa‘, ‘Yazı sayfası‘ başlıklarına sahip 3 adet kontrol içeren bir kontrol sayfası verilmiştir:

4. Ayarlar (Settings)

Oluşturduğumuz kontroller ile yaptığımız ayarları kaydeder, tema üzerinde gösterir veya kayıtlı ayarları getirir.

Eklediğimiz her bir kontrol için bir de ayar eklememiz gerekir. Ayar ile kontrol alanı aracılığı ile kullanıcıdan aldığımız ayarı veritabanına kaydediyoruz.

Customizer API Alanları Oluşturma

Customizer API ile 4 tür alan oluşturabildiğimizden bahsetmiştik. Bu alanları oluşturmak için bir fonksiyon kullanmalıyız ve kullandığımız fonksiyonu 'customize_register' kancası ile çağırmalıyız. Aşağıdaki verilen kod, Customizer API alanları oluşturan bir fonksiyona aittir:

function ilktemam_customizer_alanlari( $wp_customize ) {
   //Paneller, bölümler, ayarlar ve kontroller burada oluşturulur
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );

ilktemam_customizer_alanlari() fonksiyonunun parametresi $wp_customize değişkenidir ve Customizer API nesnesini taşımaktadır. Yani, Customizer API nesnesine ait herhangi bir fonksiyona ulaşmak istediğimizde bu değişkeni kullanacağız.

Aşağıda gördüğünüz kod, Customizer API ile gelen alanları oluşturan, getiren ve silen metotları göstermektedir:

function ilktemam_customizer_alanlari( $wp_customize ) {
  $wp_customize->add_panel(); // Panel ekler
  $wp_customize->get_panel(); // Panel getirir
  $wp_customize->remove_panel(); // Paneli siler
 
  $wp_customize->add_section(); // Bölüm ekler
  $wp_customize->get_section(); // Bölüm getirir
  $wp_customize->remove_section(); // Bölümü siler
 
  $wp_customize->add_setting(); // Ayar ekler
  $wp_customize->get_setting(); // Ayarı getirir
  $wp_customize->remove_setting(); // Ayarı siler
 
  $wp_customize->add_control(); // Kontrol ekler
  $wp_customize->get_control(); // Kontrol getirir
  $wp_customize->remove_control(); // Kontrolü siler
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );

Customizer API alanlarını oluştururken yukarıda verilen sırayı takip etmeliyiz. Yani önce panel, sonra bölüm, sonra ayar ve son olarak kontrol alanı oluşturmalıyız.

Bir kontrol alanı oluşturana kadar, oluşturduğumuz diğer alanlar, Görünüm->Özelleştir sayfasında kendini göstermez.

$wp_customize->add_setting() Metodunu Kullanma

$wp_customize->add_setting() metodu, WordPress temamızın veritabanına bir anahtar ve bu anahtar için varsayılan bir değer kaydetmek için kullanılır. Daha sonra kaydettiğimiz bu anahtar ve değerini temamızda dilediğimiz bir ayarı yapmak için kullanırız. Örneğin, $wp_customize->add_setting() metodu ile, anahtar adı 'baslik_rengi' olan bir ayar oluşturduk ve bu ayarın varsayılan değerini de '#000000' olarak ayarladık diyelim. Artık şablon dosyalarımızda:

<?php echo get_theme_mod('baslik_rengi'); ?> Çıktısı: #000000
// veya
<?php echo get_option('baslik_rengi'); ?> Çıktısı: #000000

Oluşturduğumuz renk ayarını bir de iş üzerinde görelim:

function ilktemam_customizer_css() {
	$baslik_rengi = '<style type="text/css" id="ozel-tema-css">';
	$baslik_rengi .= '.title { color: ';
	$baslik_rengi .= get_theme_mod( 'baslik_rengi', '#000000' );
	$baslik_rengi .= '} </style>';
	echo $baslik_rengi;
}
add_action( 'wp_head', 'ilktemam_customizer_css'); // ilktemam_customizer_css() fonksiyonunu ürettiği CSS, tema sayfalarının <head>..</head> kısmına eklenir

Ayarı oluştururken tipini 'type'='option' olarak ayarladıysak da (birazdan ne demek istediğimizi anlayacaksınız), aynı kodu şöyle kullanmalıyız:

function ilktemam_customizer_css() {
	$baslik_rengi = '<style type="text/css" id="ozel-tema-css">';
	$baslik_rengi .= '.title { color: ';
	$baslik_rengi .= get_option( 'baslik_rengi' );
	$baslik_rengi .= '} </style>';
	echo $baslik_rengi;
}
add_action( 'wp_head', 'ilktemam_customizer_css'); // ilktemam_customizer_css() fonksiyonunu ürettiği CSS, tema sayfalarının <head>..</head> kısmına eklenir

kodlarını kullanarak ekrana, bu ayar için varsayılan değer olarak atadığımız ve siyah rengin kodu olan #000000 ifadesini bastırabiliriz. Yine başka bir örnek olarak, belli şablon dosyalarınızda sidebar (sayfa yanı) kullanıp kullanılmayacağını, kullanılacaksa, sayfanın hangi yanında kullanılacağını, bu şekilde bir ayar oluşturarak, kullanıcınızın belirlemesini sağlayabilirsiniz. Oluşturacağınız ayar ve bu ayarı kullanacağınız yer tamamen sizin hayal gücünüz ile sınırlıdır.

Tabi burada şöyle bir soru geliyor akıllara: Ayar için verdiğimiz varsayılan değeri nasıl değiştirebiliriz? Hep aynı değeri mi kullanmak zorundayız? Cevap: Ayar için hep aynı değeri kullanmak zorunda değiliz. Dilersek, kullanıcımızın bu varsayılan değeri değiştirmesini sağlayabiliriz. İşte “kontroller” tam da bu işi yapan metotlardır. Bu ayara bağlı bir kontrol oluşturarak, ayarın değerini kullanıcımızın belirlemesini sağlayabiliriz. Okumaya devam edin.

Bir ayar oluşturmak için $wp_customize->add_setting() metodunu şu şekilde kullanırız:

$wp_customize->add_setting($ayar_id, $argumanlar);

Görüldüğü gibi, metot iki argüman ile çalışmaktadır. Bu argümanların anlamı şöyledir:

$ayar_id

(string – Zorunludur.) Oluşturacağımız ayarın anahtarıdır, kimliğidir. Bu ayara verilen değeri getirmek için bu anahtarı kullanırız. Türkçe karakter ve boşluk içermemelidir.

$ayar_id parametresine, şu kelimeler ile başlayan değerler vermekten kaçınmalısınız: widget_*, sidebars_widgets[*], nav_menu[*], nav_menu_item[*]. Çünkü bu ifadeler ile başlayan değerleri WordPress kullanmaktadır.

$argumanlar

(array – Zorunludur.) Oluşturacağımız ayar ile ilgili detayları verdiğimiz bir dizidir. Bu dizi aşağıdaki argümanları alabilir:

• 'default' – Ayarın varsayılan değeridir.
• 'type' – Ayarın nasıl getirileceğini belirler. Bu argüman için iki değer kullanabiliriz. Birincisi 'option' değeridir ki bunu kullanırsak, yaptığımız ayar, wp_options tablosuna kaydedilir ve temamızı değiştirsek bile kullanılmaya devam edilebilir ve get_option($ayar_id) şeklinde getirilir. 'option' değerini kullanırken, $ayar_id parametresine, açıklayıcı bir değer ('benimtemam_yazi_rengi' gibi) vermeye üşenmemenizi tavsiye ederiz ki daha sonra ne işe yaradığını unutmayın. İkincisi ise, aynı zamanda varsayılan değer olan 'theme_mod' değeridir. Bu değeri kullandığımızda, ayar sadece tema aktif iken kullanılabilir ve get_theme_mod($ayar_id) fonksiyonu ile getirilir.
• 'capability' – Ayar için gereken minimum yetkidir. Varsayılan değeri 'edit_theme_options' olarak ayarlanmıştır.
• 'theme_supports' – Eğer tema add_theme_support() fonksiyonu ile eklenebilen özelliklerden herhangi birini desteklemiyorsa, bu ayarı gizlemek için kullanılır.
• 'transports' – Yapılan ayarın temada ne zaman gösterileceğini belirler. Bu argüman iki değer alır. Birincisi ve varsayılan olanı, 'refresh' değeridir ki, yaptığınız ayar sayfa yenilendiğinde devreye girecek demektir. İkincisi ve daha fantastik olanı 'postMessage' değeridir ki, yaptığınız ayar, sayfanın canlı ön izleme kısmında anında görünecek demektir. Fakat 'postMessage' özelliğinin çalışması için, ayarları canlı ön izleme kısmına uygulayan JavaScript kodlarınızın olması gerekmektedir. Burada ne anlatmak istediğimizi ilerleyen derslerde öğreneceksiniz.
• 'sanitize_callback' – Ayarınızın güvenlik önlemidir. Ayarınız için verilen değeri belli güvenlik işlemlerinden geçiren bir fonksiyon adıdır. Burada dilerseniz, WordPress’in, form alanları için oluşturduğu, (text alanları için sanitize_text_field(), renk kodları için sanitize_hex_color() fonksiyonu gibi) bir güvenlik fonksiyonunu da kullanabilirsiniz. Dilerseniz de kendiniz bir fonksiyon yazıp adını bu argümana girebilirsiniz.
• 'sanitize_js_callback' – Ayarınızın JavaScript çıktıları için güvenlik önlemidir. Ayarınız için verilen değer, JavaScript çıktısı oluşturmak için kullanılacaksa, bu değeri belli güvenlik işlemlerinden geçiren bir fonksiyon oluşturabilir ve adını buraya girebilirsiniz.

$wp_customize->add_control() Metodunu Kullanma

$wp_customize->add_control() metodu, $wp_customize->add_setting() metodu ile oluşturduğumuz ayarın varsayılan değerini değiştirebilmemiz için bir form alanı oluşturmamızı sağlar. Her ayarın, varsayılan değerini değiştirebilmek için o ayara bağlı bir kontrol oluşturmamız gerekir.

Bir kontrol oluşturmak için $wp_customize->add_control() metodunu şu şekilde kullanırız:

$wp_customize->add_control($ayar_id, $argumanlar);

Görüldüğü gibi, metot iki argüman ile çalışmaktadır. Bu argümanların anlamı şöyledir:

$ayar_id

Bu kontrolün hangi ayar için oluşturulduğunu belirler. Bu argümanın değeri, biraz önce bahsettiğimiz, $wp_customize->add_setting($ayar_id, $argumanlar) metodu ile oluşturduğumuz ayarın ilk parametresi olan $ayar_id değeridir.

$ayar_id parametresi, değer olarak bir kontrol nesnesi de kabul eder. Kontrol nesnesi derken, WordPress ile hazır gelen bazı form alanlarını kastediyoruz. Örneğin, renk ayarı yapmak için bir renk paleti kullanmak isteyelim. Bunun için, sıfırdan bir palet kodlamak yerine WordPress’in bizim için oluşturduğu new WP_Customize_Color_Control() nesnesini kullanabiliriz. Aşağıda, hazır kontrol nesnesi kullanımı örnekleri verilecektir.

$argumanlar

(array – Zorunludur.) Oluşturacağımız ayar ile ilgili detayları verdiğimiz bir dizidir. $ayar_id parametresine değer olarak bir kontrol nesnesi atadıysak, bu parametre kullanılmaz. $argumanlar dizisi aşağıdaki argümanları alabilir:

• 'label' – Oluşturacağımız kontrol alanının kısa bir başlığıdır. HTML elemanları kabul eder. Örnek: 'label' => __('Başlık Rengi', 'textdomain')
• 'description' – Oluşturacağımız kontrol alanının açıklamasıdır. 'label' kısmının altında görünür. Örnek: 'description' => __('Sayfanın başlık rengini belirler.', 'textdomain')
• 'section' – Bizim oluşturduğumuz () ya da temanın varsayılan panelindeki bölümlerden birinin kimliğidir. Varsayılan paneldeki bölümlerin kimlik değerleri (anlamları ile) şunlardır: themes (Etkin tema), title_tagline (Site kimliği), colors (Renkler), header_image (Üst kısım ortam dosyası), background_image (Arkaplan resmi), static_front_page (Ana sayfa ayarları). Bu bölümlerden header_image ve background_image bölümleri her temanın panelinde bulunmaz, bu bölümler add_theme_support() fonksiyonu ile temaya eklendiklerinde oluşurlar. Örnek: 'section' => 'colors'
• 'priority' – Ekleyeceğimiz kontrolün yerleşim sırasıdır, önceliğidir. Bu parametrenin değeri küçüldükçe, oluşturduğumuz alan daha üst sırada yer alır. Örnek: 'priority' => 65 (Varsayılan paneldeki bölümlerin öncelik sırası aşağıda verilmiştir.) Kontrol alanını yeni bir panele ekliyorsanız, bu argümanın değerlerini siz belirlersiniz ve keyfinize göre bir yerleşim sırası oluşturursunuz.
• 'type' – Eklediğimiz kontrolün, hangi tipte bir form alanı olduğunu belirler. Desteklenen form alanları şunlardır: text,  checkbox,  radio,  select,  textarea,  dropdown-pages,  email,  url,  number,  hidden ve date. Varsayılan değer olarak 'text' ayarlanmıştır. Örnek: 'type' => 'textarea'
• 'settings' – Kontrol alanının hangi ayarı yaptığını belirler. Bu argüman, bu metot ile kontrol edilmek istenen ayarın kimlik değerini alır. Varsayılan değeri $ayar_id parametresinin değeridir.
• 'choices', 'height', 'width' vs. – Oluşturduğumuz kontrolün tipi destekliyorsa (4 tanesi destekler), bu kontrol tipine ait özelliklerdir. "select" ve "radio" tipindeki bir kontrol alanı için örnek:  'choices'=> twentyfifteen_get_color_scheme_choices()
• 'input_attrs' – Oluşturduğumuz kontrol alanı ile ilgili olarak eklememiz gereken özelliklerdir. Mesela, ‘range’ tipinde bir kontrol alanı oluşturuyorsak bu argümanı şu şekilde oluşturabiliriz: 'input_attrs' => array( 'min' => 0, 'max' => 10, 'step' => 2 )

$wp_customize->add_section() Metodunu Kullanma

$wp_customize->add_section() metodu, $wp_customize->add_panel() metodu ile oluşturduğumuz panele veya temanın varsayılan paneline bir bölüm ekler.

Bir bölüm oluşturmak için $wp_customize->add_section() metodunu şu şekilde kullanırız:

$wp_customize->add_section($bolum_id, $argumanlar);

Görüldüğü gibi, metot iki argüman ile çalışmaktadır. Bu argümanların anlamı şöyledir:

$bolum_id

(string – Zorunludur.) Oluşturulan bölümün kimliğidir.

$argumanlar

(array – Zorunludur.) Oluşturacağımız bölüm ile ilgili detayları verdiğimiz bir dizidir. $argumanlar dizisi aşağıdaki argümanları alabilir:

• 'title' – Bölümün görünen adıdır.
• 'priority' – Ekleyeceğimiz bölümün paneldeki yerleşim sırasıdır, önceliğidir. Bu parametrenin değeri küçüldükçe, oluşturduğumuz alan daha üst sırada yer alır. Örnek: 'priority' => 65 (Varsayılan paneldeki bölümlerin öncelik sırası aşağıda verilmiştir.)
• 'description' – Oluşturacağımız bölümün açıklamasıdır.
• 'capability' – Bölümü görmek için gereken minimum yetkidir. Varsayılan değeri 'edit_theme_options' olarak ayarlanmıştır.
• 'active_callback' – Oluşturacağımız bölümün, temanın hangi sayfasını/sayfalarını ayarlarken görüneceğini belirler. Mesela, canlı ön izlemede, sadece ana sayfa açıkken görünecek bir bölüm için, bu argüman 'active_callback' => 'is_front_page' şeklinde ayarlanabilir.
• 'panel' – Bölümün oluşturulacağı panelin kimliğidir. Varsayılan değeri, temanın varsayılan panelidir.

Bir WordPress temasının varsayılan panelinde bulunabilecek bölümler/paneller şunlardır:

• Etkin tema (themes)
• Site kimliği (title_tagline)
• Renkler (colors)
• Üst kısım ortam dosyası (header_image)
• Arkaplan resmi (background_image)
• Menüler (Paneldir) (nav_menus)
• Bileşenler (Paneldir) (widgets)
• Ana sayfa ayarları (static_front_page) : – Temanızda en az bir sayfa oluşturulmuş ise görünür.
• Ek CSS (custom_css)

Panel Oluşturuyoruz

Aşağıdaki kod ile “Tema Ayarları” adında bir panel oluşturuyoruz.

function ilktemam_customizer_alanlari( $wp_customize ) {

	// PANEL: "Tema Ayarları" adında bir panel ekler
	$wp_customize->add_panel(
		'tema-ayarlari', // Panelin kimliği
		array(
			'title' => __( 'Tema Ayarları', 'textdomain' ),
			'description' => __( '<p>Temanızın ayarlarını yapıyorsunuz.</p>', 'textdomain'),
			'priority' => 65,
		)
	);
       
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );

Yukarıdaki kod, temanızın varsayılan panelinde, kimliği “tema-ayarlari” olan ve görünen adı “Tema Ayarları” olan bir panel oluşturacaktır.

Aşağıda resimde oluşturduğumuz panelin bağlantısı kırmızı çerçeve ile gösterilmiştir:

Sizin temanızda henüz böyle bir alan oluşmayacaktır çünkü, Customizer API ile en az bir kontrol alanı oluşturana kadar, diğer alanlar görünmez.

Panelimiz, ayrı bir sayfa şeklinde değil de, temamızın varsayılan panelinde oluşmuştur, bir bölüm görüntüsüne sahip bir bağlantı şeklinde oluşmuştur ve ‘Tema Ayarları’ adıyla oluşmuştur. Bu bağlantıya tıkladığımızda yeni panelimiz açılacaktır.

Panelimizin bağlantısı, varsayılan panelin Renkler ve Menüler bölümlerinin arasında oluşmuştur. Dilerseniz bu konumu, panel eklerken kullandığımız 'priority' => 65 argümanına verilen “65” değerini büyüterek daha aşağı sıralara, küçülterek de daha yukarı sıralara taşıyabilirsiniz.

Varsayılan Paneldeki Bölümlerin Konum Numaraları

• Etkin tema (themes) : 0
• Site kimliği (title_tagline) : 20
• Renkler (colors) : 40
• Üst kısım ortam dosyası (header_image) : 60
• Arkaplan resmi (background_image) : 80
• Menüler (nav_menus) : 100
• Bileşenler (widgets) : 110
• Ana sayfa ayarları (static_front_page) : 120
• Varsayılan konum : 160
• Ek CSS (custom_css) : 200

Bölüm (Section) Oluşturuyoruz

Aşağıdaki kod, “Tema Ayarları” adında bir panel ve bu panele “Blog Seçenekleri” adında bir bölüm ekler:

function ilktemam_customizer_alanlari( $wp_customize ) {

	// PANEL: "Tema Ayarları" adında bir panel ekler
	$wp_customize->add_panel(
		'tema-ayarlari', // Panelin kimliği
		array(
			'title' => __( 'Tema Ayarları', 'textdomain' ),
			'description' => __( '<p>Temanızın ayarlarını yapıyorsunuz.</p>', 'textdomain'),
			'priority' => 65,
		)
	);

	// BÖLÜM: "Tema Ayarları" Paneline "Blog Seçenekleri" bölümü ekler
	$wp_customize->add_section( 'blog-secenekleri', 
		array(
			'title'       => __( 'Blog Seçenekleri', 'textdomain' ),
			'priority'    => 65,
			'yapabilirlikte'  => 'edit_theme_options',
			'description' => __('Temanızın blog sayfası ile ilgili bir takım ayarlar yapılır.', 'textdomain'), // Bölümüm açıklaması
			'panel' => 'tema-ayarlari',
		) 
	);
       
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );

Eklediğimiz “Blog Seçenekleri” bölümünü görmek için, tema panelindeki “Tema Ayaları” bağlantısına tıklıyoruz ve şöyle bir panel ile karşılaşıyoruz:

Yukarıdaki resimde görüldüğü gibi, “Tema Ayarları” adındaki panel sayfasında “Blog Seçenekleri” adında bir bölüm oluşmuştur.

Şimdi sıra geldi, Blog Seçenekleri adıyla oluşturduğumuz bu bölüme, bir takım ayarlar ve bu ayarları yapabileceğimiz kontroller eklemeye.

Bir Ayar Oluşturuyoruz

Aşağıdaki kod, “Tema Ayarları” adında bir panel, bu panele “Blog Seçenekleri” adında bir bölüm ve bu bölüme de “Sidebar seçenekleri” adında bir ayar ekler ve bu ayarın varsayılan seçeneğini 'sagda' yapar:

function ilktemam_customizer_alanlari( $wp_customize ) {

	// PANEL: "Tema Ayarları" adında bir panel ekler
	$wp_customize->add_panel(
		'tema-ayarlari', // Panelin kimliği
		array(
			'title' => __( 'Tema Ayarları', 'textdomain' ),
			'description' => __( '<p>Temanızın ayarlarını yapıyorsunuz.</p>', 'textdomain'),
			'priority' => 65,
		)
	);

	// BÖLÜM: "Tema Ayarları" Paneline "Blog Seçenekleri" bölümü ekler
	$wp_customize->add_section( 'blog-secenekleri', 
		array(
			'title'       => __( 'Blog Seçenekleri', 'textdomain' ),
			'priority'    => 65,
			'yapabilirlikte'  => 'edit_theme_options',
			'description' => __('Temanızın blog sayfası ile ilgili bir takım ayarlar yapılır.', 'textdomain'), // Bölümüm açıklaması
			'panel' => 'tema-ayarlari',
		) 
	);

	// AYAR: "sidebar_secenekeleri" kimliğiyle bir ayar oluşturuyoruz ve varsayılan değerini de "sagda" olarak kaydediyoruz. (Sidebar ayarını yapabilmek için "radio" tipinde bir kontrol ekleyeceğiz, onun ayarını hazırlıyoruz.)
	$wp_customize->add_setting( 'sidebar_secenekeleri', 
		array(
			'capability' => 'edit_theme_options',
			'default' => 'sagda',
			'sanitize_callback' => '',
		) 
	);
       
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );

Eklediğimiz ayarın adını, 'sidebar_secenekeleri', varsayılan değeri de, 'sagda' yaptık.

Bu ayarın değerini getirmek istediğimizde şu kodu kullanabiliriz:

<?php echo get_theme_mod('sidebar_secenekeleri'); ?>

Fakat, yaptığımız ayarları genellikle şablon dosyalarımızda bir koşul olarak kullanırız. Aşağıda bunun bir örneği verilmiştir:

<?php if( get_theme_mod('sidebar_secenekeleri') == 'sagda' ) {
   // Sidebar sayfanın sağına eklenir.
} ?>

Şimdi, dilediğimizde bu ayarın değerini değiştirebilmek için bir kontrol alanı (form elemanı) oluşturalım.

Bir Kontrol Oluşturuyoruz

Aşağıdaki kod, “Tema Ayarları” adında bir panel, bu panele “Blog Seçenekleri” adında bir bölüm, bu bölüme de “Sidebar seçenekleri” adında bir ayar ve bu ayarı değiştirebilecek 'radio' tipinde bir kontrol alanı ekler:

function ilktemam_customizer_alanlari( $wp_customize ) {

	// PANEL: "Tema Ayarları" adında bir panel ekler
	$wp_customize->add_panel(
		'tema-ayarlari', // Panelin kimliği
		array(
			'title' => __( 'Tema Ayarları', 'textdomain' ),
			'description' => __( '<p>Temanızın ayarlarını yapıyorsunuz.</p>', 'textdomain'),
			'priority' => 65,
		)
	);

	// BÖLÜM: "Tema Ayarları" Paneline "Blog Seçenekleri" bölümü ekler
	$wp_customize->add_section( 'blog-secenekleri', 
		array(
			'title'       => __( 'Blog Seçenekleri', 'textdomain' ),
			'priority'    => 65,
			'yapabilirlikte'  => 'edit_theme_options',
			'description' => __('Temanızın blog sayfası ile ilgili bir takım ayarlar yapılır.', 'textdomain'), // Bölümüm açıklaması
			'panel' => 'tema-ayarlari',
		) 
	);

	// AYAR: "sidebar_secenekeleri" kimliğiyle bir ayar oluşturuyoruz ve varsayılan değerini de "sagda" olarak kaydediyoruz. (radio tipinde bir kontrol ekleyeceğiz, onun ayarını hazırlıyoruz.)
	$wp_customize->add_setting( 'sidebar_secenekeleri', 
		array(
			'default' => 'sagda',
			'sanitize_callback' => '',
		) 
	);

	// KONTROL: "radio" tipinde bir kontrol alanı oluşturuyoruz ve "sidebar_secenekleri" adındaki ayarı kontrol ediyoruz.
	$wp_customize->add_control( 'sidebar_secenekeleri',
		array(
			'label' => __( 'Sidebar\'ın Konumu', 'textdomain' ),
			'description' => __( 'Sidebar\'ın konumunu belirler.', 'textdomain' ),
			'type' => 'radio',
			'choices' => array(
				'sagda' => __( 'Sağda', 'textdomain' ),
				'solda' => __( 'Solda', 'textdomain' ),
				'kaldir' => __( 'Kaldır', 'textdomain' ),
				),
			'section' => 'blog-secenekleri',
                        'priority'   => 1,
		)
	);
       
}
add_action( 'customize_register', 'ilktemam_customizer_alanlari' );

Oluşturduğumuz kontrolü görmek için, panelimizdeki “Blog Seçenekleri” bölümüne tıklıyoruz ve şöyle bir kontrol alanı ile karşılaşıyoruz:

Yukarıdaki alanları bir PHP sınıfı şeklinde de ekleyebilirdik:

class Ilktemam_Customizer_Alanlari {
	
	public function customizer_alanlari( $wp_customize ) {

		// PANEL: "Tema Ayarları" adında bir panel ekler
		$wp_customize->add_panel(
			'tema-ayarlari', // Panelin kimliği
			array(
				'title' => __( 'Tema Ayarları', 'textdomain' ),
				'description' => __( '<p>Temanızın ayarlarını yapıyorsunuz.</p>', 'textdomain'),
				'priority' => 65,
			)
		);

		// BÖLÜM: "Tema Ayarları" Paneline "Blog Seçenekleri" bölümü ekler
		$wp_customize->add_section( 'blog-secenekleri', 
			array(
				'title'       => __( 'Blog Seçenekleri', 'textdomain' ),
				'priority'    => 65,
				'yapabilirlikte'  => 'edit_theme_options',
				'description' => __('Temanızın blog sayfası ile ilgili bir takım ayarlar yapılır.', 'textdomain'), // Bölümüm açıklaması
				'panel' => 'tema-ayarlari',
			) 
		);

		// AYAR: "sidebar_secenekeleri" kimliğiyle bir ayar oluşturuyoruz ve varsayılan değerini de "sagda" olarak kaydediyoruz. (radio tipinde bir kontrol ekleyeceğiz, onun ayarını hazırlıyoruz.)
		$wp_customize->add_setting( 'sidebar_secenekeleri', 
			array(
				'default' => 'sagda',
				'sanitize_callback' => '',
			) 
		);

		// KONTROL: "radio" tipinde bir kontrol alanı oluşturuyoruz ve "sidebar_secenekleri" adındaki ayarı kontrol ediyoruz.
		$wp_customize->add_control( 'sidebar_secenekeleri',
			array(
				'label' => __( 'Sidebar\'ın Konumu', 'textdomain' ),
				'description' => __( 'Sidebar\'ın konumunu belirler.', 'textdomain' ),
				'type' => 'radio',
				'choices' => array(
					'sagda' => __( 'Sağda', 'textdomain' ),
					'solda' => __( 'Solda', 'textdomain' ),
					'kaldir' => __( 'Kaldır', 'textdomain' ),
					),
				'section' => 'blog-secenekleri',
                                'priority'   => 1,
			)
		);
    }
}
add_action( 'customize_register', array( 'Ilktemam_Customizer_Alanlari', 'customizer_alanlari' ) );

Ayarları İle Birlikte Farklı Tipte Kontroller Oluşturma

Renk Kontrolü Oluşturma

Aşağıda kod, Customizer API ile, 'baslik_rengi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de renk paleti tipinde bir kontrol alanı oluşturur.

// AYAR - Başlık rengi
$wp_customize->add_setting( 'baslik_rengi',
	array(
		'default'    => '#3a3a3a',
                'sanitize_callback' => 'sanitize_hex_color',  
	) 
);      

// KONTROL - Başlık rengi:
$wp_customize->add_control( new WP_Customize_Color_Control( // Renk sınıfının bir örneği
	$wp_customize, // $wp_customize object (zorunludur)
	'baslik_rengi', // Kontrol için bir kimlik -id- oluşturduk
		array(
			'label'      => __( 'Başlık Rengi', 'textdomain' ),
			'description'=> __( 'Blog sayfasının başlığının rengini ayarlar.', 'textdomain' ),
			'settings'   => 'baslik_rengi',
			'priority'   => 50,
			'section'    => 'blog-secenekleri',
		) 
	) 
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu rengi şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'baslik_rengi'); ?> kodunu kullanmamız yeterli olacaktır.

Text Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'yazi_sayisi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi text olan bir kontrol alanı oluşturur.

Text, varsayılan kontrol alanıdır. Bu yüzden, kontrolün tipini belirtmezsek bir text alanı oluştur:

// AYAR - Yazı Sayısı
$wp_customize->add_setting( 'yazi_sayisi',
	array(
		'default'    => 10,
                'sanitize_callback' => 'sanitize_text_field'
	) 
);

// KONTROL - Yazı sayısı
$wp_customize->add_control( 'yazi_sayisi',
	array(
		'label'      => __( 'Yazı Sayısı', 'textdomain' ),
		'description'=> __( 'Blog sayfasında gösterilecek yazı sayısını giriniz.', 'textdomain' ),
		'settings'   => 'yazi_sayisi',
		'priority'   => 20,
		'section'    => 'blog-secenekleri',
	
	)    
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'yazi_sayisi'); ?> kodunu kullanmamız yeterli olacaktır.

Checkbox Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'yazilarin_meta_bilgileri' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi checkbox olan bir kontrol alanı oluşturur.

// AYAR - Yazıların Meta Bilgileri görünsün mü?
$wp_customize->add_setting( 'yazilarin_meta_bilgileri', 
	array(
		'capability' => 'edit_theme_options',
		'default' => false,
		'sanitize_callback' => '',
	) 
);

// KONTROL - Yazı meta bilgilerinin görünürlülüğünü kontrol eder
$wp_customize->add_control( 'yazilarin_meta_bilgileri',
	array(
		'label' => __( 'Yazıların meta bilgilerini gösterelim mi?', 'textdomain' ),
		'description' => __( 'İşaretlerseniz, blog sayfasında yazıların altında; yazar, tarih, kategori, yorum, etiket bilgileri yer alır.', 'textdomain' ),
		'type' => 'checkbox',
		'settings'   => 'yazilarin_meta_bilgileri',
		'section' => 'blog-secenekleri',
		'priority'   => 15,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'yazilarin_meta_bilgileri'); ?> kodunu kullanmamız yeterli olacaktır.

Select Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'ust_kisim_secenekleri' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi select olan bir kontrol alanı oluşturur.

// AYAR - Sayfanın Üst Kısım İçeriği
$wp_customize->add_setting( 'ust_kisim_secenekeleri', 
	array(
		'capability' => 'edit_theme_options',
		'default' => 'sayfa_basligi',
		'sanitize_callback' => '',
	) 
);

// KONTROL - Sayfanın Üst Kısım İçeriğini Belirler
$wp_customize->add_control( 'ust_kisim_secenekeleri',
	array(
		'label' => __( 'Sayfanın Üstü', 'textdomain' ),
		'description' => __( 'Sayfanın üst kısmında -Ana menünün altında- ne tür bir içerik olacak?', 'textdomain' ),
		'type' => 'select',
		'choices' => array(
			'sayfa_basligi' => __( 'Sayfa Başlığı', 'textdomain' ),
			'reklam' => __( 'Reklam', 'textdomain' ),
			'slaytsov' => __( 'Slayt Şov', 'textdomain' ),
			),
		'section' => 'blog-secenekleri',
		'priority'   => 2,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'ust_kisim_secenekleri'); ?> kodunu kullanmamız yeterli olacaktır.

Textarea Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'yonetici_notu' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi textarea olan bir kontrol alanı oluşturur.

// AYAR - Yönetici Notu
$wp_customize->add_setting( 'yonetici_notu', 
	array(
		'capability' => 'edit_theme_options',
		'default' => '',
		'sanitize_callback' => 'sanitize_textarea_field',
	) 
);

// KONTROL - Kullanıcılara bir not bırakır.
$wp_customize->add_control( 'yonetici_notu',
	array(
		'label' => __( 'Yönetici Notu', 'textdomain' ),
		'description' => __( 'Sayfanın en üsütünde paylaşılmak üzere bir not girin.', 'textdomain' ),
		'type' => 'textarea',
		'settings'   => 'yonetici_notu',
		'section' => 'blog-secenekleri',
		'priority'   => 2,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'yonetici_notu'); ?> kodunu kullanmamız yeterli olacaktır.

Dropdown-pages Tipinde Kontrol Alanı Oluşturma

Dropdown-pages tipinde bir kontrol alanı oluşturmak demek, temamız için eklediğimiz sayfalar ile select tipinde bir form alanı oluşturmak ve bu sayfalardan dilediğimizi seçebilmek demektir.

Aşağıdaki kod, Customizer API ile, 'tema_sayfalari' adında bir ayar ve bu ayarı kullanarak temamızdan bir sayfa seçebileceğimiz bir kontrol alanı oluşturur.

// AYAR - Temamızın Sayfaları
$wp_customize->add_setting( 'ilktemamin_sayfalarii', 
	array(
		'default' => 0,
	)
);

// KONTROL - Temamızın bir sayfasını seçer
$wp_customize->add_control( 'ilktemamin_sayfalarii', 
	array(
	  'label' => __( 'Temanın Sayfaları' ),
	  'description' => __( 'Bir sayfa seçiniz.' ),
	  'type' => 'dropdown-pages',
	  'section' => 'blog-secenekleri',
          'allow_addition' => true, // Yeni sayfa ekleyebilme özelliği katar
          'priority'   => 25,
	) 
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayar, seçtiğimiz sayfanın id değerini getirir, bir sayfa seçmezsek 0 değerini getirir. Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'ilktemamin_sayfalari'); ?> kodunu kullanmamız yeterli olacaktır.

Dosya Yükleyicisi Şeklinde Kontrol Alanı Oluşturma

Dosya yükleyici tipinde bir kontrol alanı oluşturmak demek, bir ortam yükleyicisi oluşturmak ve bu yükleyici ile, dilersek bir ortam dosyası yükleyebilmek dilersek de ortam kütüphanesindekilerden birini kullanabilmek demektir.

Aşağıdaki kod, Customizer API ile, 'ust_kisim_gorseli' adında bir ayar ve bu ayarı kullanarak bir ortam dosyası yükleyebileceğimiz ya da ortam kütüphanesinden bir ortam dosyası seçebileceğimiz bir kontrol alanı oluşturur.

// AYAR - Tepe Resmi
$wp_customize->add_setting( 'ust_kisim_gorseli',
	array(
		'default'    => '',
	) 
);      

// KONTROL - Tepe resmi
$wp_customize->add_control( new WP_Customize_Upload_Control(
	$wp_customize,
	'ust_kisim_gorseli',
		array(
			'label'      => __( 'Tepe Resmi', 'textdomain' ),
			'description'=> __( 'Blog sayfasının tepesine konacak resimdir.', 'textdomain' ),
			'settings'   => 'ust_kisim_gorseli',
			'priority'   => 5,
			'section'    => 'blog-secenekleri',
		) 
	) 
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayar, seçtiğimiz resmin url değerini getirir. Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'ust_kisim_gorseli'); ?> kodunu kullanmamız yeterli olacaktır.

Resim Dosyası Yükleyicisi Şeklinde Kontrol Alanı Oluşturma

Resim dosyası yükleyici tipinde bir kontrol alanı oluşturmak demek, sadece resim dosyalarını tanıyan bir ortam yükleyicisi oluşturmak ve bu yükleyici ile dilersek bir resim dosyası yükleyebilmek dilersek de ortam kütüphanesindekilerden birini kullanabilmek demektir.

Aşağıdaki kod, Customizer API ile, 'ust_kisim_gorseli' adında bir ayar ve bu ayarı kullanarak bir resim dosyası yükleyebileceğimiz ya da ortam kütüphanesinden bir resim dosyası seçebileceğimiz bir kontrol alanı oluşturur.

// AYAR - Tepe Resmi
$wp_customize->add_setting( 'ust_kisim_gorseli',
	array(
		'default'    => '',
	) 
);      

// KONTROL - Tepe resmi
$wp_customize->add_control( new WP_Customize_Image_Control(
	$wp_customize,
	'ust_kisim_gorseli',
		array(
			'label'      => __( 'Tepe Resmi', 'textdomain' ),
			'description'=> __( 'Blog sayfasının tepesine konacak resimdir.', 'textdomain' ),
			'settings'   => 'ust_kisim_gorseli',
			'priority'   => 5,
			'section'    => 'blog-secenekleri',
		) 
	) 
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayar, seçtiğimiz resmin url değerini getirir. Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'ust_kisim_gorseli'); ?> kodunu kullanmamız yeterli olacaktır.

Kırpma Özelliği de Olan Dosya Yükleyicisi Şeklinde Bir Kontrol Alanı Oluşturma

Kırpma özelliği de olan bir resim yükleyici demek, yüklediğimiz veya kütüphaneden seçtiğimiz resmi, argümanlarda belirttiğimiz oranda kırparak kullanmak demektir.

Aşağıdaki kod, Customizer API ile, 'ust_kisim_gorseli' adında bir ayar ekler. Sonra bu ayarı ile bağlantılı olarak kırpma özelliği olan bir resim yükleyicisi oluşturur. Bu resim yükleyicisi bizim kontrol alanımızdır ve resim dosyalarını yüklerken veya kütüphaneden seçerken belli bir orana göre kırpma işlemi yapar.

// AYAR - Tepe Resmi
$wp_customize->add_setting( 'ust_kisim_gorseli',
	array(
		'default'    => '',
	) 
);      

// KONTROL - Tepe resmi
$wp_customize->add_control( new WP_Customize_Cropped_Image_Control(
	$wp_customize,
	'ust_kisim_gorseli',
		array(
			'label'      => __( 'Tepe Resmi', 'textdomain' ),
			'description'=> __( 'Blog sayfasının tepesine konacak resimdir.', 'textdomain' ),
			'width' => 200,
			'height' => 200,
			'settings'   => 'ust_kisim_gorseli',
			'priority'   => 5,
			'section'    => 'blog-secenekleri',
		) 
	) 
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayar, seçtiğimiz ve kırptığımız resmin id değerini getirir. Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'ust_kisim_gorseli'); ?> kodunu kullanmamız yeterli olacaktır.

Bir Başka Dosya Yükleyicisi Kontrol Alanı

Aşağıdaki kontrol alanı, yüklemek istediğimiz dosyanın mime tipini belirtmemize imkan verir.

Sadece resim (image) tipindeki dosyaları yükler:

// KONTROL - Tepe resmi
$wp_customize->add_control( new WP_Customize_Media_Control(
	$wp_customize,
	'ust_kisim_gorseli',
		array(
			'label'      => __( 'Tepe Resmi', 'textdomain' ),
			'description'=> __( 'Blog sayfasının tepesine konacak resimdir.', 'textdomain' ),
			'settings'   => 'ust_kisim_gorseli',
			'priority'   => 5,
			'section'    => 'blog-secenekleri',
                        'mime_type' => 'image',
		) 
	) 
);

Sadece video tipindeki dosyaları yükler:

// KONTROL - Tepe resmi
$wp_customize->add_control( new WP_Customize_Media_Control(
	$wp_customize,
	'ust_kisim_gorseli',
		array(
			'label'      => __( 'Tepe Resmi', 'textdomain' ),
			'description'=> __( 'Blog sayfasının tepesine konacak resimdir.', 'textdomain' ),
			'settings'   => 'ust_kisim_gorseli',
			'priority'   => 5,
			'section'    => 'blog-secenekleri',
                        'mime_type' => 'video',
		) 
	) 
);

WP_Customize_Media_Control() sınıfı, ortam dosyalarının id değerlerini döndürür. Yani get_theme_mod('ust_kisim_gorseli') fonksiyonu, ortam dosyasının id değerini getirir.

Number Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'number_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi number olan bir kontrol alanı oluşturur.

// AYAR - Number Ayarı
$wp_customize->add_setting( 'number_denemesi', 
	array(
                'capability' => 'edit_theme_options',
		'default' => 5,
		'sanitize_callback' => '',
	) 
);

// KONTROL - Number Tipinde Kontrol
$wp_customize->add_control( 'number_denemesi',
	array(
		'label' => __( 'Bir Sayı', 'textdomain' ),
		'description' => __( 'Bir sayı giriniz.', 'textdomain' ),
		'type' => 'number',
		'section' => 'blog-secenekleri',
		'priority'   => 0,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'number_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Range Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'range_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi range olan bir kontrol alanı oluşturur.

// AYAR - Range Ayarı
$wp_customize->add_setting( 'range_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => 5,
		'sanitize_callback' => '',
	) 
);

// KONTROL - Range Tipinde Kontrol
$wp_customize->add_control(
	'range_denemesi',
	array(
		'label'       => __('Sayı Seçin'),
		'description' => __('0 ile 100 arasında ve 5\'in katı olan bir sayı seçiniz.'),
		'type' => 'range',
		'section'     => 'blog-secenekleri',
		'settings'    => 'range_denemesi',
		'input_attrs' => array(
			'min' => 0,
			'max' => 100,
			'step' => 5,
		),
               'priority'   => 25, 
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'range_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Oluşturduğumuz range alanında, seçtiğimiz sayıyı göremiyor olmamız dikkatinizi çekmiştir. Benim de dikkatimi çekti ve aşağıdaki kod ile sorunu çözdüm. Bu kod, yukarıda oluşturduğumuz range alanında çalışır. Kodu temanızın functions.php dosyasına yapıştırabilirsiniz:

functions.php dosyasına eklenebilir:

function customizer_range_secimini_gosterir() { ?>
    
	<script type='text/javascript' id='cusotmizer-icin'>
		(function ($) {
			$(document).ready(function ($) {

				// AYARLAR
				var ayar_id = 'range_denemesi'; // sadece burayı değiştirmeniz yeterli
				var range_span_id = 'range_id';
				var range_span_class = 'range_css_sinifi';
				var kontrol = $('#_customize-input-'+ayar_id);
				var deger = kontrol.val();

				// BURAYI ELLEMEYİN
				kontrol.before('<br /><span id="'+range_span_id+'" class="'+range_span_class+'">'+deger+'</span><br /><br />');
				kontrol.on('change', function () {
					var deger = kontrol.val();
					$('#'+range_span_id).text(deger);
				});
			})
		})(jQuery);
	</script>
<?php
}
add_action( 'customize_controls_print_footer_scripts', 'customizer_range_secimini_gosterir' );

Yukarıdaki kodu ekledikten sonra, kontrol alanı şu şekilde olacaktır:

Yukarıdaki kodda, sadece var ayar_id= 'range_denemesi' ifadesindeki, 'range_denemesi‘ değerini, kullandığınız $ayar_id değeri ile değiştirmeniz yeterli olacaktır. Ayrıca, 'range_secimi' şeklindeki CSS sınıfını kullanarak, seçim sonucunu gösteren <span> elemanını şekillendirebilirsiniz.

URL (İnternet Adresi) Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'url_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi url olan bir kontrol alanı oluşturur.

// AYAR - URL Ayarı
$wp_customize->add_setting( 'url_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => 5,
		'sanitize_callback' => '',
	) 
);

// KONTROL - URL Tipinde Kontrol
$wp_customize->add_control(
	'url_denemesi',
	array(
		'label'       => __('Adres Girin'),
		'description' => __('Bir internet adresi girin.'),
		'type' => 'url',
		'section'     => 'blog-secenekleri',
		'settings'    => 'url_denemesi',
		'input_attrs' => array(
			'placeholder' => 'https://ornek.com',
		),
		'priority'   => 1,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'url_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Tel (Telefon Numarası) Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'tel_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi tel olan bir kontrol alanı oluşturur.

// AYAR - TEL  Ayarı
$wp_customize->add_setting( 'tel_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => '',
		'sanitize_callback' => '',
	) 
);

// KONTROL - TEL Tipinde Kontrol
$wp_customize->add_control(
	'tel_denemesi',
	array(
		'label'       => __('Telefon Numarası'),
		'description' => __('Önünde sıfır olmadan bir telefon numarası giriniz.'),
		'type' => 'tel',
		'section'     => 'blog-secenekleri',
		'settings'    => 'tel_denemesi',
		'input_attrs' => array(
			'placeholder' => 'xxx xxx xx xx',
		),
		'priority'   => 1,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'tel_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Email (E-mail Adresi) Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'email_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi email olan bir kontrol alanı oluşturur.

// AYAR - EMail  Ayarı
$wp_customize->add_setting( 'email_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => '',
		'sanitize_callback' => '',
	) 
);

// KONTROL - EMail Tipinde Kontrol
$wp_customize->add_control(
	'email_denemesi',
	array(
		'label'       => __('E-mail Adresi'),
		'description' => __('E-mail adresinizi giriniz.'),
		'type' => 'email',
		'section'     => 'blog-secenekleri',
		'settings'    => 'email_denemesi',
		'input_attrs' => array(
			'placeholder' => 'e_mail@aderesim.com',
		),
		'priority'   => 1,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'email_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Time (Günün Saati) Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'time_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi time olan bir kontrol alanı oluşturur.

// AYAR - Time  Ayarı
$wp_customize->add_setting( 'time_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => '',
		'sanitize_callback' => '',
	) 
);

// KONTROL - Time Tipinde Kontrol
$wp_customize->add_control(
	'time_denemesi',
	array(
		'label'       => __('Saat'),
		'description' => __('Saat giriniz.'),
		'type' => 'time',
		'section'     => 'blog-secenekleri',
		'settings'    => 'time_denemesi',
		'priority'   => 1,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'time_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Week (Hafta) Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'week_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi week olan bir kontrol alanı oluşturur.

// AYAR - Week  Ayarı
$wp_customize->add_setting( 'week_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => '',
		'sanitize_callback' => '',
	) 
);

// KONTROL - Week Tipinde Kontrol
$wp_customize->add_control(
	'week_denemesi',
	array(
		'label'       => __('Hafta'),
		'description' => __('Kaçıncı hafta oluğunu belirtiniz.'),
		'type' => 'week',
		'section'     => 'blog-secenekleri',
		'settings'    => 'week_denemesi',
		'priority'   => 1,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'time_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Date (Tarih) Tipinde Kontrol Alanı Oluşturma

Aşağıdaki kod, Customizer API ile, 'tarih_denemesi' adında bir ayar oluşturur ve dilediğimizde bu ayarı değiştirebilmek için de tipi tarih olan bir kontrol alanı oluşturur.

// AYAR - DATE  Ayarı
$wp_customize->add_setting( 'date_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => '',
		'sanitize_callback' => '',
	) 
);

// KONTROL - DATE Tipinde Kontrol
$wp_customize->add_control(
	'date_denemesi',
	array(
		'label'       => __('Tarih'),
		'description' => __('Bir tarih belirtiniz.'),
		'type' => 'date',

		'section'     => 'blog-secenekleri',
		'settings'    => 'date_denemesi',
		'priority'   => 1,
	)
);

Bu kodu, yukarıda oluşturduğumuz panel ve bu panelin bölümüne dahil edersek (customizer_alanlari() fonksiyonunun sonuna) şöyle bir kontrol alanı oluşacaktır:

Bu ayarı, şablon dosyalarımıza veya dilediğimiz başka bir yere getirmek için <?php get_theme_mod( 'date_denemesi'); ?> kodunu kullanmamız yeterli olacaktır.

Kontrol Alanına CSS Ekleme

Kontrol alanlarına, CSS eklemek içn:

'input_attrs' => array(
			'class' => 'javascripte-lazim',
			'style' => 'border: 3px solid #900',
		),

Örnek olarak, 'date' tipinde bir kontrol alanına class ve style özellikleri eklemek istersek şöyle bir kod kullanabiliriz:

// KONTROL - DATE Tipinde Kontrol
$wp_customize->add_control(
	'date_denemesi',
	array(
		'label'       => __('Tarih'),
		'description' => __('Bir tarih belirtiniz.'),
		'type' => 'date',
		'input_attrs' => array(
			'class' => 'my-custom-class-for-js',
			'style' => 'border: 3px solid #900; background-color:yellow;',
		),
		'section'     => 'blog-secenekleri',
		'settings'    => 'date_denemesi',
		'priority'   => 1,
	)
);

Oluşturduğumuz kontrol alanı şöyle görünecektir:

Ayarlarda ‘sanitize_callback’ Argümanı

Customizer API ile bir ayar eklerken, bu ayar için bir de kontrol alanı oluşturulur. Kontrol alanı oluşturmaktaki amaç, bir form elemanı yardımı ile ayarın değerini değiştirebilmektedir. Kontrol alanındaki bu form elemanına girilen değerlerin bir güvenlik süzgecinden geçmesi için, ayarı oluştururken kullanılan 'sanitize_callback' argümanı kullanılabilir. Bu argüman, bir fonksiyon adı kabul eder. Form alanına girilecek değeri güvenlik süzgecinden geçirmek için bir fonksiyon oluşturabilir ve bu oluşturduğumuz bu fonksiyonun adını bu argümana değer olarak verebiliriz.

Aşağıda el yapımı bir 'sanitize_callback' fonksiyonu örneği verilmiştir:

// AYAR - URL Ayarı
$wp_customize->add_setting( 'url_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => 5,
		'sanitize_callback' => 'url_degerini_kontrol_et',
	) 
);

// KONTROL - URL Tipinde Kontrol
$wp_customize->add_control(
	'url_denemesi',
	array(
		'label'       => __('Adres Girin'),
		'description' => __('Bir internet adresi girin.'),
		'type' => 'url',
		'section'     => 'blog-secenekleri',
		'settings'    => 'url_denemesi',
		'input_attrs' => array(
			'placeholder' => 'https://ornek.com',
		),
		'priority'   => 1,
	)
);

// sanitize_callback fonksiyonu
function url_degerini_kontrol_et( $url ) {
  return esc_url_raw( $url );
}

Kontrollerde ‘active_callback’ Argümanı

Oluşturduğumuz kontrol alanı, temanın sadece ana sayfasını ilgilendiriyorsa, canlı ön izlemede, temanın ana sayfa değil de başka bir sayfa varken görünmesi hiç de gerekli değildir. Bu durumda, 'active_callback' argümanına, ayarın sadece ana sayfa için kullanılacağını belirten bir WordPress koşul fonksiyonu kullanabiliriz. Aşağıda is_front_page fonksiyonu örneği verilmiştir:

// AYAR - URL Ayarı
$wp_customize->add_setting( 'url_denemesi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => 5,
		'sanitize_callback' => 'url_degerini_kontrol_et',
	) 
);

// KONTROL - URL Tipinde Kontrol
$wp_customize->add_control(
	'url_denemesi',
	array(
		'label'       => __('Adres Girin'),
		'description' => __('Bir internet adresi girin.'),
		'type' => 'url',
		'section'     => 'blog-secenekleri',
		'settings'    => 'url_denemesi',
		'input_attrs' => array(
			'placeholder' => 'https://ornek.com',
		),
		'priority'   => 1,
                'active_callback' => 'is_front_page',
	)
);

// sanitize_callback fonksiyonu
function url_degerini_kontrol_et( $url ) {
  return esc_url_raw( $url );
}

Bize Özel Customizer API Alanları

WordPress’in block editöründe tekrar kullanılabilir blocklar oluşturmak gibi, Customizer API ile de kolayca, kendimize özel alanlar oluşturabiliriz. Bunun için Customizer API uygulamasına ait şu sınıfları genişletmemiz yeterlidir:

• WP_Customize_Control : Özel kontrol alanları oluşturmak için bu sınıfı genişletmemiz gerekir.
• WP_Customize_Section : Özel bölümler oluşturmak için bu sınıfı genişletmemiz gerekir.
• WP_Customize_Panel : Özel paneller oluşturmak için bu sınıfı genişletmemiz gerekir.

Kendimize Özel Bir Kontrol Alanı Oluşturma

Customizer API, sitemizin arka planında çalışan bir uygulama oluğu için, kontrol alanları dışında özel bir alan oluşturmaya çok da gerek yoktur aslında. Bu yüzden, Customizer API ile kendimize özel bir alan oluşturmak için, daha çok WP_Customize_Control sınıfını genişletiriz. Bu sınıfta, dilediğimiz fonksiyonu tekrar düzenleyebiliriz fakat, özel bir kontrol alanı oluşturmak için için WP_Customize_Control sınıfının render_content() metodunu kullanırız. render_content() metodu, sıfırdan bir kontrol alanı oluşturalım diye konmuş bir metottur.

Aşağıda, temamızda bulunan kategorilerden birini seçmek için oluşturulmuş bir kontrol alanı örneği verilmiştir.

Bu kodu, functions.php dosyasında kullanabilirsiniz:

if( class_exists( 'WP_Customize_Control' ) ) {
	class Sitecenneti_Kategori_Secimi extends WP_Customize_Control {

		public $type = 'kategori_secimi';
		public $tasarimci_notu = 'Bu alan standart bir kontrol alanı değildir.'; // Varsayılan not
		
		/**
		* Render the control's content.
		*/
		public function render_content() {
			
			// Kayıtlı Dataları Getir
			$value = $this->value(); // Önceki seçim -yoksa varsayılan değer-
			$baslik = $this->label; // 
			$aciklama = $this->description;
			
			// Kategori Listesi
			$kategoriler = get_categories(); ?>
			
			<!-- HTML / Kontrol Elemanı -->
			<p><hr /></p>
			<p id="tasarimci_notu"><?php echo $this->tasarimci_notu; ?></p>
			<span class="customize-control-title"><?php echo $baslik; ?></span>
			<span id="_customize-description-<?php echo $this->id; ?>" class="description customize-control-description"><?php echo $aciklama; ?></span>
				<select <?php $this->link(); ?> id="_customize-input-<?php echo $this->id; ?>" aria-describedby="_customize-description-<?php echo $this->id; ?>" name="_customize-layout-<?php echo $this->id; ?>">
					<option value="0"><?php _e('— Seç —', 'textdomain'); ?> </option>
					<?php
					foreach($kategoriler as $kategori) {
						$selected = '';
						if( $kategori->term_id == $value ) $selected = 'selected'; ?>
						<option value="<?php echo $kategori->term_id; ?>" <?php echo $selected; ?>><?php echo $kategori->name; ?></option>
						
					<?php } ?>
				</select><!-- HTML / Kontrol Elemanı -->
				<p><hr /></p>
		<?php }
 	}
}

Yukarıdaki kodun önemli bazı parçalarının anlamı şöyledir:

<?php $this->link(); ?>

Yukarıdaki kod parçası, form elemanına data-customize-setting-link="kategori_secimi" şeklinde bir özellik ekler ve bu özellik ile Customizer API, kontrol alanında bir değişiklik yaptığımızda bunu anlar ve “Yayımla” butonunu gösterir.

$this->id

Yukarıdaki kod parçası, oluşturduğumuz kontrol alanının kimliğidir, id değeridir.

public $tasarimci_notu = 'Bu alan standart bir kontrol alanı değildir.'; // Varsayılan not

Yukarıdaki kod parçası ile, oluşturduğumuz kontrol alanı için, 'tasarimci_notu' anahtarı ile yeni bir argüman oluşturmuş ve bu argüman için de varsayılan bir değer atamış olduk. Argümanın varsayılan değerini dilersek, kontrol alanını kullanırken oluşturduğumuz $wp_customize->add_control() metodunda değiştirebiliriz. Aşağıda, bunu nasıl yaptığımız göreceksiniz.

Bu argümandaki amacımız, kullanıcının kafa karışıklığının önüne geçmektir. Çünkü, WordPress’e aşina olan kullanıcılar, standart olarak kullanılabilen Customizer API kontrollerini bilirler.

name="_customize-layout-<?php echo $this->id; ?>"

Yukarıdaki kod parçası, oluşturduğumuz kontrol alanının adıdır.

aria-describedby="_customize-description-<?php echo $this->id; ?>"

Yukarıdaki kod parçası, kontrol alanına ait açıklama kısmının id değeridir. Bu kod zorunlu değildir, oluşturduğumuz alanın erişilebilir (accessible) olmasına katkı sağlar.

Yukarıda oluşturduğumuz kontrol alanını kullanmak için şu kodu kullanabiliriz:

// AYAR - Özel Kontrol Alanı İçin
$wp_customize->add_setting( 'kategorisi', 
	array(
		'capability' => 'edit_theme_options',
		'default' => 0,
		'sanitize_callback' => '',
	) 
);

// KONTROL - Bize Özel Bir Kontrol Alanı
$wp_customize->add_control( new Sitecenneti_Kategori_Secimi( 
	$wp_customize,
		'kategorisi',
		array(
			'label'       => __('Kategori', 'textdomain'),
			'description' => __('Bir kategori belirtiniz.', 'textdomain'),
			'tasarimci_notu' => __('Bu alan WordPress ile gelen standart bir kontrol alanı değildir.', 'textdomain'),
			'type' => 'kategori_secimi',
			'section'     => 'blog-secenekleri',
			'settings'    => 'kategorisi',
			'priority'   => 1,
		) 
	)
);

Oluşturduğumuz özel kontrol alanı şöyle görünecektir:

Cusotmizer API Alanlarında Kullanıcı Arayüzü (UI) Standartları

Özel Customizer API alanı oluştururken, diğer alanlar ile görünüm uyumu açısından bazı CSS değerlerine sadık kalmamız gerekir. Bu değerler şunlardır:

• Beyaz arkaplan renkleri, sadece menülerde ve input alanlarında kullanılır.
• Kontrol alanlarının genel arkaplan rengi, #eee dir.
• Menü elemanlarına 1px #ddd değerinde kenarlıklar verilir.
• HTML elemanları arasına 15px değerinde bir boşluk (margin) konulur.
• Menü elemanlarının, focus veya hover durumlarında, 4px kalınlığında ve #0073aa renginde bir sol kenarlığı olur.
• Menü textlerinin normal rengi #555d66 değerindedir, hover ve focus durumlarındaki rengi de #0073aa değerindedir.