{"id":4821,"date":"2019-10-04T21:50:32","date_gmt":"2019-10-04T18:50:32","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=4821"},"modified":"2019-11-19T19:18:53","modified_gmt":"2019-11-19T16:18:53","slug":"5-3-customizer-javascript-api","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-3-customizer-javascript-api\/","title":{"rendered":"5.3 Customizer JavaScript API"},"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=\"#On_Izleme_Bolumu_Mu_Customizer_API_Alanlari_Mi\"><span class=\"toc_number toc_depth_1\">1<\/span> \u00d6n \u0130zleme B\u00f6l\u00fcm\u00fc M\u00fc? Customizer API Alanlar\u0131 M\u0131?<\/a><\/li><li><a href=\"#Customizer_API_Alanlarinda_Customizer_JavaScript_API_Kullanimi\"><span class=\"toc_number toc_depth_1\">2<\/span> Customizer API Alanlar\u0131nda Customizer JavaScript API Kullan\u0131m\u0131<\/a><ul><li><a href=\"#Customizer_API_Alanlari_Arasinda_Baglanti_Kurma\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Customizer API Alanlar\u0131 Aras\u0131nda Ba\u011flant\u0131 Kurma<\/a><\/li><li><a href=\"#Panel_Bolum_ve_Kontrolleri_AktiveDeaktive_Etmek\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Panel B\u00f6l\u00fcm ve Kontrolleri Aktive\/Deaktive Etmek<\/a><\/li><li><a href=\"#Costomizer_API_Alanina_Focuslama\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Costomizer API Alan\u0131na Focuslama<\/a><\/li><li><a href=\"#Customizer_API_Alanlarinin_Menu_Siralamasi_Priority\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Customizer API Alanlar\u0131n\u0131n Men\u00fc S\u0131ralamas\u0131 (Priority)<\/a><\/li><li><a href=\"#Customizer_API_Alanlari_Icin_JavaScript_Ornekleri\"><span class=\"toc_number toc_depth_2\">2.5<\/span> Customizer API Alanlar\u0131 \u0130\u00e7in JavaScript \u00d6rnekleri<\/a><ul><li><a href=\"#1-_Customizer_JavaScript_API_ile_alanlar_olusturma\"><span class=\"toc_number toc_depth_3\">2.5.1<\/span> 1- Customizer JavaScript API ile alanlar olu\u015fturma:<\/a><\/li><li><a href=\"#2-_Customizer_JavaScript_API_ile_olusturulan_bir_kontrol_alanina_event_ekleme\"><span class=\"toc_number toc_depth_3\">2.5.2<\/span> 2- Customizer JavaScript API ile olu\u015fturulan bir kontrol alan\u0131na event ekleme<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#Temanin_Canli_On_Izleme_Bolumunde_Preview_Customizer_JavaScript_API_Kullanimi\"><span class=\"toc_number toc_depth_1\">3<\/span> Teman\u0131n Canl\u0131 \u00d6n \u0130zleme B\u00f6l\u00fcm\u00fcnde (Preview) Customizer JavaScript API Kullan\u0131m\u0131<\/a><ul><li><a href=\"#Bir_JavaScript_Dosyasi_Olustur\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Bir JavaScript Dosyas\u0131 Olu\u015ftur<\/a><\/li><li><a href=\"#Canli_On_Izleme_Alaninda_Customizer_JavaScript_API_Ornekleri\"><span class=\"toc_number toc_depth_2\">3.2<\/span> Canl\u0131 \u00d6n \u0130zleme Alan\u0131nda Customizer JavaScript API \u00d6rnekleri<\/a><ul><li><a href=\"#Selective_Refresh_Ekleme\"><span class=\"toc_number toc_depth_3\">3.2.1<\/span> Selective Refresh Ekleme<\/a><\/li><li><a href=\"#Temanin_On_Izlemesinde_Canli_Duzenleme_Butonu_Olusturma\"><span class=\"toc_number toc_depth_3\">3.2.2<\/span> Teman\u0131n \u00d6n \u0130zlemesinde Canl\u0131 D\u00fczenleme Butonu Olu\u015fturma<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n\n<p><strong>Customizer JavaScript API<\/strong> ara y\u00fcz\u00fc, kaynak bak\u0131m\u0131ndan \u00e7ok zengin bir konu de\u011fildir. Bu uygulamaya i\u015fi d\u00fc\u015fenler zannediyorum bu durumu a\u00e7\u0131k bir \u015fekilde fark etmi\u015flerdir. Birazdan okuyaca\u011f\u0131n\u0131z yaz\u0131, olduk\u00e7a uzun bir ara\u015ft\u0131rma sonucu ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Tabi \u015funu da hat\u0131rlatmakta fayda var, en iyi kaynak, kaynak kodlar\u0131n\u0131n kendisidir. Bu y\u00fczden, kaynak kodlar\u0131n\u0131 merak edenler, WordPress kurulumundaki <a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/core.trac.wordpress.org\/browser\/trunk\/src\/js\/_enqueues\/wp\/customize\/controls.js\" target=\"_blank\">wp-admin\/js\/customize-controls.js<\/a> dosyas\u0131na bakabilirler.<\/p>\n\n\n\n<p><strong>Customizer JavaScript API<\/strong>, y\u00f6netim panelinden gidilen <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda kullan\u0131lan bir ara y\u00fczd\u00fcr. Bu ara y\u00fcz ile, <a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\">Customizer API alanlar\u0131<\/a> olu\u015fturabiliriz, bu alanlar\u0131 saklayabilir, ko\u015fullu i\u015flemler yapabilir veya temam\u0131z\u0131n canl\u0131 \u00f6n izleme k\u0131sm\u0131na bir tak\u0131m \u00f6zellikler ekleyebiliriz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"On_Izleme_Bolumu_Mu_Customizer_API_Alanlari_Mi\">\u00d6n \u0130zleme B\u00f6l\u00fcm\u00fc M\u00fc? Customizer API Alanlar\u0131 M\u0131?<\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"473\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/11\/customizer-api-1.png\" alt=\"Customizer JavaScritp API\" class=\"wp-image-4936\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/11\/customizer-api-1.png 705w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/11\/customizer-api-1-300x201.png 300w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><figcaption>Customizer API &#8211; Tema \u00d6zelle\u015ftirme sayfas\u0131<\/figcaption><\/figure>\n\n\n\n<p>Biliyorsunuz, bir WordPress temas\u0131n\u0131n \u00f6zelle\u015ftirme sayfas\u0131n\u0131 a\u00e7t\u0131\u011f\u0131m\u0131zda, kar\u015f\u0131m\u0131za \u00e7\u0131kan sayfada iki ana b\u00f6l\u00fcm vard\u0131r. Bunlar;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" aria-label=\"Customizer API alanlar\u0131 (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\">Customizer API alanlar\u0131<\/a>na ait k\u0131s\u0131m (<em>Site kimli\u011fi<\/em>, <em>Men\u00fcler<\/em>, <em>Renkler<\/em> gibi alanlar\u0131n oldu\u011fu ve \u00f6zelle\u015ftirme sayfan\u0131n sol taraf\u0131nda kalan s\u00fctundur.)<\/li><li>Teman\u0131n canl\u0131 \u00f6n izleme b\u00f6l\u00fcm\u00fcd\u00fcr.<\/li><\/ol>\n\n\n\n<p><strong>Customizer JavaScript API<\/strong> kullan\u0131m\u0131, bu b\u00f6l\u00fcmlerin her biri i\u00e7in farkl\u0131 \u015fekilde olur. Yani, API kodlamaya ba\u015flamadan \u00f6nce, \u00e7al\u0131\u015faca\u011f\u0131m\u0131z k\u0131s\u0131ma karar vermeliyiz. A\u015fa\u011f\u0131da, <strong>Customizer JavaScript API<\/strong> kullan\u0131m\u0131, bu k\u0131s\u0131mlar\u0131n her ikisi i\u00e7in de ayr\u0131 ayr\u0131 anlat\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlarinda_Customizer_JavaScript_API_Kullanimi\">Customizer API Alanlar\u0131nda Customizer JavaScript API Kullan\u0131m\u0131<\/span><\/h2>\n\n\n\n<p><strong>Customizer JavaScript API<\/strong> ile <a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\">Customizer API alanlar\u0131<\/a> olu\u015fturabilir, olu\u015fturulmu\u015f alanlar\u0131 gizleyebilir veya ko\u015fullu i\u015flemler olu\u015fturabiliriz. B\u00fct\u00fcn bunlar i\u00e7in \u00f6ncelikle bir <code>js<\/code> dosyas\u0131 olu\u015fturmal\u0131 ve bu dosyay\u0131 teman\u0131za <code>'customize_controls_enqueue_scripts'<\/code> kancas\u0131 ile ve  \u00f6nce <code>'customize-controls'<\/code> ve <code>'jquery'<\/code> scriptlerinin y\u00fcklenmesi \u015fart\u0131 ile eklemelisiniz. A\u015fa\u011f\u0131da bu ama\u00e7la olu\u015fturulmu\u015f ve teman\u0131n ana dizinindeki <code>js<\/code> klas\u00f6r\u00fcn i\u00e7ine yerle\u015ftirilmi\u015f, <code>customizer-control.js<\/code> dosyas\u0131n\u0131n temaya eklenmesi i\u00e7in gereken kodlar verilmi\u015ftir:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customize_control_js() {\n    wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '\/js\/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true );\n}\nadd_action( 'customize_controls_enqueue_scripts', 'ilktemam_customize_control_js' );<\/code><\/pre>\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>Yukar\u0131daki kod ile birlikte <strong>Customizer JavaScript API<\/strong> kullan\u0131m\u0131 i\u00e7in haz\u0131r ve <code>customizer-control.js<\/code> ad\u0131nda bir dosyam\u0131z olur. Bu dosyada, kullanaca\u011f\u0131m\u0131z JavaScript API kodlar\u0131 i\u00e7in \u015f\u00f6yle bir \u00e7er\u00e7eve kod olu\u015fturuyoruz:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n        \/\/ Customizer JavaScript API kodlar\u0131 buraya yaz\u0131l\u0131r\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>Customizer JavaScript API ile, <a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\">Customizer API alanlar\u0131na<\/a> ula\u015fmak istersek \u015fu kodlar\u0131 kullan\u0131r\u0131z:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n        wp.customize.panel.each( function ( panel ) { \/* ... *\/ } );\n        wp.customize.section.each( function ( section ) { \/* ... *\/ } );\n        wp.customize.control.each( function ( control ) { \/* ... *\/ } );\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlari_Arasinda_Baglanti_Kurma\">Customizer API Alanlar\u0131 Aras\u0131nda Ba\u011flant\u0131 Kurma<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, WordPress temalar\u0131n\u0131n \u00f6zelle\u015ftirme sayfas\u0131nda g\u00f6rd\u00fc\u011f\u00fcm\u00fcz &#8220;<em>Site ba\u015fl\u0131\u011f\u0131<\/em>&#8221; ad\u0131ndaki kontrol alan\u0131n\u0131n PHP kodudur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_control( 'blogname', array(  \n    'label' => __( 'Site ba\u015fl\u0131\u011f\u0131' ),  \n    'section' => 'title_tagline',)\n);<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kodda da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi <em>Site ba\u015fl\u0131\u011f\u0131<\/em> alan\u0131 <code>'title_tagline'<\/code> ad\u0131ndaki bir b\u00f6l\u00fcme (section) aittir. Bunu \u00f6\u011frenmek i\u00e7in a\u015fa\u011f\u0131daki <strong>Customizer JavaScript API<\/strong> kodunu da kullanabiliriz:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n       \/\/ id de\u011fi\u015fkeni 'title_tagline' de\u011ferini d\u00f6nd\u00fcrecektir\n       var id = wp.customize.control( 'blogname' ).section();\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da elde etti\u011fimiz <code>id<\/code> de\u011ferine ait alana (section) ula\u015fmak i\u00e7in \u015fu kodu kullan\u0131r\u0131z:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n       \/\/ id de\u011fi\u015fkeni 'title_tagline' de\u011ferini d\u00f6nd\u00fcrecektir\n       var id = wp.customize.control( 'blogname' ).section();\n\n       \/\/ 'title_tagline' b\u00f6l\u00fcm\u00fcn\u00fc d\u00f6nd\u00fcr\u00fcr\n       var bolum = wp.customize.section( id );\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, <em>Site ba\u015fl\u0131\u011f\u0131<\/em> ad\u0131ndaki kontrol alan\u0131n\u0131 <em>Men\u00fcler<\/em> ad\u0131ndaki b\u00f6l\u00fcme ta\u015f\u0131r:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n       wp.customize.control( 'blogname' ).section( 'nav' );\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, kimli\u011fi belirtilen bir b\u00f6l\u00fcm\u00fcn ait oldu\u011fu panelin <code>id<\/code> de\u011ferini d\u00f6nd\u00fcr\u00fcr:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n      \/\/ Site kimli\u011fi ('title_tagline') b\u00f6l\u00fcm\u00fcn\u00fcn ait oldu\u011fu panelin kimli\u011fini d\u00f6nd\u00fcr\u00fcr\n      var panel = wp.customize.section('title_tagline').panel();\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, bir panele veya b\u00f6l\u00fcme ait alt alanlar\u0131 verir:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n      \/\/ Bile\u015fenler ('widgets') panelindeki b\u00f6l\u00fcmlerini d\u00f6nd\u00fcr\u00fcr\n      var sections = wp.customize.panel( 'widgets' ).sections();\n\n      \/\/ Site kimli\u011fi ('title_tagline') b\u00f6l\u00fcm\u00fcndeki kontrol alanlar\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr\n      var controls = wp.customize.section( 'title_tagline' ).controls();\n\n    } );\n})( jQuery );<\/code><\/pre>\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><em>Site kimli\u011fi<\/em> (<code>'title_tagline'<\/code>) b\u00f6l\u00fcm\u00fcndeki b\u00fct\u00fcn kontrol alanlar\u0131n\u0131 <em>Men\u00fcler<\/em> (<code>'nav'<\/code>) b\u00f6l\u00fcm\u00fcne ta\u015f\u0131r:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n      _.each( wp.customize.section( 'title_tagline' ).controls(), function ( control ) {  \n    control.section( 'nav' )\n    ;}\n);\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Panel_Bolum_ve_Kontrolleri_AktiveDeaktive_Etmek\">Panel B\u00f6l\u00fcm ve Kontrolleri Aktive\/Deaktive Etmek<\/span><\/h3>\n\n\n\n<p>Customizer API alanlar\u0131n\u0131 saklamak veya tekrar g\u00f6stermek i\u00e7in <code>activate()<\/code> ve <code>deactivate()<\/code> metotlar\u0131 kullan\u0131l\u0131r. A\u015fa\u011f\u0131daki kodlar, Customizer API alanlar\u0131n\u0131 aktive veya deaktive eder:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n      \twp.customize.section( 'nav' ).deactivate(); \/\/ Men\u00fcler b\u00f6l\u00fcm\u00fcn\u00fc slide up efekti ile saklar\n\twp.customize.section( 'nav' ).activate({ duration: 1000 }); \/\/ Men\u00fcler b\u00f6l\u00fcm\u00fcn\u00fc slide down efekti ile g\u00f6sterir\n\twp.customize.section( 'colors' ).deactivate({ duration: 0 }); \/\/ Renkler b\u00f6l\u00fcm\u00fcn\u00fc saklar\n\twp.customize.section( 'nav' ).deactivate({ completeCallback:\n\tfunction () {  \n\t\twp.customize.section( 'colors' ).activate(); \/\/ Men\u00fcler b\u00f6l\u00fcm\u00fc saklan\u0131nca Renkler b\u00f6l\u00fcm\u00fcn\u00fc g\u00f6sterilir.\n\t\t} \n\t});\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Costomizer_API_Alanina_Focuslama\">Costomizer API Alan\u0131na Focuslama<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, fare imlecini <em>Site ba\u015fl\u0131\u011f\u0131<\/em> alan\u0131na ta\u015f\u0131r yani <em>Site ba\u015fl\u0131\u011f\u0131<\/em> alan\u0131n\u0131 focuslar:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n      \twp.customize.control( 'blogname' ).focus();\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, fare imlecini <em>Site kimli\u011fi<\/em> b\u00f6l\u00fcm\u00fcne focuslar:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n      \twp.customize.section( 'title_tagline' ).focus();\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<p>Bir <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Customizer API alan\u0131na (yeni sekmede a\u00e7\u0131l\u0131r)\">Customizer API alan\u0131na<\/a> focuslaman\u0131n bir di\u011fer yolu URL ifadeleri kullanmakt\u0131r. A\u015fa\u011f\u0131da verilen URL ifadeleri ilgili alanlara focuslar:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>\u2026\/wp-admin\/customize.php?autofocus[panel]=widgets<\/code>: &#8220;Bile\u015fenler&#8221; paneline focuslar<\/li><li><code>\u2026\/wp-admin\/customize.php?autofocus[section]=colors<\/code>: &#8220;Renkler&#8221; b\u00f6l\u00fcm\u00fcne focuslar<\/li><li><code>\u2026\/wp-admin\/customize.php?autofocus[control]=blogname<\/code>: &#8220;Site ba\u015fl\u0131\u011f\u0131&#8221; kontrol\u00fcne focuslar<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlarinin_Menu_Siralamasi_Priority\">Customizer API Alanlar\u0131n\u0131n Men\u00fc S\u0131ralamas\u0131 (Priority)<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kodda, Customizer API alanlar\u0131n\u0131n men\u00fc s\u0131ralamas\u0131n\u0131 de\u011fi\u015ftiren \u00f6rnekler verilmi\u015ftir:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n        \/\/ 'sira' de\u011fi\u015fkeni, \"Bile\u015fenler\" panelinin s\u0131ra numaras\u0131n\u0131 (110) d\u00f6nd\u00fcr\u00fcr \n      \tvar sira = wp.customize.panel( 'widgets' ).priority(); \/\/ returns 110 by default\n\n       \/\/ \"Bile\u015fenler\" panelini, s\u0131ra numaras\u0131n\u0131 1 olan yere ta\u015f\u0131r \n       wp.customize.panel( 'widgets' ).priority( 1 );\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlari_Icin_JavaScript_Ornekleri\">Customizer API Alanlar\u0131 \u0130\u00e7in JavaScript \u00d6rnekleri<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"1-_Customizer_JavaScript_API_ile_alanlar_olusturma\">1- Customizer JavaScript API ile alanlar olu\u015fturma:<\/span><\/h4>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, <strong>Customizer JavaScript API<\/strong> ile bir panel, bu panele ait bir b\u00f6l\u00fcm ve bu b\u00f6l\u00fcme ait bir kontrol alan\u0131 olu\u015fturur:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n\t\/\/ Bir panel olu\u015fturuyoruz.\n\twp.customize.panel.add(\n\t\tnew wp.customize.Panel('deneme_paneli', {\n\t\t\ttitle: 'DENEME',\n\t\t})\n\t);\n\n\t\/\/ Bir b\u00f6l\u00fcm olu\u015fturuyoruz.\n\twp.customize.section.add(\n\t\tnew wp.customize.Section('deneme_bolumu', {\n\t\t\ttitle: 'Deneme B\u00f6l\u00fcm\u00fc',\n\t\t\tpanel: 'deneme_paneli',\n\t\t\tcustomizeAction: 'Deneme ama\u00e7l\u0131 alu\u015fturulmu\u015ftur.'\n\t\t})\n\t);\n\n\t\/\/ Bit ayar olu\u015fturuyoruz.\n\tvar setting = new wp.customize.Setting( 'deneme_ayari', 'varsay\u0131lan de\u011fer', { transport: 'postMessage' } );\n\n\t\/\/ Bit text inputu olu\u015fturuyoruz.\n\twp.customize.control.add(\n\t\tnew wp.customize.Control('deneme_kontorlu', {\n\t\t\ttype: 'text',\n\t\t\tsetting: setting,\n\t\t\tsection: 'deneme_bolumu',\n\t\t\tlabel: 'Buraya bir\u015feyler yaz.'\n\t\t})\n\t);\n\n\n    } );\n})( jQuery );<\/code><\/pre>\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=\"2-_Customizer_JavaScript_API_ile_olusturulan_bir_kontrol_alanina_event_ekleme\">2- Customizer JavaScript API ile olu\u015fturulan bir kontrol alan\u0131na event ekleme<\/span><\/h4>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, <code>checkbox<\/code> tipinde bir <code>input<\/code> kutucu\u011fu olu\u015fturur ve bu kutucuk i\u015faretliyken &#8220;<em>Site ba\u015fl\u0131\u011f\u0131<\/em>&#8221; alan\u0131n\u0131 gizler:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(function( $ ) {\n    wp.customize.bind( 'ready', function() {\n\n        var ayar_alani = new wp.customize.Setting( 'basligi_gizle', false, { transport: 'postMessage' } );\n\n\t\/\/ Bir checkbox kontrol\u00fc ekler.\n\twp.customize.control.add(\n\t\tnew wp.customize.Control('baslik_gizlensin_mi', {\n\t\t\ttype: 'checkbox',\n\t\t\tsetting: ayar_alani,\n\t\t\tsection: 'title_tagline',\n\t\t\tlabel: 'Site ba\u015fl\u0131\u011f\u0131n\u0131 sakla',\n\t\t})\n\t);\n\n\t$('li#customize-control-baslik_gizlensin_mi input').on('click', function(){\n\t\t\n                \/\/ Ba\u015fl\u0131\u011f\u0131 gizleyen kutucuk i\u015faretli ise 'Site ba\u015fl\u0131\u011f\u0131' gizlenir, yoksa g\u00f6sterilir\n\t\tif( wp.customize.control('baslik_gizlensin_mi').setting.get() ) { wp.customize.control( 'blogname' ).activate(); }\n               else { wp.customize.control( 'blogname' ).deactivate(); }\n\t\t\n\t\twp.customize.state( 'saved' ).set( false ); \/\/ Yay\u0131mla butonunu aktifle\u015ftirir\n\t\t\n\t});\n\n    } );\n})( jQuery );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Temanin_Canli_On_Izleme_Bolumunde_Preview_Customizer_JavaScript_API_Kullanimi\">Teman\u0131n Canl\u0131 \u00d6n \u0130zleme B\u00f6l\u00fcm\u00fcnde (Preview) Customizer JavaScript API Kullan\u0131m\u0131<\/span><\/h2>\n\n\n\n<p>Bu ba\u015fl\u0131k alt\u0131nda bahsedece\u011fimiz JavaScript kodlar\u0131, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda, teman\u0131n canl\u0131 \u00f6n izleme k\u0131sm\u0131n\u0131 ilgilendiriyor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bir_JavaScript_Dosyasi_Olustur\">Bir JavaScript Dosyas\u0131 Olu\u015ftur<\/span><\/h3>\n\n\n\n<p><strong>Customizer JavaScript API<\/strong> ara y\u00fcz\u00fcn\u00fc, canl\u0131 \u00f6n izleme b\u00f6l\u00fcm\u00fcnde kullanabilmek i\u00e7in, <code>customize-preview.js<\/code> ad\u0131nda bir <code>js<\/code> dosyas\u0131 olu\u015fturuyoruz. Tabi siz dilerseniz bu dosya i\u00e7in ba\u015fka bir isim kullanabilirsiniz. Ben, <code>customizer-preview.js<\/code> dosyas\u0131n\u0131, temam\u0131z\u0131n ana dizininde ve <code>js<\/code> adl\u0131 bir klas\u00f6r\u00fcn i\u00e7inde olu\u015fturdu\u011fumuz kabul ediyorum.<\/p>\n\n\n\n<p>Dosyay\u0131 olu\u015fturduktan sonra, <code>'customize_preview_init'<\/code> kancas\u0131n\u0131 kullanarak ve <code>'customize-preview'<\/code> k\u00fct\u00fcphanesi \u015fart\u0131 ile bu dosyay\u0131 temam\u0131za tan\u0131tmam\u0131z gerekecek. Bunun i\u00e7in <code>functions.php<\/code> dosyas\u0131na gidip \u015fu kodlar\u0131 yap\u0131\u015ft\u0131r\u0131yoruz:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customize_preview_js() {\n    wp_enqueue_script( 'ilktemam_customize_preview', get_template_directory_uri() . '\/js\/customize-preview.js', array( 'customize-preview' ), null, true );\n}\nadd_action( 'customize_preview_init', 'ilktemam_customize_preview_js' );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Canli_On_Izleme_Alaninda_Customizer_JavaScript_API_Ornekleri\">Canl\u0131 \u00d6n \u0130zleme Alan\u0131nda Customizer JavaScript API \u00d6rnekleri<\/span><\/h3>\n\n\n\n<p>Peki <code>customize-preview.js<\/code> ile neler yapabiliriz? Sizlere fikir vermesi a\u00e7\u0131s\u0131ndan, bu dosya ile yap\u0131labilecek i\u015flerden bir ka\u00e7 \u00f6rnek vermek istiyorum:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Selective_Refresh_Ekleme\">Selective Refresh Ekleme<\/span><\/h4>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod,WordPress temalar\u0131nda bulunan baz\u0131 standart <strong>Customizer API<\/strong> ayarlar\u0131na selective refresh \u00f6zelli\u011fi ekler:<\/p>\n\n\n\n<p><code>js\/customize-preview.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>( function( $ ) {\n\n   $(document).ready(function(){\n\n\t\/\/ Site kimli\u011fini canl\u0131 ayarlar...\n\twp.customize( 'blogname', function( value ) {\n\t\tvalue.bind( function( newval ) {\n\t\t\t$( '#site-title a' ).html( newval ); \/\/ \"#site-title a\" se\u00e7icisini kendi teman\u0131za uygun \u015fekilde de\u011fi\u015ftirmeyi unutmay\u0131n\n\t\t} );\n\t} );\n\t\n\t\/\/ Slogan\u0131 canl\u0131 ayarlar...\n\twp.customize( 'blogdescription', function( value ) {\n\t\tvalue.bind( function( newval ) {\n\t\t\t$( '.site-description' ).html( newval ); \/\/ \".site-description\" se\u00e7icisini kendi teman\u0131za uygun \u015fekilde de\u011fi\u015ftirmeyi unutmay\u0131n\n\t\t} );\n\t} );\n\n\t\/\/ \u00dcst k\u0131s\u0131m text rengini canl\u0131 ayarlar...\n\twp.customize( 'header_textcolor', function( value ) {\n\t\tvalue.bind( function( newval ) {\n\t\t\t$('#site-title a').css('color', newval ); \/\/ \"#site-title a\" se\u00e7icisini kendi teman\u0131za uygun \u015fekilde de\u011fi\u015ftirmeyi unutmay\u0131n\n\t\t} );\n\t} );\n\n\t\/\/ Arka plan rengini canl\u0131 ayarlar...\n\twp.customize( 'background_color', function( value ) {\n\t\tvalue.bind( function( newval ) {\n\t\t\t$('body').css('background-color', newval );\n\t\t} );\n\t} );\n\n   } );\n\t\n} )( jQuery );<\/code><\/pre>\n\n\n\n<p class=\"sc-dikkat\">Yukar\u0131daki kodun \u00e7al\u0131\u015fabilmesi i\u00e7in, teman\u0131zda \u015fu 3 ayar\u0131n da yap\u0131lm\u0131\u015f olmas\u0131 gereklidir:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li> Kodlarda kimlikleri verilen (<code>'blogname', 'blogdescription', 'header_textcolor', 'background_color'<\/code>) <a rel=\"noreferrer noopener\" aria-label=\"Customizer API kontrol alanlar\u0131n\u0131n (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/#3_Kontroller_Controls\" target=\"_blank\">Customizer API kontrol alanlar\u0131n\u0131n<\/a> olu\u015fturulmu\u015f olmas\u0131 gereklidir.<\/li><li>Bu ayarlar i\u00e7in teman\u0131zda olu\u015fturdu\u011funuz HTML elemanlar\u0131n\u0131n, yukar\u0131daki kodda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz <code>id<\/code> veya <code>class<\/code> de\u011ferlerine sahip olmas\u0131 gerekmektedir.<\/li><li>Bu koddaki kontrollerin ayarlar\u0131nda, <code>'transport'<\/code> arg\u00fcman\u0131n\u0131n <code>'postMessage'<\/code> de\u011feri alm\u0131\u015f olmas\u0131 gerekmektedir. E\u011fer, bu durumdan emin de\u011filseniz, a\u015fa\u011f\u0131daki kodlar bu ayarlara <code>'postMessage'<\/code> \u00f6zelli\u011fi ekler:<\/li><\/ol>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customize_register( WP_Customize_Manager $wp_customize ) {\n    $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';\n    $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';\n    $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';\n    $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';\n}\nadd_action( 'customize_register', 'ilktemam_customize_register' );<\/code><\/pre>\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=\"Temanin_On_Izlemesinde_Canli_Duzenleme_Butonu_Olusturma\">Teman\u0131n \u00d6n \u0130zlemesinde Canl\u0131 D\u00fczenleme Butonu Olu\u015fturma<\/span><\/h4>\n\n\n\n<p>Tema, canl\u0131 \u00f6n izlemede iken, ba\u015fl\u0131k ve slogan b\u00f6l\u00fcm\u00fcnde g\u00f6r\u00fcnecek birer buton olu\u015fturaca\u011f\u0131z ve bu butonlara t\u0131kland\u0131\u011f\u0131nda, teman\u0131n ba\u015fl\u0131k ve slogan\u0131n\u0131 d\u00fczenleyen kontrol alanlar\u0131na gidilecek. Bunu ba\u015farmak i\u00e7in, hem <strong>Customizer API<\/strong> alanlar\u0131 i\u00e7in hem de <strong>canl\u0131 \u00f6n izleme<\/strong> i\u00e7in JavaScript kodlamam\u0131z gerekecek.<\/p>\n\n\n\n<p>JavaScript API kodlamaya ge\u00e7meden \u00f6nce, temam\u0131z\u0131n <code>header.php<\/code> sayfas\u0131na, sadece temam\u0131z canl\u0131 \u00f6n izlemede iken g\u00f6r\u00fcnecek iki buton yerle\u015ftirelim:<\/p>\n\n\n\n<p><code>header.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1 class=\"site-title\">\n    &lt;a href=\"&lt;?php echo esc_url( home_url( '\/' ) ); ?>\" rel=\"home\">&lt;?php bloginfo( 'name' ); ?>&lt;\/a>\n&lt;\/h1>\n&lt;?php if ( is_customize_preview() ) : \/\/ sadece canl\u0131 \u00f6nizlemede iken ?>\n\t&lt;button class=\"site-basligini-duzenle\" data-control='{\"name\":\"blogname\" }'>&lt;?php esc_html_e( 'Ba\u015fl\u0131\u011f\u0131 D\u00fczenle', 'textdomain' ); ?>&lt;\/button>\n&lt;?php endif; ?>\n&lt;br \/>\n&lt;br \/>\n&lt;p class=\"site-description\">\n\t&lt;?php bloginfo( 'description' ); ?>\n&lt;\/p>\n&lt;?php if ( is_customize_preview() ) : \/\/ sadece canl\u0131 \u00f6nizlemede iken ?>\n   &lt;button class=\"slogani-duzenle\" data-control='{\"name\":\"blogdescription\"}'>&lt;?php esc_html_e( 'Slogan\u0131 D\u00fczenle', 'textdomain' ); ?>&lt;\/button>\n&lt;?php endif; ?><\/code><\/pre>\n\n\n\n<p>Olu\u015fturdu\u011fumuz butonlardan ilki <em>Site ba\u015fl\u0131\u011f\u0131<\/em> ikincisi de <em>Slogan<\/em> alan\u0131na g\u00f6t\u00fcrecek. Butonlara ekledi\u011fimiz <code>class=\"site-basligini-duzenle\"<\/code> ve <code>class=\"slogani-duzenle\"<\/code> s\u0131n\u0131flar\u0131, bu butonlara JavaScript ile ula\u015fmak i\u00e7in kullan\u0131lacak.<\/p>\n\n\n\n<p>Yine butonlara ekledi\u011fimiz <code>data-control='{\"name\":\"blogname\" }'<\/code> ve <code>data-control='{\"name\":\"blogdescription\"}'<\/code> \u00f6zellikleri ile ula\u015faca\u011f\u0131m\u0131z alanlar\u0131n kimlik de\u011ferlerini kaydettik. Bu de\u011ferleri, JavaScript API&#8217;ye, butonlar\u0131n hangi Customizer API alan\u0131na gitmek istedi\u011fini s\u00f6ylemek i\u00e7in kullanaca\u011f\u0131z.<\/p>\n\n\n\n<p>Yukar\u0131daki kod ile ekledi\u011fimiz botunlar, temam\u0131z\u0131n \u00f6zelle\u015ftirme sayfas\u0131nda \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"198\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/10\/customizer-javascript-api-preview.jpg\" alt=\"\" class=\"wp-image-4875\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/10\/customizer-javascript-api-preview.jpg 473w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/10\/customizer-javascript-api-preview-300x126.jpg 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><figcaption>Customizer JavaScript API<\/figcaption><\/figure><\/div>\n\n\n\n<p>Art\u0131k <strong>Customizer JavaScript API<\/strong> kodlar\u0131na ge\u00e7ebiliriz. \u00d6ncelikle, canl\u0131 \u00f6n izleme k\u0131sm\u0131 ile ilgili kodlar\u0131 olu\u015fturuyoruz. Bunun i\u00e7in biraz \u00f6nce temam\u0131za ekledi\u011fimiz <code>'customize-preview.js'<\/code> dosyas\u0131n\u0131 kullan\u0131yoruz:<\/p>\n\n\n\n<p><code>js\/customize-preview.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>;(function($){\n\t$(document).ready(function(){\n\t\t\n\t\tvar customize = wp.customize;\n\t\t\n\t\t$( '.site-basligini-duzenle' ).on( 'click', function(){\n\t\t\tcustomize.preview.send( 'preview-edit', $( this ).data( 'control' ) );\n\t\t});\n\t\t\n\t\t$( '.slogani-duzenle' ).on( 'click', function(){\n\t\t\tcustomize.preview.send( 'preview-edit-2', $( this ).data( 'control' ) );\n\t\t});\n\t\t\n\t});\n\t\n})(jQuery)<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kodlar, olu\u015fturdu\u011fumuz butonlara t\u0131kland\u0131\u011f\u0131nda, bu butonlar\u0131n <code>data-control<\/code> de\u011ferlerini g\u00f6nderir. Peki nereye g\u00f6nderir? Danan\u0131n kuyru\u011funun koptu\u011fu yer de i\u015fte buras\u0131d\u0131r say\u0131n okuyucum. Yukar\u0131daki kod, butonlar\u0131n <code>data-control<\/code> de\u011ferlerini <strong>Customizer API<\/strong> alanlar\u0131na ait JavaScript dosyas\u0131na g\u00f6nderir. Hani yukar\u0131da <code>customizer-control.js<\/code> ad\u0131nda bir dosya olu\u015fturmu\u015ftuk, i\u015fte ona g\u00f6nderir. Ben bu dersin ba\u015f\u0131n\u0131 okumad\u0131m diyorsan\u0131z, bu dosyay\u0131 teman\u0131n ana dizininde bir <code>js<\/code> klas\u00f6r\u00fc i\u00e7inde tekrar olu\u015ftural\u0131m ve a\u015fa\u011f\u0131daki kodlar ile temam\u0131za ekleyelim:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_customize_control_js() {\n    wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '\/js\/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true );\n}\nadd_action( 'customize_controls_enqueue_scripts', 'ilktemam_customize_control_js' );<\/code><\/pre>\n\n\n\n<p>\u015eimdi <code>customize-preview.js<\/code> dosyas\u0131ndan gelen bilgileri alal\u0131m ve bu bilgilere g\u00f6re butonlara tepki verelim:<\/p>\n\n\n\n<p><code>js\/customizer-control.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>;(function ($, api) {\n\t\n\tapi.bind('ready', function () {\n\t\t \n                \/\/ customize-preview.js dosyas\u0131ndan gelen bilgi fonksiyonun data parametresinde y\u00fckl\u00fc\n\t\tapi.previewer.bind( 'preview-edit', function( data ) {\n\t\t\t\n                        \/\/ Butonlar\u0131n data-control de\u011ferindeki 'name' de\u011ferini ald\u0131k\n\t\t\tvar control = api.control( data.name );\n\t\t \n\t\t\tcontrol.focus({\n\t\t\t\tcompleteCallback : function() {\n\t\t\t\t\tsetTimeout( function() {\n\t\t\t\t\t\tcontrol.container.addClass(\"titre\");\n\t\t\t\t\t}, 300 );\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\t});\n})(jQuery, wp.customize);<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, bir butona t\u0131kland\u0131\u011f\u0131nda, butonun belirtti\u011fi yeri d\u00fczenleyen Customizer API alan\u0131n\u0131 focuslar ve bu alana <code>\"titre\"<\/code> ad\u0131nda bir CSS s\u0131n\u0131f\u0131 ekler. Dilerseniz bu s\u0131n\u0131f\u0131 kullanarak, biraz da jQuery ile focuslanan alan\u0131 titretebilirsiniz.<\/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","protected":false},"excerpt":{"rendered":"<p>Customizer API uygulamas\u0131n\u0131n JavaScript k\u0131sm\u0131 ile ilgi ileri seviye bir derstir.<\/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":[219],"class_list":["post-4821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-customizer-javascript-api"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4821","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=4821"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4821\/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=4821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=4821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=4821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}