{"id":4553,"date":"2019-08-16T19:46:14","date_gmt":"2019-08-16T16:46:14","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=4553"},"modified":"2019-10-06T09:41:35","modified_gmt":"2019-10-06T06:41:35","slug":"5-1-customizer-api-alanlari-customizer-objects","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/","title":{"rendered":"5.1 Customizer API Alanlar\u0131 (Customizer Objects)"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#Customizer_API_Alanlari\"><span class=\"toc_number toc_depth_1\">1<\/span> Customizer API Alanlar\u0131<\/a><ul><li><a href=\"#1_Panel_Panel\"><span class=\"toc_number toc_depth_2\">1.1<\/span> 1. Panel (Panel)<\/a><\/li><li><a href=\"#2_Bolumler_Sections\"><span class=\"toc_number toc_depth_2\">1.2<\/span> 2. B\u00f6l\u00fcmler (Sections)<\/a><\/li><li><a href=\"#3_Kontroller_Controls\"><span class=\"toc_number toc_depth_2\">1.3<\/span> 3. Kontroller (Controls)<\/a><\/li><li><a href=\"#4_Ayarlar_Settings\"><span class=\"toc_number toc_depth_2\">1.4<\/span> 4. Ayarlar (Settings)<\/a><\/li><\/ul><\/li><li><a href=\"#Customizer_API_Alanlari_Olusturma\"><span class=\"toc_number toc_depth_1\">2<\/span> Customizer API Alanlar\u0131 Olu\u015fturma<\/a><ul><li><a href=\"#wp_customize-gtadd_setting_Metodunu_Kullanma\"><span class=\"toc_number toc_depth_2\">2.1<\/span> $wp_customize-&gt;add_setting() Metodunu Kullanma<\/a><ul><li><a href=\"#ayar_id\"><span class=\"toc_number toc_depth_3\">2.1.1<\/span> $ayar_id<\/a><\/li><li><a href=\"#argumanlar\"><span class=\"toc_number toc_depth_3\">2.1.2<\/span> $argumanlar<\/a><\/li><\/ul><\/li><li><a href=\"#wp_customize-gtadd_control_Metodunu_Kullanma\"><span class=\"toc_number toc_depth_2\">2.2<\/span> $wp_customize-&gt;add_control() Metodunu Kullanma<\/a><ul><li><a href=\"#ayar_id-2\"><span class=\"toc_number toc_depth_3\">2.2.1<\/span> $ayar_id<\/a><\/li><li><a href=\"#argumanlar-2\"><span class=\"toc_number toc_depth_3\">2.2.2<\/span> $argumanlar<\/a><\/li><\/ul><\/li><li><a href=\"#wp_customize-gtadd_section_Metodunu_Kullanma\"><span class=\"toc_number toc_depth_2\">2.3<\/span> $wp_customize-&gt;add_section() Metodunu Kullanma<\/a><ul><li><a href=\"#bolum_id\"><span class=\"toc_number toc_depth_3\">2.3.1<\/span> $bolum_id<\/a><\/li><li><a href=\"#argumanlar-3\"><span class=\"toc_number toc_depth_3\">2.3.2<\/span> $argumanlar<\/a><\/li><\/ul><\/li><li><a href=\"#Panel_Olusturuyoruz\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Panel Olu\u015fturuyoruz<\/a><ul><li><a href=\"#Varsayilan_Paneldeki_Bolumlerin_Konum_Numaralari\"><span class=\"toc_number toc_depth_3\">2.4.1<\/span> Varsay\u0131lan Paneldeki B\u00f6l\u00fcmlerin Konum Numaralar\u0131<\/a><\/li><\/ul><\/li><li><a href=\"#Bolum_Section_Olusturuyoruz\"><span class=\"toc_number toc_depth_2\">2.5<\/span> B\u00f6l\u00fcm (Section) Olu\u015fturuyoruz<\/a><\/li><li><a href=\"#Bir_Ayar_Olusturuyoruz\"><span class=\"toc_number toc_depth_2\">2.6<\/span> Bir Ayar Olu\u015fturuyoruz<\/a><\/li><li><a href=\"#Bir_Kontrol_Olusturuyoruz\"><span class=\"toc_number toc_depth_2\">2.7<\/span> Bir Kontrol Olu\u015fturuyoruz<\/a><\/li><\/ul><\/li><li><a href=\"#Ayarlari_Ile_Birlikte_Farkli_Tipte_Kontroller_Olusturma\"><span class=\"toc_number toc_depth_1\">3<\/span> Ayarlar\u0131 \u0130le Birlikte Farkl\u0131 Tipte Kontroller Olu\u015fturma<\/a><ul><li><a href=\"#Renk_Kontrolu_Olusturma\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Renk Kontrol\u00fc Olu\u015fturma<\/a><\/li><li><a href=\"#Text_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.2<\/span> Text Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Checkbox_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.3<\/span> Checkbox Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Select_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.4<\/span> Select Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Textarea_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.5<\/span> Textarea Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Dropdown-pages_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.6<\/span> Dropdown-pages Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Dosya_Yukleyicisi_Seklinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.7<\/span> Dosya Y\u00fckleyicisi \u015eeklinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Resim_Dosyasi_Yukleyicisi_Seklinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.8<\/span> Resim Dosyas\u0131 Y\u00fckleyicisi \u015eeklinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Kirpma_Ozelligi_de_Olan_Dosya_Yukleyicisi_Seklinde_Bir_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.9<\/span> K\u0131rpma \u00d6zelli\u011fi de Olan Dosya Y\u00fckleyicisi \u015eeklinde Bir Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Bir_Baska_Dosya_Yukleyicisi_Kontrol_Alani\"><span class=\"toc_number toc_depth_2\">3.10<\/span> Bir Ba\u015fka Dosya Y\u00fckleyicisi Kontrol Alan\u0131<\/a><\/li><li><a href=\"#Number_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.11<\/span> Number Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Range_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.12<\/span> Range Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#URL_Internet_Adresi_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.13<\/span> URL (\u0130nternet Adresi) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Tel_Telefon_Numarasi_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.14<\/span> Tel (Telefon Numaras\u0131) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Email_E-mail_Adresi_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.15<\/span> Email (E-mail Adresi) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Time_Gunun_Saati_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.16<\/span> Time (G\u00fcn\u00fcn Saati) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Week_Hafta_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.17<\/span> Week (Hafta) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Date_Tarih_Tipinde_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">3.18<\/span> Date (Tarih) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><\/ul><\/li><li><a href=\"#Kontrol_Alanina_CSS_Ekleme\"><span class=\"toc_number toc_depth_1\">4<\/span> Kontrol Alan\u0131na CSS Ekleme<\/a><\/li><li><a href=\"#Ayarlarda_8216sanitize_callback8217_Argumani\"><span class=\"toc_number toc_depth_1\">5<\/span> Ayarlarda &#8216;sanitize_callback&#8217; Arg\u00fcman\u0131<\/a><\/li><li><a href=\"#Kontrollerde_8216active_callback8217_Argumani\"><span class=\"toc_number toc_depth_1\">6<\/span> Kontrollerde &#8216;active_callback&#8217; Arg\u00fcman\u0131<\/a><\/li><li><a href=\"#Bize_Ozel_Customizer_API_Alanlari\"><span class=\"toc_number toc_depth_1\">7<\/span> Bize \u00d6zel Customizer API Alanlar\u0131<\/a><ul><li><a href=\"#Kendimize_Ozel_Bir_Kontrol_Alani_Olusturma\"><span class=\"toc_number toc_depth_2\">7.1<\/span> Kendimize \u00d6zel Bir Kontrol Alan\u0131 Olu\u015fturma<\/a><\/li><\/ul><\/li><li><a href=\"#Cusotmizer_API_Alanlarinda_Kullanici_Arayuzu_UI_Standartlari\"><span class=\"toc_number toc_depth_1\">8<\/span> Cusotmizer API Alanlar\u0131nda Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Standartlar\u0131<\/a><\/li><\/ul><\/div>\n\n<p><strong>Customizer API<\/strong> ile, kullan\u0131c\u0131lar\u0131m\u0131z\u0131n temam\u0131z \u00fczerindeki hakimiyetini artt\u0131rabiliriz, temam\u0131za profesyonel kontroller ekleyebilir ve kullan\u0131c\u0131lar\u0131m\u0131z\u0131n, kod kullanmadan \u00e7e\u015fitli \u00f6zelle\u015ftirmeler yapabilmesini sa\u011flayabiliriz. Customizer API, b\u00fct\u00fcn bunlar\u0131 ger\u00e7ekle\u015ftirmek i\u00e7in, y\u00f6netim panelinden gidilen, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131na yeni alanlar ekler.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"434\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api.jpg\" alt=\"WordPress G\u00f6r\u00fcn\u00fcm - \u00d6zelle\u015ftir Sayfas\u0131\" class=\"wp-image-4549\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api.jpg 266w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-184x300.jpg 184w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><figcaption>Customizer API &#8211; G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir Sayfas\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlari\">Customizer API Alanlar\u0131<\/span><\/h2>\n\n\n\n<p>Customizer API ile, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131na 4 farkl\u0131 t\u00fcrden alan ekleyebiliriz. Bu alanlar \u015funlard\u0131r:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"1_Panel_Panel\">1. Panel (Panel)<\/span><\/h3>\n\n\n\n<p>Customizer API ile olu\u015fturaca\u011f\u0131m\u0131z alanlar\u0131n hepsini i\u00e7ine alan b\u00f6l\u00fcmd\u00fcr, kolondur. Bir nevi, ayarlar\u0131n\u0131z i\u00e7in olu\u015fturaca\u011f\u0131n\u0131z b\u00f6l\u00fcmleri bir arada tutan \u00e7er\u00e7evedir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki resimde, k\u0131rm\u0131z\u0131 \u00e7er\u00e7eve i\u00e7inde, <a rel=\"noreferrer noopener\" aria-label=\"Twenty Nineteen (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/core.trac.wordpress.org\/browser\/trunk\/src\/wp-content\/themes\/twentynineteen\" target=\"_blank\">Twenty Nineteen<\/a> temas\u0131n\u0131n panelini g\u00f6r\u00fcyorsunuz.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"434\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-1.jpg\" alt=\"\" class=\"wp-image-4559\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-1.jpg 266w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-1-184x300.jpg 184w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><figcaption>Customizer API &#8211; Panel<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bir tema olu\u015fturdu\u011funuzda WordPress, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda, bu temaya ait bir de panel olu\u015fturur. E\u011fer, yeni bir panel olu\u015fturmazsan\u0131z, ekledi\u011finiz b\u00f6l\u00fcmler teman\u0131z ile birlikte gelen bu panele ilave edilecektir.<\/p>\n\n\n\n<p>Her tasar\u0131mc\u0131n\u0131n ayr\u0131 bir yo\u011furt yiyi\u015fi vard\u0131r fakat WordPress temas\u0131 yapanlar, genellikle yeni bir panel olu\u015fturmazlar, var olan panele b\u00f6l\u00fcmler eklerler.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"2_Bolumler_Sections\">2. B\u00f6l\u00fcmler (Sections)<\/span><\/h3>\n\n\n\n<p>Panel i\u00e7indeki her bir ba\u011f\u0131ms\u0131z men\u00fc bir b\u00f6l\u00fcmd\u00fcr.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki resimde, her bir k\u0131rm\u0131z\u0131 \u00e7er\u00e7eve, <a rel=\"noreferrer noopener\" aria-label=\"Twenty Nineteen (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/core.trac.wordpress.org\/browser\/trunk\/src\/wp-content\/themes\/twentynineteen\" target=\"_blank\">Twenty Nineteen<\/a> temas\u0131n\u0131n panelinde olu\u015fturulmu\u015f bir b\u00f6l\u00fcm\u00fc g\u00f6stermektedir.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"434\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-2.jpg\" alt=\"\" class=\"wp-image-4560\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-2.jpg 266w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customizer-api-2-184x300.jpg 184w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><figcaption> Customizer API &#8211; B\u00f6l\u00fcmler<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"3_Kontroller_Controls\">3. Kontroller (Controls)<\/span><\/h3>\n\n\n\n<p>Panel \u00fczerindeki bir b\u00f6l\u00fcme t\u0131klad\u0131\u011f\u0131n\u0131zda, o b\u00f6l\u00fcme ait kontrollerin bulundu\u011fu yeni bir sayfa a\u00e7\u0131l\u0131r. Her bir kontrol asl\u0131nda bir \u00e7e\u015fit form alan\u0131d\u0131r. A\u015fa\u011f\u0131da, &#8220;<strong>Ana sayfa ayarlar\u0131<\/strong>&#8221; b\u00f6l\u00fcm\u00fcne t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan ve &#8216;<em>Ana sayfa g\u00f6r\u00fcnt\u00fclenmesi<\/em>&#8216;, &#8216;<em>Ana Sayfa<\/em>&#8216;, &#8216;<em>Yaz\u0131 sayfas\u0131<\/em>&#8216; ba\u015fl\u0131klar\u0131na sahip 3 adet kontrol i\u00e7eren bir kontrol sayfas\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"546\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-3.jpg\" alt=\"\" class=\"wp-image-4561\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-3.jpg 268w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-3-147x300.jpg 147w\" sizes=\"auto, (max-width: 268px) 100vw, 268px\" \/><figcaption>Customizer API &#8211; Kontroller<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"4_Ayarlar_Settings\">4. Ayarlar (Settings)<\/span><\/h3>\n\n\n\n<p>Olu\u015fturdu\u011fumuz kontroller ile yapt\u0131\u011f\u0131m\u0131z ayarlar\u0131 kaydeder, tema \u00fczerinde g\u00f6sterir veya kay\u0131tl\u0131 ayarlar\u0131 getirir.<\/p>\n\n\n\n<p>Ekledi\u011fimiz her bir kontrol i\u00e7in bir de ayar eklememiz gerekir. Ayar ile kontrol alan\u0131 arac\u0131l\u0131\u011f\u0131 ile kullan\u0131c\u0131dan ald\u0131\u011f\u0131m\u0131z ayar\u0131 veritaban\u0131na kaydediyoruz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlari_Olusturma\">Customizer API Alanlar\u0131 Olu\u015fturma<\/span><\/h2>\n\n\n\n<p>Customizer API ile 4 t\u00fcr alan olu\u015fturabildi\u011fimizden bahsetmi\u015ftik. Bu alanlar\u0131 olu\u015fturmak i\u00e7in bir fonksiyon kullanmal\u0131y\u0131z ve kulland\u0131\u011f\u0131m\u0131z fonksiyonu <code>'customize_register'<\/code> kancas\u0131 ile \u00e7a\u011f\u0131rmal\u0131y\u0131z. A\u015fa\u011f\u0131daki verilen kod, Customizer API alanlar\u0131 olu\u015fturan bir fonksiyona aittir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_alanlari( $wp_customize ) {\n   \/\/Paneller, b\u00f6l\u00fcmler, ayarlar ve kontroller burada olu\u015fturulur\n}\nadd_action( 'customize_register', 'ilktemam_customizer_alanlari' );<\/code><\/pre>\n\n\n\n<p><code>ilktemam_customizer_alanlari()<\/code> fonksiyonunun parametresi <code>$wp_customize<\/code> de\u011fi\u015fkenidir ve Customizer API nesnesini ta\u015f\u0131maktad\u0131r. Yani, Customizer API nesnesine ait herhangi bir fonksiyona ula\u015fmak istedi\u011fimizde bu de\u011fi\u015fkeni kullanaca\u011f\u0131z.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz kod, Customizer API ile gelen alanlar\u0131 olu\u015fturan, getiren ve silen metotlar\u0131 g\u00f6stermektedir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_alanlari( $wp_customize ) {\n  $wp_customize->add_panel(); \/\/ Panel ekler\n  $wp_customize->get_panel(); \/\/ Panel getirir\n  $wp_customize->remove_panel(); \/\/ Paneli siler\n \n  $wp_customize->add_section(); \/\/ B\u00f6l\u00fcm ekler\n  $wp_customize->get_section(); \/\/ B\u00f6l\u00fcm getirir\n  $wp_customize->remove_section(); \/\/ B\u00f6l\u00fcm\u00fc siler\n \n  $wp_customize->add_setting(); \/\/ Ayar ekler\n  $wp_customize->get_setting(); \/\/ Ayar\u0131 getirir\n  $wp_customize->remove_setting(); \/\/ Ayar\u0131 siler\n \n  $wp_customize->add_control(); \/\/ Kontrol ekler\n  $wp_customize->get_control(); \/\/ Kontrol getirir\n  $wp_customize->remove_control(); \/\/ Kontrol\u00fc siler\n}\nadd_action( 'customize_register', 'ilktemam_customizer_alanlari' );<\/code><\/pre>\n\n\n\n<p>Customizer API alanlar\u0131n\u0131 olu\u015ftururken yukar\u0131da verilen s\u0131ray\u0131 takip etmeliyiz. Yani \u00f6nce<em> panel<\/em>, sonra <em>b\u00f6l\u00fcm<\/em>, sonra <em>ayar<\/em> ve son olarak <em>kontrol<\/em> alan\u0131 olu\u015fturmal\u0131y\u0131z.<\/p>\n\n\n\n<p>Bir kontrol alan\u0131 olu\u015fturana kadar, olu\u015fturdu\u011fumuz di\u011fer alanlar, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda kendini g\u00f6stermez.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"wp_customize-gtadd_setting_Metodunu_Kullanma\"><em>$wp_customize-&gt;add_setting()<\/em> Metodunu Kullanma<\/span><\/h3>\n\n\n\n<p><code>$wp_customize-&gt;add_setting()<\/code> metodu, WordPress temam\u0131z\u0131n veritaban\u0131na bir anahtar ve bu anahtar i\u00e7in varsay\u0131lan bir de\u011fer kaydetmek i\u00e7in kullan\u0131l\u0131r. Daha sonra kaydetti\u011fimiz bu anahtar ve de\u011ferini temam\u0131zda diledi\u011fimiz bir ayar\u0131 yapmak i\u00e7in kullan\u0131r\u0131z. \u00d6rne\u011fin, <code>$wp_customize-&gt;add_setting()<\/code> metodu ile, anahtar ad\u0131 <code>'baslik_rengi'<\/code> olan bir ayar olu\u015fturduk ve bu ayar\u0131n varsay\u0131lan de\u011ferini de <code>'#000000'<\/code> olarak ayarlad\u0131k diyelim. Art\u0131k <a rel=\"noreferrer noopener\" aria-label=\"\u015fablon dosyalar\u0131m\u0131zda (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyalar\u0131m\u0131zda<\/a>: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo get_theme_mod('baslik_rengi'); ?> \u00c7\u0131kt\u0131s\u0131: #000000\n\/\/ veya\n&lt;?php echo get_option('baslik_rengi'); ?> \u00c7\u0131kt\u0131s\u0131: #000000<\/code><\/pre>\n\n\n\n<p>Olu\u015fturdu\u011fumuz renk ayar\u0131n\u0131 bir de i\u015f \u00fczerinde g\u00f6relim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_css() {\n\t$baslik_rengi = '&lt;style type=\"text\/css\" id=\"ozel-tema-css\">';\n\t$baslik_rengi .= '.title { color: ';\n\t$baslik_rengi .= get_theme_mod( 'baslik_rengi', '#000000' );\n\t$baslik_rengi .= '} &lt;\/style>';\n\techo $baslik_rengi;\n}\nadd_action( 'wp_head', 'ilktemam_customizer_css'); \/\/ ilktemam_customizer_css() fonksiyonunu \u00fcretti\u011fi CSS, tema sayfalar\u0131n\u0131n &lt;head>..&lt;\/head> k\u0131sm\u0131na eklenir<\/code><\/pre>\n\n\n\n<p>Ayar\u0131 olu\u015ftururken tipini <code>'type'='option'<\/code> olarak ayarlad\u0131ysak da (birazdan ne demek istedi\u011fimizi anlayacaks\u0131n\u0131z), ayn\u0131 kodu \u015f\u00f6yle kullanmal\u0131y\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_css() {\n\t$baslik_rengi = '&lt;style type=\"text\/css\" id=\"ozel-tema-css\">';\n\t$baslik_rengi .= '.title { color: ';\n\t$baslik_rengi .= get_option( 'baslik_rengi' );\n\t$baslik_rengi .= '} &lt;\/style>';\n\techo $baslik_rengi;\n}\nadd_action( 'wp_head', 'ilktemam_customizer_css'); \/\/ ilktemam_customizer_css() fonksiyonunu \u00fcretti\u011fi CSS, tema sayfalar\u0131n\u0131n &lt;head>..&lt;\/head> k\u0131sm\u0131na eklenir<\/code><\/pre>\n\n\n\n<p>kodlar\u0131n\u0131 kullanarak ekrana, bu ayar i\u00e7in varsay\u0131lan de\u011fer olarak atad\u0131\u011f\u0131m\u0131z ve siyah rengin kodu olan <code>#000000<\/code> ifadesini bast\u0131rabiliriz. Yine ba\u015fka bir \u00f6rnek olarak, belli \u015fablon dosyalar\u0131n\u0131zda sidebar (sayfa yan\u0131) kullan\u0131p kullan\u0131lmayaca\u011f\u0131n\u0131, kullan\u0131lacaksa, sayfan\u0131n hangi yan\u0131nda kullan\u0131laca\u011f\u0131n\u0131, bu \u015fekilde bir ayar olu\u015fturarak, kullan\u0131c\u0131n\u0131z\u0131n belirlemesini sa\u011flayabilirsiniz. Olu\u015fturaca\u011f\u0131n\u0131z ayar ve bu ayar\u0131 kullanaca\u011f\u0131n\u0131z yer tamamen sizin hayal g\u00fcc\u00fcn\u00fcz ile s\u0131n\u0131rl\u0131d\u0131r.<\/p>\n\n\n\n<p>Tabi burada \u015f\u00f6yle bir soru geliyor ak\u0131llara: Ayar i\u00e7in verdi\u011fimiz varsay\u0131lan de\u011feri nas\u0131l de\u011fi\u015ftirebiliriz? Hep ayn\u0131 de\u011feri mi kullanmak zorunday\u0131z? Cevap: Ayar i\u00e7in hep ayn\u0131 de\u011feri kullanmak zorunda de\u011filiz. Dilersek, kullan\u0131c\u0131m\u0131z\u0131n bu varsay\u0131lan de\u011feri de\u011fi\u015ftirmesini sa\u011flayabiliriz. \u0130\u015fte &#8220;<em>kontroller<\/em>&#8221; tam da bu i\u015fi yapan metotlard\u0131r. Bu ayara ba\u011fl\u0131 bir kontrol olu\u015fturarak, ayar\u0131n de\u011ferini kullan\u0131c\u0131m\u0131z\u0131n belirlemesini sa\u011flayabiliriz. Okumaya devam edin.<\/p>\n\n\n\n<p>Bir ayar olu\u015fturmak i\u00e7in <code>$wp_customize-&gt;add_setting()<\/code> metodunu \u015fu \u015fekilde kullan\u0131r\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_setting($ayar_id, $argumanlar);<\/code><\/pre>\n\n\n\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, metot iki arg\u00fcman ile \u00e7al\u0131\u015fmaktad\u0131r. Bu arg\u00fcmanlar\u0131n anlam\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"ayar_id\">$ayar_id<\/span><\/h4>\n\n\n\n<p>(<em>string <\/em>&#8211; <em>Zorunludur<\/em>.) Olu\u015fturaca\u011f\u0131m\u0131z ayar\u0131n anahtar\u0131d\u0131r, kimli\u011fidir. Bu ayara verilen de\u011feri getirmek i\u00e7in bu anahtar\u0131 kullan\u0131r\u0131z. T\u00fcrk\u00e7e karakter ve bo\u015fluk i\u00e7ermemelidir.<\/p>\n\n\n\n<p><code>$ayar_id<\/code> parametresine, \u015fu kelimeler ile ba\u015flayan de\u011ferler vermekten ka\u00e7\u0131nmal\u0131s\u0131n\u0131z:&nbsp;<code>widget_*<\/code>, <code>sidebars_widgets[*]<\/code>, <code>nav_menu[*]<\/code>, <code>nav_menu_item[*]<\/code>. \u00c7\u00fcnk\u00fc bu ifadeler ile ba\u015flayan de\u011ferleri WordPress kullanmaktad\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"argumanlar\">$argumanlar<\/span><\/h4>\n\n\n\n<p>(<em>array <\/em>&#8211; <em>Zorunludur<\/em>.) Olu\u015fturaca\u011f\u0131m\u0131z ayar ile ilgili detaylar\u0131 verdi\u011fimiz bir dizidir. Bu dizi a\u015fa\u011f\u0131daki arg\u00fcmanlar\u0131 alabilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>'default'<\/code> &#8211; Ayar\u0131n varsay\u0131lan de\u011feridir.<\/li><li><code>'type'<\/code> &#8211; Ayar\u0131n nas\u0131l getirilece\u011fini belirler. Bu arg\u00fcman i\u00e7in iki de\u011fer kullanabiliriz. Birincisi <code>'option'<\/code> de\u011feridir ki bunu kullan\u0131rsak, yapt\u0131\u011f\u0131m\u0131z ayar, <code>wp_options<\/code> tablosuna kaydedilir ve temam\u0131z\u0131 de\u011fi\u015ftirsek bile kullan\u0131lmaya devam edilebilir ve <code>get_option($ayar_id)<\/code> \u015feklinde getirilir. <code>'option'<\/code> de\u011ferini kullan\u0131rken, $ayar_id parametresine, a\u00e7\u0131klay\u0131c\u0131 bir de\u011fer (<code>'benimtemam_yazi_rengi'<\/code> gibi) vermeye \u00fc\u015fenmemenizi tavsiye ederiz ki daha sonra ne i\u015fe yarad\u0131\u011f\u0131n\u0131 unutmay\u0131n.  \u0130kincisi ise, ayn\u0131 zamanda varsay\u0131lan de\u011fer olan <code>'theme_mod'<\/code> de\u011feridir. Bu de\u011feri kulland\u0131\u011f\u0131m\u0131zda, ayar sadece tema aktif iken kullan\u0131labilir ve <code>get_theme_mod($ayar_id)<\/code> fonksiyonu ile getirilir.<\/li><li><code>'capability'<\/code> &#8211; Ayar i\u00e7in gereken minimum yetkidir. Varsay\u0131lan de\u011feri <code>'edit_theme_options'<\/code> olarak ayarlanm\u0131\u015ft\u0131r.<\/li><li><code>'theme_supports'<\/code> &#8211; E\u011fer tema  <code>add_theme_support()<\/code> fonksiyonu ile eklenebilen \u00f6zelliklerden herhangi birini desteklemiyorsa, bu ayar\u0131 gizlemek i\u00e7in kullan\u0131l\u0131r.<\/li><li><code>'transports'<\/code> &#8211; Yap\u0131lan ayar\u0131n temada ne zaman g\u00f6sterilece\u011fini belirler. Bu arg\u00fcman iki de\u011fer al\u0131r. Birincisi ve varsay\u0131lan olan\u0131, <code>'refresh'<\/code> de\u011feridir ki, yapt\u0131\u011f\u0131n\u0131z ayar sayfa yenilendi\u011finde devreye girecek demektir. \u0130kincisi ve daha fantastik olan\u0131 <code>'postMessage'<\/code> de\u011feridir ki, yapt\u0131\u011f\u0131n\u0131z ayar, sayfan\u0131n <em>canl\u0131 \u00f6n izleme<\/em> k\u0131sm\u0131nda an\u0131nda g\u00f6r\u00fcnecek demektir. Fakat <code>'postMessage'<\/code> \u00f6zelli\u011finin \u00e7al\u0131\u015fmas\u0131 i\u00e7in, ayarlar\u0131 canl\u0131 \u00f6n izleme k\u0131sm\u0131na uygulayan JavaScript kodlar\u0131n\u0131z\u0131n olmas\u0131 gerekmektedir. Burada ne anlatmak istedi\u011fimizi ilerleyen derslerde \u00f6\u011freneceksiniz.<\/li><li><code>'sanitize_callback'<\/code> &#8211; Ayar\u0131n\u0131z\u0131n g\u00fcvenlik \u00f6nlemidir. Ayar\u0131n\u0131z i\u00e7in verilen de\u011feri belli g\u00fcvenlik i\u015flemlerinden ge\u00e7iren bir fonksiyon ad\u0131d\u0131r. Burada dilerseniz, WordPress&#8217;in, form alanlar\u0131 i\u00e7in olu\u015fturdu\u011fu,  (text alanlar\u0131 i\u00e7in <code>sanitize_text_field()<\/code>, renk kodlar\u0131 i\u00e7in <code>sanitize_hex_color()<\/code> fonksiyonu gibi) bir g\u00fcvenlik fonksiyonunu da kullanabilirsiniz. Dilerseniz de kendiniz bir fonksiyon yaz\u0131p ad\u0131n\u0131 bu arg\u00fcmana girebilirsiniz.<\/li><li><code>'sanitize_js_callback'<\/code> &#8211; Ayar\u0131n\u0131z\u0131n JavaScript \u00e7\u0131kt\u0131lar\u0131 i\u00e7in g\u00fcvenlik \u00f6nlemidir. Ayar\u0131n\u0131z i\u00e7in verilen de\u011fer, JavaScript \u00e7\u0131kt\u0131s\u0131 olu\u015fturmak i\u00e7in kullan\u0131lacaksa, bu de\u011feri belli g\u00fcvenlik i\u015flemlerinden ge\u00e7iren bir fonksiyon olu\u015fturabilir ve ad\u0131n\u0131 buraya girebilirsiniz.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"wp_customize-gtadd_control_Metodunu_Kullanma\"><em>$wp_customize-&gt;add_control()<\/em> Metodunu Kullanma<\/span><\/h3>\n\n\n\n<p><code>$wp_customize-&gt;add_control()<\/code> metodu, <code>$wp_customize-&gt;add_setting()<\/code>  metodu ile olu\u015fturdu\u011fumuz ayar\u0131n varsay\u0131lan de\u011ferini de\u011fi\u015ftirebilmemiz i\u00e7in bir form alan\u0131 olu\u015fturmam\u0131z\u0131 sa\u011flar. Her ayar\u0131n, varsay\u0131lan de\u011ferini de\u011fi\u015ftirebilmek i\u00e7in o ayara ba\u011fl\u0131 bir kontrol olu\u015fturmam\u0131z gerekir.<\/p>\n\n\n\n<p>Bir kontrol olu\u015fturmak i\u00e7in <code>$wp_customize-&gt;add_control()<\/code> metodunu \u015fu \u015fekilde kullan\u0131r\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_control($ayar_id, $argumanlar);<\/code><\/pre>\n\n\n\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, metot iki arg\u00fcman ile \u00e7al\u0131\u015fmaktad\u0131r. Bu arg\u00fcmanlar\u0131n anlam\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"ayar_id-2\">$ayar_id<\/span><\/h4>\n\n\n\n<p>Bu kontrol\u00fcn hangi ayar i\u00e7in olu\u015fturuldu\u011funu belirler. Bu arg\u00fcman\u0131n de\u011feri, biraz \u00f6nce bahsetti\u011fimiz, <code>$wp_customize-&gt;add_setting($ayar_id, $argumanlar)<\/code> metodu ile olu\u015fturdu\u011fumuz ayar\u0131n ilk parametresi olan <code>$ayar_id<\/code> de\u011feridir.<\/p>\n\n\n\n<p><code>$ayar_id<\/code> parametresi, de\u011fer olarak bir kontrol nesnesi de kabul eder. Kontrol nesnesi derken, WordPress ile haz\u0131r gelen baz\u0131 form alanlar\u0131n\u0131 kastediyoruz. \u00d6rne\u011fin, renk ayar\u0131 yapmak i\u00e7in bir renk paleti kullanmak isteyelim. Bunun i\u00e7in, s\u0131f\u0131rdan bir palet kodlamak yerine WordPress&#8217;in bizim i\u00e7in olu\u015fturdu\u011fu <code>new WP_Customize_Color_Control()<\/code> nesnesini kullanabiliriz. A\u015fa\u011f\u0131da, haz\u0131r kontrol nesnesi kullan\u0131m\u0131 \u00f6rnekleri verilecektir.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"argumanlar-2\">$argumanlar<\/span><\/h4>\n\n\n\n<p>(<em>array <\/em>&#8211; <em>Zorunludur<\/em>.) Olu\u015fturaca\u011f\u0131m\u0131z ayar ile ilgili detaylar\u0131 verdi\u011fimiz bir dizidir. <code>$ayar_id<\/code> parametresine de\u011fer olarak bir kontrol nesnesi atad\u0131ysak, bu parametre kullan\u0131lmaz. <code>$argumanlar<\/code> dizisi a\u015fa\u011f\u0131daki arg\u00fcmanlar\u0131 alabilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>'label'<\/code> &#8211; Olu\u015fturaca\u011f\u0131m\u0131z kontrol alan\u0131n\u0131n k\u0131sa bir ba\u015fl\u0131\u011f\u0131d\u0131r. HTML elemanlar\u0131 kabul eder. \u00d6rnek:  <code>'label' =&gt; __('Ba\u015fl\u0131k Rengi', 'textdomain')<\/code><\/li><li><code>'description'<\/code> &#8211; Olu\u015fturaca\u011f\u0131m\u0131z kontrol alan\u0131n\u0131n a\u00e7\u0131klamas\u0131d\u0131r. <code>'label'<\/code> k\u0131sm\u0131n\u0131n alt\u0131nda g\u00f6r\u00fcn\u00fcr. \u00d6rnek:  <code>'description' =&gt; __('Sayfan\u0131n ba\u015fl\u0131k rengini belirler.', 'textdomain')<\/code><\/li><li><code>'section'<\/code> &#8211; Bizim olu\u015fturdu\u011fumuz () ya da teman\u0131n varsay\u0131lan panelindeki b\u00f6l\u00fcmlerden birinin kimli\u011fidir. Varsay\u0131lan paneldeki b\u00f6l\u00fcmlerin kimlik de\u011ferleri (anlamlar\u0131 ile) \u015funlard\u0131r: <code>themes<\/code> (Etkin tema), <code>title_tagline<\/code> (Site kimli\u011fi), <code>colors<\/code> (Renkler), <code>header_image<\/code> (\u00dcst k\u0131s\u0131m ortam dosyas\u0131), <code>background_image<\/code> (Arkaplan resmi), <code>static_front_page<\/code> (Ana sayfa ayarlar\u0131). Bu b\u00f6l\u00fcmlerden <code>header_image<\/code> ve <code>background_image<\/code> b\u00f6l\u00fcmleri her teman\u0131n panelinde bulunmaz, bu b\u00f6l\u00fcmler <code>add_theme_support()<\/code> fonksiyonu ile temaya eklendiklerinde  olu\u015furlar. \u00d6rnek:&nbsp;<code>'section' =&gt; 'colors'<\/code> <\/li><li><code>'priority'<\/code> &#8211; Ekleyece\u011fimiz kontrol\u00fcn yerle\u015fim s\u0131ras\u0131d\u0131r, \u00f6nceli\u011fidir. Bu parametrenin de\u011feri k\u00fc\u00e7\u00fcld\u00fck\u00e7e, olu\u015fturdu\u011fumuz alan daha \u00fcst s\u0131rada yer al\u0131r. \u00d6rnek: <code>'priority' =&gt; 65<\/code> (Varsay\u0131lan paneldeki b\u00f6l\u00fcmlerin \u00f6ncelik s\u0131ras\u0131 a\u015fa\u011f\u0131da verilmi\u015ftir.) Kontrol alan\u0131n\u0131 yeni bir panele ekliyorsan\u0131z, bu arg\u00fcman\u0131n de\u011ferlerini siz belirlersiniz ve keyfinize g\u00f6re bir yerle\u015fim s\u0131ras\u0131 olu\u015fturursunuz.<\/li><li><code>'type'<\/code> &#8211; Ekledi\u011fimiz kontrol\u00fcn, hangi tipte bir form alan\u0131 oldu\u011funu belirler. Desteklenen form alanlar\u0131 \u015funlard\u0131r: <code>text<\/code>, &nbsp;<code>checkbox<\/code>, &nbsp;<code>radio<\/code>, &nbsp;<code>select<\/code>, &nbsp;<code>textarea<\/code>, &nbsp;<code>dropdown-pages<\/code>, &nbsp;<code>email<\/code>,&nbsp; <code>url<\/code>, &nbsp;<code>number<\/code>, &nbsp;<code>hidden<\/code> ve <code>date<\/code>. Varsay\u0131lan de\u011fer olarak <code>'text'<\/code> ayarlanm\u0131\u015ft\u0131r. \u00d6rnek:&nbsp;<code>'type' =&gt; 'textarea'<\/code><\/li><li><code>'settings'<\/code> &#8211; Kontrol alan\u0131n\u0131n hangi ayar\u0131 yapt\u0131\u011f\u0131n\u0131 belirler. Bu arg\u00fcman, bu metot ile kontrol edilmek istenen ayar\u0131n kimlik de\u011ferini al\u0131r. Varsay\u0131lan de\u011feri <code>$ayar_id<\/code> parametresinin de\u011feridir.<\/li><li><code>'choices'<\/code>, <code>'height'<\/code>, <code>'width'<\/code> vs. &#8211; Olu\u015fturdu\u011fumuz kontrol\u00fcn tipi destekliyorsa (4 tanesi destekler), bu kontrol tipine ait \u00f6zelliklerdir. <code>\"select\"<\/code> ve <code>\"radio\"<\/code> tipindeki bir kontrol alan\u0131 i\u00e7in \u00f6rnek: &nbsp;<code>'choices'=&gt; twentyfifteen_get_color_scheme_choices()<\/code> <\/li><li><code>'input_attrs'<\/code> &#8211; Olu\u015fturdu\u011fumuz kontrol alan\u0131 ile ilgili olarak eklememiz gereken \u00f6zelliklerdir. Mesela, &#8216;range&#8217; tipinde bir kontrol alan\u0131 olu\u015fturuyorsak bu arg\u00fcman\u0131 \u015fu \u015fekilde olu\u015fturabiliriz:  <code>'input_attrs' =&gt; array( 'min' =&gt; 0, 'max' =&gt; 10, 'step'  =&gt; 2 )<\/code><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"wp_customize-gtadd_section_Metodunu_Kullanma\"><em>$wp_customize-&gt;add_section()<\/em> Metodunu Kullanma<\/span><\/h3>\n\n\n\n<p><code>$wp_customize-&gt;add_section()<\/code> metodu, <code>$wp_customize-&gt;add_panel()<\/code>  metodu ile olu\u015fturdu\u011fumuz panele veya teman\u0131n varsay\u0131lan paneline bir b\u00f6l\u00fcm ekler.<\/p>\n\n\n\n<p>Bir b\u00f6l\u00fcm olu\u015fturmak i\u00e7in <code>$wp_customize-&gt;add_section()<\/code> metodunu \u015fu \u015fekilde kullan\u0131r\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_section($bolum_id, $argumanlar);<\/code><\/pre>\n\n\n\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, metot iki arg\u00fcman ile \u00e7al\u0131\u015fmaktad\u0131r. Bu arg\u00fcmanlar\u0131n anlam\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"bolum_id\">$bolum_id<\/span><\/h4>\n\n\n\n<p>(<em>string &#8211; Zorunludur<\/em>.) Olu\u015fturulan b\u00f6l\u00fcm\u00fcn kimli\u011fidir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"argumanlar-3\">$argumanlar<\/span><\/h4>\n\n\n\n<p>(<em>array <\/em>&#8211; <em>Zorunludur<\/em>.) Olu\u015fturaca\u011f\u0131m\u0131z b\u00f6l\u00fcm ile ilgili detaylar\u0131 verdi\u011fimiz bir dizidir. <code>$argumanlar<\/code> dizisi a\u015fa\u011f\u0131daki arg\u00fcmanlar\u0131 alabilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>'title'<\/code> &#8211; B\u00f6l\u00fcm\u00fcn g\u00f6r\u00fcnen ad\u0131d\u0131r.<\/li><li><code>'priority'<\/code> &#8211; Ekleyece\u011fimiz b\u00f6l\u00fcm\u00fcn paneldeki yerle\u015fim s\u0131ras\u0131d\u0131r, \u00f6nceli\u011fidir. Bu parametrenin de\u011feri k\u00fc\u00e7\u00fcld\u00fck\u00e7e, olu\u015fturdu\u011fumuz alan daha \u00fcst s\u0131rada yer al\u0131r. \u00d6rnek: <code>'priority' =&gt; 65<\/code> (Varsay\u0131lan paneldeki b\u00f6l\u00fcmlerin \u00f6ncelik s\u0131ras\u0131 a\u015fa\u011f\u0131da verilmi\u015ftir.)<\/li><li><code>'description'<\/code> &#8211; Olu\u015fturaca\u011f\u0131m\u0131z b\u00f6l\u00fcm\u00fcn a\u00e7\u0131klamas\u0131d\u0131r.<\/li><li><code>'capability'<\/code> &#8211; B\u00f6l\u00fcm\u00fc g\u00f6rmek i\u00e7in gereken minimum yetkidir. Varsay\u0131lan de\u011feri <code>'edit_theme_options'<\/code> olarak ayarlanm\u0131\u015ft\u0131r.<\/li><li><code>'active_callback'<\/code> &#8211; Olu\u015fturaca\u011f\u0131m\u0131z b\u00f6l\u00fcm\u00fcn, teman\u0131n hangi sayfas\u0131n\u0131\/sayfalar\u0131n\u0131 ayarlarken g\u00f6r\u00fcnece\u011fini belirler. Mesela, canl\u0131 \u00f6n izlemede, sadece ana sayfa a\u00e7\u0131kken g\u00f6r\u00fcnecek bir b\u00f6l\u00fcm i\u00e7in, bu arg\u00fcman <code>'active_callback' =&gt; 'is_front_page'<\/code> \u015feklinde ayarlanabilir.<\/li><li><code>'panel'<\/code> &#8211; B\u00f6l\u00fcm\u00fcn olu\u015fturulaca\u011f\u0131 panelin kimli\u011fidir. Varsay\u0131lan de\u011feri, teman\u0131n varsay\u0131lan panelidir.<\/li><\/ul>\n\n\n\n<p>Bir WordPress temas\u0131n\u0131n varsay\u0131lan panelinde bulunabilecek b\u00f6l\u00fcmler\/paneller \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Etkin tema (<code>themes<\/code>)<\/li><li>Site kimli\u011fi (<code>title_tagline<\/code>)<\/li><li>Renkler (<code>colors<\/code>)<\/li><li>\u00dcst k\u0131s\u0131m ortam dosyas\u0131 (<code>header_image<\/code>)<\/li><li>Arkaplan resmi (<code>background_image<\/code>)<\/li><li>Men\u00fcler (Paneldir) (<code>nav_menus<\/code>)<\/li><li>Bile\u015fenler (Paneldir) (<code>widgets<\/code>)<\/li><li>Ana sayfa ayarlar\u0131 (<code>static_front_page<\/code>) :  &#8211; Teman\u0131zda en az bir sayfa olu\u015fturulmu\u015f ise g\u00f6r\u00fcn\u00fcr.<\/li><li>Ek CSS (<code>custom_css<\/code>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Panel_Olusturuyoruz\">Panel Olu\u015fturuyoruz<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod ile &#8220;<em>Tema Ayarlar\u0131<\/em>&#8221; ad\u0131nda bir panel olu\u015fturuyoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_alanlari( $wp_customize ) {\n\n\t\/\/ PANEL: \"Tema Ayarlar\u0131\" ad\u0131nda bir panel ekler\n\t$wp_customize->add_panel(\n\t\t'tema-ayarlari', \/\/ Panelin kimli\u011fi\n\t\tarray(\n\t\t\t'title' => __( 'Tema Ayarlar\u0131', 'textdomain' ),\n\t\t\t'description' => __( '&lt;p>Teman\u0131z\u0131n ayarlar\u0131n\u0131 yap\u0131yorsunuz.&lt;\/p>', 'textdomain'),\n\t\t\t'priority' => 65,\n\t\t)\n\t);\n       \n}\nadd_action( 'customize_register', 'ilktemam_customizer_alanlari' );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, teman\u0131z\u0131n varsay\u0131lan panelinde, kimli\u011fi <strong>&#8220;tema-ayarlari&#8221;<\/strong> olan ve g\u00f6r\u00fcnen ad\u0131 <strong>&#8220;Tema Ayarlar\u0131&#8221;<\/strong> olan bir panel olu\u015fturacakt\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da resimde olu\u015fturdu\u011fumuz panelin ba\u011flant\u0131s\u0131 k\u0131rm\u0131z\u0131 \u00e7er\u00e7eve ile g\u00f6sterilmi\u015ftir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"271\" height=\"486\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-panel.jpg\" alt=\"Customizer API - Panel Ekleme\" class=\"wp-image-4568\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-panel.jpg 271w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-panel-167x300.jpg 167w\" sizes=\"auto, (max-width: 271px) 100vw, 271px\" \/><figcaption>Customizer API &#8211; Panel Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"sc-daikkat\">Sizin teman\u0131zda hen\u00fcz b\u00f6yle bir alan olu\u015fmayacakt\u0131r \u00e7\u00fcnk\u00fc, Customizer API ile en az bir kontrol alan\u0131 olu\u015fturana kadar, di\u011fer alanlar g\u00f6r\u00fcnmez.<\/p>\n\n\n\n<p>Panelimiz, ayr\u0131 bir sayfa \u015feklinde de\u011fil de, temam\u0131z\u0131n varsay\u0131lan panelinde olu\u015fmu\u015ftur, bir b\u00f6l\u00fcm g\u00f6r\u00fcnt\u00fcs\u00fcne sahip bir ba\u011flant\u0131 \u015feklinde olu\u015fmu\u015ftur ve <em>&#8216;Tema Ayarlar\u0131&#8217;<\/em> ad\u0131yla olu\u015fmu\u015ftur. Bu ba\u011flant\u0131ya t\u0131klad\u0131\u011f\u0131m\u0131zda yeni panelimiz a\u00e7\u0131lacakt\u0131r.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<p>Panelimizin ba\u011flant\u0131s\u0131, varsay\u0131lan panelin <em>Renkler<\/em> ve <em>Men\u00fcler <\/em>b\u00f6l\u00fcmlerinin aras\u0131nda olu\u015fmu\u015ftur. Dilerseniz bu konumu, panel eklerken kulland\u0131\u011f\u0131m\u0131z <code>'priority' =&gt; 65<\/code> arg\u00fcman\u0131na verilen &#8220;65&#8221; de\u011ferini b\u00fcy\u00fcterek daha a\u015fa\u011f\u0131 s\u0131ralara, k\u00fc\u00e7\u00fclterek de daha yukar\u0131 s\u0131ralara ta\u015f\u0131yabilirsiniz.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Varsayilan_Paneldeki_Bolumlerin_Konum_Numaralari\">Varsay\u0131lan Paneldeki B\u00f6l\u00fcmlerin Konum Numaralar\u0131<\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Etkin tema (<code>themes<\/code>) : 0<\/li><li>Site kimli\u011fi (<code>title_tagline<\/code>) : 20<\/li><li>Renkler (<code>colors<\/code>) : 40<\/li><li>\u00dcst k\u0131s\u0131m ortam dosyas\u0131 (<code>header_image<\/code>) : 60<\/li><li>Arkaplan resmi (<code>background_image<\/code>) : 80<\/li><li>Men\u00fcler (<code>nav_menus<\/code>) : 100<\/li><li>Bile\u015fenler (<code>widgets<\/code>) : 110<\/li><li>Ana sayfa ayarlar\u0131 (<code>static_front_page<\/code>) : 120<\/li><li>Varsay\u0131lan konum :  160<\/li><li>Ek CSS (<code>custom_css<\/code>) : 200<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bolum_Section_Olusturuyoruz\">B\u00f6l\u00fcm (Section) Olu\u015fturuyoruz<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, &#8220;<em>Tema Ayarlar\u0131<\/em>&#8221; ad\u0131nda bir panel ve bu panele &#8220;<em>Blog Se\u00e7enekleri<\/em>&#8221; ad\u0131nda bir b\u00f6l\u00fcm ekler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_alanlari( $wp_customize ) {\n\n\t\/\/ PANEL: \"Tema Ayarlar\u0131\" ad\u0131nda bir panel ekler\n\t$wp_customize->add_panel(\n\t\t'tema-ayarlari', \/\/ Panelin kimli\u011fi\n\t\tarray(\n\t\t\t'title' => __( 'Tema Ayarlar\u0131', 'textdomain' ),\n\t\t\t'description' => __( '&lt;p>Teman\u0131z\u0131n ayarlar\u0131n\u0131 yap\u0131yorsunuz.&lt;\/p>', 'textdomain'),\n\t\t\t'priority' => 65,\n\t\t)\n\t);\n\n\t\/\/ B\u00d6L\u00dcM: \"Tema Ayarlar\u0131\" Paneline \"Blog Se\u00e7enekleri\" b\u00f6l\u00fcm\u00fc ekler\n\t$wp_customize->add_section( 'blog-secenekleri', \n\t\tarray(\n\t\t\t'title'       => __( 'Blog Se\u00e7enekleri', 'textdomain' ),\n\t\t\t'priority'    => 65,\n\t\t\t'yapabilirlikte'  => 'edit_theme_options',\n\t\t\t'description' => __('Teman\u0131z\u0131n blog sayfas\u0131 ile ilgili bir tak\u0131m ayarlar yap\u0131l\u0131r.', 'textdomain'), \/\/ B\u00f6l\u00fcm\u00fcm a\u00e7\u0131klamas\u0131\n\t\t\t'panel' => 'tema-ayarlari',\n\t\t) \n\t);\n       \n}\nadd_action( 'customize_register', 'ilktemam_customizer_alanlari' );<\/code><\/pre>\n\n\n\n<p>Ekledi\u011fimiz &#8220;<em>Blog Se\u00e7enekleri<\/em>&#8221; b\u00f6l\u00fcm\u00fcn\u00fc g\u00f6rmek i\u00e7in, tema panelindeki &#8220;<em>Tema Ayalar\u0131<\/em>&#8221; ba\u011flant\u0131s\u0131na t\u0131kl\u0131yoruz ve \u015f\u00f6yle bir panel ile kar\u015f\u0131la\u015f\u0131yoruz:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"457\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-section-1.jpg\" alt=\"\" class=\"wp-image-4573\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-section-1.jpg 267w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-section-1-175x300.jpg 175w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><figcaption>Customizer API &#8211; B\u00f6l\u00fcm Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131daki resimde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, <em>&#8220;Tema Ayarlar\u0131&#8221;<\/em> ad\u0131ndaki panel sayfas\u0131nda <em>&#8220;Blog Se\u00e7enekleri&#8221;<\/em> ad\u0131nda bir b\u00f6l\u00fcm olu\u015fmu\u015ftur.<\/p>\n\n\n\n<p>\u015eimdi s\u0131ra geldi, Blog Se\u00e7enekleri ad\u0131yla olu\u015fturdu\u011fumuz bu b\u00f6l\u00fcme, bir tak\u0131m ayarlar ve bu ayarlar\u0131 yapabilece\u011fimiz kontroller eklemeye.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bir_Ayar_Olusturuyoruz\">Bir Ayar Olu\u015fturuyoruz<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, &#8220;<em>Tema Ayarlar\u0131<\/em>&#8221; ad\u0131nda bir panel, bu panele &#8220;<em>Blog Se\u00e7enekleri<\/em>&#8221; ad\u0131nda bir b\u00f6l\u00fcm ve bu b\u00f6l\u00fcme de &#8220;<em>Sidebar se\u00e7enekleri<\/em>&#8221; ad\u0131nda bir ayar ekler ve bu ayar\u0131n varsay\u0131lan se\u00e7ene\u011fini <code>'sagda'<\/code> yapar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_alanlari( $wp_customize ) {\n\n\t\/\/ PANEL: \"Tema Ayarlar\u0131\" ad\u0131nda bir panel ekler\n\t$wp_customize->add_panel(\n\t\t'tema-ayarlari', \/\/ Panelin kimli\u011fi\n\t\tarray(\n\t\t\t'title' => __( 'Tema Ayarlar\u0131', 'textdomain' ),\n\t\t\t'description' => __( '&lt;p>Teman\u0131z\u0131n ayarlar\u0131n\u0131 yap\u0131yorsunuz.&lt;\/p>', 'textdomain'),\n\t\t\t'priority' => 65,\n\t\t)\n\t);\n\n\t\/\/ B\u00d6L\u00dcM: \"Tema Ayarlar\u0131\" Paneline \"Blog Se\u00e7enekleri\" b\u00f6l\u00fcm\u00fc ekler\n\t$wp_customize->add_section( 'blog-secenekleri', \n\t\tarray(\n\t\t\t'title'       => __( 'Blog Se\u00e7enekleri', 'textdomain' ),\n\t\t\t'priority'    => 65,\n\t\t\t'yapabilirlikte'  => 'edit_theme_options',\n\t\t\t'description' => __('Teman\u0131z\u0131n blog sayfas\u0131 ile ilgili bir tak\u0131m ayarlar yap\u0131l\u0131r.', 'textdomain'), \/\/ B\u00f6l\u00fcm\u00fcm a\u00e7\u0131klamas\u0131\n\t\t\t'panel' => 'tema-ayarlari',\n\t\t) \n\t);\n\n\t\/\/ AYAR: \"sidebar_secenekeleri\" kimli\u011fiyle bir ayar olu\u015fturuyoruz ve varsay\u0131lan de\u011ferini de \"sagda\" olarak kaydediyoruz. (Sidebar ayar\u0131n\u0131 yapabilmek i\u00e7in \"radio\" tipinde bir kontrol ekleyece\u011fiz, onun ayar\u0131n\u0131 haz\u0131rl\u0131yoruz.)\n\t$wp_customize->add_setting( 'sidebar_secenekeleri', \n\t\tarray(\n\t\t\t'capability' => 'edit_theme_options',\n\t\t\t'default' => 'sagda',\n\t\t\t'sanitize_callback' => '',\n\t\t) \n\t);\n       \n}\nadd_action( 'customize_register', 'ilktemam_customizer_alanlari' );<\/code><\/pre>\n\n\n\n<p>Ekledi\u011fimiz ayar\u0131n ad\u0131n\u0131, <code>'sidebar_secenekeleri'<\/code>, varsay\u0131lan de\u011feri de, <code>'sagda'<\/code> yapt\u0131k.<\/p>\n\n\n\n<p>Bu ayar\u0131n de\u011ferini getirmek istedi\u011fimizde \u015fu kodu kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo get_theme_mod('sidebar_secenekeleri'); ?><\/code><\/pre>\n\n\n\n<p>Fakat, yapt\u0131\u011f\u0131m\u0131z ayarlar\u0131 genellikle \u015fablon dosyalar\u0131m\u0131zda bir ko\u015ful olarak kullan\u0131r\u0131z. A\u015fa\u011f\u0131da bunun bir \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php if( get_theme_mod('sidebar_secenekeleri') == 'sagda' ) {\n   \/\/ Sidebar sayfan\u0131n sa\u011f\u0131na eklenir.\n} ?><\/code><\/pre>\n\n\n\n<p>\u015eimdi, diledi\u011fimizde bu ayar\u0131n de\u011ferini de\u011fi\u015ftirebilmek i\u00e7in bir kontrol alan\u0131 (form eleman\u0131) olu\u015ftural\u0131m.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bir_Kontrol_Olusturuyoruz\">Bir Kontrol Olu\u015fturuyoruz<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, &#8220;<em>Tema Ayarlar\u0131<\/em>&#8221; ad\u0131nda bir panel, bu panele &#8220;<em>Blog Se\u00e7enekleri<\/em>&#8221; ad\u0131nda bir b\u00f6l\u00fcm, bu b\u00f6l\u00fcme de &#8220;<em>Sidebar se\u00e7enekleri<\/em>&#8221; ad\u0131nda bir ayar ve bu ayar\u0131 de\u011fi\u015ftirebilecek <code>'radio'<\/code> tipinde bir kontrol alan\u0131 ekler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customizer_alanlari( $wp_customize ) {\n\n\t\/\/ PANEL: \"Tema Ayarlar\u0131\" ad\u0131nda bir panel ekler\n\t$wp_customize->add_panel(\n\t\t'tema-ayarlari', \/\/ Panelin kimli\u011fi\n\t\tarray(\n\t\t\t'title' => __( 'Tema Ayarlar\u0131', 'textdomain' ),\n\t\t\t'description' => __( '&lt;p>Teman\u0131z\u0131n ayarlar\u0131n\u0131 yap\u0131yorsunuz.&lt;\/p>', 'textdomain'),\n\t\t\t'priority' => 65,\n\t\t)\n\t);\n\n\t\/\/ B\u00d6L\u00dcM: \"Tema Ayarlar\u0131\" Paneline \"Blog Se\u00e7enekleri\" b\u00f6l\u00fcm\u00fc ekler\n\t$wp_customize->add_section( 'blog-secenekleri', \n\t\tarray(\n\t\t\t'title'       => __( 'Blog Se\u00e7enekleri', 'textdomain' ),\n\t\t\t'priority'    => 65,\n\t\t\t'yapabilirlikte'  => 'edit_theme_options',\n\t\t\t'description' => __('Teman\u0131z\u0131n blog sayfas\u0131 ile ilgili bir tak\u0131m ayarlar yap\u0131l\u0131r.', 'textdomain'), \/\/ B\u00f6l\u00fcm\u00fcm a\u00e7\u0131klamas\u0131\n\t\t\t'panel' => 'tema-ayarlari',\n\t\t) \n\t);\n\n\t\/\/ AYAR: \"sidebar_secenekeleri\" kimli\u011fiyle bir ayar olu\u015fturuyoruz ve varsay\u0131lan de\u011ferini de \"sagda\" olarak kaydediyoruz. (radio tipinde bir kontrol ekleyece\u011fiz, onun ayar\u0131n\u0131 haz\u0131rl\u0131yoruz.)\n\t$wp_customize->add_setting( 'sidebar_secenekeleri', \n\t\tarray(\n\t\t\t'default' => 'sagda',\n\t\t\t'sanitize_callback' => '',\n\t\t) \n\t);\n\n\t\/\/ KONTROL: \"radio\" tipinde bir kontrol alan\u0131 olu\u015fturuyoruz ve \"sidebar_secenekleri\" ad\u0131ndaki ayar\u0131 kontrol ediyoruz.\n\t$wp_customize->add_control( 'sidebar_secenekeleri',\n\t\tarray(\n\t\t\t'label' => __( 'Sidebar\\'\u0131n Konumu', 'textdomain' ),\n\t\t\t'description' => __( 'Sidebar\\'\u0131n konumunu belirler.', 'textdomain' ),\n\t\t\t'type' => 'radio',\n\t\t\t'choices' => array(\n\t\t\t\t'sagda' => __( 'Sa\u011fda', 'textdomain' ),\n\t\t\t\t'solda' => __( 'Solda', 'textdomain' ),\n\t\t\t\t'kaldir' => __( 'Kald\u0131r', 'textdomain' ),\n\t\t\t\t),\n\t\t\t'section' => 'blog-secenekleri',\n                        'priority'   => 1,\n\t\t)\n\t);\n       \n}\nadd_action( 'customize_register', 'ilktemam_customizer_alanlari' );<\/code><\/pre>\n\n\n\n<p>Olu\u015fturdu\u011fumuz kontrol\u00fc g\u00f6rmek i\u00e7in, panelimizdeki &#8220;Blog Se\u00e7enekleri&#8221; b\u00f6l\u00fcm\u00fcne t\u0131kl\u0131yoruz ve \u015f\u00f6yle bir kontrol alan\u0131 ile kar\u015f\u0131la\u015f\u0131yoruz:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"348\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control.jpg\" alt=\"\" class=\"wp-image-4594\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control.jpg 268w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-231x300.jpg 231w\" sizes=\"auto, (max-width: 268px) 100vw, 268px\" \/><figcaption>Customizer API &#8211; Kontrol Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131daki alanlar\u0131 bir PHP s\u0131n\u0131f\u0131 \u015feklinde de ekleyebilirdik:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Ilktemam_Customizer_Alanlari {\n\t\n\tpublic function customizer_alanlari( $wp_customize ) {\n\n\t\t\/\/ PANEL: \"Tema Ayarlar\u0131\" ad\u0131nda bir panel ekler\n\t\t$wp_customize->add_panel(\n\t\t\t'tema-ayarlari', \/\/ Panelin kimli\u011fi\n\t\t\tarray(\n\t\t\t\t'title' => __( 'Tema Ayarlar\u0131', 'textdomain' ),\n\t\t\t\t'description' => __( '&lt;p>Teman\u0131z\u0131n ayarlar\u0131n\u0131 yap\u0131yorsunuz.&lt;\/p>', 'textdomain'),\n\t\t\t\t'priority' => 65,\n\t\t\t)\n\t\t);\n\n\t\t\/\/ B\u00d6L\u00dcM: \"Tema Ayarlar\u0131\" Paneline \"Blog Se\u00e7enekleri\" b\u00f6l\u00fcm\u00fc ekler\n\t\t$wp_customize->add_section( 'blog-secenekleri', \n\t\t\tarray(\n\t\t\t\t'title'       => __( 'Blog Se\u00e7enekleri', 'textdomain' ),\n\t\t\t\t'priority'    => 65,\n\t\t\t\t'yapabilirlikte'  => 'edit_theme_options',\n\t\t\t\t'description' => __('Teman\u0131z\u0131n blog sayfas\u0131 ile ilgili bir tak\u0131m ayarlar yap\u0131l\u0131r.', 'textdomain'), \/\/ B\u00f6l\u00fcm\u00fcm a\u00e7\u0131klamas\u0131\n\t\t\t\t'panel' => 'tema-ayarlari',\n\t\t\t) \n\t\t);\n\n\t\t\/\/ AYAR: \"sidebar_secenekeleri\" kimli\u011fiyle bir ayar olu\u015fturuyoruz ve varsay\u0131lan de\u011ferini de \"sagda\" olarak kaydediyoruz. (radio tipinde bir kontrol ekleyece\u011fiz, onun ayar\u0131n\u0131 haz\u0131rl\u0131yoruz.)\n\t\t$wp_customize->add_setting( 'sidebar_secenekeleri', \n\t\t\tarray(\n\t\t\t\t'default' => 'sagda',\n\t\t\t\t'sanitize_callback' => '',\n\t\t\t) \n\t\t);\n\n\t\t\/\/ KONTROL: \"radio\" tipinde bir kontrol alan\u0131 olu\u015fturuyoruz ve \"sidebar_secenekleri\" ad\u0131ndaki ayar\u0131 kontrol ediyoruz.\n\t\t$wp_customize->add_control( 'sidebar_secenekeleri',\n\t\t\tarray(\n\t\t\t\t'label' => __( 'Sidebar\\'\u0131n Konumu', 'textdomain' ),\n\t\t\t\t'description' => __( 'Sidebar\\'\u0131n konumunu belirler.', 'textdomain' ),\n\t\t\t\t'type' => 'radio',\n\t\t\t\t'choices' => array(\n\t\t\t\t\t'sagda' => __( 'Sa\u011fda', 'textdomain' ),\n\t\t\t\t\t'solda' => __( 'Solda', 'textdomain' ),\n\t\t\t\t\t'kaldir' => __( 'Kald\u0131r', 'textdomain' ),\n\t\t\t\t\t),\n\t\t\t\t'section' => 'blog-secenekleri',\n                                'priority'   => 1,\n\t\t\t)\n\t\t);\n    }\n}\nadd_action( 'customize_register', array( 'Ilktemam_Customizer_Alanlari', 'customizer_alanlari' ) );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Ayarlari_Ile_Birlikte_Farkli_Tipte_Kontroller_Olusturma\">Ayarlar\u0131 \u0130le Birlikte Farkl\u0131 Tipte Kontroller Olu\u015fturma<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Renk_Kontrolu_Olusturma\">Renk Kontrol\u00fc Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131da kod, Customizer API ile, <code>'baslik_rengi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de renk paleti tipinde bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Ba\u015fl\u0131k rengi\n$wp_customize->add_setting( 'baslik_rengi',\n\tarray(\n\t\t'default'    => '#3a3a3a',\n                'sanitize_callback' => 'sanitize_hex_color',  \n\t) \n);      \n\n\/\/ KONTROL - Ba\u015fl\u0131k rengi:\n$wp_customize->add_control( new WP_Customize_Color_Control( \/\/ Renk s\u0131n\u0131f\u0131n\u0131n bir \u00f6rne\u011fi\n\t$wp_customize, \/\/ $wp_customize object (zorunludur)\n\t'baslik_rengi', \/\/ Kontrol i\u00e7in bir kimlik -id- olu\u015fturduk\n\t\tarray(\n\t\t\t'label'      => __( 'Ba\u015fl\u0131k Rengi', 'textdomain' ),\n\t\t\t'description'=> __( 'Blog sayfas\u0131n\u0131n ba\u015fl\u0131\u011f\u0131n\u0131n rengini ayarlar.', 'textdomain' ),\n\t\t\t'settings'   => 'baslik_rengi',\n\t\t\t'priority'   => 50,\n\t\t\t'section'    => 'blog-secenekleri',\n\t\t) \n\t) \n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"651\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-2.jpg\" alt=\"Customizer API - Renk Kontrol\u00fc\" class=\"wp-image-4609\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-2.jpg 267w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-2-123x300.jpg 123w\" sizes=\"auto, (max-width: 267px) 100vw, 267px\" \/><figcaption>Customizer API &#8211; Renk Kontrol\u00fc<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu rengi \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'baslik_rengi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Text_Tipinde_Kontrol_Alani_Olusturma\">Text Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'yazi_sayisi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>text<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<p>Text, varsay\u0131lan kontrol alan\u0131d\u0131r. Bu y\u00fczden, kontrol\u00fcn tipini belirtmezsek bir <code>text<\/code> alan\u0131 olu\u015ftur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Yaz\u0131 Say\u0131s\u0131\n$wp_customize->add_setting( 'yazi_sayisi',\n\tarray(\n\t\t'default'    => 10,\n                'sanitize_callback' => 'sanitize_text_field'\n\t) \n);\n\n\/\/ KONTROL - Yaz\u0131 say\u0131s\u0131\n$wp_customize->add_control( 'yazi_sayisi',\n\tarray(\n\t\t'label'      => __( 'Yaz\u0131 Say\u0131s\u0131', 'textdomain' ),\n\t\t'description'=> __( 'Blog sayfas\u0131nda g\u00f6sterilecek yaz\u0131 say\u0131s\u0131n\u0131 giriniz.', 'textdomain' ),\n\t\t'settings'   => 'yazi_sayisi',\n\t\t'priority'   => 20,\n\t\t'section'    => 'blog-secenekleri',\n\t\n\t)    \n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"267\" height=\"114\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-3.jpg\" alt=\"Customizer API - Text Tipinde Kontrol Ekleme\" class=\"wp-image-4616\"\/><figcaption>Customizer API &#8211; Text Tipinde Kontrol Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'yazi_sayisi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Checkbox_Tipinde_Kontrol_Alani_Olusturma\">Checkbox Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'yazilarin_meta_bilgileri'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>checkbox<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Yaz\u0131lar\u0131n Meta Bilgileri g\u00f6r\u00fcns\u00fcn m\u00fc?\n$wp_customize->add_setting( 'yazilarin_meta_bilgileri', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => false,\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Yaz\u0131 meta bilgilerinin g\u00f6r\u00fcn\u00fcrl\u00fcl\u00fc\u011f\u00fcn\u00fc kontrol eder\n$wp_customize->add_control( 'yazilarin_meta_bilgileri',\n\tarray(\n\t\t'label' => __( 'Yaz\u0131lar\u0131n meta bilgilerini g\u00f6sterelim mi?', 'textdomain' ),\n\t\t'description' => __( '\u0130\u015faretlerseniz, blog sayfas\u0131nda yaz\u0131lar\u0131n alt\u0131nda; yazar, tarih, kategori, yorum, etiket bilgileri yer al\u0131r.', 'textdomain' ),\n\t\t'type' => 'checkbox',\n\t\t'settings'   => 'yazilarin_meta_bilgileri',\n\t\t'section' => 'blog-secenekleri',\n\t\t'priority'   => 15,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"268\" height=\"118\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-checkbox.jpg\" alt=\"Customizer API - Checkbox Tipinde Kontrol Ekleme\" class=\"wp-image-4617\"\/><figcaption>Customizer API &#8211; Checkbox Tipinde Kontrol Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'yazilarin_meta_bilgileri'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Select_Tipinde_Kontrol_Alani_Olusturma\">Select Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'ust_kisim_secenekleri'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>select<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Sayfan\u0131n \u00dcst K\u0131s\u0131m \u0130\u00e7eri\u011fi\n$wp_customize->add_setting( 'ust_kisim_secenekeleri', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => 'sayfa_basligi',\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Sayfan\u0131n \u00dcst K\u0131s\u0131m \u0130\u00e7eri\u011fini Belirler\n$wp_customize->add_control( 'ust_kisim_secenekeleri',\n\tarray(\n\t\t'label' => __( 'Sayfan\u0131n \u00dcst\u00fc', 'textdomain' ),\n\t\t'description' => __( 'Sayfan\u0131n \u00fcst k\u0131sm\u0131nda -Ana men\u00fcn\u00fcn alt\u0131nda- ne t\u00fcr bir i\u00e7erik olacak?', 'textdomain' ),\n\t\t'type' => 'select',\n\t\t'choices' => array(\n\t\t\t'sayfa_basligi' => __( 'Sayfa Ba\u015fl\u0131\u011f\u0131', 'textdomain' ),\n\t\t\t'reklam' => __( 'Reklam', 'textdomain' ),\n\t\t\t'slaytsov' => __( 'Slayt \u015eov', 'textdomain' ),\n\t\t\t),\n\t\t'section' => 'blog-secenekleri',\n\t\t'priority'   => 2,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"252\" height=\"110\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-select.jpg\" alt=\"\" class=\"wp-image-4619\"\/><figcaption>Customizer API &#8211; Select Tipinde Kontrol Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'ust_kisim_secenekleri'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Textarea_Tipinde_Kontrol_Alani_Olusturma\">Textarea Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'yonetici_notu'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>textarea<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Y\u00f6netici Notu\n$wp_customize->add_setting( 'yonetici_notu', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => '',\n\t\t'sanitize_callback' => 'sanitize_textarea_field',\n\t) \n);\n\n\/\/ KONTROL - Kullan\u0131c\u0131lara bir not b\u0131rak\u0131r.\n$wp_customize->add_control( 'yonetici_notu',\n\tarray(\n\t\t'label' => __( 'Y\u00f6netici Notu', 'textdomain' ),\n\t\t'description' => __( 'Sayfan\u0131n en \u00fcs\u00fct\u00fcnde payla\u015f\u0131lmak \u00fczere bir not girin.', 'textdomain' ),\n\t\t'type' => 'textarea',\n\t\t'settings'   => 'yonetici_notu',\n\t\t'section' => 'blog-secenekleri',\n\t\t'priority'   => 2,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"249\" height=\"204\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-textarea.jpg\" alt=\"\" class=\"wp-image-4622\"\/><figcaption>Customizer API &#8211; Select Tipinde Kontrol Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'yonetici_notu'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Dropdown-pages_Tipinde_Kontrol_Alani_Olusturma\">Dropdown-pages Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p><code>Dropdown-pages<\/code> tipinde bir kontrol alan\u0131 olu\u015fturmak demek, temam\u0131z i\u00e7in ekledi\u011fimiz sayfalar ile <code>select<\/code> tipinde bir form alan\u0131 olu\u015fturmak ve bu sayfalardan diledi\u011fimizi se\u00e7ebilmek demektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'tema_sayfalari'<\/code> ad\u0131nda bir ayar ve bu ayar\u0131 kullanarak temam\u0131zdan bir sayfa se\u00e7ebilece\u011fimiz bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Temam\u0131z\u0131n Sayfalar\u0131\n$wp_customize->add_setting( 'ilktemamin_sayfalarii', \n\tarray(\n\t\t'default' => 0,\n\t)\n);\n\n\/\/ KONTROL - Temam\u0131z\u0131n bir sayfas\u0131n\u0131 se\u00e7er\n$wp_customize->add_control( 'ilktemamin_sayfalarii', \n\tarray(\n\t  'label' => __( 'Teman\u0131n Sayfalar\u0131' ),\n\t  'description' => __( 'Bir sayfa se\u00e7iniz.' ),\n\t  'type' => 'dropdown-pages',\n\t  'section' => 'blog-secenekleri',\n          'allow_addition' => true, \/\/ Yeni sayfa ekleyebilme \u00f6zelli\u011fi katar\n          'priority'   => 25,\n\t) \n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"248\" height=\"123\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-dropdown-pages-1.jpg\" alt=\"\" class=\"wp-image-4641\"\/><figcaption>Customizer API &#8211; Dropdown-pages Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar, se\u00e7ti\u011fimiz sayfan\u0131n <code>id<\/code> de\u011ferini getirir, bir sayfa se\u00e7mezsek 0 de\u011ferini getirir. Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'ilktemamin_sayfalari'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Dosya_Yukleyicisi_Seklinde_Kontrol_Alani_Olusturma\">Dosya Y\u00fckleyicisi \u015eeklinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>Dosya y\u00fckleyici tipinde bir kontrol alan\u0131 olu\u015fturmak demek, bir ortam y\u00fckleyicisi olu\u015fturmak ve bu y\u00fckleyici ile, dilersek bir ortam dosyas\u0131 y\u00fckleyebilmek dilersek de ortam k\u00fct\u00fcphanesindekilerden birini kullanabilmek demektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'ust_kisim_gorseli'<\/code> ad\u0131nda bir ayar ve bu ayar\u0131 kullanarak bir ortam dosyas\u0131 y\u00fckleyebilece\u011fimiz ya da ortam k\u00fct\u00fcphanesinden bir ortam dosyas\u0131 se\u00e7ebilece\u011fimiz bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Tepe Resmi\n$wp_customize->add_setting( 'ust_kisim_gorseli',\n\tarray(\n\t\t'default'    => '',\n\t) \n);      \n\n\/\/ KONTROL - Tepe resmi\n$wp_customize->add_control( new WP_Customize_Upload_Control(\n\t$wp_customize,\n\t'ust_kisim_gorseli',\n\t\tarray(\n\t\t\t'label'      => __( 'Tepe Resmi', 'textdomain' ),\n\t\t\t'description'=> __( 'Blog sayfas\u0131n\u0131n tepesine konacak resimdir.', 'textdomain' ),\n\t\t\t'settings'   => 'ust_kisim_gorseli',\n\t\t\t'priority'   => 5,\n\t\t\t'section'    => 'blog-secenekleri',\n\t\t) \n\t) \n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"121\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-upload.jpg\" alt=\"\" class=\"wp-image-4629\"\/><figcaption>Customizer API &#8211; Upload Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar, se\u00e7ti\u011fimiz resmin <code>url<\/code> de\u011ferini getirir. Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'ust_kisim_gorseli'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Resim_Dosyasi_Yukleyicisi_Seklinde_Kontrol_Alani_Olusturma\">Resim Dosyas\u0131 Y\u00fckleyicisi \u015eeklinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>Resim dosyas\u0131 y\u00fckleyici tipinde bir kontrol alan\u0131 olu\u015fturmak demek, sadece resim dosyalar\u0131n\u0131 tan\u0131yan bir ortam y\u00fckleyicisi olu\u015fturmak ve bu y\u00fckleyici ile dilersek bir resim dosyas\u0131 y\u00fckleyebilmek dilersek de ortam k\u00fct\u00fcphanesindekilerden birini kullanabilmek demektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'ust_kisim_gorseli'<\/code> ad\u0131nda bir ayar ve bu ayar\u0131 kullanarak bir resim dosyas\u0131 y\u00fckleyebilece\u011fimiz ya da ortam k\u00fct\u00fcphanesinden bir resim dosyas\u0131 se\u00e7ebilece\u011fimiz bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Tepe Resmi\n$wp_customize->add_setting( 'ust_kisim_gorseli',\n\tarray(\n\t\t'default'    => '',\n\t) \n);      \n\n\/\/ KONTROL - Tepe resmi\n$wp_customize->add_control( new WP_Customize_Image_Control(\n\t$wp_customize,\n\t'ust_kisim_gorseli',\n\t\tarray(\n\t\t\t'label'      => __( 'Tepe Resmi', 'textdomain' ),\n\t\t\t'description'=> __( 'Blog sayfas\u0131n\u0131n tepesine konacak resimdir.', 'textdomain' ),\n\t\t\t'settings'   => 'ust_kisim_gorseli',\n\t\t\t'priority'   => 5,\n\t\t\t'section'    => 'blog-secenekleri',\n\t\t) \n\t) \n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"246\" height=\"116\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-image-upload.jpg\" alt=\"\" class=\"wp-image-4634\"\/><figcaption>Customizer API &#8211; Resim Y\u00fckleyicisi Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar, se\u00e7ti\u011fimiz resmin <code>url<\/code> de\u011ferini getirir. Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'ust_kisim_gorseli'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kirpma_Ozelligi_de_Olan_Dosya_Yukleyicisi_Seklinde_Bir_Kontrol_Alani_Olusturma\">K\u0131rpma \u00d6zelli\u011fi de Olan Dosya Y\u00fckleyicisi \u015eeklinde Bir Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>K\u0131rpma \u00f6zelli\u011fi de olan bir resim y\u00fckleyici demek, y\u00fckledi\u011fimiz veya k\u00fct\u00fcphaneden se\u00e7ti\u011fimiz resmi, arg\u00fcmanlarda belirtti\u011fimiz oranda k\u0131rparak kullanmak demektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'ust_kisim_gorseli'<\/code> ad\u0131nda bir ayar ekler. Sonra bu ayar\u0131 ile ba\u011flant\u0131l\u0131 olarak k\u0131rpma \u00f6zelli\u011fi olan bir resim y\u00fckleyicisi olu\u015fturur. Bu resim y\u00fckleyicisi bizim kontrol alan\u0131m\u0131zd\u0131r ve resim dosyalar\u0131n\u0131 y\u00fcklerken veya k\u00fct\u00fcphaneden se\u00e7erken belli bir orana g\u00f6re k\u0131rpma i\u015flemi yapar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Tepe Resmi\n$wp_customize->add_setting( 'ust_kisim_gorseli',\n\tarray(\n\t\t'default'    => '',\n\t) \n);      \n\n\/\/ KONTROL - Tepe resmi\n$wp_customize->add_control( new WP_Customize_Cropped_Image_Control(\n\t$wp_customize,\n\t'ust_kisim_gorseli',\n\t\tarray(\n\t\t\t'label'      => __( 'Tepe Resmi', 'textdomain' ),\n\t\t\t'description'=> __( 'Blog sayfas\u0131n\u0131n tepesine konacak resimdir.', 'textdomain' ),\n\t\t\t'width' => 200,\n\t\t\t'height' => 200,\n\t\t\t'settings'   => 'ust_kisim_gorseli',\n\t\t\t'priority'   => 5,\n\t\t\t'section'    => 'blog-secenekleri',\n\t\t) \n\t) \n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"246\" height=\"116\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-image-upload.jpg\" alt=\"\" class=\"wp-image-4634\"\/><figcaption>Customizer API &#8211; K\u0131rpmal\u0131 Resim Y\u00fckleyicisi Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar, se\u00e7ti\u011fimiz ve k\u0131rpt\u0131\u011f\u0131m\u0131z resmin <code>id<\/code> de\u011ferini getirir. Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'ust_kisim_gorseli'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bir_Baska_Dosya_Yukleyicisi_Kontrol_Alani\">Bir Ba\u015fka Dosya Y\u00fckleyicisi Kontrol Alan\u0131<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kontrol alan\u0131, y\u00fcklemek istedi\u011fimiz dosyan\u0131n <em>mime tipini<\/em> belirtmemize imkan verir.<\/p>\n\n\n\n<p>Sadece resim (<em>image<\/em>) tipindeki dosyalar\u0131 y\u00fckler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ KONTROL - Tepe resmi\n$wp_customize->add_control( new WP_Customize_Media_Control(\n\t$wp_customize,\n\t'ust_kisim_gorseli',\n\t\tarray(\n\t\t\t'label'      => __( 'Tepe Resmi', 'textdomain' ),\n\t\t\t'description'=> __( 'Blog sayfas\u0131n\u0131n tepesine konacak resimdir.', 'textdomain' ),\n\t\t\t'settings'   => 'ust_kisim_gorseli',\n\t\t\t'priority'   => 5,\n\t\t\t'section'    => 'blog-secenekleri',\n                        'mime_type' => 'image',\n\t\t) \n\t) \n);<\/code><\/pre>\n\n\n\n<p>Sadece <em>video<\/em> tipindeki dosyalar\u0131 y\u00fckler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ KONTROL - Tepe resmi\n$wp_customize->add_control( new WP_Customize_Media_Control(\n\t$wp_customize,\n\t'ust_kisim_gorseli',\n\t\tarray(\n\t\t\t'label'      => __( 'Tepe Resmi', 'textdomain' ),\n\t\t\t'description'=> __( 'Blog sayfas\u0131n\u0131n tepesine konacak resimdir.', 'textdomain' ),\n\t\t\t'settings'   => 'ust_kisim_gorseli',\n\t\t\t'priority'   => 5,\n\t\t\t'section'    => 'blog-secenekleri',\n                        'mime_type' => 'video',\n\t\t) \n\t) \n);<\/code><\/pre>\n\n\n\n<p><code>WP_Customize_Media_Control()<\/code> s\u0131n\u0131f\u0131, ortam dosyalar\u0131n\u0131n <code>id<\/code> de\u011ferlerini d\u00f6nd\u00fcr\u00fcr. Yani <code>get_theme_mod('ust_kisim_gorseli')<\/code> fonksiyonu, ortam dosyas\u0131n\u0131n <code>id<\/code> de\u011ferini getirir.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Number_Tipinde_Kontrol_Alani_Olusturma\">Number Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'number_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>number<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Number Ayar\u0131\n$wp_customize->add_setting( 'number_denemesi', \n\tarray(\n                'capability' => 'edit_theme_options',\n\t\t'default' => 5,\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Number Tipinde Kontrol\n$wp_customize->add_control( 'number_denemesi',\n\tarray(\n\t\t'label' => __( 'Bir Say\u0131', 'textdomain' ),\n\t\t'description' => __( 'Bir say\u0131 giriniz.', 'textdomain' ),\n\t\t'type' => 'number',\n\t\t'section' => 'blog-secenekleri',\n\t\t'priority'   => 0,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"249\" height=\"110\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/Customizer-API-add-control-number.jpg\" alt=\"\" class=\"wp-image-4643\"\/><figcaption>Customizer API &#8211; Number Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'number_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Range_Tipinde_Kontrol_Alani_Olusturma\">Range Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'range_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>range<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Range Ayar\u0131\n$wp_customize->add_setting( 'range_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => 5,\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Range Tipinde Kontrol\n$wp_customize->add_control(\n\t'range_denemesi',\n\tarray(\n\t\t'label'       => __('Say\u0131 Se\u00e7in'),\n\t\t'description' => __('0 ile 100 aras\u0131nda ve 5\\'in kat\u0131 olan bir say\u0131 se\u00e7iniz.'),\n\t\t'type' => 'range',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'range_denemesi',\n\t\t'input_attrs' => array(\n\t\t\t'min' => 0,\n\t\t\t'max' => 100,\n\t\t\t'step' => 5,\n\t\t),\n               'priority'   => 25, \n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"248\" height=\"120\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-range-kontrol.jpg\" alt=\"\" class=\"wp-image-4647\"\/><figcaption>Customizer API &#8211; Range Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'range_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<p>Olu\u015fturdu\u011fumuz <code>range<\/code> alan\u0131nda, se\u00e7ti\u011fimiz say\u0131y\u0131 g\u00f6remiyor olmam\u0131z dikkatinizi \u00e7ekmi\u015ftir. Benim de dikkatimi \u00e7ekti ve a\u015fa\u011f\u0131daki kod ile sorunu \u00e7\u00f6zd\u00fcm. Bu kod, yukar\u0131da olu\u015fturdu\u011fumuz <code>range<\/code> alan\u0131nda \u00e7al\u0131\u015f\u0131r. Kodu teman\u0131z\u0131n <code>functions.php<\/code> dosyas\u0131na yap\u0131\u015ft\u0131rabilirsiniz:<\/p>\n\n\n\n<p><code>functions.php<\/code> dosyas\u0131na eklenebilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function customizer_range_secimini_gosterir() { ?>\n    \n\t&lt;script type='text\/javascript' id='cusotmizer-icin'>\n\t\t(function ($) {\n\t\t\t$(document).ready(function ($) {\n\n\t\t\t\t\/\/ AYARLAR\n\t\t\t\tvar ayar_id = 'range_denemesi'; \/\/ sadece buray\u0131 de\u011fi\u015ftirmeniz yeterli\n\t\t\t\tvar range_span_id = 'range_id';\n\t\t\t\tvar range_span_class = 'range_css_sinifi';\n\t\t\t\tvar kontrol = $('#_customize-input-'+ayar_id);\n\t\t\t\tvar deger = kontrol.val();\n\n\t\t\t\t\/\/ BURAYI ELLEMEY\u0130N\n\t\t\t\tkontrol.before('&lt;br \/>&lt;span id=\"'+range_span_id+'\" class=\"'+range_span_class+'\">'+deger+'&lt;\/span>&lt;br \/>&lt;br \/>');\n\t\t\t\tkontrol.on('change', function () {\n\t\t\t\t\tvar deger = kontrol.val();\n\t\t\t\t\t$('#'+range_span_id).text(deger);\n\t\t\t\t});\n\t\t\t})\n\t\t})(jQuery);\n\t&lt;\/script>\n&lt;?php\n}\nadd_action( 'customize_controls_print_footer_scripts', 'customizer_range_secimini_gosterir' );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kodu ekledikten sonra, kontrol alan\u0131 \u015fu \u015fekilde olacakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"173\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-range-kontrol-live.jpg\" alt=\"\" class=\"wp-image-4650\"\/><figcaption>Customizer API &#8211; Range Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131daki kodda, sadece <code>var ayar_id= 'range_denemesi'<\/code> ifadesindeki, <code>'range_denemesi<\/code>&#8216; de\u011ferini, kulland\u0131\u011f\u0131n\u0131z <code>$ayar_id<\/code> de\u011feri ile de\u011fi\u015ftirmeniz yeterli olacakt\u0131r. Ayr\u0131ca, <code>'range_secimi'<\/code> \u015feklindeki CSS s\u0131n\u0131f\u0131n\u0131 kullanarak, se\u00e7im sonucunu g\u00f6steren <code>&lt;span&gt;<\/code> eleman\u0131n\u0131 \u015fekillendirebilirsiniz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"URL_Internet_Adresi_Tipinde_Kontrol_Alani_Olusturma\">URL (\u0130nternet Adresi) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'url_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>url<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - URL Ayar\u0131\n$wp_customize->add_setting( 'url_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => 5,\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - URL Tipinde Kontrol\n$wp_customize->add_control(\n\t'url_denemesi',\n\tarray(\n\t\t'label'       => __('Adres Girin'),\n\t\t'description' => __('Bir internet adresi girin.'),\n\t\t'type' => 'url',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'url_denemesi',\n\t\t'input_attrs' => array(\n\t\t\t'placeholder' => 'https:\/\/ornek.com',\n\t\t),\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"249\" height=\"106\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-url-control.jpg\" alt=\"\" class=\"wp-image-4657\"\/><figcaption>Customizer API &#8211; Range Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131 \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'url_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Tel_Telefon_Numarasi_Tipinde_Kontrol_Alani_Olusturma\">Tel (Telefon Numaras\u0131) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'tel_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>tel<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - TEL  Ayar\u0131\n$wp_customize->add_setting( 'tel_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => '',\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - TEL Tipinde Kontrol\n$wp_customize->add_control(\n\t'tel_denemesi',\n\tarray(\n\t\t'label'       => __('Telefon Numaras\u0131'),\n\t\t'description' => __('\u00d6n\u00fcnde s\u0131f\u0131r olmadan bir telefon numaras\u0131 giriniz.'),\n\t\t'type' => 'tel',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'tel_denemesi',\n\t\t'input_attrs' => array(\n\t\t\t'placeholder' => 'xxx xxx xx xx',\n\t\t),\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"248\" height=\"123\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-tel-control.jpg\" alt=\"\" class=\"wp-image-4660\"\/><figcaption>Customizer API &#8211; Tel Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'tel_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Email_E-mail_Adresi_Tipinde_Kontrol_Alani_Olusturma\">Email (E-mail Adresi) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'email_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>email<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - EMail  Ayar\u0131\n$wp_customize->add_setting( 'email_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => '',\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - EMail Tipinde Kontrol\n$wp_customize->add_control(\n\t'email_denemesi',\n\tarray(\n\t\t'label'       => __('E-mail Adresi'),\n\t\t'description' => __('E-mail adresinizi giriniz.'),\n\t\t'type' => 'email',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'email_denemesi',\n\t\t'input_attrs' => array(\n\t\t\t'placeholder' => 'e_mail@aderesim.com',\n\t\t),\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"111\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-email-control.jpg\" alt=\"\" class=\"wp-image-4663\"\/><figcaption>Customizer API &#8211; Email Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'email_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Time_Gunun_Saati_Tipinde_Kontrol_Alani_Olusturma\">Time (G\u00fcn\u00fcn Saati) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'time_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>time<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Time  Ayar\u0131\n$wp_customize->add_setting( 'time_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => '',\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Time Tipinde Kontrol\n$wp_customize->add_control(\n\t'time_denemesi',\n\tarray(\n\t\t'label'       => __('Saat'),\n\t\t'description' => __('Saat giriniz.'),\n\t\t'type' => 'time',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'time_denemesi',\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"249\" height=\"111\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-time-control.jpg\" alt=\"\" class=\"wp-image-4666\"\/><figcaption>Customizer API &#8211; Time Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'time_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Week_Hafta_Tipinde_Kontrol_Alani_Olusturma\">Week (Hafta) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'week_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>week<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - Week  Ayar\u0131\n$wp_customize->add_setting( 'week_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => '',\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Week Tipinde Kontrol\n$wp_customize->add_control(\n\t'week_denemesi',\n\tarray(\n\t\t'label'       => __('Hafta'),\n\t\t'description' => __('Ka\u00e7\u0131nc\u0131 hafta olu\u011funu belirtiniz.'),\n\t\t'type' => 'week',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'week_denemesi',\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"114\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-week-control.jpg\" alt=\"\" class=\"wp-image-4669\"\/><figcaption>Customizer API &#8211; Week Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'time_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Date_Tarih_Tipinde_Kontrol_Alani_Olusturma\">Date (Tarih) Tipinde Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, Customizer API ile, <code>'tarih_denemesi'<\/code> ad\u0131nda bir ayar olu\u015fturur ve diledi\u011fimizde bu ayar\u0131 de\u011fi\u015ftirebilmek i\u00e7in de tipi <code>tarih<\/code> olan bir kontrol alan\u0131 olu\u015fturur.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - DATE  Ayar\u0131\n$wp_customize->add_setting( 'date_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => '',\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - DATE Tipinde Kontrol\n$wp_customize->add_control(\n\t'date_denemesi',\n\tarray(\n\t\t'label'       => __('Tarih'),\n\t\t'description' => __('Bir tarih belirtiniz.'),\n\t\t'type' => 'date',\n\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'date_denemesi',\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Bu kodu, yukar\u0131da olu\u015fturdu\u011fumuz panel ve  bu panelin b\u00f6l\u00fcm\u00fcne dahil edersek (<code>customizer_alanlari()<\/code> fonksiyonunun sonuna) \u015f\u00f6yle bir kontrol alan\u0131 olu\u015facakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"269\" height=\"334\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-date-control.jpg\" alt=\"\" class=\"wp-image-4671\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-date-control.jpg 269w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-date-control-242x300.jpg 242w\" sizes=\"auto, (max-width: 269px) 100vw, 269px\" \/><figcaption>Customizer API &#8211; Week Tipinde Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu ayar\u0131, \u015fablon dosyalar\u0131m\u0131za veya diledi\u011fimiz ba\u015fka bir yere getirmek i\u00e7in <code>&lt;?php get_theme_mod( 'date_denemesi'); ?&gt;<\/code> kodunu kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Kontrol_Alanina_CSS_Ekleme\">Kontrol Alan\u0131na CSS Ekleme<\/span><\/h2>\n\n\n\n<p>Kontrol alanlar\u0131na, CSS eklemek i\u00e7n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'input_attrs' => array(\n\t\t\t'class' => 'javascripte-lazim',\n\t\t\t'style' => 'border: 3px solid #900',\n\t\t),<\/code><\/pre>\n\n\n\n<p>\u00d6rnek olarak, <code>'date'<\/code> tipinde bir kontrol alan\u0131na <code>class<\/code> ve <code>style<\/code> \u00f6zellikleri eklemek istersek \u015f\u00f6yle bir kod kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ KONTROL - DATE Tipinde Kontrol\n$wp_customize->add_control(\n\t'date_denemesi',\n\tarray(\n\t\t'label'       => __('Tarih'),\n\t\t'description' => __('Bir tarih belirtiniz.'),\n\t\t'type' => 'date',\n\t\t'input_attrs' => array(\n\t\t\t'class' => 'my-custom-class-for-js',\n\t\t\t'style' => 'border: 3px solid #900; background-color:yellow;',\n\t\t),\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'date_denemesi',\n\t\t'priority'   => 1,\n\t)\n);<\/code><\/pre>\n\n\n\n<p>Olu\u015fturdu\u011fumuz kontrol alan\u0131 \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"246\" height=\"116\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-date-kontrol.jpg\" alt=\"\" class=\"wp-image-4674\"\/><figcaption>Customizer API &#8211; CSS<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Ayarlarda_8216sanitize_callback8217_Argumani\">Ayarlarda &#8216;sanitize_callback&#8217; Arg\u00fcman\u0131<\/span><\/h2>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<p>Customizer API ile bir ayar eklerken, bu ayar i\u00e7in bir de kontrol alan\u0131 olu\u015fturulur. Kontrol alan\u0131 olu\u015fturmaktaki ama\u00e7, bir form eleman\u0131 yard\u0131m\u0131 ile ayar\u0131n de\u011ferini de\u011fi\u015ftirebilmektedir. Kontrol alan\u0131ndaki bu form eleman\u0131na girilen de\u011ferlerin bir g\u00fcvenlik s\u00fczgecinden ge\u00e7mesi i\u00e7in, ayar\u0131 olu\u015ftururken kullan\u0131lan <code>'sanitize_callback'<\/code> arg\u00fcman\u0131 kullan\u0131labilir. Bu arg\u00fcman, bir fonksiyon ad\u0131 kabul eder. Form alan\u0131na girilecek de\u011feri g\u00fcvenlik s\u00fczgecinden ge\u00e7irmek i\u00e7in bir fonksiyon olu\u015fturabilir ve bu olu\u015fturdu\u011fumuz bu fonksiyonun ad\u0131n\u0131 bu arg\u00fcmana de\u011fer olarak verebiliriz.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da el yap\u0131m\u0131 bir <code>'sanitize_callback'<\/code> fonksiyonu \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - URL Ayar\u0131\n$wp_customize->add_setting( 'url_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => 5,\n\t\t'sanitize_callback' => 'url_degerini_kontrol_et',\n\t) \n);\n\n\/\/ KONTROL - URL Tipinde Kontrol\n$wp_customize->add_control(\n\t'url_denemesi',\n\tarray(\n\t\t'label'       => __('Adres Girin'),\n\t\t'description' => __('Bir internet adresi girin.'),\n\t\t'type' => 'url',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'url_denemesi',\n\t\t'input_attrs' => array(\n\t\t\t'placeholder' => 'https:\/\/ornek.com',\n\t\t),\n\t\t'priority'   => 1,\n\t)\n);\n\n\/\/ sanitize_callback fonksiyonu\nfunction url_degerini_kontrol_et( $url ) {\n  return esc_url_raw( $url );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Kontrollerde_8216active_callback8217_Argumani\">Kontrollerde &#8216;active_callback&#8217; Arg\u00fcman\u0131<\/span><\/h2>\n\n\n\n<p>Olu\u015fturdu\u011fumuz kontrol alan\u0131, teman\u0131n sadece ana sayfas\u0131n\u0131 ilgilendiriyorsa, canl\u0131 \u00f6n izlemede, teman\u0131n ana sayfa de\u011fil de ba\u015fka bir sayfa varken g\u00f6r\u00fcnmesi hi\u00e7 de gerekli de\u011fildir. Bu durumda, <code>'active_callback'<\/code> arg\u00fcman\u0131na, ayar\u0131n sadece ana sayfa i\u00e7in kullan\u0131laca\u011f\u0131n\u0131 belirten bir WordPress ko\u015ful fonksiyonu kullanabiliriz. A\u015fa\u011f\u0131da <code>is_front_page<\/code> fonksiyonu \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - URL Ayar\u0131\n$wp_customize->add_setting( 'url_denemesi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => 5,\n\t\t'sanitize_callback' => 'url_degerini_kontrol_et',\n\t) \n);\n\n\/\/ KONTROL - URL Tipinde Kontrol\n$wp_customize->add_control(\n\t'url_denemesi',\n\tarray(\n\t\t'label'       => __('Adres Girin'),\n\t\t'description' => __('Bir internet adresi girin.'),\n\t\t'type' => 'url',\n\t\t'section'     => 'blog-secenekleri',\n\t\t'settings'    => 'url_denemesi',\n\t\t'input_attrs' => array(\n\t\t\t'placeholder' => 'https:\/\/ornek.com',\n\t\t),\n\t\t'priority'   => 1,\n                'active_callback' => 'is_front_page',\n\t)\n);\n\n\/\/ sanitize_callback fonksiyonu\nfunction url_degerini_kontrol_et( $url ) {\n  return esc_url_raw( $url );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Bize_Ozel_Customizer_API_Alanlari\">Bize \u00d6zel Customizer API Alanlar\u0131<\/span><\/h2>\n\n\n\n<p>WordPress&#8217;in block edit\u00f6r\u00fcnde <em>tekrar kullan\u0131labilir blocklar<\/em> olu\u015fturmak gibi, Customizer API ile de kolayca, kendimize \u00f6zel alanlar olu\u015fturabiliriz. Bunun i\u00e7in Customizer API uygulamas\u0131na ait \u015fu s\u0131n\u0131flar\u0131 geni\u015fletmemiz yeterlidir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code><a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_customize_control\/\" target=\"_blank\">WP_Customize_Control<\/a><\/code> : \u00d6zel kontrol alanlar\u0131 olu\u015fturmak i\u00e7in bu s\u0131n\u0131f\u0131 geni\u015fletmemiz gerekir.<\/li><li><code><a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_customize_section\/\" target=\"_blank\">WP_Customize_Section<\/a><\/code> :  \u00d6zel b\u00f6l\u00fcmler olu\u015fturmak i\u00e7in bu s\u0131n\u0131f\u0131 geni\u015fletmemiz gerekir.<\/li><li><code><a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_customize_panel\/\" target=\"_blank\">WP_Customize_Panel<\/a><\/code>&nbsp;: \u00d6zel paneller olu\u015fturmak i\u00e7in bu s\u0131n\u0131f\u0131 geni\u015fletmemiz gerekir.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kendimize_Ozel_Bir_Kontrol_Alani_Olusturma\">Kendimize \u00d6zel Bir Kontrol Alan\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>Customizer API, sitemizin arka plan\u0131nda \u00e7al\u0131\u015fan bir uygulama olu\u011fu i\u00e7in, kontrol alanlar\u0131 d\u0131\u015f\u0131nda \u00f6zel bir alan olu\u015fturmaya \u00e7ok da gerek yoktur asl\u0131nda. Bu y\u00fczden, Customizer API ile kendimize \u00f6zel bir alan olu\u015fturmak i\u00e7in, daha \u00e7ok <em>WP_Customize_Control<\/em> s\u0131n\u0131f\u0131n\u0131 geni\u015fletiriz. Bu s\u0131n\u0131fta, diledi\u011fimiz fonksiyonu tekrar d\u00fczenleyebiliriz fakat, \u00f6zel bir kontrol alan\u0131 olu\u015fturmak i\u00e7in i\u00e7in <em>WP_Customize_Control<\/em> s\u0131n\u0131f\u0131n\u0131n <em>render_content()<\/em> metodunu kullan\u0131r\u0131z. <em>render_content()<\/em> metodu, s\u0131f\u0131rdan bir kontrol alan\u0131 olu\u015ftural\u0131m diye konmu\u015f bir metottur.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, temam\u0131zda bulunan kategorilerden birini se\u00e7mek i\u00e7in olu\u015fturulmu\u015f bir kontrol alan\u0131 \u00f6rne\u011fi verilmi\u015ftir.<\/p>\n\n\n\n<p>Bu kodu, <code>functions.php<\/code> dosyas\u0131nda kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if( class_exists( 'WP_Customize_Control' ) ) {\n\tclass Sitecenneti_Kategori_Secimi extends WP_Customize_Control {\n\n\t\tpublic $type = 'kategori_secimi';\n\t\tpublic $tasarimci_notu = 'Bu alan standart bir kontrol alan\u0131 de\u011fildir.'; \/\/ Varsay\u0131lan not\n\t\t\n\t\t\/**\n\t\t* Render the control's content.\n\t\t*\/\n\t\tpublic function render_content() {\n\t\t\t\n\t\t\t\/\/ Kay\u0131tl\u0131 Datalar\u0131 Getir\n\t\t\t$value = $this->value(); \/\/ \u00d6nceki se\u00e7im -yoksa varsay\u0131lan de\u011fer-\n\t\t\t$baslik = $this->label; \/\/ \n\t\t\t$aciklama = $this->description;\n\t\t\t\n\t\t\t\/\/ Kategori Listesi\n\t\t\t$kategoriler = get_categories(); ?>\n\t\t\t\n\t\t\t&lt;!-- HTML \/ Kontrol Eleman\u0131 -->\n\t\t\t&lt;p>&lt;hr \/>&lt;\/p>\n\t\t\t&lt;p id=\"tasarimci_notu\">&lt;?php echo $this->tasarimci_notu; ?>&lt;\/p>\n\t\t\t&lt;span class=\"customize-control-title\">&lt;?php echo $baslik; ?>&lt;\/span>\n\t\t\t&lt;span id=\"_customize-description-&lt;?php echo $this->id; ?>\" class=\"description customize-control-description\">&lt;?php echo $aciklama; ?>&lt;\/span>\n\t\t\t\t&lt;select &lt;?php $this->link(); ?> id=\"_customize-input-&lt;?php echo $this->id; ?>\" aria-describedby=\"_customize-description-&lt;?php echo $this->id; ?>\" name=\"_customize-layout-&lt;?php echo $this->id; ?>\">\n\t\t\t\t\t&lt;option value=\"0\">&lt;?php _e('\u2014 Se\u00e7 \u2014', 'textdomain'); ?> &lt;\/option>\n\t\t\t\t\t&lt;?php\n\t\t\t\t\tforeach($kategoriler as $kategori) {\n\t\t\t\t\t\t$selected = '';\n\t\t\t\t\t\tif( $kategori->term_id == $value ) $selected = 'selected'; ?>\n\t\t\t\t\t\t&lt;option value=\"&lt;?php echo $kategori->term_id; ?>\" &lt;?php echo $selected; ?>>&lt;?php echo $kategori->name; ?>&lt;\/option>\n\t\t\t\t\t\t\n\t\t\t\t\t&lt;?php } ?>\n\t\t\t\t&lt;\/select>&lt;!-- HTML \/ Kontrol Eleman\u0131 -->\n\t\t\t\t&lt;p>&lt;hr \/>&lt;\/p>\n\t\t&lt;?php }\n \t}\n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kodun \u00f6nemli baz\u0131 par\u00e7alar\u0131n\u0131n anlam\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php $this->link(); ?><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131, form eleman\u0131na <code>data-customize-setting-link=\"kategori_secimi\"<\/code> \u015feklinde bir \u00f6zellik ekler ve bu \u00f6zellik ile Customizer API, kontrol alan\u0131nda bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131m\u0131zda bunu anlar ve &#8220;<em>Yay\u0131mla<\/em>&#8221; butonunu g\u00f6sterir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$this->id<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131, olu\u015fturdu\u011fumuz kontrol alan\u0131n\u0131n kimli\u011fidir, <code>id<\/code> de\u011feridir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public $tasarimci_notu = 'Bu alan standart bir kontrol alan\u0131 de\u011fildir.'; \/\/ Varsay\u0131lan not<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131 ile, olu\u015fturdu\u011fumuz kontrol alan\u0131 i\u00e7in, <code>'tasarimci_notu'<\/code> anahtar\u0131 ile yeni bir arg\u00fcman olu\u015fturmu\u015f ve bu arg\u00fcman i\u00e7in de varsay\u0131lan bir de\u011fer atam\u0131\u015f olduk. Arg\u00fcman\u0131n varsay\u0131lan de\u011ferini dilersek, kontrol alan\u0131n\u0131 kullan\u0131rken olu\u015fturdu\u011fumuz <code>$wp_customize-&gt;add_control()<\/code> metodunda de\u011fi\u015ftirebiliriz. A\u015fa\u011f\u0131da, bunu nas\u0131l yapt\u0131\u011f\u0131m\u0131z g\u00f6receksiniz.<\/p>\n\n\n\n<p>Bu arg\u00fcmandaki amac\u0131m\u0131z, kullan\u0131c\u0131n\u0131n kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131n\u0131n \u00f6n\u00fcne ge\u00e7mektir. \u00c7\u00fcnk\u00fc, WordPress&#8217;e a\u015fina olan kullan\u0131c\u0131lar, standart olarak kullan\u0131labilen Customizer API kontrollerini bilirler.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>name=\"_customize-layout-&lt;?php echo $this->id; ?>\"<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131, olu\u015fturdu\u011fumuz kontrol alan\u0131n\u0131n ad\u0131d\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>aria-describedby=\"_customize-description-&lt;?php echo $this->id; ?>\"<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131, kontrol alan\u0131na ait a\u00e7\u0131klama k\u0131sm\u0131n\u0131n <code>id<\/code> de\u011feridir. Bu kod zorunlu de\u011fildir, olu\u015fturdu\u011fumuz alan\u0131n <a rel=\"noreferrer noopener\" aria-label=\"eri\u015filebilir (accessible) (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-19-erisilebilirlik-ulasilabilirlik-accessibility\/\" target=\"_blank\">eri\u015filebilir (accessible)<\/a> olmas\u0131na katk\u0131 sa\u011flar.<\/p>\n\n\n\n<p>Yukar\u0131da olu\u015fturdu\u011fumuz kontrol alan\u0131n\u0131 kullanmak i\u00e7in \u015fu kodu kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ AYAR - \u00d6zel Kontrol Alan\u0131 \u0130\u00e7in\n$wp_customize->add_setting( 'kategorisi', \n\tarray(\n\t\t'capability' => 'edit_theme_options',\n\t\t'default' => 0,\n\t\t'sanitize_callback' => '',\n\t) \n);\n\n\/\/ KONTROL - Bize \u00d6zel Bir Kontrol Alan\u0131\n$wp_customize->add_control( new Sitecenneti_Kategori_Secimi( \n\t$wp_customize,\n\t\t'kategorisi',\n\t\tarray(\n\t\t\t'label'       => __('Kategori', 'textdomain'),\n\t\t\t'description' => __('Bir kategori belirtiniz.', 'textdomain'),\n\t\t\t'tasarimci_notu' => __('Bu alan WordPress ile gelen standart bir kontrol alan\u0131 de\u011fildir.', 'textdomain'),\n\t\t\t'type' => 'kategori_secimi',\n\t\t\t'section'     => 'blog-secenekleri',\n\t\t\t'settings'    => 'kategorisi',\n\t\t\t'priority'   => 1,\n\t\t) \n\t)\n);<\/code><\/pre>\n\n\n\n<p>Olu\u015fturdu\u011fumuz \u00f6zel kontrol alan\u0131 \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"175\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/08\/customize-api-custom-control.jpg\" alt=\"\" class=\"wp-image-4686\"\/><figcaption>Customizer API &#8211; Kendimize \u00d6zel Kontrol Alan\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Cusotmizer_API_Alanlarinda_Kullanici_Arayuzu_UI_Standartlari\">Cusotmizer API Alanlar\u0131nda Kullan\u0131c\u0131 Aray\u00fcz\u00fc (UI) Standartlar\u0131<\/span><\/h2>\n\n\n\n<p>\u00d6zel Customizer API alan\u0131 olu\u015ftururken, di\u011fer alanlar ile g\u00f6r\u00fcn\u00fcm uyumu a\u00e7\u0131s\u0131ndan baz\u0131 CSS de\u011ferlerine sad\u0131k kalmam\u0131z gerekir. Bu de\u011ferler \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Beyaz arkaplan renkleri, sadece men\u00fclerde ve <code>input<\/code> alanlar\u0131nda kullan\u0131l\u0131r.<\/li><li>Kontrol alanlar\u0131n\u0131n genel arkaplan rengi, <code>#eee<\/code> dir.<\/li><li>Men\u00fc elemanlar\u0131na <code>1px #ddd<\/code> de\u011ferinde kenarl\u0131klar verilir.<\/li><li>HTML elemanlar\u0131 aras\u0131na <code>15px<\/code> de\u011ferinde bir bo\u015fluk (<code>margin<\/code>)  konulur.<\/li><li>Men\u00fc elemanlar\u0131n\u0131n, <em>focus<\/em> veya <em>hover<\/em> durumlar\u0131nda, <code>4px<\/code> kal\u0131nl\u0131\u011f\u0131nda ve <code>#0073aa<\/code> renginde bir sol kenarl\u0131\u011f\u0131 olur.<\/li><li>Men\u00fc textlerinin normal rengi <code>#555d66<\/code> de\u011ferindedir, hover ve focus durumlar\u0131ndaki rengi de <code>#0073aa<\/code>&nbsp;de\u011ferindedir.<\/li><\/ul>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>WordPress temalar\u0131ndaki kontrol\u00fc artt\u0131rmak i\u00e7in kullan\u0131lan Customizer API uygulamas\u0131na ait temel alanlar , resimlerle desteklenerek ve ayr\u0131nt\u0131l\u0131 bir \u015fekilde a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[216],"class_list":["post-4553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-customizer-api"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=4553"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4553\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=4553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=4553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=4553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}