{"id":4701,"date":"2019-09-29T03:04:09","date_gmt":"2019-09-29T00:04:09","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=4701"},"modified":"2019-10-02T19:26:05","modified_gmt":"2019-10-02T16:26:05","slug":"5-2-customizer-apinin-isimizi-kolaylastiran-araclari","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-2-customizer-apinin-isimizi-kolaylastiran-araclari\/","title":{"rendered":"5.2 Customizer API&#8217;nin \u0130\u015fimizi Kolayla\u015ft\u0131ran Ara\u00e7lar\u0131"},"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=\"#Kosullu_Customizer_API_Alanlari\"><span class=\"toc_number toc_depth_1\">1<\/span> Ko\u015fullu Customizer API Alanlar\u0131<\/a><\/li><li><a href=\"#Secimli_Yukleme_Selective_Refresh\"><span class=\"toc_number toc_depth_1\">2<\/span> Se\u00e7imli Y\u00fckleme (Selective Refresh)<\/a><ul><li><a href=\"#Customizer_API_Alanlari_Olusturma\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Customizer API Alanlar\u0131 Olu\u015fturma<\/a><\/li><li><a href=\"#Customizer_API_Alanlarinin_Sablon_Icinde_Kullanimi_8211_HTML\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Customizer API Alanlar\u0131n\u0131n \u015eablon \u0130\u00e7inde Kullan\u0131m\u0131 &#8211; HTML<\/a><\/li><li><a href=\"#Customizer_Alanlarina_Selective_Refresh_Ozelligi_Kazandirma\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Customizer Alanlar\u0131na Selective Refresh \u00d6zelli\u011fi Kazand\u0131rma<\/a><\/li><li><a href=\"#Arka_Plan_Rengini_Isleme\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Arka Plan Rengini \u0130\u015fleme<\/a><\/li><li><a href=\"#Resmi_Isleme\"><span class=\"toc_number toc_depth_2\">2.5<\/span> Resmi \u0130\u015fleme<\/a><\/li><li><a href=\"#Selective_refresh-gt_add_partial_Metoduna_Yakindan_Bakalim\"><span class=\"toc_number toc_depth_2\">2.6<\/span> Selective_refresh-&gt; add_partial() Metoduna Yak\u0131ndan Bakal\u0131m<\/a><\/li><li><a href=\"#Selective_Refresh_Argumanlari\"><span class=\"toc_number toc_depth_2\">2.7<\/span> Selective Refresh Arg\u00fcmanlar\u0131<\/a><ul><li><a href=\"#8216container_inclusive8217\"><span class=\"toc_number toc_depth_3\">2.7.1<\/span> &#8216;container_inclusive&#8217;<\/a><\/li><li><a href=\"#8216fallback_refresh8217\"><span class=\"toc_number toc_depth_3\">2.7.2<\/span> &#8216;fallback_refresh&#8217;<\/a><\/li><\/ul><\/li><li><a href=\"#8216customize-partial-refreshing8217\"><span class=\"toc_number toc_depth_2\">2.8<\/span> &#8216;customize-partial-refreshing&#8217;<\/a><\/li><li><a href=\"#Selective_Refresh_Icinde_JavaScript_Eventlerini_Kullanma\"><span class=\"toc_number toc_depth_2\">2.9<\/span> Selective Refresh \u0130\u00e7inde JavaScript Eventlerini Kullanma<\/a><\/li><li><a href=\"#is_customize_preview\"><span class=\"toc_number toc_depth_2\">2.10<\/span> is_customize_preview()<\/a><\/li><li><a href=\"#Bilesenlere_Widgets_Selective_Refresh_Ozelligi_Ekleme\"><span class=\"toc_number toc_depth_2\">2.11<\/span> Bile\u015fenlere (Widgets) Selective Refresh \u00d6zelli\u011fi Ekleme<\/a><\/li><li><a href=\"#Bilesenleri_Widgets_Selective_Refresh_Uyumlu_Kodlama\"><span class=\"toc_number toc_depth_2\">2.12<\/span> Bile\u015fenleri (Widgets) Selective Refresh Uyumlu Kodlama<\/a><\/li><li><a href=\"#JavaScript_Ile_Bilesenlere_Selective_Refresh_Ozelligi_Kazandirma\"><span class=\"toc_number toc_depth_2\">2.13<\/span> JavaScript \u0130le Bile\u015fenlere Selective Refresh \u00d6zelli\u011fi Kazand\u0131rma<\/a><\/li><li><a href=\"#Bir_Customizer_API_Alanina_Sonradan_Selective_Refresh_Ozelligi_Kazandirmak\"><span class=\"toc_number toc_depth_2\">2.14<\/span> Bir Customizer API Alan\u0131na Sonradan Selective Refresh \u00d6zelli\u011fi Kazand\u0131rmak<\/a><\/li><\/ul><\/li><li><a href=\"#Verileri_Dogrulama_Validate_ve_Filtreleme_Sanitize\"><span class=\"toc_number toc_depth_1\">3<\/span> Verileri Do\u011frulama (Validate) ve Filtreleme (Sanitize)<\/a><\/li><li><a href=\"#JavaScript_Dogrulamasi_8211_Tarayici_Dogrulamasi\"><span class=\"toc_number toc_depth_1\">4<\/span> JavaScript Do\u011frulamas\u0131 &#8211; Taray\u0131c\u0131 Do\u011frulamas\u0131<\/a><\/li><li><a href=\"#Bildirimler\"><span class=\"toc_number toc_depth_1\">5<\/span> Bildirimler<\/a><\/li><\/ul><\/div>\n\n<h2 class=\"wp-block-heading\"><span id=\"Kosullu_Customizer_API_Alanlari\">Ko\u015fullu Customizer API Alanlar\u0131<\/span><\/h2>\n\n\n\n<p><strong>Customizer API<\/strong> uygulamas\u0131 ile diledi\u011fimiz b\u00f6l\u00fcme (section) ya da kontrole, ko\u015fullu g\u00f6sterim \u00f6zelli\u011fi ekleyebiliyoruz (WordPress 4.0 ve sonras\u0131 i\u00e7in). Yani, <a rel=\"noreferrer noopener\" aria-label=\"Customizer API alanlar\u0131n\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\u0131n\u0131<\/a>, temam\u0131z\u0131n sadece belli bir sayfas\u0131 ya da sayfalar\u0131 \u00f6n izlemede iken g\u00f6r\u00fcnecek \u015fekilde ayarlayabiliyoruz.<\/p>\n\n\n\n<p>\u00d6rne\u011fin, <strong>Customizer API<\/strong> ile, sadece <em>ana sayfay\u0131<\/em> ilgilendiren bir b\u00f6l\u00fcm ya da kontrol alan\u0131 olu\u015fturduk diyelim. Bu alan\u0131, y\u00f6netim panelinin <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda, sadece teman\u0131n <em>ana sayfas\u0131<\/em> a\u00e7\u0131kken yani ana sayfas\u0131n\u0131 \u00f6zelle\u015ftiriliyorken g\u00f6r\u00fcnecek \u015fekilde ayarlayabiliriz. Ana sayfa i\u00e7in yapt\u0131\u011f\u0131m\u0131z se\u00e7imli g\u00f6sterimi di\u011fer sayfalar i\u00e7in de yapabiliyoruz. Bu durumda, olu\u015fturdu\u011fumuz <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>, \u00f6zelle\u015ftirme esnas\u0131nda gerekmedikleri sayfalarda g\u00f6r\u00fcnmeyecektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, standart baz\u0131 b\u00f6l\u00fcm ve kontrollerin, ko\u015fullu bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flayan kodlar vard\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->get_section( 'header_image' )->active_callback = 'is_front_page';<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131 ile, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131ndaki &#8220;<em>\u00dcst k\u0131s\u0131m ortam dosyas\u0131<\/em>&#8221; b\u00f6l\u00fcm\u00fcn\u00fc sadece, ekranda ana sayfan\u0131n \u00f6n izlemesi varken g\u00f6r\u00fcnecek \u015fekilde ayarlar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->get_control( 'blogdescription' )->active_callback = 'is_front_page'; \/\/ \"Site kimli\u011fi\" b\u00f6l\u00fcm\u00fcndeki \"Slogan\" kontrol\u00fc<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod par\u00e7as\u0131 ile, <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda g\u00f6rd\u00fc\u011f\u00fcm\u00fcz &#8220;<em>Site kimli\u011fi<\/em>&#8221; b\u00f6l\u00fcm\u00fcndeki &#8220;<em>Slogan<\/em>&#8221; kontrol\u00fcn\u00fcn sadece, ekranda ana sayfan\u0131n \u00f6n izlemesi varken g\u00f6r\u00fcnecek \u015fekilde ayarlar.<\/p>\n\n\n\n<p>Yukar\u0131daki kodun yapt\u0131\u011f\u0131 i\u015fin ayn\u0131s\u0131n\u0131, <a rel=\"noreferrer noopener\" aria-label=\"bir panel, b\u00f6l\u00fcm ya da kontrol alan\u0131 olu\u015ftururken (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\">bir Costomizer API b\u00f6l\u00fcm\u00fc<\/a> olu\u015fturuken, <code>'active_callback'<\/code> arg\u00fcman\u0131 kullanarak da yapabiliriz. A\u015fa\u011f\u0131da bunun bir \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_section( 'bir_bolum', array(\n  'title'       => __( 'B\u00f6l\u00fcm\u00fcn Ba\u015fl\u0131\u011f\u0131', 'textdomain' ),\n  'description' => __( 'B\u00f6l\u00fcm\u00fcn a\u00e7\u0131klamas\u0131...', 'textdomain' ),\n  'priority'        => 130,\n  'active_callback' => 'is_front_page', \/\/ Bu b\u00f6l\u00fcm sadece ana sayfada g\u00f6r\u00fcn\u00fcr.\n) );<\/code><\/pre>\n\n\n\n<p>Yine yukar\u0131daki kodun yapt\u0131\u011f\u0131 i\u015fin ayn\u0131s\u0131n\u0131, a\u015fa\u011f\u0131daki kod ile de yapabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_section( 'bir_bolum', array(\n  'title'       => __( 'B\u00f6l\u00fcm\u00fcn Ba\u015fl\u0131\u011f\u0131', 'textdomain' ),\n  'description' => __( 'B\u00f6l\u00fcm\u00fcn a\u00e7\u0131klamas\u0131...', 'textdomain' ),\n  'priority'        => 130,\n  'active_callback' => function() { return is_front_page(); }, \/\/ Bu b\u00f6l\u00fcm sadece ana sayfada g\u00f6r\u00fcn\u00fcr.\n) );<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod da ayn\u0131 i\u015fe yapar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_section( 'bir_bolum', array(\n  'title'       => __( 'B\u00f6l\u00fcm\u00fcn Ba\u015fl\u0131\u011f\u0131', 'textdomain' ),\n  'description' => __( 'B\u00f6l\u00fcm\u00fcn a\u00e7\u0131klamas\u0131...', 'textdomain' ),\n  'priority'        => 130,\n  'active_callback' => 'sadece_ana_sayfada_goster', \/\/ Bu b\u00f6l\u00fcm sadece ana sayfada g\u00f6r\u00fcn\u00fcr.\n) );\n\/\/...\nfunction sadece_ana_sayfada_goster() {\n    return is_front_page();\n}<\/code><\/pre>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Kendimize \u00f6zel Customizer API alanlar\u0131 olu\u015ftururken (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/#Bize_Ozel_Customizer_API_Alanlari\" target=\"_blank\">Kendimize \u00f6zel Customizer API alanlar\u0131 olu\u015ftururken<\/a>, bir ko\u015ful fonksiyonu da olu\u015fturabiliriz. A\u015fa\u011f\u0131da bu i\u015fin nas\u0131l yap\u0131laca\u011f\u0131 g\u00f6sterilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Bana_Ozel_Bir_Control_Alani extends WP_Customize_Control {\n  \/\/ ...\n  function active_callback() {\n    return is_front_page();\n  }\n}<\/code><\/pre>\n\n\n\n<p>Olu\u015fturdu\u011fumuz Customizer API alanlar\u0131n\u0131, gerek olmayan sayfalarda gizleme \u00f6zelli\u011fi ile ilgili olan <code>'customize_control_active'<\/code> filtresinden bahsedelim. Bu filtre, biraz \u00f6nce g\u00f6rd\u00fc\u011f\u00fcm\u00fcz arg\u00fcmanlar\u0131n veya fonksiyonlar\u0131n \u00fczerine yazar. Kullan\u0131m\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Bir a\u00e7\u0131klamas\u0131 -description- olmayan kontrol alanlar\u0131n\u0131 tek yaz\u0131 sayfalar\u0131 g\u00f6r\u00fcnt\u00fclenirken gizler.\nfunction aciklamasi_olmayan_controlleri_filtrele( $active, $control ) {\n  if ( '' === $control->description ) {\n    $active = is_singular();\n  }\n  return $active;\n}\nadd_filter( 'customize_control_active', 'aciklamasi_olmayan_controlleri_filtrele', 10, 2 );<\/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<h2 class=\"wp-block-heading\"><span id=\"Secimli_Yukleme_Selective_Refresh\">Se\u00e7imli Y\u00fckleme (Selective Refresh)<\/span><\/h2>\n\n\n\n<p>Se\u00e7imli y\u00fckleme, Customizer API ile birlikte gelen b\u00fcy\u00fcl\u00fc \u00f6zelliklerden biridir. Bu \u00f6zellik, temam\u0131z\u0131 \u00f6zelle\u015ftirirken, yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklikleri canl\u0131 olarak takip etmemizi sa\u011flar. Se\u00e7imli y\u00fckleme \u00f6zelli\u011fi, de\u011fi\u015fiklik yapt\u0131\u011f\u0131m\u0131z sayfan\u0131n sadece g\u00fcncelledi\u011fimiz k\u0131sm\u0131n\u0131n tekrar y\u00fcklenmesini ve yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fikleri h\u0131zl\u0131 bir \u015fekilde g\u00f6rmemizi sa\u011flar.<\/p>\n\n\n\n<p>Se\u00e7imli yineleme, WordPress 4.5 s\u00fcr\u00fcm\u00fc ile birlikte gelmi\u015ftir. Bu \u00f6zellik ile, y\u00f6netim panelinin \u00f6zelle\u015ftirme sayfas\u0131nda, temam\u0131z ile ilgili g\u00fcncelleme i\u015flemleri yaparken, sadece sayfan\u0131n gereken k\u0131sm\u0131 i\u00e7in bir AJAX iste\u011fi (AJAX request) g\u00f6nderilir ve sayfan\u0131n yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fikler ile ilgili olmayan k\u0131s\u0131mlar\u0131na ait bir \u00e7ok PHP ve JavaScript sorgusunun gereksiz yere \u00e7al\u0131\u015fmas\u0131 engellenmi\u015f olur. Bu sayede, yapm\u0131\u015f oldu\u011fumuz de\u011fi\u015fiklikleri daha h\u0131zl\u0131 bir \u015fekilde takip etme imkan\u0131m\u0131z olur.<\/p>\n\n\n\n<p>Temam\u0131z i\u00e7in olu\u015fturdu\u011fumuz Customizer API alanlar\u0131na, <strong>selective refresh<\/strong> \u00f6zelli\u011fi eklemek i\u00e7in, bir \u00f6rnek \u00fczerinden gidelim. \u00d6rne\u011fimizde <code>hero-image.php<\/code> ad\u0131nda bir <a rel=\"noreferrer noopener\" aria-label=\"\u015fablon par\u00e7as\u0131 (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/#Sablon_Parcalari\" target=\"_blank\">\u015fablon par\u00e7as\u0131<\/a> olu\u015ftural\u0131m ve bu \u015fablon par\u00e7as\u0131nda \u015fu \u00f6zellikler olsun:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Bir resim olsun<\/li><li>Resmin \u00fczerinde bir ba\u015fl\u0131k ve a\u00e7\u0131klama olsun<\/li><li>Resmin \u00fczerinde, bizi se\u00e7ti\u011fimiz bir sayfaya y\u00f6nlendiren bir buton olsun<\/li><li>Bu <a rel=\"noreferrer noopener\" aria-label=\"\u015fablon par\u00e7as\u0131n\u0131n (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/#Sablon_Parcalari\" target=\"_blank\">\u015fablon par\u00e7as\u0131n\u0131n<\/a> arkaplan rengini de kontrol edebilelim.<\/li><\/ul>\n\n\n\n<p>Yukar\u0131daki \u00f6zellikleri Customizer API ile <strong>selective refresh<\/strong> \u00f6zelli\u011fini de kullanarak kontrol edebilece\u011fiz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlari_Olusturma\">Customizer API Alanlar\u0131 Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>\u00d6ncelikle, bahsetti\u011fimiz <a rel=\"noreferrer noopener\" aria-label=\"Customizer API alanlar\u0131n\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\u0131n\u0131<\/a> olu\u015ftural\u0131m:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Hero_Resmi\n{\n  \/**\n   * \u015eablon par\u00e7as\u0131ndaki her bir \u00f6zellik i\u00e7in bir alan olu\u015fturuyoruz\n   *\/\n  public static function register($wp_customize)\n  { \n  \n    \/\/ Ayar ile ilgili olarak bir se\u00e7imli y\u00fckleme varsa 'postMessage', yoksa 'refresh'\n    $transport = ( $wp_customize->selective_refresh ? 'postMessage' : 'refresh' );\n\n    \/\/ \"Hero Resmi\" ad\u0131na bir b\u00f6l\u00fcm olu\u015fturuyoruz\n    $wp_customize->add_section( 'hero', array(\n      'title' => 'Hero Resmi',\n      'priority' => 0\n    ));\n\n    \/\/ Ba\u015fl\u0131k i\u00e7in setting &amp; control alanlar\u0131 olu\u015fturuyoruz\n    $wp_customize->add_setting( 'hero_title', array(\n      'default' => 'Resim \u00fczerine yaz\u0131lacak ba\u015fl\u0131kt\u0131r.',\n      'transport' => $transport,\n    ));\n\n    $wp_customize->add_control( 'hero_title', array(\n      'label' => 'Ba\u015fl\u0131k',\n      'section' => 'hero',\n      'settings' => 'hero_title',\n      'type' => 'text'\n    ));\n\n    \/\/ A\u00e7\u0131klama k\u0131sm\u0131 i\u00e7in setting &amp; control alanlar\u0131 olu\u015fturuyoruz\n    $wp_customize->add_setting( 'hero_description', array(\n      'default' => 'Resim \u00fczerine yaz\u0131lacak a\u00e7\u0131klamad\u0131r.',\n      'transport' => $transport\n    ));\n\n    $wp_customize->add_control( 'hero_description', array(\n      'label' => 'A\u00e7\u0131klama',\n      'section' => 'hero',\n      'settings' => 'hero_description',\n      'type' => 'textarea'\n    ));\n\n    \/\/ Hero resmi i\u00e7in setting &amp; control alanlar\u0131 olu\u015fturuyoruz\n    $wp_customize->add_setting( 'hero_image', array(\n      'default' => get_template_directory_uri() . '\/images\/hero-image.jpg', \/\/ varsay\u0131lan resim\n      'transport' => $transport\n    ));\n\n    $wp_customize->add_control(\n      new WP_Customize_Cropped_Image_Control( $wp_customize, 'hero_image', array(\n        'label' => 'Resim',\n        'section' => 'hero',\n        'context' => 'hero-image',\n        'flex_width' => false,\n        'flex_height' => true,\n        'width' => 1200,\n        'height' => 600,\n      ) )\n    );\n\n    \/\/ Arkaplan rengi i\u00e7in setting &amp; control alanlar\u0131 olu\u015fturuyoruz\n    $wp_customize->add_setting( 'hero_background_color', array(\n      'default' => '#c3f2f5',\n      'transport' => $transport\n    ));\n\n    $wp_customize->add_control( \n      new WP_Customize_Color_Control( $wp_customize, 'hero_background_color', array(\n        'label' => 'Arkaplan rengi',\n        'section' => 'hero',\n        'settings' => 'hero_background_color'\n      ) ) \n    );\n\n    \/\/ Sayfa se\u00e7imi i\u00e7in setting &amp; control alanlar\u0131 olu\u015fturuyoruz\n    $wp_customize->add_setting( 'hero_page', array(\n      'transport' => 'none'\n    ));\n\n    $wp_customize->add_control( 'hero_page', array(\n      'label' => '\u015eu sayfaya git',\n      'section' => 'hero',\n      'type' => 'dropdown-pages',\n      'settings' => 'hero_page'\n    ));\n\n    \/\/ Buton \u00fczerine yaz\u0131lacak text i\u00e7in setting &amp; control alanlar\u0131 olu\u015fturuyoruz\n    $wp_customize->add_setting( 'hero_button_text', array(\n      'default' => 'Detaylar i\u00e7in t\u0131kla',\n      'transport' => $transport\n    ));\n\n    $wp_customize->add_control( 'hero_button_text', array(\n      'label' => 'Button text',\n      'section' => 'hero',\n      'settings' => 'hero_button_text',\n      'type' => 'text'\n    ));\n  }\n}\n\nadd_action( 'customize_register', array('Hero_Resmi', '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<p>Yukar\u0131daki kodlar\u0131 ekledikten sonra, temam\u0131z\u0131n y\u00f6netim panelindeki <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda &#8220;<em>Hero Resmi<\/em>&#8221; ad\u0131nda bir b\u00f6l\u00fcm ve bu b\u00f6l\u00fcm\u00fcn i\u00e7inde de a\u015fa\u011f\u0131daki g\u00f6r\u00fclen kontroller olu\u015facakt\u0131r:<\/p>\n\n\n\n<p>&#8220;<em>Hero Resmi<\/em>&#8221; b\u00f6l\u00fcm\u00fc:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"273\" height=\"392\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/09\/customizer-api-selective-refresh.jpg\" alt=\"\" class=\"wp-image-4778\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/09\/customizer-api-selective-refresh.jpg 273w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/09\/customizer-api-selective-refresh-209x300.jpg 209w\" sizes=\"auto, (max-width: 273px) 100vw, 273px\" \/><figcaption>Customizer API &#8211; Selective Refresh<\/figcaption><\/figure><\/div>\n\n\n\n<p><em>&#8220;Hero Resmi&#8221;<\/em> b\u00f6l\u00fcm\u00fcndeki kontrol alanlar\u0131:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"596\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/09\/customizer-api-selective-refresh-1.jpg\" alt=\"\" class=\"wp-image-4779\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/09\/customizer-api-selective-refresh-1.jpg 272w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/09\/customizer-api-selective-refresh-1-137x300.jpg 137w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><figcaption>Customizer API &#8211; Selective Refresh<\/figcaption><\/figure><\/div>\n\n\n\n<p>Yukar\u0131da da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, Customizer API ile, 6 farkl\u0131 kontrol alan\u0131 olu\u015fturduk. Bu alanlar ile elde etti\u011fimiz datalar\u0131 temam\u0131za \u015f\u00f6yle \u00e7ekece\u011fiz:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ba\u015fl\u0131k: <code>get_theme_mod('hero_title')<\/code><\/li><li>A\u00e7\u0131klama: <code>get_theme_mod('hero_description')<\/code><\/li><li>Resim (resmin id de\u011feri): <code>get_theme_mod('hero_image')<\/code><\/li><li>Arkaplan rengi (rengin <em>hex<\/em> kodunu veren ifade): <code>get_theme_mod('hero_background_color')<\/code><\/li><li>\u015eu sayfaya git (sayfan\u0131n <code>id<\/code> de\u011ferini veren ifade): <code>get_theme_mod('hero_page')<\/code><\/li><li>Button text: <code>get_theme_mod('hero_button_text')<\/code><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Customizer_API_Alanlarinin_Sablon_Icinde_Kullanimi_8211_HTML\">Customizer API Alanlar\u0131n\u0131n \u015eablon \u0130\u00e7inde Kullan\u0131m\u0131 &#8211; HTML<\/span><\/h3>\n\n\n\n<p>Olu\u015fturdu\u011fumuz b\u00fct\u00fcn bu alanlar\u0131, temam\u0131zda \u015fu \u015fekilde kullanal\u0131m:<\/p>\n\n\n\n<p><code>hero-image.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"hero\">\n  &lt;div class=\"hero-content\">\n    &lt;?php\n\t echo '&lt;h1> Sayfa id: '.get_theme_mod('hero_background_color').'&lt;\/h1>';\n\t echo '&lt;h1> Resim url: '.wp_get_attachment_image_src(get_theme_mod('hero_image'))[0].'&lt;\/h1>';\n      \/\/ Ba\u015fl\u0131k girilmi\u015f mi kontrol et\n      if( $title = get_theme_mod('hero_title') )\n      {\n        echo '&lt;h1 class=\"hero-title\">' . $title . '&lt;\/h1>';\n      }\n\n      \/\/ A\u00e7\u0131klama girilmi\u015f mi kontrol et\n      if( $subtitle = get_theme_mod('hero_description') )\n      {\n        echo '&lt;p class=\"hero-description\">' . $subtitle . '&lt;\/p>';\n      }\n\n      \/\/ Ad\u0131 ve ba\u011flanaca\u011f\u0131 sayfas\u0131 olmayan butonu g\u00f6sterme\n      if ( $link = get_theme_mod('hero_page') &amp;&amp; $text = get_theme_mod('hero_button_text') )\n      {\n        echo '&lt;p>&lt;a href=\"' . get_permalink($link) . '\" class=\"button\">' . $text . '&lt;\/a>&lt;\/p>';\n      }\n    ?>\n  &lt;\/div>\n  &lt;br \/>\n  &lt;div class=\"hero-image\">\n    &lt;?php \n      \/\/ Resim y\u00fcklenmi\u015f mi kontrol et\n      if ( ! empty(hero_image()) &amp;&amp; null !== hero_image() )\n      {\n        echo hero_image(); \/\/ Bu fonksiyonu, biradan functions.php de olu\u015fturaca\u011f\u0131z\n      }\n      \/\/ Resim y\u00fcklenmemi\u015fse \u015fu resmi kullan\n      else\n      {\n        echo '&lt;img src=\"' . get_template_directory_uri() . '\/inc\/images\/wp.jpg' . '\">';\n      }\n    ?>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Bu dersin konusu olmad\u0131\u011f\u0131 i\u00e7in, olu\u015fturdu\u011fumuz bu \u015fablon par\u00e7as\u0131na ait CSS yap\u0131s\u0131n\u0131 size b\u0131rak\u0131yorum. Olu\u015fturdu\u011fumuz bu \u015fablon par\u00e7as\u0131 dosyas\u0131 temam\u0131z\u0131n ana dizininde ise, diledi\u011finiz \u015fablon dosyas\u0131na \u00e7a\u011f\u0131rmak i\u00e7in \u015fu kodu kullanmam\u0131z yeterlidir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>get_template_part( 'hero', 'image' );<\/code><\/pre>\n\n\n\n<p>E\u011fer<code> hero-image.php<\/code> dosyam\u0131z, ana dizinde bulunan <code>template-parts<\/code> ad\u0131nda bir klas\u00f6r\u00fcn i\u00e7inde ise, bu \u015fablon par\u00e7as\u0131n\u0131 kullanmak istedi\u011fimizde \u015fu kodu kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>get_template_part( 'template-parts\/hero', 'image' );<\/code><\/pre>\n\n\n\n<p><strong>Customizer API<\/strong> ile olu\u015fturdu\u011fumuz kontrollerin, <strong>selective refresh<\/strong> \u00f6zelli\u011fi kazanabilmesi i\u00e7in, bu kontrol alan\u0131 i\u00e7in olu\u015fturulan ayar\u0131n (setting), a\u015fa\u011f\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi <code>'transport' =&gt; 'postMessage'<\/code> arg\u00fcman\u0131na sahip olmas\u0131 gerekmektedir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_setting( 'hero_title', array(\n      'default' => 'Resim \u00fczerine yaz\u0131lacak ba\u015fl\u0131kt\u0131r.',\n      'transport' => 'postMessage',\n    ));<\/code><\/pre>\n\n\n\n<p>Biz, yukar\u0131da verdi\u011fimiz kodda bu durumu, daha esnek bir \u015fekilde, \u015fu kod ile hallettik:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$transport = ( $wp_customize->selective_refresh ? 'postMessage' : 'refresh' );<\/code><\/pre>\n\n\n\n<p>Yani, bir kontrol alan\u0131 i\u00e7in:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->selective_refresh->add_partial(...<\/code><\/pre>\n\n\n\n<p> \u015feklinde ba\u015flayan bir <strong>selective refresh<\/strong> \u00f6zelli\u011fi eklendi ise, <code>$transport<\/code> de\u011fi\u015fkenini <code>'postMessage'<\/code> de\u011feri, yoksa <code>'refresh'<\/code> de\u011feri alacak \u015fekilde ayarlad\u0131k.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Customizer_Alanlarina_Selective_Refresh_Ozelligi_Kazandirma\">Customizer Alanlar\u0131na Selective Refresh \u00d6zelli\u011fi Kazand\u0131rma<\/span><\/h3>\n\n\n\n<p>\u015eimdi, biraz \u00f6nce ba\u015flad\u0131\u011f\u0131m\u0131z <code>Hero_Resmi<\/code> s\u0131n\u0131f\u0131na, olu\u015fturdu\u011fumuz kontroller i\u00e7in, <strong>selective refresh<\/strong> \u00f6zellikleri ekleyelim:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Hero_Resmi\n{\n  public static function refresh( WP_Customize_Manager $wp_customize )\n  { \n    \/\/ Selective refresh kullan\u0131mda de\u011filse hi\u00e7 u\u011fra\u015fma\n    if ( ! isset( $wp_customize->selective_refresh ) ) return;\n\n    \/\/ Ba\u015fl\u0131k i\u00e7in selective refresh \u00f6zelli\u011fi ekler\n    $wp_customize->selective_refresh->add_partial('hero_title', array(\n      'selector' => '.hero-title',\n      'settings' => 'hero_title',\n      'render_callback' => function() {\n        return get_theme_mod('hero_title');\n      }\n    ) );\n\n    \/\/ A\u00e7\u0131klama i\u00e7in selective refresh \u00f6zelli\u011fi ekler\n    $wp_customize->selective_refresh->add_partial('hero_description', array(\n      'selector' => '.hero-description',\n      'settings' => 'hero_description',\n      'render_callback' => function() {\n        return get_theme_mod('hero_description');\n      }\n    ) );\n\n    \/\/ Resim i\u00e7in selective refresh \u00f6zelli\u011fi ekler\n    $wp_customize->selective_refresh->add_partial('hero_image', array(\n      'selector' => '.hero-image img',\n      'settings' => 'hero_image',\n      'render_callback' => self::hero_image_partial() \/\/ Birazdan olu\u015fturaca\u011f\u0131z\n    ) );\n\n    \/\/ Arkaplan resmi i\u00e7in selective refresh \u00f6zelli\u011fi ekler\n    $wp_customize->selective_refresh->add_partial('hero_background_color', array(\n      'selector' => '#hero-css',\n      'settings' => 'hero_background_color',\n      'render_callback' => function() {\n        echo self::css('.hero', 'background-color', 'hero_background_color'); \/\/ Birazdan olu\u015fturaca\u011f\u0131z\n      }\n    ) );\n\n    \/\/ Button text i\u00e7in selective refresh \u00f6zelli\u011fi ekler\n    $wp_customize->selective_refresh->add_partial('hero_button_text', array(\n      'selector' => '.hero .button',\n      'settings' => 'hero_button_text',\n      'render_callback' => function() {\n        return get_theme_mod('hero_button_text');\n      }\n    ) );\n  }\n}\n\nadd_action( 'customize_register', array('Hero_Resmi', 'refresh') );<\/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<h3 class=\"wp-block-heading\"><span id=\"Arka_Plan_Rengini_Isleme\">Arka Plan Rengini \u0130\u015fleme<\/span><\/h3>\n\n\n\n<p>Yine <code>Hero_Resmi<\/code> s\u0131n\u0131f\u0131nda, olu\u015fturdu\u011fumuz iki metot ile, ald\u0131\u011f\u0131m\u0131z arkaplan rengini i\u015fleyelim ve ayn\u0131 zamanda, <strong>selective refresh<\/strong> \u00f6zelli\u011fi i\u00e7in ihtiyac\u0131m\u0131z olan <code>'render_callback'<\/code> fonksiyonunu da haz\u0131rlam\u0131\u015f olal\u0131m:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Hero_Resmi\n{\n  \/\/ Bu metot kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi rengi CSS format\u0131nda kullanmak i\u00e7in bir \u015fablon olu\u015fturur.\n  public static function css( $selector, $property, $theme_mod )\n  {\n    $return = '';\n    $theme_mod = get_theme_mod($theme_mod);\n\n    if ( ! empty( $theme_mod ) )\n    {\n      $return = sprintf('%s { %s:%s; }',\n        $selector,\n        $property,\n        $theme_mod\n      );\n      return $return;\n    }\n  }\n\n  \/\/ Kullan\u0131c\u0131dan gelen rengi, yukar\u0131daki css() metodunun yard\u0131m\u0131 ile teman\u0131n \u00fcst k\u0131sm\u0131na eklenecek \u015fekle sokar\n  public static function output()\n  {\n    echo '&lt;style id=\"hero-css\">';\n    echo self::css('.hero', 'background-color', 'hero_background_color');\n    echo '&lt;\/style>';\n  }\n}\n\/\/ output()  metodunu teman\u0131n \u00fcst k\u0131sm\u0131na g\u00f6nderir.\nadd_action( 'wp_head', array('Hero_Resmi' , 'output') );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Resmi_Isleme\">Resmi \u0130\u015fleme<\/span><\/h3>\n\n\n\n<p>Yine <code>Hero_Resmi<\/code> s\u0131n\u0131f\u0131nda, olu\u015fturdu\u011fumuz bir metot ile, ald\u0131\u011f\u0131m\u0131z arkaplan resmini kullan\u0131ma haz\u0131r hale getirelim ve ayn\u0131 zamanda, <strong>selective refresh<\/strong> \u00f6zelli\u011fi i\u00e7in ihtiyac\u0131m\u0131z olan <code>'render_callback'<\/code> fonksiyonunu da haz\u0131rlam\u0131\u015f olal\u0131m:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Hero_Resmi\n{\n  public static function hero_image_partial()\n  {\n    return wp_get_attachment_image(get_theme_mod('hero_image'), array('1200', '600'));\n  }\n}<\/code><\/pre>\n\n\n\n<p>Bu metodu, <code>Hero_Resmi<\/code> s\u0131n\u0131f\u0131n\u0131n d\u0131\u015f\u0131nda, ba\u011f\u0131ms\u0131z bir fonksiyon olarak \u015fablon par\u00e7as\u0131nda (<code>hero-image.php<\/code>) kullan\u0131lacak \u015fekilde haz\u0131rl\u0131yoruz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function hero_image()\n{\n  return Hero_Resmi::hero_image_partial();\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Selective_refresh-gt_add_partial_Metoduna_Yakindan_Bakalim\">Selective_refresh-&gt; add_partial() Metoduna Yak\u0131ndan Bakal\u0131m<\/span><\/h3>\n\n\n\n<p>Yukar\u0131da verilen kod \u00f6rne\u011findeki <code>public static function refresh()<\/code> metodu incelendi\u011finde, bir <a rel=\"noreferrer noopener\" aria-label=\"Customizer API alan\u0131na (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 alan\u0131na<\/a> ait bir <strong>selective refresh<\/strong> \u00f6zelli\u011fi eklemek i\u00e7in, kulland\u0131\u011f\u0131m\u0131z metodun <code>$wp_customize-&gt;selective_refresh-&gt;add_partial()<\/code> metodu oldu\u011fu g\u00f6r\u00fclecektir. Bu metodu daha yak\u0131ndan incelemek i\u00e7in, &#8220;<em>Ba\u015fl\u0131k<\/em>&#8221; alan\u0131 i\u00e7in (<code>'hero_title'<\/code>) kulland\u0131\u011f\u0131m\u0131z kodlar\u0131 daha yak\u0131ndan inceleyelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  $wp_customize->selective_refresh->add_partial('hero_title', array(\n      'selector' => '.hero-title',\n      'settings' => 'hero_title',\n      'render_callback' => function() {\n        return get_theme_mod('hero_title');\n      }\n   ));<\/code><\/pre>\n\n\n\n<p>\u0130lk sat\u0131rda g\u00f6rd\u00fc\u011f\u00fcm\u00fcz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->selective_refresh->add_partial('hero_title', ...<\/code><\/pre>\n\n\n\n<p>ifadesindeki <code>'hero_title'<\/code> de\u011feri, <strong>selective refresh<\/strong> \u00f6zelli\u011fi ekleyece\u011fimiz <a rel=\"noreferrer noopener\" aria-label=\"Customizer API alan\u0131n (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 alan\u0131n\u0131n<\/a> kimlik de\u011feridir. Hat\u0131rlarsan\u0131z, ba\u015fl\u0131k i\u00e7in olu\u015fturdu\u011fumuz alan\u0131n kimlik de\u011ferini <code>'hero_title'<\/code> olarak belirlemi\u015ftik.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'selector' => '.hero-title',<\/code><\/pre>\n\n\n\n<p>ifadesindeki <code>'.hero-title'<\/code> de\u011feri, <code>hero-image.php<\/code> ad\u0131yla olu\u015fturdu\u011fumuz \u015fablon par\u00e7as\u0131nda, ba\u015fl\u0131k i\u00e7in olu\u015fturdu\u011fumuz HTML eleman\u0131n\u0131n CSS s\u0131n\u0131f\u0131d\u0131r. Bu de\u011fer, AJAX iste\u011fi esnas\u0131nda, ba\u015fl\u0131k de\u011ferine ula\u015fmak i\u00e7in kullan\u0131lacakt\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'settings' => 'hero_title',<\/code><\/pre>\n\n\n\n<p>ifadesindeki <code>'hero_title'<\/code> de\u011feri de, <strong>selective refresh<\/strong> \u00f6zelli\u011fi ekleyece\u011fimiz <a rel=\"noreferrer noopener\" aria-label=\"Customizer API alan\u0131n (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 alan\u0131n\u0131n<\/a> kimlik de\u011feridir. Hat\u0131rlarsan\u0131z, ba\u015fl\u0131k i\u00e7in olu\u015fturdu\u011fumuz alan\u0131n kimlik de\u011ferini <code>'hero_title'<\/code> olarak belirlemi\u015ftik.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'render_callback' => function() {\n        return get_theme_mod('hero_title');<\/code><\/pre>\n\n\n\n<p>ifadesindeki <code>'render_callback'<\/code> arg\u00fcman\u0131n\u0131n de\u011feri bir fonksiyondur. Bu fonksiyon, d\u00fczenledi\u011fimiz alan\u0131n temam\u0131zdaki sunumunu d\u00f6nd\u00fcren fonksiyondur. Yani, <a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-1-customizer-api-alanlari-customizer-objects\/\" target=\"_blank\">Customizer API alan\u0131<\/a> ile elde etti\u011fimiz veriyi, temam\u0131zda nas\u0131l sunuyorsak o ifadeyi d\u00f6nd\u00fcren fonksiyondur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Selective_Refresh_Argumanlari\">Selective Refresh Arg\u00fcmanlar\u0131<\/span><\/h3>\n\n\n\n<p><code>$wp_customize-&gt;selective_refresh-&gt;add_partial()<\/code> metodunun, yukar\u0131da bahsedilenlere ek olarak kabul etti\u011fi ba\u015fka arg\u00fcmanlar da vard\u0131r. Bu arg\u00fcmanlar \u015funlard\u0131r:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8216container_inclusive8217\">&#8216;container_inclusive&#8217;<\/span><\/h4>\n\n\n\n<p>(<em>bool<\/em>)  Bu arg\u00fcman <code>true<\/code> de\u011ferini al\u0131rsa, yineleme olay\u0131 b\u00fct\u00fcn kapsay\u0131c\u0131 HTML eleman\u0131nda (container) ger\u00e7ekle\u015fir; <code>false<\/code> de\u011ferini al\u0131rsa da kapsay\u0131c\u0131 eleman\u0131n yavrusunda ger\u00e7ekle\u015fir. Varsay\u0131lan de\u011feri false olarak ayarlanm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"8216fallback_refresh8217\">&#8216;fallback_refresh&#8217;<\/span><\/h4>\n\n\n\n<p>(<em>bool<\/em>) Temada, yinelenecek HTML eleman\u0131 bulunamazsa, sayfan\u0131n tamam\u0131n\u0131n yinelenip yinelenmeyece\u011fini belirler.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"8216customize-partial-refreshing8217\">&#8216;customize-partial-refreshing&#8217;<\/span><\/h3>\n\n\n\n<p><strong>Selective refresh<\/strong> metodu, yineledi\u011fi HTML eleman\u0131na anl\u0131k olarak, yineleme esnas\u0131nda g\u00f6r\u00fclen ve yineleme bitince hemen kaybolan <code>'customize-partial-refreshing'<\/code> ad\u0131nda bir CSS s\u0131n\u0131f\u0131 ekler. Dilersek, bu s\u0131n\u0131f ile, yineleme an\u0131na ait stiller olu\u015fturabiliriz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Selective_Refresh_Icinde_JavaScript_Eventlerini_Kullanma\">Selective Refresh \u0130\u00e7inde JavaScript Eventlerini Kullanma<\/span><\/h3>\n\n\n\n<p><strong>Selective refresh<\/strong> kullan\u0131rken, ba\u015fka bir tak\u0131m \u00f6zellikler ekleyerek, daha ak\u0131ll\u0131 bir deneyim ya\u015fayabiliriz. Bunun i\u00e7in \u00f6ncelikle bir <code>js<\/code> dosyas\u0131 olu\u015fturmam\u0131z ve temam\u0131z\u0131n dizininde bir yere kaydetmemiz iyi bir ba\u015flang\u0131\u00e7 olacakt\u0131r. Diyelim ki bu ama\u00e7la<code> selective-refresh-for-prewiev.js<\/code> ad\u0131na bir dosya olu\u015fturduk, bu dosyay\u0131 da temam\u0131z\u0131n ana dizinindeki <code>js<\/code> klas\u00f6r\u00fcn\u00fcn i\u00e7ine yerle\u015ftirdik. Bu durumda, olu\u015fturdu\u011fumuz bu <code>js<\/code> dosyas\u0131n\u0131 temam\u0131za tan\u0131tmak i\u00e7in \u015fu kodu kullanmam\u0131z gerekecektir:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_selective_refresh() {\n    $handle = 'selective-refresh-icin';\n    $src = get_template_directory_uri() . '\/js\/selective-refresh-for-prewiev.js';\n    $deps = array( 'customize-preview' );\n    $ver = '1';\n    $in_footer = true;\n    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );\n}\nadd_action( 'customize_preview_init', 'ilktemam_selective_refresh' );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da, <strong>Customizer API<\/strong>&#8216;ye, ekstra <strong>selective refresh<\/strong> \u00f6zellikleri eklemek i\u00e7in olu\u015fturdu\u011fumuz <code>js<\/code> dosyas\u0131n\u0131 temam\u0131za tan\u0131t\u0131rken <code>'customize_preview_init'<\/code> kancas\u0131 kulland\u0131\u011f\u0131m\u0131za dikkat edelim.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, yukar\u0131da verdi\u011fimiz \u00f6rnekteki <em>ba\u015fl\u0131k<\/em> (<code>'hero_title'<\/code>) k\u0131sm\u0131, <strong>selective refresh<\/strong> ile yineledi\u011finde (yani <code>'partial-content-rendered'<\/code> eventi ger\u00e7ekle\u015fti\u011finde) \u00e7al\u0131\u015fan bir <em>jQuery <\/em>kodu olu\u015fturmam\u0131z\u0131 sa\u011flar:<\/p>\n\n\n\n<p><code>js\/selective-refresh-for-prewiev.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery( function( $ ) {\n\t\n    var kontrol = 'hero_title';\n        \n    if ( 'undefined' !== typeof wp &amp;&amp; wp.customize &amp;&amp; wp.customize.selectiveRefresh ) {\n        \n\t\twp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {\n\t\t  if ( placement.partial.id === kontrol ) {\n\t\t\t\/\/ marifetini burada g\u00f6sterebilirsin\n\t\t  }\n\t\t} );\t\n\t}\n});<\/code><\/pre>\n\n\n\n<p><code>'partial-content-rendered'<\/code> gibi, <code>wp.customize.selectiveRefresh<\/code> nesnesi ile birlikte kullanabilece\u011fimiz di\u011fer eventler (olaylar) \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>'partial-content-rendered'<\/code>:  Yapt\u0131\u011f\u0131m\u0131z bir de\u011fi\u015fiklik ger\u00e7ekle\u015fti\u011fi zaman<\/li><li><code>'render-partials-response'<\/code>: Bir data d\u00f6nd\u00fcr\u00fcld\u00fc\u011f\u00fcnde.<\/li><li><code>'partial-content-moved'<\/code>:  Bir bile\u015fen bir sidebar&#8217;a (yan s\u00fctuna) atand\u0131\u011f\u0131nda<\/li><li>&#8216;<code>widget-updated<\/code>&#8216;:  Bir bile\u015fen alan\u0131&nbsp;(<code>WidgetPartial<\/code>) bu alana ait&nbsp;<code>renderContent<\/code>&nbsp;metodu ile yinelendi\u011finde<\/li><li><code>'sidebar-updated'<\/code>: Bir sidebar\u0131n i\u00e7indeki bile\u015fenlerden biri g\u00fcncellendi\u011finde veya yinelendi\u011finde veya <code>reflowWidgets()<\/code> metodu ile bile\u015fenlerin s\u0131ralamas\u0131 de\u011fi\u015ftirildi\u011finde<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"is_customize_preview\">is_customize_preview()<\/span><\/h3>\n\n\n\n<p>Teman\u0131zdaki herhangi bir elemenan\u0131n, sadece \u00f6zelle\u015ftirme esnas\u0131nda g\u00f6r\u00fcnmesini istiyorsan\u0131z, <code>is_customize_preview()<\/code> fonksiyonu ile bunu sa\u011flayabilirsiniz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php if ( is_customize_preview() ) : ?>\n    &lt;button class=\"customizer-edit\" data-control='{ \"name\":\"blogname\" }'>&lt;?php esc_html_e( '\u015eunu d\u00fczenle', 'textdomain' ); ?>&lt;\/button>\n&lt;?php endif; ?><\/code><\/pre>\n\n\n\n<p>Yukar\u0131da olu\u015fturdu\u011fumuz buton, sadece <strong>G\u00f6r\u00fcn\u00fcm-&gt;\u00d6zelle\u015ftir<\/strong> sayfas\u0131nda iken g\u00f6r\u00fcnecektir.<\/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=\"Bilesenlere_Widgets_Selective_Refresh_Ozelligi_Ekleme\">Bile\u015fenlere (Widgets) Selective Refresh \u00d6zelli\u011fi Ekleme<\/span><\/h3>\n\n\n\n<p>Bile\u015fenler, <a rel=\"noreferrer noopener\" aria-label=\"sidebar (sayfa kenarlar\u0131) (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-8-sidebar-sayfa-yani\/\" target=\"_blank\">sidebar (sayfa yan\u0131)<\/a> i\u00e7inde kulland\u0131\u011f\u0131m\u0131z \u015fablon par\u00e7alar\u0131d\u0131r. Temam\u0131z\u0131n &#8220;<strong>\u00d6zelle\u015ftirme<\/strong>&#8221; sayfas\u0131 ile, temam\u0131zda kulland\u0131\u011f\u0131m\u0131z bile\u015fenlerde baz\u0131 ayarlamalar yapabiliriz. Hatta bu ayarlamalar\u0131 selective refresh \u00f6zelli\u011fini kullanarak da yapabiliriz.<\/p>\n\n\n\n<p>Bir WordPress temas\u0131n\u0131n &#8220;<strong>\u00d6zelle\u015ftirme<\/strong>&#8221; sayfas\u0131na, bile\u015fenler i\u00e7in selective refresh \u00f6zelli\u011fi eklemek, teman\u0131n <code>functions.php<\/code> sayfas\u0131na \u015fu kodu eklemek kadar basittir:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Tema \u0130\u00e7in Setup Fonksiyonu *\/\nadd_action( 'after_setup_theme', 'ilktemam_setup' );\n\t\nfunction ilktemam_setup()\n{\n  add_theme_support( 'customize-selective-refresh-widgets' );\n\t\n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verdi\u011fimiz kodun \u00e7al\u0131\u015fmas\u0131 i\u00e7in, bile\u015fene ev sahipli\u011fi yapan <a rel=\"noreferrer noopener\" aria-label=\"sidebar (sayfa yan\u0131) (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-8-sidebar-sayfa-yani\/\" target=\"_blank\">sidebar (sayfa yan\u0131)<\/a> eklenirken, <code>before_widget<\/code>\/<code>after_widget<\/code> arg\u00fcmanlar\u0131n\u0131n bo\u015f b\u0131rak\u0131lmam\u0131\u015f olmas\u0131 gerekmektedir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bilesenleri_Widgets_Selective_Refresh_Uyumlu_Kodlama\">Bile\u015fenleri (Widgets) Selective Refresh Uyumlu Kodlama<\/span><\/h3>\n\n\n\n<p>WordPress kurulumu ile birlikte gelen b\u00fct\u00fcn bile\u015fenler, selective refresh \u00f6zelli\u011fine uyumlu olarak gelirler. Fakat, kendimize \u00f6zel bir bile\u015fen (widget) kodlamak ta isteyebiliriz.<\/p>\n\n\n\n<p>Kodlad\u0131\u011f\u0131m\u0131z bir bile\u015fenin, selective refresh \u00f6zelli\u011fini desteklemesi i\u00e7in, bile\u015feni olu\u015fturdu\u011fumuz s\u0131n\u0131f\u0131n <code>__construct()<\/code> metodu \u015f\u00f6yle olmal\u0131d\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Ornek_Bir_Widget extends WP_Widget {\n \n    public function __construct() {\n        parent::__construct(\n            \u2018ornek-bilesen\u2019,\n            __( '\u00d6rnek', 'textdomain' ),\n            array(\n                'description' => __( \u2018\u00d6rnek bir bile\u015fen\u2019, \u2018textdomain\u2019 ),\n                'customize_selective_refresh' => true, \/\/ Selective Refresh i\u00e7in\n            )\n        );\n \n        \/\/ Selective refresh i\u00e7in\n        if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) {\n            add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );\n        }\n    }\n...<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"JavaScript_Ile_Bilesenlere_Selective_Refresh_Ozelligi_Kazandirma\">JavaScript \u0130le Bile\u015fenlere Selective Refresh \u00d6zelli\u011fi Kazand\u0131rma<\/span><\/h3>\n\n\n\n<p>Bile\u015fenlere <strong>selective refresh<\/strong> \u00f6zelli\u011fi kazand\u0131rmak i\u00e7in, yukar\u0131da verdi\u011fimiz yolun d\u0131\u015f\u0131nda, bir de JavaScript se\u00e7ene\u011fi vard\u0131r.<\/p>\n\n\n\n<p>JavaScript ile, bile\u015fenlere <strong>selective refresh<\/strong> \u00f6zelli\u011fi eklemek i\u00e7in \u00f6ncelikle bir <code>js<\/code> dosyas\u0131 olu\u015fturmal\u0131 ve bu dosyay\u0131 <code>'customize_preview_init'<\/code> kancas\u0131 ile eklemeliyiz. A\u015fa\u011f\u0131da, bu ama\u00e7 ile temam\u0131z\u0131n ana dizinindeki <code>js<\/code> klas\u00f6r\u00fcnde olu\u015fturulan <code>bileseni-canli-tazele.js<\/code> dosyas\u0131n\u0131n eklenmesi 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_bilesenleri_canli_tazele() {\n    $kimlik = 'bilesenleri-canli-ozellestir';\n    $src = get_template_directory_uri() . '\/js\/bileseni-canli-tazele.js';\n    $gerekli = array( 'customize-preview' );\n    $ver = '0.1';\n    $in_footer = true;\n    wp_enqueue_script( $kimlik, $src, $gerekli, $ver, $in_footer );\n}\nadd_action( 'customize_preview_init', 'ilktemam_bilesenleri_canli_tazele' );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verilen kod ile ekledi\u011fimiz <code>bileseni-canli-tazele.js<\/code> dosyas\u0131nda, a\u015fa\u011f\u0131daki kodlar\u0131 kullanarak, kimli\u011fi <code>sidebar-1<\/code> olan bir sidebara ula\u015fabilir ve diledi\u011fimizi yapabiliriz:<\/p>\n\n\n\n<p><code>bileseni-canli-tazele.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>jQuery( function( $ ) {\n    if ( 'undefined' !== typeof wp &amp;&amp; wp.customize &amp;&amp; wp.customize.selectiveRefresh ) {\n        wp.customize.selectiveRefresh.bind( 'sidebar-updated', function( sidebarPartial ) { \/\/sadece sidebar g\u00fcncellendi\u011finde\n            if ( 'sidebar-1' === sidebarPartial.sidebarId ) {\n                \/\/ sidebar-1 i\u00e7in marifetini g\u00f6ster\n            }\n        } );\n    }\n} );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bir_Customizer_API_Alanina_Sonradan_Selective_Refresh_Ozelligi_Kazandirmak\">Bir Customizer API Alan\u0131na Sonradan Selective Refresh \u00d6zelli\u011fi Kazand\u0131rmak<\/span><\/h3>\n\n\n\n<p>Teman\u0131z\u0131n <em>\u00d6zelle\u015ftirme<\/em> sayfas\u0131nda bulunan kontroller, standart olarak otomatik tazeleme \u00f6zelli\u011fine sahiptir. Fakat bu tazeleme olay\u0131, teman\u0131z\u0131n \u00f6n izlemedeki sayfan\u0131n tamam\u0131 yinelenerek ger\u00e7ekle\u015fir. Bu durum bazen i\u015finizi yava\u015flatabilmektedir.<\/p>\n\n\n\n<p>Bir <strong>Customizer API<\/strong> kontrol alan\u0131na, sonradan da selective refresh \u00f6zelli\u011fi ekleyebiliriz. \u00d6rne\u011fin, <em>Site kimli\u011fi<\/em> b\u00f6l\u00fcm\u00fcndeki kontrollerinden biri olan &#8220;<em>Site ba\u015fl\u0131\u011f\u0131<\/em>&#8220;, standart olarak <strong>selective refresh<\/strong> \u00f6zelli\u011fi ta\u015f\u0131maz. <em>Site ba\u015fl\u0131\u011f\u0131<\/em> ayar\u0131n\u0131n kimli\u011fi de <code>\"blogname\"<\/code> dir.<\/p>\n\n\n\n<p>Diyelim ki temam\u0131z, site ba\u015fl\u0131\u011f\u0131n\u0131 \u015fu \u015fekilde kullan\u0131yor:<\/p>\n\n\n\n<p><code>header.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1 class=\"sc-title\">&lt;?php bloginfo(\"name\"); ?>&lt;\/h1><\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, &#8220;<em>Site ba\u015fl\u0131\u011f\u0131<\/em>&#8221; alan\u0131 i\u00e7in selective refresh \u00f6zelli\u011fini etkinle\u015ftirir:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_site_basligini_canli_tazele( WP_Customize_Manager $wp_customize ) {\n    $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';\n    $wp_customize->selective_refresh->add_partial( 'blogname', array(\n        'selector' => 'h1.sc-title',\n        'render_callback' => function() {\n            bloginfo( 'name' );\n        },\n    ) );\n}\nadd_action( 'customize_register', 'ilktemam_site_basligini_canli_tazele' );<\/code><\/pre>\n\n\n\n<p>Bir <strong>Customizer API<\/strong> ayar\u0131na sonradan selective refresh \u00f6zelli\u011fi eklemenin tek yolu PHP kodlar\u0131 de\u011fildir. Yukar\u0131daki kod ile yapt\u0131\u011f\u0131m\u0131z \u015feyi, <em>JavaScript <\/em>yard\u0131m\u0131 ile de yapabiliriz. Bunun i\u00e7in \u00f6nce, &#8220;<em>Site ba\u015fl\u0131\u011f\u0131<\/em>&#8221; ayar\u0131n\u0131n <code>'transport'<\/code> arg\u00fcman\u0131n\u0131 <code>'postMessage'<\/code> \u015feklinde de\u011fi\u015ftirmeliyiz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_site_basligini_canli_tazele( WP_Customize_Manager $wp_customize ) {\n    $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';\n}\nadd_action( 'customize_register', 'ilktemam_site_basligini_canli_tazele' );<\/code><\/pre>\n\n\n\n<p>Daha sonra bir <code>js<\/code> dosyas\u0131 olu\u015fturmal\u0131 ve bu dosyay\u0131 <code>'customize_preview_init'<\/code> kancas\u0131 ile eklemeliyiz. A\u015fa\u011f\u0131da, bu ama\u00e7 ile temam\u0131z\u0131n ana dizinindeki <code>js<\/code> klas\u00f6r\u00fcnde olu\u015fturulan <code>site-basligini-canli-tazele.js<\/code> dosyas\u0131n\u0131n eklenmesi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_site_basligini_canli_tezele() {\n  wp_enqueue_script( 'custom_css_preview', get_template_directory_uri() . '\/js\/site-basligini-canli-tazele.js', array( 'customize-preview', 'jquery' ) );\n}\nadd_action( 'customize_preview_init', 'ilktemam_site_basligini_canli_tezele' );<\/code><\/pre>\n\n\n\n<p>Daha sonra, olu\u015fturdu\u011fumuz <code>site-basligini-canli-tazele.js<\/code> dosyas\u0131nda \u015fu kodlar\u0131 kullan\u0131yoruz:<\/p>\n\n\n\n<p><code>site-basligini-canli-tazele.js<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>( function( $ ) {\n  wp.customize( 'blogname', function( value ) {\n    value.bind( function( to ) {\n      $( 'h1.sc-title' ).text( to );\n    } );\n  } );\n} )( jQuery );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Verileri_Dogrulama_Validate_ve_Filtreleme_Sanitize\">Verileri Do\u011frulama (Validate) ve Filtreleme (Sanitize)<\/span><\/h2>\n\n\n\n<p>Sitemizin arka plan\u0131nda da \u00f6n y\u00fcz\u00fcnde de, kullan\u0131c\u0131lar\u0131m\u0131zdan ald\u0131\u011f\u0131m\u0131z veriler i\u00e7in gerekli g\u00fcvenlik \u00f6nlemlerini almal\u0131y\u0131z. Bunun i\u00e7in, bir <strong>Customizer API<\/strong> ayar\u0131 olu\u015ftururken <code>'sanitize_callback'<\/code>&nbsp; ve &nbsp;<code>'validate_callback'<\/code>&nbsp;arg\u00fcmanlar\u0131n\u0131 kullanabiliriz. Bu iki arg\u00fcman, de\u011fer olarak, birer fonksiyon al\u0131rlar. Bu fonksiyonlar, kullan\u0131c\u0131dan gelecek olan veriyi filtrelemek ve do\u011frulamak i\u00e7in kullan\u0131l\u0131r. A\u015fa\u011f\u0131da, <code>'yayinlanma_yili'<\/code> ad\u0131nda bir ayar olu\u015fturulurken bu iki arg\u00fcman da kullan\u0131lm\u0131\u015ft\u0131r:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$wp_customize->add_setting( 'yayinlanma_yili', array(\n    'sanitize_callback' => 'absint',\n    'validate_callback' => 'ilktemam_yili_dogrula'\n) );\nfunction ilktemam_yili_dogrula( $validity, $value ) {\n    $value = intval( $value );\n    if ( empty( $value ) || ! is_numeric( $value ) ) {\n        $validity->add( 'required', __( 'Ge\u00e7erli bir y\u0131l girmelisiniz.' ) );\n    } elseif ( $value &lt; 1900 ) {\n        $validity->add( 'cok_kucuk', __( 'Y\u0131l \u00e7ok eski.' ) );\n    } elseif ( $value > gmdate( 'Y' ) ) {\n        $validity->add( 'cok_buyuk', __( 'Y\u0131l \u00e7ok yeni.' ) );\n    }\n    return $validity;\n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verilen kodun <code>'sanitize_callback' =&gt; 'absint'<\/code> k\u0131sm\u0131nda g\u00f6rd\u00fc\u011f\u00fcm\u00fcz <code>'absint'<\/code> de\u011feri, haz\u0131r bir WordPress fonksiyonunun ismidir. Bu fonksiyon, bir say\u0131sal de\u011feri pozitif tam say\u0131ya d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/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>Bir <strong>Customizer API<\/strong> ayar\u0131 i\u00e7in <code>'sanitize_callback'<\/code> fonksiyonu eklemenin bir ba\u015fka yolu da, filtrelemedir yani <code>add_filter()<\/code> fonksiyonudur. Bunun i\u00e7in <code>add_filter()<\/code> fonksiyonunda, <code>'customize_sanitize_{$setting_id}'<\/code> kancas\u0131 kullan\u0131l\u0131r. Bu kancadaki <code>{$setting_id}<\/code> ifadesinin yerine, ayar\u0131n kimli\u011fi gelmelidir. Ayn\u0131 \u015fekilde, <code>'validate_callback'<\/code> fonksiyonu eklemek i\u00e7in de <code>'customize_validate_{$setting_id}'<\/code> kancas\u0131 kullan\u0131l\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, kimlik ad\u0131 <code>'yayinlanma_yili'<\/code> olan bir ayar i\u00e7in eklenen <code>'ilktemam_yili_dogrula'<\/code> ad\u0131nda bir <code>'validate_callback'<\/code> fonksiyonu \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'customize_validate_yayinlanma_yili', 'ilktemam_yili_dogrula' );\n   \nfunction ilktemam_yili_dogrula( $validity, $value ) {\n    $value = intval( $value );\n    if ( empty( $value ) || ! is_numeric( $value ) ) {\n        $validity->add( 'zorunlu', __( 'Ge\u00e7erli bir y\u0131l girmelisiniz.' ) );\n    } elseif ( $value &lt; 1900 ) {\n        $validity->add( 'cok_kucuk', __( 'Y\u0131l \u00e7ok eski.' ) );\n    } elseif ( $value > gmdate( 'Y' ) ) {\n        $validity->add( 'cok_buyuk', __( 'Y\u0131l \u00e7ok yeni.' ) );\n    }\n    return $validity;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"JavaScript_Dogrulamasi_8211_Tarayici_Dogrulamasi\">JavaScript Do\u011frulamas\u0131 &#8211; Taray\u0131c\u0131 Do\u011frulamas\u0131<\/span><\/h2>\n\n\n\n<p>Herhangi bir ayar alan\u0131n\u0131z\u0131n \u00f6n izlemesi, JavaScript yard\u0131m\u0131 ile y\u00f6netiliyorsa (selective refresh \u00f6zelli\u011fi yoksa), bu alan i\u00e7in yine JavaScript ile bir do\u011frulama i\u015flemi uygulayabilirsiniz. Fakat, JavaScript do\u011frulamalar\u0131, PHP do\u011frulamalar\u0131 ile yer de\u011fi\u015ftirmemelidir, \u00e7\u00fcnk\u00fc JavaScript do\u011frulamalar\u0131, k\u00f6t\u00fc niyetli ki\u015filerin kolayca atlatabilece\u011fi do\u011frulamalard\u0131r.<\/p>\n\n\n\n<p><strong>Customizer API<\/strong> kontrolleri i\u00e7in olu\u015fturulacak JavaScript do\u011frulamalar\u0131 i\u00e7in bir <code>js<\/code> dosyas\u0131 olu\u015fturmal\u0131 ve bu dosyay\u0131 temam\u0131za <code>'customize_controls_enqueue_scripts'<\/code> kancas\u0131 ve <code>'customize-controls'<\/code> gereklili\u011fi ile eklemeliyiz. A\u015fa\u011f\u0131da, <code>js<\/code> klas\u00f6r\u00fc alt\u0131nda bu ama\u00e7 ile olu\u015fturulan <code>yayin-yilini-dogrula.js<\/code> dosyas\u0131n\u0131n eklenmesine ait kod 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_site_basligini_canli_tezele() {\n  wp_enqueue_script( 'custom_css_preview', get_template_directory_uri() . '\/js\/yayin-yilini-dogrula.js', array( 'customize-controls', 'jquery' ) );\n}\nadd_action( 'customize_controls_enqueue_scripts', 'ilktemam_site_basligini_canli_tezele' );<\/code><\/pre>\n\n\n\n<p>WordPress, Customizer API i\u00e7in JavaScript do\u011frulamalar\u0131 yapabilmek amac\u0131 ile  <code>wp.customize.Setting<\/code> s\u0131n\u0131f\u0131nda <code>validate<\/code> metoduna sahiptir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, kimlik adi <code>'yayinlanma_yili'<\/code> olan bir ayar\u0131n, JavaScript ile yap\u0131lan do\u011frulamas\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<p><code>yayin-yilini-dogrula.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\t\tapi( 'yayinlanma_yili', function ( setting ) {\n\t\t\tsetting.validate = function ( value ) {\n\t\t\t\tvar code, notification;\n\t\t\t\tvar year = parseInt( value, 10 );\n\t\t \n\t\t\t\tcode = 'zorunlu';\n\t\t\t\tif ( isNaN( year ) ) {\n\t\t\t\t\tnotification = new api.Notification(\n\t\t\t\t\t\tcode,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'warning',\n\t\t\t\t\t\t\tmessage: 'Bu alan\u0131 bo\u015f b\u0131rakamazs\u0131n\u0131z.'\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetting.notifications.add( code, notification );\n\t\t\t\t\n\t\t\t\t} else {\n\t\t\t\t\tsetting.notifications.remove( code );\n\t\t\t\t}\n\t\t \n\t\t\t\tcode = 'cok_kucuk';\n\t\t\t\tif ( year &lt; 1900 ) {\n\t\t\t\t\tnotification = new api.Notification(\n\t\t\t\t\t\tcode,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'warning',\n\t\t\t\t\t\t\tmessage: 'Bu kadar eski olamaz.'\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetting.notifications.add( code, notification );\n\t\t\t\t} else {\n\t\t\t\t\tsetting.notifications.remove( code );\n\t\t\t\t}\n\t\t \n\t\t\t\tcode = 'cok_buyuk';\n\t\t\t\tif ( year > new Date().getFullYear() ) {\n\t\t\t\t\tnotification = new api.Notification(\n\t\t\t\t\t\tcode,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'warning',\n\t\t\t\t\t\t\tmessage: 'Bu kadar yeni olamaz.'\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tsetting.notifications.add( code, notification );\n\t\t\t\t} else {\n\t\t\t\t\tsetting.notifications.remove( code );\n\t\t\t\t}\n\t\t \n\t\t\t\treturn value;\n\t\t\t};\n\t\t} );\n\t\t\n\t});\n})(jQuery, wp.customize);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Bildirimler\">Bildirimler<\/span><\/h2>\n\n\n\n<p>Kullan\u0131c\u0131lar\u0131n girdikleri verilerin do\u011frulanmas\u0131 kadar, girilen yanl\u0131\u015f veriler hakk\u0131nda an\u0131nda bilgilendirilmeleri de \u00f6nemlidir.<\/p>\n\n\n\n<p><strong>Customizer API<\/strong> kontrol alanlar\u0131nda olu\u015fturulacak JavaScript bildirimleri i\u00e7in, bir <code>js<\/code> dosyas\u0131 olu\u015fturmal\u0131 ve bu dosyay\u0131 temam\u0131za <code>'customize_controls_enqueue_scripts'<\/code> kancas\u0131 ve <code>'customize-controls'<\/code> gereklili\u011fi ile eklemeliyiz. A\u015fa\u011f\u0131da, <code>js<\/code> klas\u00f6r\u00fc alt\u0131nda bu ama\u00e7 ile olu\u015fturulan <code>site-basligini-denetle.js<\/code> dosyas\u0131n\u0131n eklenmesine ait kod 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_site_basligini_denetle() {\n  wp_enqueue_script( 'custom_css_preview', get_template_directory_uri() . '\/js\/site-basligini-denetle.js', array( 'customize-controls', 'jquery' ) );\n}\nadd_action( 'customize_controls_enqueue_scripts', 'ilktemam_site_basligini_denetle' );<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131da verilen kod, teman\u0131n <strong>\u00d6zelle\u015ftir<\/strong> sayfas\u0131ndaki &#8220;<em>Site ba\u015fl\u0131\u011f\u0131<\/em>&#8221; (<code>'blogname'<\/code>) k\u0131sm\u0131nda 20 karakterden b\u00fcy\u00fck bir ba\u015fl\u0131k girilince uyar\u0131 vermektedir:<\/p>\n\n\n\n<p><code>site-basligini-denetle.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\t\tapi( 'blogname', function( setting ) {\n\t\t\tsetting.bind( function( value ) {\n\t\t\t\tvar code = 'uzun_baslik';\n\t\t\t\tif ( value.length > 20 ) {\n\t\t\t\t\tsetting.notifications.add( code, new api.Notification(\n\t\t\t\t\t\tcode,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'warning',\n\t\t\t\t\t\t\tmessage: 'Bu tema 20 karakterden fazla ba\u015fl\u0131\u011fa izin vermiyor.'\n\t\t\t\t\t\t}\n\t\t\t\t\t) );\n\t\t\t\t} else {\n\t\t\t\t\tsetting.notifications.remove( code );\n\t\t\t\t}\n\t\t\t});\n\t\t});\t\n\t\t\n\t});\n})(jQuery, wp.customize);<\/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","protected":false},"excerpt":{"rendered":"<p>Customizer API uygulamas\u0131n\u0131n selective refresh \u00f6zelli\u011fi, veri do\u011frulama ve filtreleme \u00f6zellikleri detayl\u0131 olarak 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,218],"class_list":["post-4701","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-customizer-api","tag-selective-refresh"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4701","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=4701"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/4701\/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=4701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=4701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=4701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}