{"id":2985,"date":"2024-01-04T10:59:51","date_gmt":"2024-01-04T10:59:51","guid":{"rendered":"https:\/\/wpcenter.io\/?p=2985"},"modified":"2024-02-02T09:57:50","modified_gmt":"2024-02-02T09:57:50","slug":"acf-ile-innerblocks-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/wpcenter.io\/tr\/acf-ile-innerblocks-nasil-olusturulur\/","title":{"rendered":"ACF ile InnerBlocks Nas\u0131l Olu\u015fturulur?"},"content":{"rendered":"\n

Advanced Custom Fields (ACF), WordPress kullan\u0131c\u0131lar\u0131na web siteleri i\u00e7in \u00f6zel i\u00e7erikler olu\u015fturma ve y\u00f6netme f\u0131rsat\u0131 sunan bir ara\u00e7t\u0131r. Bu kapsaml\u0131 ara\u00e7 sayesinde, kullan\u0131c\u0131lar karma\u015f\u0131k i\u00e7erik yap\u0131s\u0131n\u0131 kolayca y\u00f6netebilir ve web sitelerinin fonksiyonelli\u011fini geni\u015fletebilirler. ACF’nin sa\u011flad\u0131\u011f\u0131 InnerBlocks \u00f6zelli\u011fi, Gutenberg edit\u00f6r\u00fcn\u00fcn esnekli\u011fini bir ad\u0131m daha ileri ta\u015f\u0131yarak, kullan\u0131c\u0131lar\u0131n web sitelerinde zengin ve dinamik i\u00e7erik bloklar\u0131 olu\u015fturmalar\u0131n\u0131 sa\u011flar. <\/p>\n\n\n\n

Bu makalede, ACF’nin InnerBlocks \u00f6zelli\u011finin temellerini, bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fin web sitenizde nas\u0131l yap\u0131land\u0131r\u0131laca\u011f\u0131n\u0131 ve sayfa d\u00fczenlerinize nas\u0131l entegre edilebilece\u011fini ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Ad\u0131m ad\u0131m rehberimizde, bu \u00f6zelli\u011fi etkin bir \u015fekilde kullanarak kullan\u0131c\u0131 deneyiminizi nas\u0131l zenginle\u015ftirebilece\u011finizin detaylar\u0131n\u0131 bulabilirsiniz.<\/p>\n\n\n\n

<\/span>InnerBlocks Nedir?<\/span><\/h2>\n\n\n\n

InnerBlocks, WordPress blok edit\u00f6r\u00fcnde, \u00f6zel bloklar i\u00e7inde ba\u015fka bloklar\u0131n yerle\u015ftirilmesine olanak tan\u0131yan bir \u00f6zelliktir. Bu \u00f6zellik sayesinde, geli\u015ftiriciler ve i\u00e7erik \u00fcreticileri, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde zenginle\u015ftiren, katmanl\u0131 ve i\u00e7 i\u00e7e ge\u00e7mi\u015f i\u00e7erik yap\u0131s\u0131 olu\u015fturabilirler. InnerBlocks, bir “kapsay\u0131c\u0131” blok i\u00e7inde daha k\u00fc\u00e7\u00fck “\u00e7ocuk” bloklar\u0131n yerle\u015ftirilmesine izin vererek, web sitesi sahiplerinin kendi sayfalar\u0131n\u0131 tamamen \u00f6zelle\u015ftirilmi\u015f ve mod\u00fcler bir \u015fekilde in\u015fa etmelerine olanak tan\u0131r.<\/p>\n\n\n\n

Gutenberg, kullan\u0131c\u0131lar\u0131n i\u00e7eriklerini par\u00e7alar halinde d\u00fc\u015f\u00fcnmelerine ve her bir par\u00e7ay\u0131 bir blok olarak y\u00f6netmelerine imkan veren, blok tabanl\u0131 bir d\u00fczenleyicidir. Kullan\u0131c\u0131lar, InnerBlocks \u00f6zelli\u011fini kullanarak, basit bir metin blo\u011fundan karma\u015f\u0131k bir \u00fcr\u00fcn listesine veya hizmet sunumu b\u00f6l\u00fcm\u00fcne kadar her \u015feyi olu\u015fturabilirler.<\/p>\n\n\n\n

Her bir blok, ba\u011f\u0131ms\u0131z olarak eklenebilir, d\u00fczenlenebilir ve yeniden konumland\u0131r\u0131labilir, bu da web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eri\u011fini neredeyse s\u0131n\u0131rs\u0131z bir \u015fekilde \u00f6zelle\u015ftirmeyi m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131 i\u00e7inde kullan\u0131c\u0131lar\u0131n al\u0131nt\u0131lar, resimler ve ilgili i\u00e7eriklerle zenginle\u015ftirilmi\u015f bir hikaye anlatmas\u0131na imkan verir. E-ticaret siteleri, \u00fcr\u00fcn \u00f6zelliklerini, resim galerilerini ve sat\u0131n alma butonlar\u0131n\u0131 tek bir \u00fcr\u00fcn blo\u011funda birle\u015ftirebilir.<\/p>\n\n\n\n

Geli\u015ftiriciler i\u00e7in InnerBlocks, \u00f6zel bloklar olu\u015ftururken kullan\u0131c\u0131lara esneklik sunman\u0131n yan\u0131 s\u0131ra, kodun yeniden kullan\u0131m\u0131n\u0131 ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir tema veya eklenti geli\u015ftiricisi, m\u00fc\u015fterilerin s\u0131k\u00e7a kulland\u0131\u011f\u0131 i\u00e7erik \u00f6\u011felerini standartla\u015ft\u0131r\u0131lm\u0131\u015f bloklar olarak sunarak, sitenin genel tutarl\u0131l\u0131\u011f\u0131n\u0131 korurken ayn\u0131 zamanda \u00f6zelle\u015ftirme se\u00e7eneklerini de art\u0131rabilir.<\/p>\n\n\n\n

\u00d6zetle, InnerBlocks, WordPress temalar\u0131 ve eklentileri geli\u015ftiricileri i\u00e7in olduk\u00e7a de\u011ferlidir. Bu \u00f6zellik, karma\u015f\u0131k i\u00e7erik yap\u0131lar\u0131n\u0131 ve i\u00e7 i\u00e7e ge\u00e7mi\u015f blok d\u00fczenlemelerini m\u00fcmk\u00fcn k\u0131lar. \u00d6zel blok geli\u015ftirirken, InnerBlocks \u00f6zelli\u011fini kullanmak, bu bloklar\u0131n kullan\u0131c\u0131lar taraf\u0131ndan daha rahat ve esnek bir \u015fekilde \u00f6zelle\u015ftirilmesini sa\u011flar. B\u00f6ylece, kullan\u0131c\u0131lar kendi ihtiya\u00e7lar\u0131na g\u00f6re bloklar\u0131 d\u00fczenleyebilir ve ki\u015fiselle\u015ftirebilir.<\/p>\n\n\n\n

<\/span>ACF i\u00e7inde InnerBlocks’u Aktive Etme<\/span><\/h2>\n\n\n\n

\u0130lk ad\u0131m olarak WordPress kurulumunuzun g\u00fcncel oldu\u011fundan emin olun. Daha sonraki ad\u0131m ise ACF Pro eklentisini edinmek ve WordPress sitenize y\u00fcklemektir. \u00c7\u00fcnk\u00fc InnerBlocks ACF Pro ile \u00e7al\u0131\u015fan bir \u00f6zelliktir. ACF Pro’yu y\u00fcklemek ve etkinle\u015ftirmek i\u00e7in ACF web sitesindeki ACF Pro Y\u00fckseltme Rehberi<\/a> ad\u0131mlar\u0131n\u0131 takip edebilirsiniz. Eklentiyi aktifle\u015ftirdikten sonra lisans anahtar\u0131n\u0131z\u0131 girerek ACF PRO eklentisini kullanmaya ba\u015flayabilirsiniz.<\/p>\n\n\n\n

<\/span>InnerBlocks ile Blok Olu\u015fturma<\/span><\/h2>\n\n\n\n

ACF ve InnerBlocks kullanarak WordPress i\u00e7in \u00f6rnek olarak bir “Our Services” blo\u011fu nas\u0131l olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m inceleyelim. Her bir ad\u0131mda, ger\u00e7ekle\u015ftirece\u011finiz i\u015flemleri destekleyecek kod \u00f6rnekleri sunarak ve bu kodlar\u0131n her bir par\u00e7as\u0131n\u0131n \u00f6nemini ve i\u015flevini detayland\u0131rarak, bu s\u00fcrecin her y\u00f6n\u00fcn\u00fc ayd\u0131nlatmaya \u00e7al\u0131\u015faca\u011f\u0131m. B\u00f6ylece, kendi web siteniz i\u00e7in benzer bloklar\u0131 nas\u0131l olu\u015fturabilece\u011finizi, bu bloklar\u0131 ki\u015fiselle\u015ftirme ve zenginle\u015ftirme yollar\u0131n\u0131 ke\u015ffedeceksiniz.<\/p>\n\n\n\n

Blok Kayd\u0131 \u0130\u00e7in JSON dosyas\u0131 Olu\u015fturma<\/h5>\n\n\n\n

\u0130lk olarak bir block.json dosyas\u0131na ihtiyac\u0131m\u0131z var. Bu dosya, yeni blo\u011funuzun temel ayarlar\u0131n\u0131, i\u015flevlerini ve \u00f6zelliklerini tan\u0131mlar ve WordPress’in blo\u011funuzu tan\u0131mas\u0131n\u0131 ve onu do\u011fru bir \u015fekilde i\u015flemesini sa\u011flar. Bunun i\u00e7in olu\u015fturaca\u011f\u0131m\u0131z eklentide veya temada t\u00fcm bloklar\u0131n bulundu\u011fu bir blocks klas\u00f6r\u00fc yaratmak i\u015fimizi kolayla\u015ft\u0131racakt\u0131r. <\/p>\n\n\n\n

Olu\u015fturdu\u011funuz blocks klas\u00f6r\u00fc i\u00e7inde, “Our Services” blo\u011funuz i\u00e7in \u00f6zel bir alt klas\u00f6r olu\u015ftural\u0131m. Bu alt klas\u00f6r\u00fc, blo\u011funuzla uyumlu ve tan\u0131mlay\u0131c\u0131 olacak \u015fekilde our-services olarak adland\u0131rabiliriz. Bu klas\u00f6r, blo\u011funuzla ilgili t\u00fcm dosyalar\u0131 (kaynak kodlar\u0131, stil dosyalar\u0131 ve JavaScript dosyalar\u0131 gibi) bir arada tutacak ve blo\u011funuzun t\u00fcm \u00f6\u011felerinin birbiriyle uyum i\u00e7inde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n\n\n\n

Olu\u015fturdu\u011funuz our-services klas\u00f6r\u00fc i\u00e7ine, blo\u011funuz i\u00e7in gereken block.json<\/strong> dosyas\u0131n\u0131 yerle\u015ftirin. block.json dosyas\u0131, blo\u011funuzun yap\u0131land\u0131rmas\u0131n\u0131 JSON format\u0131nda saklar ve WordPress’e bu blo\u011fun ad\u0131n\u0131, a\u00e7\u0131klamas\u0131n\u0131, kategori ve ikonunu, kullan\u0131lacak betik ve stil dosyalar\u0131n\u0131 ve di\u011fer \u00f6nemli bilgileri i\u00e7erir.<\/p>\n\n\n\n

Ard\u0131ndan, blo\u011funuzun \u00f6n y\u00fczde nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlayan PHP \u015fablon dosyas\u0131 olan our-services.php<\/strong> dosyas\u0131n\u0131 ekleyin. Bu dosya, blo\u011funuzun HTML yap\u0131s\u0131n\u0131, WordPress taraf\u0131ndan i\u015flenecek PHP kodlar\u0131n\u0131 ve kullan\u0131c\u0131lar\u0131n i\u00e7eriklerini InnerBlocks arac\u0131l\u0131\u011f\u0131yla nas\u0131l d\u00fczenleyebileceklerini tan\u0131mlar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

G\u00f6rseldeki gibi bir yap\u0131 olu\u015fturup devam ediyorum. Daha \u00f6nceki Advanced Custom Fields (ACF) ile Gutenberg Blok Nas\u0131l Olu\u015fturulur<\/a><\/strong> yaz\u0131m\u0131zda bu yap\u0131n\u0131n nas\u0131l kurulaca\u011f\u0131ndan detayl\u0131 olarak bahsetmi\u015ftik, isterseniz inceleyebilirsiniz.<\/p>\n\n\n\n

\u0130lk olarak block.json dosyam\u0131z\u0131 olu\u015fturuyoruz.<\/p>\n\n\n\n

{\n  \"name\": \"acf\/our-services\",\n  \"title\": \"Our Services\",\n  \"description\": \"Inner block template\",\n  \"category\": \"formatting\",\n  \"icon\": \"smiley\",\n  \"keywords\": [\"services\", \"inner block\"],\n  \"acf\": {\n    \"mode\": \"preview\",\n    \"renderTemplate\": \"our-services.php\"\n  },\n  \"supports\": {\n    \"anchor\": true,\n    \"jsx\": true\n  }\n}<\/pre>\n\n\n\n
Olu\u015fturdu\u011fumuz bu json dosyas\u0131nda,<\/p>\n\n\n\n
    \n
  • name<\/strong>: Blo\u011funuzun \u00f6zel ad\u0131d\u0131r. Genellikle theme-prefix\/block-name format\u0131nda kullan\u0131l\u0131r.<\/li>\n\n\n\n
  • title:<\/strong> Blo\u011funuzun g\u00f6r\u00fcnen ad\u0131d\u0131r ve kullan\u0131c\u0131lar taraf\u0131ndan blok se\u00e7ici i\u00e7inde g\u00f6r\u00fcl\u00fcr.<\/li>\n\n\n\n
  • category:<\/strong> Blo\u011fun hangi kategori alt\u0131nda yer alaca\u011f\u0131n\u0131 belirler.<\/li>\n\n\n\n
  • icon:<\/strong> Blo\u011funuzun simgesini belirtir. WordPress’in ikonlar\u0131ndan birini veya \u00f6zel bir ikon kullanabilirsiniz.<\/li>\n\n\n\n
  • keywords:<\/strong> Kullan\u0131c\u0131lar\u0131n blok arama s\u0131ras\u0131nda blo\u011funuzu kolayca bulabilmesi i\u00e7in anahtar kelimeler. Blok se\u00e7ici i\u00e7inde arama k\u0131sm\u0131na bu kelimeleri yazarsan\u0131z blo\u011funuza h\u0131zl\u0131ca ula\u015fabilirsiniz.<\/li>\n\n\n\n
  • supports:<\/strong> Blo\u011funuzun destekledi\u011fi ekstra \u00f6zellikleri belirtir. jsx deste\u011fi, InnerBlocks gibi React tabanl\u0131 \u00f6zelliklerin kullan\u0131lmas\u0131n\u0131 sa\u011flar.<\/li>\n\n\n\n
  • renderTemplate:<\/strong> Blo\u011funuzun frontend ve edit\u00f6rde nas\u0131l render edilece\u011fini belirleyen PHP \u015fablon dosyas\u0131n\u0131n yoludur.<\/li>\n<\/ul>\n\n\n\n
    Bu a\u015famada sonra, blo\u011funuzun stil ve davran\u0131\u015flar\u0131n\u0131 daha da \u00f6zelle\u015ftirmek i\u00e7in ek CSS ve JavaScript dosyalar\u0131n\u0131, gerekti\u011finde block.json dosyan\u0131za dahil edebilirsiniz<\/p>\n\n\n\n
    Siz de olu\u015fturaca\u011f\u0131n\u0131z blok i\u00e7in uygun \u015fekilde bir json dosyas\u0131 olu\u015fturabilirsiniz.<\/p>\n\n\n\n
    Blo\u011fu kaydetme<\/h5>\n\n\n\n
    block.json dosyas\u0131n\u0131 olu\u015fturduktan sonra, WordPress’in bu blo\u011fu tan\u0131mas\u0131 ve kullan\u0131labilir hale getirmesi i\u00e7in blo\u011fu kaydetmeniz gerekiyor. block.json dosyas\u0131, blok yap\u0131land\u0131rmas\u0131n\u0131 tan\u0131mlar, ancak WordPress’e bu blo\u011fu kaydetmek i\u00e7in ekstra bir ad\u0131m gereklidir.<\/p>\n\n\n\n
    Bu kay\u0131t i\u015flemi, WordPress’in register_block_type()<\/strong> fonksiyonu arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. Bu fonksiyon, block.json dosyas\u0131 yoluyla veya do\u011frudan PHP i\u00e7inde \u00e7a\u011fr\u0131labilir ve WordPress’in blok kay\u0131t mekanizmas\u0131na blo\u011funuzun varl\u0131\u011f\u0131n\u0131 ve nas\u0131l i\u015flenece\u011fini bildirir. Bu i\u015flem genellikle teman\u0131z\u0131n functions.php<\/strong> dosyas\u0131nda veya bir eklenti i\u00e7inde ger\u00e7ekle\u015ftirilir. Kay\u0131t s\u0131ras\u0131nda, block.json dosyan\u0131z\u0131n yolu fonksiyona parametre olarak verilir ve WordPress bu dosyay\u0131 okuyarak blo\u011funuzun ayarlar\u0131n\u0131 sistemine y\u00fckler.<\/p>\n\n\n\n
    function register_acf_blocks()\n{\n    register_block_type(get_template_directory() . '\/blocks\/our-services');\n}\n\nadd_action('init', 'register_acf_blocks');\n<\/pre>\n\n\n\n
    <\/span>InnerBlocks Entegrasyonu<\/span><\/h2>\n\n\n\n
    \u015eimdi blo\u011fumuzun HTML yap\u0131s\u0131n\u0131 our-services.php<\/strong> i\u00e7inde olu\u015ftural\u0131m. Bu PHP dosyas\u0131, blo\u011funuzun \u00f6n y\u00fczdeki g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve i\u00e7eri\u011fini tan\u0131mlayan HTML yap\u0131s\u0131n\u0131 i\u00e7erir. Web sayfan\u0131zda kullan\u0131c\u0131lar\u0131n g\u00f6rece\u011fi her \u015fey, bu dosya taraf\u0131ndan belirlenen kodlarla \u015fekillenir. <\/p>\n\n\n\n
    InnerBlocks yap\u0131s\u0131n\u0131 kullanarak, i\u00e7 i\u00e7e bloklar\u0131n ve \u00f6zelliklerinin nas\u0131l d\u00fczenlenece\u011fini bu dosyada belirliyoruz. Ben, “Our Services” blo\u011fu i\u00e7in, i\u00e7erikleri yan yana g\u00f6stermek amac\u0131yla iki s\u00fctunlu bir d\u00fczen olu\u015fturmay\u0131 tercih ettim. Bu yap\u0131land\u0131rmay\u0131, WordPress’in core\/columns ve core\/column bloklar\u0131n\u0131 kullanarak ger\u00e7ekle\u015ftirdim.<\/p>\n\n\n\n
    <?php\n$inner_blocks_template = [\n    [\n        'core\/columns', [], [\n        ['core\/column', [], [\n            ['core\/image']\n        ]],\n        ['core\/column', [], [\n            ['core\/heading', ['placeholder' => 'Add your title here...']],\n            ['core\/paragraph', ['placeholder' => 'Add your description here...']],\n            ['core\/button', ['placeholder' => 'Add link text...']]\n        ]]\n    ]\n    ]\n];\n\necho '<div class=\"our-services-block\">';\necho '<InnerBlocks template=\"' . esc_attr(wp_json_encode($inner_blocks_template)) . '\" \/>';\necho '<\/div>';\n\n?>\n<\/pre>\n\n\n\n
    Olu\u015fturdu\u011fum bu our-services.php dosyas\u0131nda;<\/p>\n\n\n\n
      \n
    • $inner_blocks_template<\/strong> dizi i\u00e7inde, core\/columns ve core\/column bloklar\u0131n\u0131 kullanarak iki s\u00fctunlu bir yap\u0131 olu\u015fturabilirsiniz. Bu \u00f6rnekte, bir ba\u015fl\u0131k (core\/heading), bir paragraf (core\/paragraph), bir resim (core\/image) ve bir buton (core\/button) kullanarak yap\u0131m\u0131z\u0131 olu\u015fturduk.<\/li>\n\n\n\n
    • esc_attr(wp_json_encode ($inner_blocks_template))<\/strong>: Bu kod, PHP’deki $inner_blocks_template dizisini g\u00fcvenli bir \u015fekilde JSON format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve InnerBlocks’a ge\u00e7irir.<\/li>\n<\/ul>\n\n\n\n
      Blo\u011funuzun d\u00fczeni konusunda daha fazla kontrol ve esneklik istiyorsan\u0131z, our-services.php dosyas\u0131nda kullanabilece\u011finiz templateLock<\/strong> \u00f6zelli\u011fini de g\u00f6z \u00f6n\u00fcnde bulundurabilirsiniz. Bu \u00f6zellik, blo\u011funuzun i\u00e7indeki alt bloklar\u0131n d\u00fczenini kilitlemek veya kullan\u0131c\u0131lara de\u011fi\u015ftirme \u00f6zg\u00fcrl\u00fc\u011f\u00fc tan\u0131mak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, templateLock=”false”<\/strong> ayar\u0131 ile, kullan\u0131c\u0131lar blo\u011funuzdaki s\u00fctunlar\u0131n yap\u0131s\u0131n\u0131 ve i\u00e7eriklerini, kendi ihtiya\u00e7 ve tercihlerine g\u00f6re s\u00fcr\u00fckleyip b\u0131rakarak yeniden d\u00fczenleyebilirler. Bu, \u00f6zellikle kullan\u0131c\u0131lar\u0131n yarat\u0131c\u0131 olmalar\u0131n\u0131 ve sayfa i\u00e7eri\u011fini ki\u015fiselle\u015ftirmelerini istedi\u011finiz durumlar i\u00e7in idealdir.<\/p>\n\n\n\n
      Alternatif olarak, e\u011fer olu\u015fturdu\u011funuz blo\u011fun yap\u0131s\u0131n\u0131 korumak ve sadece belirli i\u00e7eriklerin eklenmesine veya de\u011fi\u015ftirilmesine izin vermek istiyorsan\u0131z, templateLock=”all” <\/strong>kullanarak blo\u011funuzun yap\u0131s\u0131n\u0131 tamamen kilitleyebilirsiniz. Bu, blo\u011funuzun tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm ve i\u015flevselli\u011fe sahip olmas\u0131n\u0131 sa\u011flar, b\u00f6ylece kullan\u0131c\u0131lar yaln\u0131zca \u00f6nceden belirlenmi\u015f alanlara i\u00e7erik ekleyebilirler.<\/p>\n\n\n\n
      \u00d6rnek olmas\u0131 i\u00e7in templateLock=”false kullan\u0131m\u0131n\u0131 a\u015fa\u011f\u0131da ekliyorum.<\/p>\n\n\n\n
      echo '<div class=\"our-services-block\">';\n    echo '<InnerBlocks templateLock=\"false\" \/>';\necho '<\/div>';<\/pre>\n\n\n\n
      <\/span>Sayfaya Blok Ekleme<\/span><\/h2>\n\n\n\n
      Blo\u011fumuz art\u0131k web sayfam\u0131za ekleme i\u00e7in haz\u0131r. WordPress y\u00f6netim panelinde “Sayfalar” sekmesine giderek yeni bir sayfa olu\u015fturabilir veya mevcut bir sayfay\u0131 d\u00fczenleyebilirsiniz. Gutenberg bloklar\u0131n\u0131 eklerken oldu\u011fu gibi, ACF ile olu\u015fturdu\u011fumuz “Our Services” blo\u011funu da ekleyebilirsiniz. Bu i\u015flemi sayfan\u0131n sol \u00fcst k\u00f6\u015fesinde yer alan “+” butonuna t\u0131klayarak yapabilirsiniz. A\u00e7\u0131lan blok men\u00fcs\u00fcnde olu\u015fturdu\u011funuz “Our Services” blo\u011funu aray\u0131p bulabilir ve sayfan\u0131za ekleyebilirsiniz. Alternatif olarak, metin alan\u0131n\u0131n i\u00e7indeki + butonuna t\u0131klayarak da blo\u011funuzu ekleyebilirsiniz.<\/p>\n\n\n\n
      \n
      \n
      \"\"<\/figure>\n<\/div>\n\n\n\n
      \n
      \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
      Blo\u011funuzu sayfan\u0131za ekledikten sonra, i\u00e7erik d\u00fczenleme a\u015famas\u0131na ge\u00e7ebilirsiniz. “Our Services” blo\u011fu, kullan\u0131c\u0131lar\u0131n kendi ihtiya\u00e7lar\u0131na g\u00f6re i\u00e7erikleri kolayca d\u00fczenlemelerine olanak tan\u0131yan InnerBlocks \u00f6zelli\u011fine sahiptir. Bu, her bir alt blo\u011fun (ba\u015fl\u0131k, a\u00e7\u0131klama, resim ve link) sayfa \u00fczerinde istedi\u011finiz yere yerle\u015ftirilmesini ve \u00f6zelle\u015ftirilmesini sa\u011flar. \u0130\u00e7erik ekledi\u011finizde, WordPress edit\u00f6r\u00fcn\u00fcn sa\u011f taraf\u0131nda bulunan blok ayarlar\u0131 panelinden her bir alt blo\u011fun ayarlar\u0131n\u0131 yapabilirsiniz. Bu panel, blo\u011funuzun stilini ve i\u00e7eri\u011fini ki\u015fiselle\u015ftirmenize imkan verir.<\/p>\n\n\n\n
      <\/span>Blok Stillendirme<\/span><\/h2>\n\n\n\n
      Olu\u015fturdu\u011fum “Our Services” blo\u011fu, \u015fu anda sayfada ham bir \u015fekilde g\u00f6r\u00fcn\u00fcyor.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Blo\u011funuzu stilize etmek i\u00e7in \u00e7e\u015fitli y\u00f6ntemler mevcuttur. \u0130sterseniz teman\u0131z\u0131n CSS dosyas\u0131n\u0131 kullanarak, isterseniz WordPress’in kendi stil \u00f6zelliklerini kullanarak blo\u011funuzun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirsiniz. WordPress edit\u00f6r\u00fcn\u00fcn sa\u011f panelindeki ‘Geli\u015fmi\u015f’ sekmesinde, blo\u011funuza \u00f6zel CSS s\u0131n\u0131flar\u0131 ekleyebilir ve bu s\u0131n\u0131flara uygun CSS kurallar\u0131 tan\u0131mlayabilirsiniz.<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Blo\u011funuza farkl\u0131 bir stil eklemenin bir yolu, blo\u011fu olu\u015ftururken her bir alt blok i\u00e7in \u00f6zel stiller belirlemektir. \u00d6rne\u011fin, “Our Services” blo\u011funuzun i\u00e7indeki ba\u015fl\u0131k i\u00e7in belirli bir font boyutu, rengi veya font ailesi atayabilirsiniz.<\/p>\n\n\n\n
      Bu \u00f6zelle\u015ftirmelerden sonra sayfay\u0131 payla\u015f\u0131n. Ve i\u015fte birlikte olu\u015fturdu\u011fumuz Our Services Blo\u011fu bu \u015fekilde g\u00f6z\u00fck\u00fcyor. <\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      WordPress’in sa\u011flad\u0131\u011f\u0131 bu \u00f6zelle\u015ftirme se\u00e7enekleri sayesinde, i\u00e7eriklerinizi benzersiz ve etkileyici bir \u015fekilde sunabilirsiniz. \u0130ster ba\u015flang\u0131\u00e7 seviyesinde bir kullan\u0131c\u0131 olun, ister deneyimli bir geli\u015ftirici, ACF ve InnerBlocks ile WordPress’te \u00f6zelle\u015ftirilmi\u015f bloklar olu\u015fturmak, web sitenize de\u011fer katman\u0131n harika bir yoludur. Bu rehber, “Our Services” blo\u011funun olu\u015fturulmas\u0131 ve \u00f6zelle\u015ftirilmesi s\u00fcrecini ad\u0131m ad\u0131m g\u00f6stermi\u015ftir. \u015eimdi siz de kendi bloklar\u0131n\u0131z\u0131 olu\u015fturabilir ve web sitenizi zenginle\u015ftirebilirsiniz.<\/p>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      ACF’nin InnerBlocks \u00f6zelli\u011finin temellerini, bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fin web sitenizde nas\u0131l yap\u0131land\u0131r\u0131laca\u011f\u0131n\u0131 ve sayfa d\u00fczenlerinize nas\u0131l entegre edilebilece\u011fini ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Ad\u0131m ad\u0131m rehberimizde, bu \u00f6zelli\u011fi etkin bir \u015fekilde kullanarak kullan\u0131c\u0131 deneyiminizi nas\u0131l zenginle\u015ftirebilece\u011finizin detaylar\u0131n\u0131 bulabilirsiniz.<\/p>\n","protected":false},"author":3,"featured_media":3042,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16,3],"tags":[],"class_list":["post-2985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nasil-yapilir","category-wordpress-ipuclari"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/posts\/2985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/comments?post=2985"}],"version-history":[{"count":9,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/posts\/2985\/revisions"}],"predecessor-version":[{"id":3044,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/posts\/2985\/revisions\/3044"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/media\/3042"}],"wp:attachment":[{"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/media?parent=2985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/categories?post=2985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/tags?post=2985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}