{"id":6755,"date":"2023-06-18T15:17:08","date_gmt":"2023-06-18T12:17:08","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=6755"},"modified":"2023-06-19T23:57:08","modified_gmt":"2023-06-19T20:57:08","slug":"blok-tabanli-bir-tema-olusturma","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-blok-tabanli-tema-kodlama\/blok-tabanli-bir-tema-olusturma\/","title":{"rendered":"Blok Tabanl\u0131 Bir Tema Olu\u015fturma"},"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=\"#Dosya_Yapisi\"><span class=\"toc_number toc_depth_1\">1<\/span> Dosya Yap\u0131s\u0131<\/a><\/li><li><a href=\"#Theme_setup_Fonksiyonu\"><span class=\"toc_number toc_depth_1\">2<\/span> Theme_setup Fonksiyonu<\/a><\/li><li><a href=\"#Theme_Support_Tema_Destegi\"><span class=\"toc_number toc_depth_1\">3<\/span> Theme Support (Tema Deste\u011fi)<\/a><\/li><li><a href=\"#Bloklar_Icin_CSS_Ekleme\"><span class=\"toc_number toc_depth_1\">4<\/span> Bloklar \u0130\u00e7in CSS Ekleme<\/a><ul><li><a href=\"#1_Wp_enqueue_style_Fonksiyonu\"><span class=\"toc_number toc_depth_2\">4.1<\/span> 1. Wp_enqueue_style Fonksiyonu<\/a><\/li><li><a href=\"#2_Wp_enqueue_block_style_Fonksiyonu\"><span class=\"toc_number toc_depth_2\">4.2<\/span> 2. Wp_enqueue_block_style Fonksiyonu<\/a><\/li><\/ul><\/li><li><a href=\"#JavaScript_Dosyalari_Ekleme\"><span class=\"toc_number toc_depth_1\">5<\/span> JavaScript Dosyalar\u0131 Ekleme<\/a><\/li><\/ul><\/div>\n\n<h2 class=\"wp-block-heading\"><span id=\"Dosya_Yapisi\">Dosya Yap\u0131s\u0131<\/span><\/h2>\n\n\n\n<p>Bir blok temas\u0131nda 2 tane zorunlu dosya vard\u0131r. Bunlar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>style.css<\/em><\/li>\n\n\n\n<li><em>templates\/index.html<\/em><\/li>\n<\/ul>\n\n\n\n<p>Blok teman\u0131z\u0131n WordPress 5.9 ve daha \u00f6nceki s\u00fcr\u00fcmleri ile uyumlu olmas\u0131n\u0131 istiyorsan\u0131z, ana dizinde bir <em><strong>index.php<\/strong><\/em> dosyas\u0131 da yaratmal\u0131s\u0131n\u0131z.<\/p>\n\n\n\n<p>\u015eablonlar\u0131n\u0131za ait b\u00fct\u00fcn HTML dosyalar\u0131n\u0131 <strong>templates<\/strong> klas\u00f6r\u00fcne koymak zorundas\u0131n\u0131z. Aksi taktirde teman\u0131z do\u011fru bir \u015fekilde y\u00fcklenmeyecektir.<\/p>\n\n\n\n<p>\u015eablon par\u00e7alar\u0131 dosyalar\u0131 iste\u011fe ba\u011fl\u0131d\u0131r. E\u011fer bu dosyalar\u0131 kullanmak isterseniz, hepsini <strong>parts<\/strong> klas\u00f6r\u00fcne koymak zorundas\u0131n\u0131z.<\/p>\n\n\n\n<p><strong>theme.json<\/strong> dosyas\u0131 bir yap\u0131land\u0131rma dosyas\u0131d\u0131r ve iste\u011fe ba\u011fl\u0131d\u0131r. Fakat kullan\u0131lmas\u0131 \u00f6nemle tavsiye edilmektedir.<\/p>\n\n\n\n<p>Yukar\u0131da bahsedilen dosyalar d\u0131\u015f\u0131nda bir blok temas\u0131 <strong>functions.php<\/strong> dosyas\u0131, temaya \u00e7e\u015fitli \u00f6zellikler kazand\u0131rabilecek <strong>PHP<\/strong>, <strong>CSS<\/strong>, <strong>resim\/medya <\/strong>veya <strong>JavaScript <\/strong>dosyalar\u0131 da i\u00e7erebilir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, bir blok temas\u0131n\u0131n temel dosya hiyerar\u015fisi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>patterns (dir)\r\n      - example.php\r\nparts (dir)\r\n      - footer.html\r\n      - header.html\r\ntemplates(dir)\r\n      - 404.html\r\n      - archive.html\r\n      - index.html (zorunlu)\r\n      - singular.html\r\nfunctions.php\r\nindex.php\r\nREADME.txt\r\nscreenshot.png\r\nstyle.css (zorunlu)\r\ntheme.json<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Theme_setup_Fonksiyonu\">Theme_setup Fonksiyonu<\/span><\/h2>\n\n\n\n<p>Bir blok temas\u0131n\u0131n <strong>functions.php<\/strong> dosyas\u0131, <code>wp-block-styles<\/code> deste\u011fi veya edit\u00f6r taraf\u0131na ait stil dosyas\u0131n\u0131 i\u00e7erebilir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da blok temas\u0131 i\u00e7in \u00f6rnek bir <strong>functions.php<\/strong> dosyas\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ( ! function_exists( 'benim_ilk_temam_setup' ) ) :\r\n\/**\r\n * Sets up theme defaults and registers support for various WordPress features.\r\n *\r\n * Note that this function is hooked into the after_setup_theme hook, which runs\r\n * before the init hook.\r\n *\/\r\nfunction benim_ilk_temam_setup() {\r\n\t\/\/ Blok stilleri deste\u011fi ekler.\r\n\tadd_theme_support( 'wp-block-styles' );\r\n\r\n\t\/\/ Ana dizine edit\u00f6r g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in bir stil dosyas\u0131 ekler.\r\n\tadd_editor_style( 'editor-style.css' );\r\n}\r\nendif; \/\/ benim_ilk_temam_setup\nadd_action( 'after_setup_theme', 'benim_ilk_temam_setup' );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz functions.php dosyas\u0131n\u0131n klasik temalarda kullan\u0131landan \u00e7ok daha sade oldu\u011funu siz de farketmi\u015fsinizdir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Theme_Support_Tema_Destegi\">Theme Support (Tema Deste\u011fi)<\/span><\/h2>\n\n\n\n<p>Blok temalar, a\u015fa\u011f\u0131daki \u00f6zellikleri otomatik olarak destekler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_theme_support( 'post-thumbnails' );\r\nadd_theme_support( 'responsive-embeds' );\r\nadd_theme_support( 'editor-styles' );\r\nadd_theme_support( 'html5', array('style','script', ) );\r\nadd_theme_support( 'automatic-feed-links' );<\/code><\/pre>\n\n\n\n<p>Baz\u0131 tema destekleri, <strong>theme.json<\/strong> dosyas\u0131nda ilgili \u00f6zellik kullan\u0131ld\u0131\u011f\u0131nda aktive olur. <strong>Theme.json<\/strong> dosyas\u0131nda yap\u0131lan ayarlar\u0131n <code>add_theme_support()<\/code> fonksiyonuna g\u00f6re \u00f6nceli\u011fi vard\u0131r.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, <strong>theme.json<\/strong> dosyas\u0131nda yap\u0131lan ayarlar\u0131n <code>add_theme_support()<\/code> fonksiyonundaki kar\u015f\u0131l\u0131\u011f\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><strong>Theme support (tema deste\u011fi)<\/strong><\/td><td><strong>Theme.json ayar\u0131<\/strong><\/td><\/tr><tr><td><code>add_theme_support( \u2018editor-font-sizes\u2019, array() );<\/code><\/td><td><code>settings.typography.fontSizes<\/code><\/td><\/tr><tr><td><code>add_theme_support( \u2018custom-line-height\u2019 );<\/code><\/td><td><code>settings.typography.lineHeight<\/code><\/td><\/tr><tr><td><code>add_theme_support( \u2018align-wide\u2019 );<\/code><\/td><td><code>settings.layout<\/code><\/td><\/tr><tr><td><code>add_theme_support( \u2018editor-color-palette\u2019, array() );<\/code><\/td><td><code>settings.color.palette<\/code><\/td><\/tr><tr><td><code>add_theme_support( \u2018editor-gradient-presets\u2019, array() );<\/code><\/td><td><code>settings.color.gradients<\/code><\/td><\/tr><tr><td><code>add_theme_support( \u2018custom-spacing\u2019 );<\/code><\/td><td><code>settings.spacing<\/code><\/td><\/tr><tr><td><code>add_theme_support( \u2018custom-units\u2019, array() );<\/code><\/td><td><code>settings.spacing.units<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Bloklar_Icin_CSS_Ekleme\">Bloklar \u0130\u00e7in CSS Ekleme<\/span><\/h2>\n\n\n\n<p>Bir block temas\u0131na bir CSS dosyas\u0131 ekleme i\u015flemi <strong>functions.php<\/strong> dosyas\u0131na eklenen a\u015fa\u011f\u0131daki fonksiyonlar yard\u0131m\u0131 ile eklenir:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>wp_enqueue_style()<\/code><\/li>\n\n\n\n<li><code>wp_enqueue_block_style()<\/code><\/li>\n<\/ol>\n\n\n\n<p>Bu iki fonksiyonu daha yak\u0131ndan tan\u0131yal\u0131m.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"1_Wp_enqueue_style_Fonksiyonu\">1. Wp_enqueue_style Fonksiyonu<\/span><\/h3>\n\n\n\n<p>Bu fonksiyon ile ilgili detayl\u0131 bilgiyi <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-12-css-ve-javascript-dosyalarini-ekleme\/#Stil_Dosyalari_CSS\" target=\"_blank\" rel=\"noreferrer noopener\">stil dosyas\u0131 ekleme<\/a> yaz\u0131m\u0131zda bulabilirsiniz.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da verilen kod, teman\u0131n ana dizininde olu\u015fturulmu\u015f bir <strong>assets\/css<\/strong> dizininde bulunan <strong>stilim.css<\/strong> dosyas\u0131n\u0131n temaya nas\u0131l eklendi\u011fini g\u00f6stermektedir.<\/p>\n\n\n\n<p><code>functions.php:<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function tema_scriptleri() {\r\n     wp_enqueue_style( 'benim-stilim', get_template_directory_uri() . '\/assets\/css\/stilim.css',false,'1.1','all');\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'tema_scriptleri' );\r<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"2_Wp_enqueue_block_style_Fonksiyonu\">2. Wp_enqueue_block_style Fonksiyonu<\/span><\/h3>\n\n\n\n<p>Bloklar\u0131n kendilerine ait stil ayarlar\u0131 olmas\u0131na kar\u015f\u0131n, daha fazla stil eklemek istersek bunu <code>wp_enqueue_block_style()<\/code> fonksiyonu ile yapabiliriz. Bu fonksiyon WordPress 5.9 ve daha yukar\u0131s\u0131nda \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n<p><code>wp_enqueue_block_style()<\/code> fonksiyonu ile ekledi\u011fimiz CSS kodlar\u0131, sadece ilgili block, sayfada kullan\u0131l\u0131yorsa y\u00fcklenir. Bu da gereksiz y\u00fcklemelerin \u00f6n\u00fcne ge\u00e7erek, temam\u0131z\u0131n performans kayb\u0131n\u0131 \u00f6nler.<\/p>\n\n\n\n<p>Bu fonksiyon ile eklenen stiller hem edit\u00f6r hem de tema g\u00f6r\u00fcn\u00fcm\u00fcnde \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n<p>Blok edit\u00f6rde bir blo\u011fu kullan\u0131rken yapt\u0131\u011f\u0131m\u0131z stil ayarlar\u0131n\u0131n bu fonksiyona g\u00f6re \u00f6nceli\u011fi vard\u0131r.<\/p>\n\n\n\n<p>Bu fonksiyonu, <strong>theme.json<\/strong> dosyas\u0131 arac\u0131l\u0131\u011f\u0131 ile ekleyemedi\u011fimiz stilleri eklemek i\u00e7in kullanabiliriz. \u00d6rne\u011fin CSS media sorgular\u0131 (<code>@media screen and (max-width: 992px)\u00a0{ ... }<\/code> gibi) bu fonksiyon yard\u0131m\u0131 ile eklenebilir.<\/p>\n\n\n\n<p>Mesela &#8220;<strong>En son yorumlar<\/strong>&#8221; blo\u011funa bir CSS ekleyelim. Bunun i\u00e7in \u015fu ad\u0131mlar\u0131 takip etmeliyiz:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stil dosyas\u0131na, hangi blok i\u00e7in kullanacaksak o blo\u011fun ad\u0131n\u0131 vermeliyiz.\n<ul class=\"wp-block-list\">\n<li>Bloklar\u0131n orijinal adlar\u0131n\u0131 kullanmal\u0131y\u0131z.<\/li>\n\n\n\n<li>Bloklar\u0131n orijinal adlar\u0131n\u0131 g\u00f6rmek i\u00e7in <a href=\"https:\/\/wordpress.org\/documentation\/article\/blocks-list\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress kurulumu ile birlikte gelen bloklar\u0131n\u0131n listesine<\/a> bakabilirsiniz.\n<ul class=\"wp-block-list\">\n<li>Blok adlar\u0131n\u0131 yazarken; k\u00fc\u00e7\u00fck harfler kullanmal\u0131 ve kelimeler aras\u0131ndaki bo\u015fluklar\u0131 &#8220;-&#8221; (tire) i\u015fareti ile de\u011fi\u015ftirmeliyiz.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u00d6rnekteki blok &#8220;<strong>En son yorumlar<\/strong>&#8221; blo\u011fudur ve ad\u0131 &#8220;<strong>latest-comments<\/strong>&#8221; olarak ge\u00e7er.\n<ul class=\"wp-block-list\">\n<li>O zaman bu blok i\u00e7in olu\u015fturaca\u011f\u0131m\u0131z stil dosyas\u0131n\u0131n ad\u0131 <strong>latest-comments.css<\/strong> olmal\u0131d\u0131r.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Olu\u015fturdu\u011fumuz <strong>latest-commetns.css<\/strong> dosyas\u0131n\u0131 <strong>assets\/CSS\/blocks<\/strong> dizinine koyuyoruz.\n<ul class=\"wp-block-list\">\n<li>Bu dizin zorunlu de\u011fildir, siz dilerseniz ba\u015fka bir dizin olu\u015fturup koyabilirsiniz.<\/li>\n\n\n\n<li>Diyelim ki CSS dosyam\u0131zda \u015f\u00f6yle bir stil kulland\u0131k:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><code>latest-comments.css<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.wp-block-latest-comments__comment-date {\n color: var(--wp--preset--color--primary);\n font-size: var(--wp--preset--font-size--small);\n}<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Bu CSS dosyas\u0131n\u0131, <strong>functions.php<\/strong> dosyas\u0131na ekleyece\u011fimiz \u015fu kodlar ile temam\u0131za dahil edebiliriz.\n<ul class=\"wp-block-list\">\n<li>A\u015fa\u011f\u0131daki kodlar, dinamik olarak b\u00fct\u00fcn bloklar i\u00e7in tek seferde ekleme yapar.\n<ul class=\"wp-block-list\">\n<li>Yapmam\u0131z gereken tek \u015fey, yukar\u0131da anlat\u0131ma uygun \u015fekilde CSS dosyas\u0131n\u0131 haz\u0131rlad\u0131\u011f\u0131m\u0131z blo\u011fun ad\u0131n\u0131 <code>$styled_blocks = ['latest-comments'];<\/code> dizisine eklemektir.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function benim_ilk_temam_setup() {\r\n\t\/*\r\n\t * Ekstra blok stilleri ekler. A\u015fa\u011f\u0131da verilen diziye, CSS dosyalar\u0131n\u0131 haz\u0131rlad\u0131\u011f\u0131n\u0131z bloklar\u0131n isimlerini eklemeniz yeterli olacakt\u0131r.\n\t *\/\r\n\t$styled_blocks = &#91;'latest-comments'];\r\n\tforeach ( $styled_blocks as $block_name ) {\r\n\t\t$args = array(\r\n\t\t\t'handle' => \"myfirsttheme-$block_name\",\r\n\t\t\t'src'    => get_theme_file_uri( \"assets\/css\/blocks\/$block_name.css\" ),\r\n\t\t\t$args&#91;'path'] = get_theme_file_path( \"assets\/css\/blocks\/$block_name.css\" ),\r\n\t\t);\r\n\t\twp_enqueue_block_style( \"core\/$block_name\", $args );\r\n\t}\r\n}\r\nadd_action( 'after_setup_theme', 'benim_ilk_temam_setup' );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"JavaScript_Dosyalari_Ekleme\">JavaScript Dosyalar\u0131 Ekleme<\/span><\/h2>\n\n\n\n<p>Blok Temaya bir JavaScript dosyas\u0131 eklemek, klasik temaya eklemek ile ayn\u0131d\u0131r.<\/p>\n\n\n\n<p>Bu konu ile ilgili detayl\u0131 bilgi, klasik WordPress temas\u0131 kodlamay\u0131 \u00f6\u011frendi\u011fimiz derslerimizde <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-12-css-ve-javascript-dosyalarini-ekleme\/#Scriptler_JavaScript\" target=\"_blank\" rel=\"noreferrer noopener\">Scriptler (JavaScript)<\/a> ba\u015fl\u0131\u011f\u0131 alt\u0131nda verilmi\u015ftir.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>BU DERS\u0130N BA\u015eLIKLARI1 Dosya Yap\u0131s\u01312 Theme_setup Fonksiyonu3 Theme Support (Tema Deste\u011fi)4 Bloklar \u0130\u00e7in CSS Ekleme4.1 1. Wp_enqueue_style Fonksiyonu4.2 2. Wp_enqueue_block_style Fonksiyonu5 JavaScript Dosyalar\u0131 Ekleme Dosya Yap\u0131s\u0131 Bir blok temas\u0131nda 2 tane zorunlu dosya vard\u0131r. Bunlar: Blok teman\u0131z\u0131n WordPress 5.9 ve daha \u00f6nceki s\u00fcr\u00fcmleri ile uyumlu olmas\u0131n\u0131 istiyorsan\u0131z, ana dizinde bir index.php dosyas\u0131 da yaratmal\u0131s\u0131n\u0131z. \u015eablonlar\u0131n\u0131za [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6724,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264],"tags":[265],"class_list":["post-6755","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\/6755","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=6755"}],"version-history":[{"count":3,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6755\/revisions"}],"predecessor-version":[{"id":6828,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/6755\/revisions\/6828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/6724"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=6755"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=6755"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=6755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}