{"id":7097,"date":"2023-06-22T23:41:37","date_gmt":"2023-06-22T20:41:37","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=7097"},"modified":"2023-06-30T00:47:01","modified_gmt":"2023-06-29T21:47:01","slug":"theme-json-dosyasi","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-blok-tabanli-tema-kodlama\/theme-json-dosyasi\/","title":{"rendered":"Theme.json Dosyas\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=\"#Tehemejson_Dosyasi_Nedir\"><span class=\"toc_number toc_depth_1\">1<\/span> Teheme.json Dosyas\u0131 Nedir?<\/a><\/li><li><a href=\"#Bir_Themejson_Dosyasi_Nasil_Olusturulur\"><span class=\"toc_number toc_depth_1\">2<\/span> Bir Theme.json Dosyas\u0131 Nas\u0131l Olu\u015fturulur?<\/a><\/li><li><a href=\"#Onceden_Ayarlanmis_Degerler_Preset_Values\"><span class=\"toc_number toc_depth_1\">3<\/span> \u00d6nceden Ayarlanm\u0131\u015f De\u011ferler (Preset Values)<\/a><\/li><li><a href=\"#Ozel_Degerler_Custom_Values\"><span class=\"toc_number toc_depth_1\">4<\/span> \u00d6zel De\u011ferler (Custom Values)<\/a><\/li><li><a href=\"#Butun_Temalara_Bir_themejson_Dosyasi_Eklenebilir\"><span class=\"toc_number toc_depth_1\">5<\/span> B\u00fct\u00fcn Temalara Bir theme.json Dosyas\u0131 Eklenebilir<\/a><\/li><li><a href=\"#Themejson_ve_Add_theme_support_Rekabeti\"><span class=\"toc_number toc_depth_1\">6<\/span> Theme.json ve Add_theme_support Rekabeti<\/a><\/li><li><a href=\"#Settings\"><span class=\"toc_number toc_depth_1\">7<\/span> Settings<\/a><ul><li><a href=\"#Renk_Ayarlari\"><span class=\"toc_number toc_depth_2\">7.1<\/span> Renk Ayarlar\u0131<\/a><\/li><li><a href=\"#Tipografi_Yazi_Duzeni_Ayarlari\"><span class=\"toc_number toc_depth_2\">7.2<\/span> Tipografi (Yaz\u0131 D\u00fczeni) Ayarlar\u0131<\/a><\/li><li><a href=\"#Yerlesim_Layout\"><span class=\"toc_number toc_depth_2\">7.3<\/span> Yerle\u015fim (Layout)<\/a><\/li><li><a href=\"#Boyutlar_Spacing\"><span class=\"toc_number toc_depth_2\">7.4<\/span> Boyutlar (Spacing)<\/a><ul><li><a href=\"#Bize_Ozel_Boyut_Skalasi\"><span class=\"toc_number toc_depth_3\">7.4.1<\/span> Bize \u00d6zel Boyut Skalas\u0131<\/a><\/li><li><a href=\"#Ozel_Sapcing_Ayarlarini_Devre_Disi_Birakma\"><span class=\"toc_number toc_depth_3\">7.4.2<\/span> \u00d6zel Sapcing Ayarlar\u0131n\u0131 Devre D\u0131\u015f\u0131 B\u0131rakma<\/a><\/li><\/ul><\/li><li><a href=\"#Ayarlari_AcmaDevre_Disi_Birakma\"><span class=\"toc_number toc_depth_2\">7.5<\/span> Ayarlar\u0131 A\u00e7ma\/Devre D\u0131\u015f\u0131 B\u0131rakma<\/a><\/li><\/ul><\/li><li><a href=\"#Stiller_Styles\"><span class=\"toc_number toc_depth_1\">8<\/span> Stiller (Styles)<\/a><\/li><li><a href=\"#Themejson_Elemanlari_Elements\"><span class=\"toc_number toc_depth_1\">9<\/span> Theme.json Elemanlar\u0131 (Elements)<\/a><\/li><li><a href=\"#Sablon_Parcalarini_Kaydetme\"><span class=\"toc_number toc_depth_1\">10<\/span> \u015eablon Par\u00e7alar\u0131n\u0131 Kaydetme<\/a><\/li><li><a href=\"#Ozel_Sablonlari_Tanitma\"><span class=\"toc_number toc_depth_1\">11<\/span> \u00d6zel \u015eablonlar\u0131 Tan\u0131tma<\/a><\/li><li><a href=\"#Global_Stil_Degiskenleri_Global_Styles_Variations\"><span class=\"toc_number toc_depth_1\">12<\/span> Global Stil De\u011fi\u015fkenleri (Global Styles Variations)<\/a><\/li><li><a href=\"#Sonuc\"><span class=\"toc_number toc_depth_1\">13<\/span> Sonu\u00e7<\/a><\/li><\/ul><\/div>\n\n<h2 class=\"wp-block-heading\"><span id=\"Tehemejson_Dosyasi_Nedir\">Teheme.json Dosyas\u0131 Nedir?<\/span><\/h2>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131, blok tabanl\u0131 temalar\u0131n konfig\u00fcrasyon (ayar) dosyas\u0131d\u0131r. Bu dosya ile bloklar\u0131n ayarlar\u0131 ve teman\u0131n stilleri d\u00fczenlenir.<\/p>\n\n\n\n<p>Bu \u00f6zellik WordPress 5.8 ile birlikte gelmi\u015ftir ve daha eski s\u00fcr\u00fcmlerde \u00e7al\u0131\u015fmas\u0131 i\u00e7in <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gutenberg Eklentisinin<\/a> kullan\u0131lmas\u0131 gerekmektedir.<\/p>\n\n\n\n<p>WordPress 5.8 ile birlikte gelen <strong>theme.json<\/strong> dosyas\u0131 <strong><em>versiyon 1<\/em><\/strong>&#8216;dir. Fakat WordPress 5.9 ile birlikte <strong>theme.json<\/strong> <strong><em>versiyon 2<\/em><\/strong> kullan\u0131lmaktad\u0131r. Biz bu yaz\u0131m\u0131zda <strong><em>versiyon 2<\/em><\/strong>&#8216;yi ele alaca\u011f\u0131z.<\/p>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131 ile yap\u0131labileceklerden baz\u0131lar\u0131 \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>B\u00fcy\u00fck k\u00fc\u00e7\u00fck harf se\u00e7imi, padding, margin, \u00f6zel line-height gibi \u00f6zelliklerin eklenmesi ya da kald\u0131r\u0131lmas\u0131<\/li>\n\n\n\n<li>Birden \u00e7ok renk paleti, gradyan ve \u00e7ift ton ekleme<\/li>\n\n\n\n<li>Font b\u00fcy\u00fckl\u00fckleri ekleme<\/li>\n\n\n\n<li>\u0130\u00e7erik ve geni\u015f i\u00e7erikler i\u00e7in varsay\u0131lan geni\u015flikler ekleme<\/li>\n\n\n\n<li>\u00d6zel CSS kodlar\u0131 ekleme<\/li>\n\n\n\n<li>\u015eablon par\u00e7alar\u0131 ekleme<\/li>\n<\/ul>\n\n\n\n<p>Temaya bir <strong>theme.json<\/strong> dosyas\u0131 eklendi\u011fin <strong>\u015eablon Edit\u00f6r\u00fc<\/strong> \u00f6zelli\u011fi gelir.<\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-site-duzenleyici-yeni-sablon-editoru-ile-sablon-ekle-duzenle-.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-site-duzenleyici-yeni-sablon-editoru-ile-sablon-ekle-duzenle-.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-site-d\u00fczenleyici-yeni-\u015fablon-edit\u00f6r\u00fc-ile-\u015fablon-ekle-d\u00fczenle-\" class=\"wp-image-6986\" width=\"207\" height=\"271\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-site-duzenleyici-yeni-sablon-editoru-ile-sablon-ekle-duzenle-.jpg 413w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-site-duzenleyici-yeni-sablon-editoru-ile-sablon-ekle-duzenle--229x300.jpg 229w\" sizes=\"auto, (max-width: 207px) 100vw, 207px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Bir_Themejson_Dosyasi_Nasil_Olusturulur\">Bir Theme.json Dosyas\u0131 Nas\u0131l Olu\u015fturulur?<\/span><\/h2>\n\n\n\n<p class=\"has-white-background-color has-background\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">\u0130pucu<\/mark><\/strong>: <strong>Theme.json<\/strong> dosyas\u0131 ile \u00e7al\u0131\u015f\u0131rken yapt\u0131\u011f\u0131n\u0131z ayarlar\u0131n etkilerini daha \u00e7abuk g\u00f6rmek i\u00e7in <strong>cache <\/strong>(belle\u011fe alma) \u00f6zelli\u011fini devre d\u0131\u015f\u0131 b\u0131rakabilirsiniz. Ayr\u0131ca ald\u0131\u011f\u0131n\u0131z hatalar\u0131 g\u00f6rmek isterseniz, <strong>wp-config.php<\/strong> dosyas\u0131n\u0131 a\u00e7arak, <strong>WP_DEBUG <\/strong>veya <strong>SCRIPT_DEBUG <\/strong>de\u011ferlerini &#8220;<strong>true<\/strong>&#8221; yapabilirsiniz.<\/p>\n\n\n\n<p>Blok teman\u0131z\u0131n ana dizininde <strong>theme.json<\/strong> ad\u0131nda bir dosya olu\u015fturun.<\/p>\n\n\n\n<p>Dosyan\u0131n i\u00e7ine bir s\u00fcsl\u00fc parantez a\u00e7\u0131n ve kapat\u0131n (Bu dosya bir json dosyas\u0131d\u0131r ve dosya i\u00e7eri\u011fi bir json nesnesi olmak zorundad\u0131r.). Parantezlerin aras\u0131na \u00f6nce bu dosyan\u0131n \u015femas\u0131n\u0131 ve versiyonunu girelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n \"version\": 2\n}<\/code><\/pre>\n\n\n\n<p>Bunlar\u0131n d\u0131\u015f\u0131nda bu dosyan\u0131n iki temel b\u00f6l\u00fcm\u00fc vard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>settings<\/strong>: Hem bloklar hem de teman\u0131n ayarlar\u0131 i\u00e7in kullan\u0131labilir.<\/li>\n\n\n\n<li><strong>styles<\/strong>: Hem bloklar hem de teman\u0131n stilleri i\u00e7in kullan\u0131labilir.<\/li>\n<\/ul>\n\n\n\n<p>Bu iki b\u00f6l\u00fcm \u015f\u00f6yle yer al\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n \"version\": 2,\n \"settings\": {},\n \"styles\": {}\n}<\/code><\/pre>\n\n\n\n<p>Yapaca\u011f\u0131n\u0131z ayar temay\u0131 ilgilendiren bir ayarsa (<strong><em>global ayarlar<\/em><\/strong>), ilgili b\u00f6l\u00fcm\u00fcn do\u011frudan eleman\u0131 olarak girilir. Mesela teman\u0131n renk ayar\u0131 \u015f\u00f6yle yap\u0131l\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"color\": { ... }, \/\/ Global ayarlar\n\t}\n}<\/code><\/pre>\n\n\n\n<p>Bloklar ile ilgili bir ayar yapacaksan\u0131z, <strong>settings <\/strong>b\u00f6l\u00fcm\u00fcne bir <strong>blocks <\/strong>eleman\u0131 girip bunu eleman\u0131n i\u00e7ini kullanmal\u0131s\u0131n\u0131z. <strong>Blocks <\/strong>eleman\u0131nda hangi blo\u011fun ayarlar\u0131n\u0131 yapacaksan\u0131z o blo\u011fun ad\u0131 ile bir eleman olu\u015fturup o eleman\u0131n i\u00e7inde diledi\u011finiz ayarlar\u0131 yapabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"color\": { ... }, \/\/ Global ayarlar\n\t\t\"blocks\": {\n\t\t\t\"core\/group\": { \n\t\t\t\t\"color\": { ... }, \/\/ Grup blo\u011funun renk ayarlar\u0131\n\t\t\t\t\"typography\": { ... } \/\/ Grup blo\u011funun tipografi ayarlar\u0131\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Onceden_Ayarlanmis_Degerler_Preset_Values\">\u00d6nceden Ayarlanm\u0131\u015f De\u011ferler (Preset Values)<\/span><\/h2>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131 ile, bir tak\u0131m \u00f6n tan\u0131ml\u0131 ve varsay\u0131lan bir de\u011feri olan de\u011fi\u015fkenler olu\u015fturabiliriz. Bu de\u011fi\u015fkenler; WordPress blok edit\u00f6r\u00fcnde g\u00f6rd\u00fc\u011f\u00fcm\u00fc blok ayarlar\u0131nda veya temam\u0131z\u0131n CSS kodlar\u0131nda kullan\u0131l\u0131r. Mesela, bloklar\u0131n renk se\u00e7imlerini yaparken kulland\u0131\u011f\u0131m\u0131z renk paleti (<code>color palette<\/code>) buna bir \u00f6rnektir. Bu paletteki g\u00f6rd\u00fc\u011f\u00fcm\u00fcz renk de\u011ferleri, <strong>theme.json<\/strong> dosyas\u0131ndan gelir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki \u00f6rnekte, renk paletinde (<code>palette<\/code>) sunulmak \u00fczere ayarlanm\u0131\u015f bir siyah renk g\u00f6r\u00fcyorosunuz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": {\n        \"color\": {\n            \"palette\": &#91;\n                {\n                    \"name\": \"Black\",\n                    \"slug\": \"black\",\n                    \"color\": \"#000000\"\n                }\n            ]\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod ile temam\u0131z\u0131n body eleman\u0131nda \u015f\u00f6yle CSS de\u011fi\u015fkeni yarat\u0131l\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--wp--preset--color--black: #000000;\n<\/code><\/pre>\n\n\n\n<p>Temam\u0131z\u0131n HTML <code>&lt;body&gt;<\/code> eleman\u0131nda olu\u015fan de\u011fi\u015fken:<\/p>\n\n\n\n<div class=\"wp-block-group scmb-30 has-white-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"50\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-palette-color\" class=\"wp-image-7151\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color.jpg 345w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-300x43.jpg 300w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/figure>\n<\/div>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, WordPress&#8217;in paragraf blo\u011funun renk paletinde bir mavi renk olu\u015fturur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": {\n            \"blocks\": {\n                \"core\/paragraph\": {\n                    \"color\": {\n                        \"palette\": &#91;\n                            {\n                                \"name\": \"Blue\",\n                                \"slug\": \"blue\",\n                                \"color\": \"#0000FF\"\n                            }\n                        ]\n                    }\n                }\n            }\n        }\n    }        \n}<\/code><\/pre>\n\n\n\n<p>Bu koda, ilgili paragraf blo\u011funda kullan\u0131lmak \u00fczere \u015fu CSS de\u011fi\u015fkenini olu\u015fturacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>--wp--preset--color--blue: #0000FF;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Ozel_Degerler_Custom_Values\">\u00d6zel De\u011ferler (Custom Values)<\/span><\/h2>\n\n\n\n<p>CSS de\u011fi\u015fkenlerinde kullan\u0131lmak \u00fczere \u00f6zel de\u011fi\u015fkenler olu\u015fturabiliriz. Bu de\u011fi\u015fkenler <code><strong>settings.custom<\/strong><\/code> b\u00f6l\u00fcm\u00fcnde (veya&nbsp;<code><strong>settings.blocks.BLOCKNAME.custom<\/strong><\/code>&nbsp;b\u00f6l\u00fcm\u00fcnde) olu\u015fturulur. Olu\u015furulan bu de\u011ferler <code>theme.json<\/code>&nbsp;dosyas\u0131n\u0131n veya teman\u0131n CSS&#8217;nin istenilen yerinde kullan\u0131labilir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": {\n            \"custom\": {\n                \"rengim\": \"red\"\n            },\n            \"blocks\": {\n                \"core\/paragraph\": {\n                    \"custom\": {\n                        \"rengim\": \"green\"\n                    }\n                }\n            }\n        }\n    }        \n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, <code><strong>--wp--custom--rengim<\/strong><\/code> ad\u0131nda bir CSS de\u011fi\u015fkeni olu\u015fturur. Bu de\u011fi\u015fkenin de\u011feri de &#8220;<code>red<\/code>&#8221; olarak ayarlan\u0131r. Fakat \u201ccore\/paragraph\u201d bloklar\u0131na de\u011fi\u015fken &#8220;<code>green<\/code>&#8221; de\u011ferini al\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Butun_Temalara_Bir_themejson_Dosyasi_Eklenebilir\">B\u00fct\u00fcn Temalara Bir theme.json Dosyas\u0131 Eklenebilir<\/span><\/h2>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131, blok temalarda oldu\u011fu gibi klasik temalarda da \u00e7al\u0131\u015f\u0131r fakat klasik edit\u00f6r ile \u00e7al\u0131\u015fmaz.<\/p>\n\n\n\n<p>E\u011fer var olan teman\u0131za bir <strong>theme.json<\/strong> dosyas\u0131 eklerseniz; teman\u0131zdaki ve <strong>theme.json<\/strong> dosyas\u0131ndaki CSS kodlar\u0131n\u0131n birbirinin tekrar\u0131 olmamas\u0131 i\u00e7in bir temizlik yapmal\u0131s\u0131n\u0131z.<\/p>\n\n\n\n<p>Ek olarak, &#8220;full&#8221; ve &#8220;wide&#8221; bloklar i\u00e7in hizalama mekanizmas\u0131, bir <strong>theme.json<\/strong> mevcut oldu\u011funda farkl\u0131 \u00e7al\u0131\u015f\u0131r ve dikkate al\u0131nmal\u0131d\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Themejson_ve_Add_theme_support_Rekabeti\">Theme.json ve Add_theme_support Rekabeti<\/span><\/h2>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131nda yap\u0131lan ayarlar <code><strong>add_theme_support()<\/strong><\/code> fonksiyonu ile de yap\u0131labilir. Mesela, renk paletini <strong>functions.php<\/strong> dosyas\u0131na ekleyece\u011fimiz \u015fu kod ile de ayarlayabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function benimtemam_setup_theme_supported_features() {\n    add_theme_support( 'editor-color-palette', array(\n        array(\n            'name'  =&gt; esc_attr__( 'strong magenta', 'themeLangDomain' ),\n            'slug'  =&gt; 'strong-magenta',\n            'color' =&gt; '#a156b4',\n        ),\n        array(\n            'name'  =&gt; esc_attr__( 'light grayish magenta', 'themeLangDomain' ),\n            'slug'  =&gt; 'light-grayish-magenta',\n            'color' =&gt; '#d0a5db',\n        ),\n        array(\n            'name'  =&gt; esc_attr__( 'very light gray', 'themeLangDomain' ),\n            'slug'  =&gt; 'very-light-gray',\n            'color' =&gt; '#eee',\n        ),\n        array(\n            'name'  =&gt; esc_attr__( 'very dark gray', 'themeLangDomain' ),\n            'slug'  =&gt; 'very-dark-gray',\n            'color' =&gt; '#444',\n        ),\n    ) );\n}\n\nadd_action( 'after_setup_theme', 'benimtemam_setup_theme_supported_features' );<\/code><\/pre>\n\n\n\n<p>E\u011fer ayn\u0131 ayar\u0131 <strong>theme.json<\/strong> dosyas\u0131 ile de yapm\u0131\u015fsak, \u00f6ncelik bu <strong>json<\/strong> dosyas\u0131n\u0131n ayarlar\u0131nda olacakt\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Settings\">Settings<\/span><\/h2>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131n\u0131n iki temel b\u00f6l\u00fcm\u00fcnden biri <code><strong>settings<\/strong><\/code> b\u00f6l\u00fcm\u00fcd\u00fcr. Bu b\u00f6l\u00fcm ile yap\u0131labilecek baz\u0131 ayarlar \u015funlard\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Renk_Ayarlari\">Renk Ayarlar\u0131<\/span><\/h3>\n\n\n\n<div class=\"wp-block-group scmb-30 has-white-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-renk-paleti-ayarlari.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-palette-color-renk-paleti-ayarlar\u0131\" class=\"wp-image-7200\" width=\"430\" height=\"329\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-renk-paleti-ayarlari.jpg 573w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-renk-paleti-ayarlari-300x229.jpg 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n<\/div>\n\n\n\n<p>3 \u00e7e\u015fit renk ayar\u0131 vard\u0131r. Bu ayarlar, blok edit\u00f6rde, bloklar\u0131n renklerini ayarlamak istedi\u011fimizde kar\u015f\u0131m\u0131za \u00e7\u0131kar. Bunlar \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>palette<\/strong>: &#8220;<strong>Solid<\/strong>&#8221; sekmesinde &#8220;<strong>TEMA<\/strong>&#8221; ad\u0131nda bir renk paleti olu\u015fturmaya yarar.<\/li>\n\n\n\n<li><strong>gradients<\/strong>: &#8220;<strong>Gradient<\/strong>&#8221; sekmesinde &#8220;<strong>TEMA<\/strong>&#8221; ad\u0131nda bir renk paleti olu\u015fturmaya yarar.<\/li>\n\n\n\n<li><strong>duotone<\/strong>: A\u015fa\u011f\u0131daki resimde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi baz\u0131 bloklarda &#8220;<strong>\u00c7ift ton filtresini uygula<\/strong>&#8221; penceresindeki &#8220;\u00c7\u0130FT TON&#8221; paletine renk eklemeye yarar.<br><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"210\" class=\"wp-image-7214\" style=\"width: 300px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-renk-paleti-ayarlari-cift-ton-.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-palette-color-renk-paleti-ayarlar\u0131-\u00e7ift-ton-\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-renk-paleti-ayarlari-cift-ton-.jpg 400w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-palette-color-renk-paleti-ayarlari-cift-ton--300x210.jpg 300w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, <strong>theme.json<\/strong> dosyas\u0131 ile b\u00fct\u00fcn bu renk ayarlar\u0131n\u0131 global olarak nas\u0131l yapaca\u011f\u0131m\u0131za bir \u00f6rnektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n        \"settings\": {\n            \"color\": {\n                \"palette\": &#91;\n                    {\n                        \"slug\": \"purple\",\n                        \"color\": \"#D1D1E4\",\n                        \"name\": \"Purple\"\n                    },\n                    {\n                        \"slug\": \"yellow\",\n                        \"color\": \"#EEEADD\",\n                        \"name\": \"Yellow\"\n                    }\n                ],\n                \"gradients\": &#91;\n                    {\n                        \"slug\": \"purple-to-yellow\",\n                        \"gradient\": \"linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))\",\n                        \"name\": \"Purple to Yellow\"\n                    }\n                ],\n                \"duotone\": &#91;\n                    {\n                        \"slug\": \"purple-and-yellow\",\t\t\t\t\t\n                        \"colors\": &#91; \"#D1D1E4\", \"#EEEADD\" ],\n                        \"name\": \"Purple and yellow\"\n                    }\n                ]\n            }\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Tipografi_Yazi_Duzeni_Ayarlari\">Tipografi (Yaz\u0131 D\u00fczeni) Ayarlar\u0131<\/span><\/h3>\n\n\n\n<div class=\"wp-block-group scmb-30 has-white-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-tipografi-ayarlari.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-tipografi-ayarlar\u0131\" class=\"wp-image-7372\" width=\"212\" height=\"339\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-tipografi-ayarlari.jpg 282w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-tipografi-ayarlari-187x300.jpg 187w\" sizes=\"auto, (max-width: 212px) 100vw, 212px\" \/><\/figure>\n<\/div>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131 ile metin girebildi\u011fimiz bloklar\u0131n &#8220;<strong>Tipografi<\/strong>&#8221; ayarlar\u0131 olu\u015fturabiliriz.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, &#8220;<strong>Tipografi<\/strong>&#8221; ayarlar\u0131ndan &#8220;<em>BOYUT<\/em>&#8221; k\u0131sm\u0131 i\u00e7in global ayarlar olu\u015fturur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"fontSizes\": &#91;\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"small\",\n\t\t\t\t\t\"size\": \"1rem\",\n\t\t\t\t\t\"name\": \"Small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"medium\",\n\t\t\t\t\t\"size\": \"1.5rem\",\n\t\t\t\t\t\"name\": \"Medium\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Yerlesim_Layout\">Yerle\u015fim (Layout)<\/span><\/h3>\n\n\n\n<p>Bu ayar klasik temalardaki <code><strong>add_theme_support( 'align-wide' )<\/strong><\/code> ayar\u0131n\u0131n kar\u015f\u0131l\u0131\u011f\u0131d\u0131r.<\/p>\n\n\n\n<p>Layout ayar\u0131, a\u015fa\u011f\u0131da verildi\u011fi gibi, iki <code><strong>key: value<\/strong><\/code> \u00e7iftinden olu\u015fur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"650px\",\n\t\t\t\"wideSize\": \"1200px\"\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<p>Layout ayarlar\u0131na verdi\u011fimiz de\u011ferler, temam\u0131z\u0131n <code>&lt;body&gt;<\/code> tag\u0131nda 2 adet CSS de\u011fi\u015fkeni olu\u015fturur:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>--wp--style--global--content-size<\/code><\/li>\n\n\n\n<li><code>--wp--style--global--wide-size<\/code><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group scmb-30\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"373\" height=\"99\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-geni\u015flik-width-ayarlar\u0131-i\u00e7erik-geni\u015f-\" class=\"wp-image-7233\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-.jpg 373w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis--300x80.jpg 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<p><strong>Yerle\u015fim (layout) ayar\u0131, edit\u00f6rde \u00e7al\u0131\u015f\u0131rken \u015fu 2 yerde kar\u015f\u0131m\u0131za \u00e7\u0131kar:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>&#8220;<strong>Grup<\/strong>&#8221; blo\u011fu &#8220;<strong><em>grup<\/em><\/strong>&#8221; varyasyonunda, &#8220;<em>\u0130\u00e7 bloklar i\u00e7erik geni\u015fli\u011fini kullan\u0131r<\/em>&#8221; ayar\u0131 se\u00e7ili iken, &#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; ve &#8220;<em>GEN\u0130\u015e<\/em>&#8221; ayarlar\u0131 \u015feklinde (a\u015fa\u011f\u0131daki \u015fekilde \u00e7er\u00e7eve i\u00e7inde g\u00f6sterilmi\u015ftir):<br><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"416\" class=\"wp-image-7226\" style=\"width: 250px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-geni\u015flik-width-ayarlar\u0131-i\u00e7erik-geni\u015f\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis.jpg 317w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-180x300.jpg 180w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><br>\n<ul class=\"wp-block-list\">\n<li><strong>&#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; ve &#8220;<em>GEN\u0130\u015e<\/em>&#8221; de\u011ferleri<\/strong>, &#8220;<strong>Grup<\/strong>&#8221; blo\u011funun <strong>i\u00e7ine ekledi\u011fimiz bloklara<\/strong> verilecek maksimum geni\u015flik <code>(max-width)<\/code> de\u011ferlerinde kullan\u0131l\u0131r.\n<ul class=\"wp-block-list\">\n<li><strong>&#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; de\u011feri:<\/strong> Buray\u0131 bo\u015f b\u0131rak\u0131rsak, <strong>theme.json<\/strong> dosyas\u0131nda, <strong><code>\"layout\"<\/code><\/strong> ayarlar\u0131nda belirledi\u011fimiz <strong><code>\"contentSize\"<\/code><\/strong> de\u011feri kullan\u0131l\u0131r.<\/li>\n\n\n\n<li><strong>&#8220;<em>GEN\u0130\u015e<\/em>&#8221; de\u011feri:<\/strong> Buray\u0131 bo\u015f b\u0131rak\u0131rsak, <strong>theme.json<\/strong> dosyas\u0131nda, <strong><code>\"layout\"<\/code><\/strong> ayarlar\u0131nda belirledi\u011fimiz <strong><code>\"wideSize\"<\/code><\/strong> de\u011feri kullan\u0131l\u0131r.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>&#8220;<strong>Grup<\/strong>&#8221; blo\u011fu grup varyasyonunda ise ve &#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; ve &#8220;<em>GEN\u0130\u015e<\/em>&#8221; ayarlar\u0131ndan en az biri belli ise, grup blo\u011funun i\u00e7ine ekledi\u011fimiz bloklar\u0131n &#8220;<strong>Toolbar<\/strong>&#8221; men\u00fclerinin &#8220;<em><strong>Hizala<\/strong><\/em>&#8221; ayarlar\u0131nda:<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"236\" class=\"wp-image-7293\" style=\"width: 350px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-geni\u015flik-width-ayarlar\u0131-i\u00e7erik-geni\u015f-Toolbar-hizala\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala.jpg 417w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala-300x202.jpg 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><br>\n<ul class=\"wp-block-list\">\n<li>&#8220;<em>Hizala<\/em>&#8221; ayar\u0131 ile bir blo\u011fun i\u00e7inde bulundu\u011fu &#8220;<strong>Grup<\/strong>&#8221; blo\u011funa ba\u011fl\u0131 olarak geni\u015fli\u011fini (<code><strong>max-width<\/strong><\/code> de\u011ferlerini) ayarlar\u0131z.<\/li>\n\n\n\n<li> &#8220;<em>Hizala<\/em>&#8221; men\u00fcs\u00fcnde kar\u015f\u0131m\u0131za \u00e7\u0131kan geni\u015flik se\u00e7enekleri, &#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; ve &#8220;<em>GEN\u0130\u015e<\/em>&#8221; de\u011ferlerini kullan\u0131r. \u015e\u00f6yle:\n<ul class=\"wp-block-list\">\n<li><strong>Hi\u00e7biri<\/strong>: Bu se\u00e7enek &#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; olarak verdi\u011fimiz geni\u015flik de\u011ferini kullan\u0131r.\n<ul class=\"wp-block-list\">\n<li>Blo\u011fum maksimum geni\u015fli\u011fi &#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; de\u011feri kadar olacakt\u0131r.\n<ul class=\"wp-block-list\">\n<li>E\u011fer teman\u0131n bir <strong><code>\"contentSize\"<\/code><\/strong> ayar\u0131 yaksa, onun yerine <strong><code>\"wideSize\"<\/code><\/strong> ayar\u0131 kullan\u0131lacakt\u0131r.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Bu se\u00e7ene\u011fin varsay\u0131lan de\u011feri &#8220;<strong>layout<\/strong>&#8221; ayarlar\u0131ndaki &#8220;<code><strong>contentSize\": \"650px\"<\/strong><\/code> de\u011feridir.<\/li>\n\n\n\n<li>Dilersek, i\u00e7inde bulundu\u011fumuz &#8220;<strong>Grup<\/strong>&#8221; blo\u011funun blok ayarlar\u0131ndan \u00f6zel bir &#8220;<em>\u0130\u00c7ER\u0130K<\/em>&#8221; de\u011feri de belirleyebilir.<\/li>\n\n\n\n<li>Bu ayar temam\u0131zda \u015f\u00f6yle bir CSS kodu olu\u015fturur:<br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"204\" class=\"wp-image-7346\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala-.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-geni\u015flik-width-ayarlar\u0131-i\u00e7erik-geni\u015f-Toolbar-hizala-\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala-.jpg 479w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala--300x136.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>B\u00fcy\u00fck geni\u015flik<\/strong>: Bu se\u00e7enek &#8220;<em>GEN\u0130\u015e<\/em>&#8221; olarak verdi\u011fimiz geni\u015flik de\u011feri kullan\u0131r.\n<ul class=\"wp-block-list\">\n<li>Blo\u011fum maksimum geni\u015fli\u011fi &#8220;<em>GEN\u0130\u015e<\/em>&#8221; de\u011feri kadar olacakt\u0131r.<\/li>\n\n\n\n<li>Bu se\u00e7ene\u011fin varsay\u0131lan de\u011feri &#8220;<strong>layout<\/strong>&#8221; ayarlar\u0131ndaki <strong><code>\"wideSize\": \"1200px\"<\/code><\/strong> de\u011feridir.<\/li>\n\n\n\n<li>E\u011fer teman\u0131n bir <strong><code>\"wideSize\"<\/code><\/strong> ayar\u0131  yoksa bu se\u00e7enek g\u00f6r\u00fcnmeyecektir.<\/li>\n\n\n\n<li>Dilersek, i\u00e7inde bulundu\u011fumuz &#8220;<strong>Grup<\/strong>&#8221; blo\u011funun blok ayarlar\u0131ndan \u00f6zel bir &#8220;<em>GEN\u0130\u015e<\/em>&#8221; de\u011feri de belirleyebilir.<\/li>\n\n\n\n<li>Bu ayar blo\u011fa <code>\"<strong>alignwide<\/strong>\"<\/code> CSS s\u0131n\u0131f\u0131n\u0131 ekler ve temam\u0131zda \u015f\u00f6yle bir CSS kodunu olu\u015fturur:<br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"145\" class=\"wp-image-7349\" style=\"width: 450px;\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala-wideStyle-.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-geni\u015flik-width-ayarlar\u0131-i\u00e7erik-geni\u015f-Toolbar-hizala-wideStyle-\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala-wideStyle-.jpg 481w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-genislik-width-ayarlari-icerik-genis-Toolbar-hizala-wideStyle--300x97.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Tam geni\u015flik<\/strong>: Bu se\u00e7enek, geni\u015flik de\u011ferini otomatik yapar. Yani blok, i\u00e7inde bulundu\u011fu blo\u011fun tamam\u0131n\u0131 kaplar.\n<ul class=\"wp-block-list\">\n<li>Bu ayar, blo\u011fa <strong><code>\"alignfull\"<\/code><\/strong> CSS s\u0131n\u0131f\u0131n\u0131 ekler.<\/li>\n\n\n\n<li>Temam\u0131zda bir CSS kodu olu\u015fturmaz.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Bu ayar\u0131 yapmazsak, web sitemizin sayfalar\u0131nda bulunan ana bloklar, tam geni\u015flikte ve sola dayal\u0131 \u015fekilde g\u00f6r\u00fcnecektir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Boyutlar_Spacing\">Boyutlar (Spacing)<\/span><\/h3>\n\n\n\n<div class=\"wp-block-group scmb-30 has-white-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"205\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-boyutlar-spacing-ayarlari.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-boyutlar-spacing-ayarlar\u0131\" class=\"wp-image-7380\"\/><\/figure>\n<\/div>\n\n\n\n<p>Bloklara &#8220;<em>DOLGU<\/em>&#8221; bo\u015flu\u011fu (padding), &#8220;<em>KENAR<\/em>&#8221; bo\u015flu\u011fu (margin) ve bu bo\u015fluklar i\u00e7in kullanaca\u011f\u0131m\u0131z birimleri ayarlamaya yarar. &#8220;<strong>Boyutlar<\/strong>&#8221; ayarlar\u0131, <strong>theme.json<\/strong> dosas\u0131nda bir kodlama yap\u0131lmasa da varsay\u0131lan olarak zaten \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kodlar, &#8220;<em>DOLGU<\/em>&#8221; ve &#8220;<em>KENAR<\/em>&#8221; bo\u015fluklar\u0131 ayarlar\u0131n\u0131 a\u00e7ar ve bu bo\u015fluklara \u00f6zel de\u011ferler verirken kullanabilece\u011fimiz birimler belirler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"spacing\": {\n\t\t\t\"padding\": true,\n\t\t\t\"margin\": true,\n\t\t\t\"units\": &#91; \"px\", \"em\", \"rem\", \"vh\", \"vw\", \"%\" ]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<p>Biz hi\u00e7 bir ayar yapmasak da WordPress a\u015fa\u011f\u0131daki tabloda verilen boyut\/bo\u015fluk ayarlar\u0131 ile birlikte gelir:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u00d6zel CSS Yap\u0131s\u0131<\/th><th>CSS De\u011feri<\/th><th>Etiketi<\/th><\/tr><\/thead><tbody><tr><td><code>\u2013--wp--preset--spacing--20<\/code><\/td><td><code>0.44rem<\/code><\/td><td>2X-Small<\/td><\/tr><tr><td><code>--wp--preset--spacing--30<\/code><\/td><td><code>0.67rem<\/code><\/td><td>X-Small<\/td><\/tr><tr><td><code>--wp--preset--spacing--40<\/code><\/td><td><code>1rem<\/code><\/td><td>Small<\/td><\/tr><tr><td><code>--wp--preset--spacing--50<\/code><\/td><td><code>1.5rem<\/code><\/td><td>Medium<\/td><\/tr><tr><td><code>--wp--preset--spacing--60<\/code><\/td><td><code>2.25rem<\/code><\/td><td>Large<\/td><\/tr><tr><td><code>--wp--preset--spacing--70<\/code><\/td><td><code>3.38rem<\/code><\/td><td>X-Large<\/td><\/tr><tr><td><code>--wp--preset--spacing--80<\/code><\/td><td><code>5.06rem<\/code><\/td><td>2X-Large<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Dilersek, temam\u0131z\u0131n baz\u0131 bloklar\u0131nda bu de\u011ferleri kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"styles\": {\n        \"blocks\": {\n            \"core\/heading\": {\n                \"spacing\": {\n                    \"margin\": {\n                        \"top\": \"var( --wp--preset--spacing--60 )\",\n                        \"bottom\": \"var( --wp--preset--spacing--40 )\"\n                    }\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Bize_Ozel_Boyut_Skalasi\">Bize \u00d6zel Boyut Skalas\u0131<\/span><\/h4>\n\n\n\n<p>WordPress, tema tasar\u0131mc\u0131lar\u0131na, yukar\u0131daki tabloda verilen <strong><code>--wp--preset--spacing--{int}<\/code><\/strong> de\u011ferlerini \u00f6zelle\u015ftirmemize izin verir.  Bunun i\u00e7in &#8220;<strong>spacing<\/strong>&#8221; ayar\u0131na bir &#8220;<strong>spacingScale<\/strong>&#8221; objesi eklememiz gerekmektedir. A\u015fa\u011f\u0131daki kod, buna bir \u00f6rnektir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": {\n        \"spacing\": {\n            \"spacingScale\": {\n                \"operator\": \"+\",\n                \"increment\": 0.25,\n                \"steps\": 5,\n                \"mediumStep\": 0.75,\n                \"unit\": \"rem\"\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>\u00d6zel bir &#8220;<strong>spacingScale<\/strong>&#8221; objesi kodlarken kulland\u0131\u011f\u0131m\u0131z alt-ayarlar ve anlamlar\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>operator<\/strong>: Skalay\u0131 artt\u0131rmak i\u00e7in kullan\u0131lan operat\u00f6rd\u00fcr.\n<ul class=\"wp-block-list\">\n<li>Varsay\u0131lan de\u011feri * (\u00e7arpma) d\u0131r.<\/li>\n\n\n\n<li>\u00c7arpma d\u0131\u015f\u0131nda + (toplama) de\u011ferini de alabilir.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>increment<\/strong>: Artt\u0131rma miktar\u0131d\u0131r.\n<ul class=\"wp-block-list\">\n<li>Operat\u00f6rde belirtilen i\u015flemde yer al\u0131r.<\/li>\n\n\n\n<li>Varsay\u0131lan de\u011feri 1.5&#8217;dr.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>steps<\/strong>: Skaladaki ad\u0131m say\u0131s\u0131d\u0131r.\n<ul class=\"wp-block-list\">\n<li>Varsay\u0131lan de\u011feri 7&#8217;dir.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>mediumStep<\/strong>: Skalan\u0131n ortas\u0131ndaki de\u011ferdir.\n<ul class=\"wp-block-list\">\n<li>Varsay\u0131lan de\u011feri 1.5&#8217;dir.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>unit<\/strong>: Artt\u0131rmada kullan\u0131lan birimdir.\n<ul class=\"wp-block-list\">\n<li>Alabilece\u011fi de\u011ferler \u015funlard\u0131r: <code>px<\/code>,&nbsp;<code>em<\/code>,&nbsp;<code>rem<\/code>,&nbsp;<code>vh<\/code>,&nbsp;<code>vw<\/code>, ve&nbsp;<code>%<\/code>.<\/li>\n\n\n\n<li>Varsay\u0131lan de\u011feri&nbsp;<code>rem<\/code> dir.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Yukar\u0131daki kodda:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>mediumStep <\/strong>de\u011feri her zaman <code><strong>--wp--preset--spacing--50<\/strong><\/code> de\u011fi\u015fkenine verilir.<\/li>\n\n\n\n<li>Buna ba\u011fl\u0131 olarak di\u011fer de\u011ferlere kar\u015f\u0131l\u0131k gelen de\u011fi\u015fkenler, bu de\u011fi\u015fkenin sonundaki say\u0131 10&#8217;ar artt\u0131r\u0131larak\/azalt\u0131larak olu\u015fturulur:\n<ul class=\"wp-block-list\">\n<li><code><strong>--wp--preset--spacing--20<\/strong><\/code><\/li>\n\n\n\n<li><code><strong>--wp--preset--spacing--30<\/strong><\/code><\/li>\n\n\n\n<li><code><strong>--wp--preset--spacing--40<\/strong><\/code> gibi<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>En k\u00fc\u00e7\u00fck de\u011fi\u015fken ad\u0131n\u0131n sonundaki numara 10&#8217;dan k\u00fc\u00e7\u00fck olamaz.\n<ul class=\"wp-block-list\">\n<li>En k\u00fc\u00e7\u00fck de\u011fi\u015fken: <strong><code>--wp--preset--spacing--10<\/code><\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>10 ad\u0131mdan daha fazla olan skalalarda, en k\u00fc\u00e7\u00fck de\u011fer kullan\u0131lamaz.\n<ul class=\"wp-block-list\">\n<li>\u00c7\u00fcnk\u00fc; <strong>mediumStep <\/strong>de\u011feri her zaman <code><strong>--wp--preset--spacing--50<\/strong><\/code> de\u011fi\u015fkenine verilir.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>&#8220;<strong><em>spacingSizes<\/em><\/strong>&#8221; dizisi, kendimize \u00f6zel bir skala yaratmam\u0131z\u0131 sa\u011flar. A\u015fa\u011f\u0131daki kod ile \u00f6zel bir boyut skalas\u0131 yarat\u0131yoruz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": {\n        \"spacing\": {\n            \"spacingSizes\": &#91;\n                {\n                    \"name\": \"Step 1\",\n                    \"size\": \"0.25rem\",\n                    \"slug\": \"10\"\n                },\n                {\n                    \"name\": \"Step 2\",\n                    \"size\": \"0.5rem\",\n                    \"slug\": \"20\"\n                },\n                {\n                    \"name\": \"Step 3\",\n                    \"size\": \"0.75rem\",\n                    \"slug\": \"30\"\n                },\n                {\n                    \"name\": \"Step 4\",\n                    \"size\": \"1rem\",\n                    \"slug\": \"40\"\n                },\n                {\n                    \"name\": \"Step 5\",\n                    \"size\": \"1.25rem\",\n                    \"slug\": \"50\"\n                }\n            ]\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>\u00d6zel bir skala eklerken, &#8220;<strong><em>spacingSizes<\/em><\/strong>&#8221; dizisinin her bir eleman\u0131 3 ayardan olu\u015fan bir objedir. Bu ayarlar ve anlamlar\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>name<\/strong>: Ad\u0131m\u0131n ad\u0131d\u0131r.<\/li>\n\n\n\n<li><strong>size<\/strong>: Ad\u0131ma kar\u015f\u0131l\u0131k gelen boyuttur.\n<ul class=\"wp-block-list\">\n<li>Bu ayar\u0131n de\u011ferinde, <code>clamp()<\/code> fonksiyonun izin verilir.<\/li>\n\n\n\n<li>Yani \u015f\u00f6yle: <code>\"size\": \"clamp(1.5rem, 5vw, 2rem)\"<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>slug<\/strong>: <code><strong>--wp--preset--spacing--{slug}<\/strong><\/code> de\u011fi\u015fkeninde kullan\u0131lacak olan say\u0131d\u0131r.<\/li>\n<\/ul>\n\n\n\n<p>WordPress, tema tasar\u0131mc\u0131lar\u0131na, &#8220;<strong>spacingScale<\/strong>&#8221; ayar\u0131ndan ziyade &#8220;<strong>spacingSizes<\/strong>&#8221; ayar\u0131n\u0131 kullanmalar\u0131n\u0131 tavsiye etmektedir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ozel_Sapcing_Ayarlarini_Devre_Disi_Birakma\">\u00d6zel Sapcing Ayarlar\u0131n\u0131 Devre D\u0131\u015f\u0131 B\u0131rakma<\/span><\/h4>\n\n\n\n<p>Tema tasar\u0131mc\u0131lar\u0131, kendi belirledikleri &#8220;<strong>spacing<\/strong>&#8221; ayarlar\u0131n\u0131n d\u0131\u015f\u0131nda \u00f6zel ayarlar\u0131n kullan\u0131lmas\u0131n\u0131 engelleyebilirler. Bunu yapmak i\u00e7in, &#8220;<strong>customSpacingSize<\/strong>&#8221; ayar\u0131n\u0131 <code>false<\/code> (varsay\u0131lan olarak <code>true<\/code>) olarak ayarlamalar\u0131 gerekir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod bu i\u015fi yapmaktad\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": {\n        \"spacing\": {\n            \"customSpacingSize\": false\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ayarlari_AcmaDevre_Disi_Birakma\">Ayarlar\u0131 A\u00e7ma\/Devre D\u0131\u015f\u0131 B\u0131rakma<\/span><\/h3>\n\n\n\n<p>&#8220;<strong>Settings<\/strong>&#8221; b\u00f6l\u00fcm\u00fcnde bloklar\u0131n baz\u0131 ayarlar\u0131n\u0131 a\u00e7abiliriz veya a\u00e7\u0131ksa devre d\u0131\u015f\u0131 b\u0131rakabiliriz.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki ayarlar, varsay\u0131lan olarak a\u00e7\u0131kt\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom colors (The color picker): \u00d6zel solid renkler (Renk ayar\u0131)<\/li>\n\n\n\n<li>Custom duotone (The color picker): \u00d6zel duotone renkler (Renk ayar\u0131)<\/li>\n\n\n\n<li>Custom gradient (The color picker): \u00d6zel gradient renkler (Renk ayar\u0131)<\/li>\n\n\n\n<li>Custom font size: \u00d6zel BOYUT (Tipografi ayar\u0131)<\/li>\n\n\n\n<li>Drop cap: HARF DURUMU (Tipografi ayar\u0131)<\/li>\n<\/ul>\n\n\n\n<p>Bu ayarlar\u0131 kapatmak istersek, &#8220;<strong>color<\/strong>&#8221; ayarlar\u0131nda kar\u015f\u0131lar\u0131na <code>false<\/code> de\u011fer vermemiz gerekir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; \u00f6zel solid ve \u00f6zel gradient renk ayarlar\u0131n\u0131 kapat\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"custom\": false,\n                        \"customGradient\": false\n                 }\n         }\n}<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; &#8220;HARF DURUMU&#8221; ayar\u0131n\u0131 kapat\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false\n                 }\n         }\n}<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki ayarlar varsay\u0131lan olarak devre d\u0131\u015f\u0131d\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Link color: Ba\u011flant\u0131 rengi (Renk ayar\u0131)<\/li>\n\n\n\n<li>Padding and margin: DOLGU ve KENAR (Boyutlar ayarlar\u0131)<\/li>\n\n\n\n<li>Custom line-height: SATIR Y\u00dcKSEKL\u0130\u011e\u0130 (Tipografi ayarlar\u0131)<\/li>\n<\/ul>\n\n\n\n<p>Bu ayarlar\u0131 bir defada a\u00e7mak i\u00e7in &#8220;<strong>appearanceTools<\/strong>&#8221; ayar\u0131n\u0131 true yapabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n         }\n}<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; &#8220;Ba\u011flant\u0131 rengi&#8221; ve SATIR Y\u00dcKSEKL\u0130\u011e\u0130 ayarlar\u0131n a\u00e7ar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"link\": true\n                 },\n                \"typography\": { \n                         \"lineHeight\": true\n                }\n         }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Stiller_Styles\">Stiller (Styles)<\/span><\/h2>\n\n\n\n<p>T\u0131pk\u0131 ayarlarda oldu\u011fu gibi; global stiller yani web sitemizin <code>&lt;body&gt;<\/code> tag\u0131na uygulanacak stiller, &#8220;<strong>styles<\/strong>&#8221; b\u00f6l\u00fcm\u00fcn\u00fcn k\u00f6k dizinine kodlan\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod, global olarak &#8220;<strong>color<\/strong>&#8220;, &#8220;<strong>typography<\/strong>&#8221; ve &#8220;<strong>spacing<\/strong>&#8221; stillerini vermektedir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": { ... },\n    \"styles\":{\n        \"color\":{\n            \"background\":\"var(--wp--preset--color--white)\",\n            \"text\":\"var(--wp--preset--color--black)\"\n        },\n        \"typography\":{\n            \"fontSize\":\"1.5rem\",\n            \"fontFamily\":\"var(--wp--preset--font-family--system-fonts)\",\n            \"lineHeight\":\"1.5\"\n        },\n        \"spacing\":{\n            \"margin\":{\n                \"top\":\"0px\",\n                \"right\":\"0px\",\n                \"bottom\":\"0px\",\n                \"left\":\"0px\"\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<p>Bir blo\u011fa \u00f6zel olarak verilecek stiller, <code>styles.blocks.BLOCKNAME<\/code> dizinine kodlan\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; &#8220;<strong>Yaz\u0131 ba\u015fl\u0131\u011f\u0131<\/strong>&#8221; ve &#8220;<strong>Paragraf<\/strong>&#8221; bloklar\u0131na \u00f6zel stiller vermektedir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": { ... },\n    \"styles\": {\n        \"blocks\": {\n            \"core\/post-title\": {\n                \"typography\": {\n                    \"fontSize\":\"var(--wp--preset--font-size--extra-large)\"\n                }\n            },\n            \"core\/paragraph\": {\n                \"typography\": {\n                    \"fontSize\":\"var(--wp--preset--font-size--normal)\"\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Themejson_Elemanlari_Elements\">Theme.json Elemanlar\u0131 (Elements)<\/span><\/h2>\n\n\n\n<p>Bloklar, birden \u00e7ok HTML eleman\u0131na sahip olabilirler. &#8220;<strong>elements<\/strong>&#8221; nesnesi, blo\u011fun i\u00e7indeki farkl\u0131 HTML elemanlar\u0131na \u00f6zg\u00fc stiller vermemize olanak tan\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; &#8220;Ba\u015fl\u0131k&#8221; blo\u011funun i\u00e7inde bulunan ba\u011flant\u0131lar\u0131n &#8220;color&#8221; ve &#8220;spacing&#8221; stillerini ayarlamaktad\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"version\": 2,\n    \"settings\": { ... },\n    \"styles\": {\n        \"blocks\": {\n            \"core\/post-excerpt\": {\n                \"elements\": {\n                    \"link\": {\n                        \"color\": {\n                            \"background\": \"var(--wp--preset--color--light-grey)\"\n                        },\n                        \"spacing\": {\n                            \"padding\": {\n                            \"top\": \"calc(.667em + 2px)\",\n                            \"right\": \"calc(1.333em + 2px)\",\n                            \"bottom\": \"calc(.667em + 2px)\",\n                            \"left\": \"calc(1.333em + 2px)\"\n                        }\n                    }\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Sablon_Parcalarini_Kaydetme\">\u015eablon Par\u00e7alar\u0131n\u0131 Kaydetme<\/span><\/h2>\n\n\n\n<p>Tema dosyalar\u0131nda olu\u015fturdu\u011funuz \u015fablon par\u00e7alar\u0131n\u0131, edit\u00f6rde g\u00f6r\u00fcn\u00fcr yaparak diledi\u011finiz yerde kullanabilirsiniz. Bunun i\u00e7in \u015fablon par\u00e7as\u0131n\u0131 <strong>theme.json<\/strong> dosyas\u0131na kaydetmeniz gerekmektedir.<\/p>\n\n\n\n<p>\u015eablon par\u00e7alar\u0131, <strong>theme.json<\/strong> dosyas\u0131nda &#8220;<strong>templateParts<\/strong>&#8221; dizisine kaydedilir.<\/p>\n\n\n\n<p>Bir \u015fablon par\u00e7as\u0131 \u015fu parametreler ile kaydedilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>name<\/strong>: \u015eablon par\u00e7as\u0131 dosyas\u0131n\u0131n ismidir.\n<ul class=\"wp-block-list\">\n<li>mesela <strong>benim-sablon-parcam.html<\/strong> dosyas\u0131 i\u00e7in bu ayar \u015f\u00f6yle olur:\n<ul class=\"wp-block-list\">\n<li><code>\"name\": \"benim-sablon-parcam\"<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>title<\/strong>: \u015eablon par\u00e7as\u0131n\u0131n blok edit\u00f6rde g\u00f6r\u00fcnen ismidir.<\/li>\n\n\n\n<li><strong>area<\/strong>: \u015eablon par\u00e7as\u0131n\u0131n blok edit\u00f6rde yer ald\u0131\u011f\u0131 \u015fablon b\u00f6l\u00fcm\u00fcd\u00fcr.<\/li>\n<\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; tema dosyalar\u0131n <strong>parts<\/strong> klas\u00f6r\u00fcnde yarat\u0131lan farkl\u0131 Header \u015fablonlar\u0131 ve bir Footer eklemektedir (Twenty Twenty-Two temas\u0131ndan):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"templateParts\": &#91;\n\t{\n\t\t\"name\": \"header\",\n\t\t\"title\": \"Header\",\n\t\t\"area\": \"header\"\n\t},\n\t{\n\t\t\"name\": \"header-large-dark\",\n\t\t\"title\": \"Header (Koyu, geni\u015f)\",\n\t\t\"area\": \"header\"\n\t},\n\t{\n\t\t\"name\": \"header-small-dark\",\n\t\t\"title\": \"Header (Koyu, k\u00fc\u00e7\u00fck)\",\n\t\t\"area\": \"header\"\n\t},\n\t{\n\t\t\"name\": \"footer\",\n\t\t\"title\": \"Footer\",\n\t\t\"area\": \"footer\"\n\t}\n]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Ozel_Sablonlari_Tanitma\">\u00d6zel \u015eablonlar\u0131 Tan\u0131tma<\/span><\/h2>\n\n\n\n<p>Klasik temalarda, sayfalar i\u00e7in tasarlad\u0131\u011f\u0131m\u0131z \u00f6zel \u015fablonlar, dosya isimleri ile tan\u0131mlan\u0131rd\u0131r.<\/p>\n\n\n\n<p>Blok temalarda, blok \u015fablonlar\u0131n\u0131z\u0131 <strong>theme.json<\/strong> dosyas\u0131nda listeleyebilirsiniz. Bunu yapmak i\u00e7in &#8220;<strong>customTemplates<\/strong>&#8221; dizisini kullanmal\u0131s\u0131n\u0131z.<\/p>\n\n\n\n<p>\u00d6zel bir \u015fablon \u015fu parametreler ile kaydedilir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>name<\/strong>: \u015eablon dosyas\u0131n\u0131n ismidir.\n<ul class=\"wp-block-list\">\n<li>mesela <strong>benim-sablon-parcam.html<\/strong> dosyas\u0131 i\u00e7in bu ayar \u015f\u00f6yle olur:\n<ul class=\"wp-block-list\">\n<li><code>\"name\": \"benim-sablon-parcam\"<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>title<\/strong>: \u015eablon par\u00e7as\u0131n\u0131n blok edit\u00f6rde g\u00f6r\u00fcnen ismidir.<\/li>\n\n\n\n<li><strong>postType<\/strong>: \u015eablonun hangi i\u00e7erik tipleri i\u00e7in kullan\u0131labilece\u011fini belirtir.\n<ul class=\"wp-block-list\">\n<li>Bir dizidir. Her bir eleman\u0131 bir i\u00e7erik tipidir.<\/li>\n\n\n\n<li>\u0130ste\u011fe ba\u011fl\u0131d\u0131r.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod; 2 adet \u00f6zel \u015fablon ekler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"customTemplates\": &#91;\n    {\n        \"name\": \"page-home\",\n        \"title\": \"Page without title\"\n    },\n    {\n        \"name\": \"page-contact\",\n        \"title\": \"Contact\",\n        \"postTypes\": &#91; \"page\" ]\n    }\n]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Global_Stil_Degiskenleri_Global_Styles_Variations\">Global Stil De\u011fi\u015fkenleri (Global Styles Variations)<\/span><\/h2>\n\n\n\n<p>Bir tema birden fazla <strong>json<\/strong> dosyas\u0131na sahip olabilir ve bu dosyalar \u00fcst d\u00fczey stil ayarlar\u0131 i\u00e7erebilir. Bu json dosyalar\u0131 ile olu\u015fturdu\u011fumuz stiller, &#8220;<strong>Site D\u00fczenleyicisi<\/strong> (<em>G\u00f6r\u00fcn\u00fcm->D\u00fczenleyici<\/em>)&#8221; sayfas\u0131nda &#8220;<strong>Stiller<\/strong>&#8221; s\u00fctununda ve &#8220;<em>Bi\u00e7imlere g\u00f6z at\u0131n<\/em>&#8221; men\u00fcs\u00fcnde listelenir:<\/p>\n\n\n\n<div class=\"wp-block-group sbmb-30 is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-global-settings-ayarlar.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-global-settings-ayarlar\" class=\"wp-image-7467\" width=\"208\" height=\"491\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-global-settings-ayarlar.jpg 277w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-global-settings-ayarlar-127x300.jpg 127w\" sizes=\"auto, (max-width: 208px) 100vw, 208px\" \/><\/figure>\n<\/div>\n\n\n\n<p>A\u015fa\u011f\u0131da, <em>Twenty Twenty Three<\/em> temas\u0131n\u0131n &#8220;<strong>Bi\u00e7imlere g\u00f6z at\u0131n<\/strong>&#8221; men\u00fcs\u00fcn\u00fc g\u00f6r\u00fcyorsunuz:<\/p>\n\n\n\n<div class=\"wp-block-group scmb-30 has-white-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1327\" height=\"606\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-Tema-Kodlama-Site-Duzenleyicisi-Stiller-Bicimlere-goz-atin-global-stiller-.gif\" alt=\"WordPress-Blok-Tema-Kodlama-Site-D\u00fczenleyicisi-Stiller-Bi\u00e7imlere-g\u00f6z-at\u0131n-global-stiller-\" class=\"wp-image-7477\"\/><\/figure>\n<\/div>\n\n\n\n<p>&#8220;<strong>Bi\u00e7imlere g\u00f6z at\u0131n<\/strong>&#8221; sayfas\u0131nda &#8220;<em>Varsay\u0131lan<\/em>&#8221; olarak yer alan bi\u00e7im <strong>theme.json<\/strong> dosyas\u0131d\u0131r. Di\u011fer bi\u00e7imlerin her biri ise olu\u015fturdu\u011funuz di\u011fer json dosyalar\u0131ndan birine kar\u015f\u0131l\u0131k gelir.<\/p>\n\n\n\n<p>Temam\u0131z i\u00e7in, global d\u00fczeyde farkl\u0131 bi\u00e7imlendirmeler olu\u015fturmak ve bu bi\u00e7imleri &#8220;<em>Bi\u00e7imlere g\u00f6z at\u0131n<\/em>&#8221; men\u00fcs\u00fcnde g\u00f6rmek\/kullanmak istersek \u015funlara dikkat etmeliyiz:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bu \u00f6zellik WordPress 6.0 ve \u00fczerinde \u00e7al\u0131\u015f\u0131r.<\/li>\n\n\n\n<li>Teman\u0131n varsay\u0131lan <strong>theme.json<\/strong> dosyas\u0131 ana dizinde yer almal\u0131d\u0131r ve <strong>versiyon 2<\/strong> oldu\u011fu belirtilmelidir.<\/li>\n\n\n\n<li>Di\u011fer json dosyalar\u0131 ana dizinde olu\u015fturulan <strong>styles<\/strong> dizininde olu\u015fturulmal\u0131d\u0131r.<\/li>\n\n\n\n<li><strong>styles <\/strong>dizinindeki her bir json dosyas\u0131 bir bi\u00e7imlendirme i\u00e7in kullan\u0131lacakt\u0131r.<\/li>\n<\/ul>\n\n\n\n<p> A\u015fa\u011f\u0131da <em>Twenty Twenty Three<\/em> temas\u0131n\u0131n <strong>styles<\/strong> dizinini g\u00f6r\u00fcyorsunuz:<\/p>\n\n\n\n<div class=\"wp-block-group scmb-30 has-white-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-94bc23d7 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"219\" height=\"301\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2023\/06\/WordPress-Blok-block-tabanli-tema-tasarimi-theme-json-global-settings-ayarlari-styles-dizini.jpg\" alt=\"WordPress-Blok-block-tabanl\u0131-tema-tasar\u0131m\u0131-theme-json-global-settings-ayarlar\u0131-styles-dizini\" class=\"wp-image-7485\"\/><\/figure>\n<\/div>\n\n\n\n<p> A\u015fa\u011f\u0131da <em>Twenty Twenty Three<\/em> temas\u0131n\u0131n <strong>styles<\/strong> dizinindeki <code><strong>electric.json<\/strong><\/code> dosyas\u0131n\u0131n kodlar\u0131n\u0131  g\u00f6r\u00fcyorsunuz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\r\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\r\n\t\"version\": 2,\r\n\t\"title\": \"Electric\",\r\n\t\"settings\": {\r\n\t\t\"color\": {\r\n\t\t\t\"palette\": &#91;\r\n\t\t\t\t{\r\n\t\t\t\t\t\"color\": \"#f3f3f1\",\r\n\t\t\t\t\t\"name\": \"Base\",\r\n\t\t\t\t\t\"slug\": \"base\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"color\": \"#2500ff\",\r\n\t\t\t\t\t\"name\": \"Contrast\",\r\n\t\t\t\t\t\"slug\": \"contrast\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"color\": \"#f3f3f1\",\r\n\t\t\t\t\t\"name\": \"Primary\",\r\n\t\t\t\t\t\"slug\": \"primary\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"color\": \"#2500ff\",\r\n\t\t\t\t\t\"name\": \"Secondary\",\r\n\t\t\t\t\t\"slug\": \"secondary\"\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\t\"color\": \"#f6f6f6\",\r\n\t\t\t\t\t\"name\": \"Tertiary\",\r\n\t\t\t\t\t\"slug\": \"tertiary\"\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t},\r\n\t\"styles\": {\r\n\t\t\"elements\": {\r\n\t\t\t\"button\": {\r\n\t\t\t\t\"border\": {\r\n\t\t\t\t\t\"style\": \"solid\",\r\n\t\t\t\t\t\"width\": \"2px\",\r\n\t\t\t\t\t\"color\": \"var(--wp--preset--color--contrast)\"\r\n\t\t\t\t},\r\n\t\t\t\t\"color\": {\r\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--contrast)\",\r\n\t\t\t\t\t\"text\": \"var(--wp--preset--color--base)\"\r\n\t\t\t\t},\r\n\t\t\t\t\"spacing\": {\r\n\t\t\t\t\t\"padding\": {\r\n\t\t\t\t\t\t\"top\": \".667em\",\r\n\t\t\t\t\t\t\"right\": \"1.333em\",\r\n\t\t\t\t\t\t\"bottom\": \".667em\",\r\n\t\t\t\t\t\t\"left\": \"1.333em\"\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\":active\": {\r\n\t\t\t\t\t\"typography\": {\r\n\t\t\t\t\t\t\"textDecoration\": \"underline dotted\"\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\":focus\": {\r\n\t\t\t\t\t\"typography\": {\r\n\t\t\t\t\t\t\"textDecoration\": \"underline dotted\"\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\":hover\": {\r\n\t\t\t\t\t\"border\": {\r\n\t\t\t\t\t\t\"color\": \"var(--wp--preset--color--contrast)\",\r\n\t\t\t\t\t\t\"style\": \"solid\",\r\n\t\t\t\t\t\t\"width\": \"2px\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"color\": {\r\n\t\t\t\t\t\t\"background\": \"var(--wp--preset--color--base)\",\r\n\t\t\t\t\t\t\"text\": \"var(--wp--preset--color--contrast)\"\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\":visited\": {\r\n\t\t\t\t\t\"color\": {\r\n\t\t\t\t\t\t\"text\": \"var(--wp--preset--color--base)\"\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t\"link\": {\r\n\t\t\t\t\":focus\": {\r\n\t\t\t\t\t\"typography\": {\r\n\t\t\t\t\t\t\"textDecoration\": \"underline dotted\"\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\t\":active\": {\r\n\t\t\t\t\t\"typography\": {\r\n\t\t\t\t\t\t\"textDecoration\": \"underline dotted\"\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t},\r\n\t\t\"typography\": {\r\n\t\t\t\"fontFamily\": \"var(--wp--preset--font-family--dm-sans)\"\r\n\t\t}\r\n\t}\r\n}\r<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verilen json dosyas\u0131nda da g\u00f6rd\u00fc\u011f\u00fcm\u00fcz global bi\u00e7imlendirme i\u00e7in olu\u015fturaca\u011f\u0131m\u0131z json dosyalar\u0131n\u0131n bir &#8220;<strong>title<\/strong>&#8221; \u00f6zelli\u011fi vard\u0131r. Bu \u00f6zelli\u011fe verece\u011fimiz de\u011fer, bu \u00f6zelli\u011fin edit\u00f6rde g\u00f6r\u00fcnene ad\u0131 olacakt\u0131r. E\u011fer b\u00f6yle bir \u00f6zellik girmezsek, WordPress json dosyas\u0131n\u0131n ad\u0131n\u0131 &#8220;<strong>title<\/strong>&#8221; \u00f6zelli\u011fine de\u011fer olarak verecektir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Sonuc\">Sonu\u00e7<\/span><\/h2>\n\n\n\n<p><strong>Theme.json<\/strong> dosyas\u0131nda yap\u0131labilecekler burada bahsettiklerimizden ibaret de\u011fildir. Bu yaz\u0131, bu dosyan\u0131n ne i\u015fe yarad\u0131\u011f\u0131n\u0131, hangi durumlarda bu dosyaya ba\u015fvurmam\u0131z gerekti\u011fini anlamam\u0131z\u0131 sa\u011flamay\u0131 ama\u00e7lamaktad\u0131r. Bunlar\u0131 kavrad\u0131\u011f\u0131m\u0131zda, ihtiya\u00e7 duyaca\u011f\u0131m\u0131z ayarlar\u0131 kodlamakta g\u00fc\u00e7l\u00fck \u00e7ekmeyece\u011finize inan\u0131yorum.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blok temalarda theme.json dosyas\u0131 nedir? Ne i\u015fe yarar?<\/p>\n","protected":false},"author":1,"featured_media":7099,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264],"tags":[265],"class_list":["post-7097","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blok-tabanli-tema-kodlama","tag-blok-tema-kodlama"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/7097","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=7097"}],"version-history":[{"count":3,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/7097\/revisions"}],"predecessor-version":[{"id":7501,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/7097\/revisions\/7501"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/7099"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=7097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=7097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=7097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}