{"id":7577,"date":"2023-07-01T16:22:27","date_gmt":"2023-07-01T13:22:27","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=7577"},"modified":"2023-07-01T23:53:59","modified_gmt":"2023-07-01T20:53:59","slug":"ozellestirme-ayarlarini-blok-modellerine-donusturme","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-blok-tabanli-tema-kodlama\/ozellestirme-ayarlarini-blok-modellerine-donusturme\/","title":{"rendered":"\u00d6zelle\u015ftirme Ayarlar\u0131n\u0131 Blok Modellerine D\u00f6n\u00fc\u015ft\u00fcrme"},"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=\"#Ornek_Olay\"><span class=\"toc_number toc_depth_1\">1<\/span> \u00d6rnek Olay:<\/a><ul><li><a href=\"#Adim_1_Butonu_Blok_Editorde_Tekrar_Olusturun\"><span class=\"toc_number toc_depth_2\">1.1<\/span> Ad\u0131m 1: Butonu Blok Edit\u00f6rde Tekrar Olu\u015fturun<\/a><\/li><li><a href=\"#Adim_2_Hazirladiginiz_Blogu_Bir_Blok_Modeli_Olarak_Kaydedin\"><span class=\"toc_number toc_depth_2\">1.2<\/span> Ad\u0131m 2: Haz\u0131rlad\u0131\u011f\u0131n\u0131z Blo\u011fu Bir Blok Modeli Olarak Kaydedin<\/a><\/li><li><a href=\"#Adim_3_Blok_Modeline_Ozellestirme_Seceneklerinin_Degerlerini_Ekleyin\"><span class=\"toc_number toc_depth_2\">1.3<\/span> Ad\u0131m 3: Blok Modeline \u00d6zelle\u015ftirme Se\u00e7eneklerinin De\u011ferlerini Ekleyin<\/a><\/li><li><a href=\"#Adim_4_Blok_Modelini_Kullanima_Sunun\"><span class=\"toc_number toc_depth_2\">1.4<\/span> Ad\u0131m 4: Blok Modelini Kullan\u0131ma Sunun<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n<h2 class=\"wp-block-heading\"><span id=\"Ornek_Olay\">\u00d6rnek Olay:<\/span><\/h2>\n\n\n\n<p>Klasik temalar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek istersek, &#8220;<em>G\u00f6r\u00fcn\u00fcm->\u00d6zelle\u015ftir<\/em>&#8221; men\u00fcs\u00fc ile gidilen \u00f6zelle\u015ftirme sayfas\u0131n\u0131 kullan\u0131r\u0131z. Diyelim ki klasik bir temam\u0131z var. Bu teman\u0131n \u00f6zelle\u015ftirme sayfas\u0131nda bir se\u00e7enek var. Bu se\u00e7enek, sitenin header k\u0131sm\u0131nda bir &#8220;<em>Call to action<\/em>&#8221; tipi bir buton g\u00f6steriyor.<\/p>\n\n\n\n<p>Bu buton sadece bu b\u00f6l\u00fcmde g\u00f6steriliyor olsun. Temam\u0131z\u0131n kullan\u0131c\u0131lar\u0131 da bu botunu sadece g\u00f6sterme\/gizleme se\u00e7ene\u011fine sahipler. Ne ba\u015fka bir yerde daha kullanabiliyorlar ne de konumunda oynamalar yapabiliyorlar. Bu buton ile ilgili kullan\u0131c\u0131m\u0131za sunulan se\u00e7enekler \u015funlar olsun:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Botunu g\u00f6sterme\/gizleme<\/li>\n\n\n\n<li>Buton tekstini girebilme<\/li>\n\n\n\n<li>Ba\u011flant\u0131 (url) de\u011ferini girebilme<\/li>\n\n\n\n<li>Text rengini se\u00e7ebilme<\/li>\n\n\n\n<li>Arkaplan rengini se\u00e7ebilme<\/li>\n<\/ul>\n\n\n\n<p>Tabi b\u00fct\u00fcn bu ayarlar klasik temalarda kullan\u0131lan <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/5-0-besinci-bolumun-tanitimi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Customizer API<\/a> ile yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<p>Bizim bu yaz\u0131daki hedefimiz bu butonu bir blok modeline d\u00f6n\u00fc\u015ft\u00fcrmektir. Bunu ba\u015fard\u0131\u011f\u0131m\u0131zda kazanc\u0131m\u0131z \u015funlar olacakt\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Butonu diledi\u011fimiz her yerde kullanabiliyor olaca\u011f\u0131z.<\/li>\n\n\n\n<li>Tipagrafi, boyut, kenarl\u0131k gibi daha bir \u00e7ok ayar\u0131 yapabiliyor olaca\u011f\u0131z.<\/li>\n\n\n\n<li>Renklendirme konusunda \u00e7ok daha \u00f6zg\u00fcr olaca\u011f\u0131z.<\/li>\n\n\n\n<li>Ba\u015fka bloklarla kombine edip kullanabilece\u011fiz.<\/li>\n<\/ul>\n\n\n\n<p>\u015eimdi ad\u0131m ad\u0131m bu i\u015fi nas\u0131l yapaca\u011f\u0131m\u0131z g\u00f6relim:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Adim_1_Butonu_Blok_Editorde_Tekrar_Olusturun\">Ad\u0131m 1: Butonu Blok Edit\u00f6rde Tekrar Olu\u015fturun<\/span><\/h3>\n\n\n\n<p>Bu a\u015famada, blok edit\u00f6r\u00fcn b\u00fct\u00fcn nimetlerinden yararlanarak diledi\u011fimiz gibi bir buton blok olu\u015fturabiliriz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Adim_2_Hazirladiginiz_Blogu_Bir_Blok_Modeli_Olarak_Kaydedin\">Ad\u0131m 2: Haz\u0131rlad\u0131\u011f\u0131n\u0131z Blo\u011fu Bir Blok Modeli Olarak Kaydedin<\/span><\/h3>\n\n\n\n<p>Bir blok modeli olu\u015fturman\u0131n 2 yolu vard\u0131r:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Teman\u0131z\u0131n ana dizininde bir <strong>patterns\/<\/strong> dizini olu\u015fturup blok modelimizi, bu dizindeki bir dosya olarak olu\u015fturmak.\n<ul class=\"wp-block-list\">\n<li>A\u015fa\u011f\u0131daki verilen kod <em>Twenty Twenty Three<\/em> temas\u0131n\u0131n &#8220;<em>Call to action<\/em>&#8221; ad\u0131ndaki modelidir:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p><code><strong>call-to-action.php<\/strong><\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\r\n\/**\r\n * Title: Call to action\r\n * Slug: twentytwentythree\/cta\r\n * Categories: featured\r\n * Keywords: Call to action\r\n * Block Types: core\/buttons\r\n *\/\r\n?>\r\n&lt;!-- wp:columns {\"align\":\"wide\"} -->\r\n&lt;div class=\"wp-block-columns alignwide\">\r\n\t&lt;!-- wp:column -->\r\n\t&lt;div class=\"wp-block-column\">\r\n\t\t&lt;!-- wp:paragraph {\"style\":{\"typography\":{\"lineHeight\":\"1.2\"}},\"fontSize\":\"x-large\"} -->\r\n\t\t&lt;p class=\"has-x-large-font-size\" style=\"line-height:1.2\">&lt;?php echo esc_html_x( 'Got any book recommendations?', 'sample content for call to action', 'twentytwentythree' ); ?>\r\n\t\t&lt;\/p>\r\n\t\t&lt;!-- \/wp:paragraph -->\r\n\r\n\t\t&lt;!-- wp:buttons -->\r\n\t\t&lt;div class=\"wp-block-buttons\">\r\n\t\t\t&lt;!-- wp:button {\"fontSize\":\"small\"} -->\r\n\t\t\t&lt;div class=\"wp-block-button has-custom-font-size has-small-font-size\">\r\n\t\t\t\t&lt;a class=\"wp-block-button__link wp-element-button\">\r\n\t\t\t\t&lt;?php echo esc_html_x( 'Get In Touch', 'sample content for call to action button', 'twentytwentythree' ); ?>\r\n\t\t\t\t&lt;\/a>\r\n\t\t\t&lt;\/div>\r\n\t\t\t&lt;!-- \/wp:button -->\r\n\t\t&lt;\/div>\r\n\t\t&lt;!-- \/wp:buttons -->\r\n\t&lt;\/div>\r\n\t&lt;!-- \/wp:column -->\r\n\r\n\t&lt;!-- wp:column -->\r\n\t&lt;div class=\"wp-block-column\">\r\n\t\t&lt;!-- wp:separator -->\r\n\t\t&lt;hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\r\n\t\t&lt;!-- \/wp:separator -->\r\n\t&lt;\/div>\r\n\t&lt;!-- \/wp:column -->\r\n&lt;\/div>\r\n&lt;!-- \/wp:columns -->\r<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Temam\u0131z\u0131n <strong><em>functions.php<\/em><\/strong> dosyas\u0131 yard\u0131m\u0131 ile <strong><em>register_block_patterns()<\/em><\/strong> fonksiyonunu kullanarak bir model olu\u015fturmak.\n<ul class=\"wp-block-list\">\n<li>Bu i\u015flemin nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 anlamak i\u00e7in \u015fu yaz\u0131m\u0131za g\u00f6z atabilirsin: <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-blok-tabanli-tema-kodlama\/klasik-temayi-blok-temaya-donusturme\/#Klasik_Temalara_Blok_Modelleri_Ekleme\" target=\"_blank\" rel=\"noreferrer noopener\">Klasik Temalara Blok Modelleri Ekleme<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Adim_3_Blok_Modeline_Ozellestirme_Seceneklerinin_Degerlerini_Ekleyin\">Ad\u0131m 3: Blok Modeline \u00d6zelle\u015ftirme Se\u00e7eneklerinin De\u011ferlerini Ekleyin<\/span><\/h3>\n\n\n\n<p>Bu ad\u0131mda, Customizer API ile olu\u015fturdu\u011fumuz \u00f6zelle\u015ftirme formundaki bilgileri blok modelimize ta\u015f\u0131yoruz. Diyelim ki, \u00f6zelle\u015ftirme ayarlar\u0131nda, form alanlar\u0131m\u0131z i\u00e7in \u015fu adlar\u0131 kulland\u0131k:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;<code>myfirsttheme_action_link<\/code>&#8220;: Butonun url de\u011feri<\/li>\n\n\n\n<li>&#8220;<code>myfirsttheme_action_text<\/code>&#8220;: Butonun texti<\/li>\n\n\n\n<li>&#8220;<code>myfirsttheme_action_text_color<\/code>&#8220;: Botun textinin rengi<\/li>\n\n\n\n<li>&#8220;<code>myfirsttheme_action_bgcolor<\/code>&#8220;: Arkaplan rengi<\/li>\n<\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki fonksiyon, url de\u011ferini ve texti alarak bir buton HTML&#8217;i olu\u015fturur.<\/p>\n\n\n\n<p><code><strong>functions.php<\/strong><\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\r\nfunction benim_temam_action_text() {\r\n\t$action_text = '';\r\n\tif ( get_theme_mod( 'myfirsttheme_action_link' ) ) {\r\n\t\t$action_text .= '&lt;a href=\"' . esc_url( get_theme_mod( 'myfirsttheme_action_link' ) ) . '\">';\r\n\t}\r\n\t$action_text .= wp_kses_post( get_theme_mod( 'myfirsttheme_action_text' ) );\r\n\tif ( get_theme_mod( 'myfirsttheme_action_link' ) ) {\r\n\t\t$action_text .= '&lt;\/a>';\r\n\t}\r\n\treturn $action_text;\r\n}<\/code><\/pre>\n\n\n\n<p>Bu fonksiyonu ve di\u011fer \u00f6zelle\u015ftirme ayarlar\u0131n\u0131 (Customizer API form de\u011ferlerini), modelin content k\u0131sm\u0131nda \u015f\u00f6yle kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>'content' =>'\r\n\t&lt;!-- wp:group {\"style\":{\"border\":{\"width\":\"4px\",\"style\":\"solid\",\"radius\":\"8px\"},\"color\":{\"background\":\"' . esc_attr( get_theme_mod( 'myfirsttheme_action_bgcolor', '#fff' ) ) . '\"}},\"borderColor\":\"tertiary\",\"layout\":{\"type\":\"constrained\"},\"className\":\"call-to-action__large\"} -->\r\n\t&lt;div class=\"wp-block-group call-to-action__large has-border-color has-tertiary-border-color has-background\" style=\"background-color:' . esc_attr( get_theme_mod( 'myfirsttheme_action_bgcolor', '#fff' ) ). ';border-radius:8px;border-style:solid;border-width:4px\">&lt;!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"' . esc_attr( get_theme_mod( 'myfirsttheme_action_text_color', '#000' ) ) . '\"},\"elements\":{\"link\":{\"color\":{\"text\":\"' . esc_attr( get_theme_mod( 'myfirsttheme_action_text_color', '#000' ) ). '\"}}}},\"fontSize\":\"large\"} -->\r\n\t&lt;p class=\"has-text-align-center has-text-color has-link-color has-large-font-size\" style=\"color:' . esc_attr( get_theme_mod( 'myfirsttheme_action_text_color', '#000' ) ). '\">' . myfirsttheme_action_text() . '&lt;\/p>&lt;!-- \/wp:paragraph -->\r\n\t&lt;\/div>\r\n\t&lt;!-- \/wp:group -->\r\n',<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Adim_4_Blok_Modelini_Kullanima_Sunun\">Ad\u0131m 4: Blok Modelini Kullan\u0131ma Sunun<\/span><\/h3>\n\n\n\n<p>E\u011fer teman\u0131z\u0131n header k\u0131sm\u0131n\u0131, d\u00fczenlenebilir bir <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-blok-tabanli-tema-kodlama\/sablonlar-ve-sablon-parcalari\/#Sablon_Parcalari\" target=\"_blank\" rel=\"noreferrer noopener\">\u015fablon par\u00e7as\u0131<\/a> halinde getirmek isterseniz a\u015fa\u011f\u0131daki kodu diledi\u011finiz <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-blok-tabanli-tema-kodlama\/sablonlar-ve-sablon-parcalari\/#Sablon_Parcalari\" target=\"_blank\" rel=\"noreferrer noopener\">\u015fablon par\u00e7as\u0131nda<\/a> kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- wp:pattern {\"slug\":\"myfirsttheme\/call-to-action\"} \/--><\/code><\/pre>\n\n\n\n<p>E\u011fer header \u015fablonunuzun PHP yap\u0131s\u0131n\u0131 korumak istiyorsan\u0131z, olu\u015fturdu\u011funuz bu modeli \u015fablonunuzda \u015fu \u015fekilde kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>echo do_blocks( '&lt;!-- wp:pattern {\"slug\":\"myfirsttheme\/call-to-action\"} \/-->' );<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>BU DERS\u0130N BA\u015eLIKLARI1 \u00d6rnek Olay:1.1 Ad\u0131m 1: Butonu Blok Edit\u00f6rde Tekrar Olu\u015fturun1.2 Ad\u0131m 2: Haz\u0131rlad\u0131\u011f\u0131n\u0131z Blo\u011fu Bir Blok Modeli Olarak Kaydedin1.3 Ad\u0131m 3: Blok Modeline \u00d6zelle\u015ftirme Se\u00e7eneklerinin De\u011ferlerini Ekleyin1.4 Ad\u0131m 4: Blok Modelini Kullan\u0131ma Sunun \u00d6rnek Olay: Klasik temalar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek istersek, &#8220;G\u00f6r\u00fcn\u00fcm->\u00d6zelle\u015ftir&#8221; men\u00fcs\u00fc ile gidilen \u00f6zelle\u015ftirme sayfas\u0131n\u0131 kullan\u0131r\u0131z. Diyelim ki klasik bir temam\u0131z var. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7562,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264],"tags":[265],"class_list":["post-7577","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\/7577","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=7577"}],"version-history":[{"count":2,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/7577\/revisions"}],"predecessor-version":[{"id":7618,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/7577\/revisions\/7618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/7562"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=7577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=7577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=7577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}