{"id":2247,"date":"2023-12-13T17:27:39","date_gmt":"2023-12-13T17:27:39","guid":{"rendered":"https:\/\/wpcenter.io\/?p=2247"},"modified":"2023-12-24T17:30:43","modified_gmt":"2023-12-24T17:30:43","slug":"acf-ile-gutenberg-blok-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/wpcenter.io\/tr\/acf-ile-gutenberg-blok-nasil-olusturulur\/","title":{"rendered":"Advanced Custom Fields (ACF) ile Gutenberg Blok Nas\u0131l Olu\u015fturulur"},"content":{"rendered":"\n

WordPress 5.8 s\u00fcr\u00fcm\u00fcyle hayat\u0131m\u0131za giren Gutenberg, websitelerinde bir\u00e7ok yenili\u011fi beraberinde getirdi. Full Site Editing kavram\u0131yla kar\u015f\u0131m\u0131za \u00e7\u0131kan WordPress Gutenberg’i kullanarak kullan\u0131c\u0131lar\u0131n blok tabanl\u0131 websitesi olu\u015fturmalar\u0131n\u0131n \u00f6n\u00fcn\u00fc a\u00e7t\u0131.<\/p>\n\n\n\n

Bu yaz\u0131m\u0131zda sizlerle beraber Advanced Custom Fields ile Gutenberg Blok nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 inceleyip kendi \u00f6zel blok yap\u0131m\u0131z\u0131 olu\u015fturaca\u011f\u0131z. Tek yapmam\u0131z gereken Advanced Custom Fields ile Gutenberg Blok Nas\u0131l Olu\u015fturulur sorusu i\u00e7in \u00e7\u00f6z\u00fcmleri ad\u0131m ad\u0131m inceleyerek uygulamak. Haydi Advanced Custom Fields ile Gutenberg Blok Nas\u0131l Olu\u015fturulur yaz\u0131m\u0131z\u0131 beraber inceleyelim.<\/p>\n\n\n\n

<\/span>Advanced Custom Fields(ACF) Nas\u0131l Kurulur?<\/span><\/h2>\n\n\n\n

WordPress g\u00fcncellenen s\u00fcr\u00fcmleriyle birlikte art\u0131k full site editing kavram\u0131nda yo\u011funla\u015ft\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcyoruz. Gutenberg’in duyurulmas\u0131yla birlikte Full Site Editing kavram\u0131n\u0131 geli\u015ftiren WordPress, yeni s\u00fcr\u00fcmleriyle birlikte Advanced Custom Fields kullanarak kullan\u0131c\u0131lar\u0131n kendi \u00f6zel alanlar\u0131n\u0131 yaratmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131ld\u0131. Bu \u00f6zel alanlar ile kullan\u0131c\u0131lar sitelerinde istedikleri de\u011fi\u015fiklikleri kolayca yapabiliyorlar. Gutenberg, bu blok \u00f6zelliklerini kullanarak kullanc\u0131lar\u0131n kendi istedikleri bloklar\u0131 olu\u015fturup \u00f6zel alanlar\u0131n\u0131 yaratmalar\u0131na imkan verdi.<\/p>\n\n\n\n

\u015eimdi birlikte Advanced Custom Fields ile Gutenberg Blok olu\u015fturmak i\u00e7in ad\u0131mlar\u0131 yapmaya ba\u015flayal\u0131m. Gutenberg Blok olu\u015fturmam\u0131z\u0131 sa\u011flayan Advanced Custom Fields pluginini indirmemiz gerekiyor ve WordPress sitemizde plugin sayfam\u0131za giri\u015f yap\u0131yoruz. Alttaki g\u00f6rselde de belirtti\u011fim gibi Plugins ba\u015fl\u0131\u011f\u0131n\u0131n hemen sa\u011f\u0131nda bulunan Yeni Ekle butonuna basarak kar\u015f\u0131m\u0131za \u00e7\u0131kan pencerede search alan\u0131na Advanced Custom Fields yazarak bir alt g\u00f6rseldeki ACF pluginini ekliyoruz.<\/p>\n\n\n\n

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

Yukar\u0131daki resimdeki gibi kar\u015f\u0131m\u0131za \u00e7\u0131kan ekranda Install Now<\/strong> butonuna t\u0131klayarak pluginimizi y\u00fckleyip aktifle\u015ftiriyoruz. <\/strong>Advanced Custom Fields ile Gutenberg Blok olu\u015fturmak i\u00e7in ilk ad\u0131m\u0131 yap\u0131p, Advanced Custom Fields pluginini sitemize y\u00fckledik, \u015fimdi birlikte Advanced Custom Fields arac\u0131l\u0131\u011f\u0131yla nas\u0131l \u00f6zelle\u015ftirilmi\u015f blok yaratabilece\u011fimize bakal\u0131m.<\/p>\n\n\n\n

<\/span>Advanced Custom Fields \u0130le \u00d6zel Blok Nas\u0131l Olu\u015fturulur?<\/span><\/h2>\n\n\n\n

Ba\u015far\u0131yla Advanced Custom Fields pluginini y\u00fckledikten sonra Advanced Custom Fields \u0130le \u00d6zel Blok olu\u015fturma ad\u0131m\u0131na ge\u00e7ebiliriz. \u00d6ncelikle yapmam\u0131z gereken WordPress y\u00f6netici Panelimizden ACF yaz\u0131s\u0131na t\u0131klamak. Daha sonra a\u00e7\u0131lan pencerede kar\u015f\u0131n\u0131za foto\u011fraftaki gibi ekran gelecektir.<\/p>\n\n\n\n

\"ACF<\/figure>\n\n\n\n
    \n
  • Add Field Group<\/strong> butonuna t\u0131klayarak olu\u015fturaca\u011f\u0131m\u0131z blok i\u00e7in bir isim belirlememiz gerekiyor, ben genel bir isim olarak Custom Block isminde blok olu\u015fturaca\u011f\u0131m. Siz de kendi \u00f6zel isminizle Fields Group olu\u015fturabilirsiniz. Blok ismi olu\u015ftururken yapt\u0131\u011f\u0131 i\u015fleme g\u00f6re blok ismini isimlendirmek ve global isimler kullanmak daha sonra bize kullan\u0131m kolayl\u0131\u011f\u0131 sa\u011flayacakt\u0131r.<\/li>\n<\/ul>\n\n\n\n
    \"ACF<\/figure>\n\n\n\n
      \n
    • Blok ismini belirledikten sonra blok i\u00e7erisinde olu\u015fturaca\u011f\u0131m\u0131z de\u011fi\u015fkenleri eklememiz gerekiyor. Ayr\u0131ca kullanaca\u011f\u0131m\u0131z de\u011fi\u015fkenlerin tiplerini belirlememiz ve isimlendirmemiz gerekiyor. Kendi olu\u015fturdu\u011fum blok i\u00e7in ba\u015fl\u0131k, a\u00e7\u0131klama metni, g\u00f6rsel ve buton kullanaca\u011f\u0131m sizde kendi blo\u011funuzun ihtiyac\u0131na g\u00f6re de\u011fi\u015fkenleri olu\u015fturup isimlendirebilirsiniz. De\u011fi\u015fkenlerinizi olu\u015ftururken Field Type<\/strong> de\u011fi\u015fkeni ile olu\u015fturdu\u011funuz field tipini, Field Label<\/strong> ile olu\u015fturdu\u011funuz de\u011fi\u015fkenin ismini belirleyebilirsiniz. \u00d6rne\u011fin image de\u011fi\u015fkeni olu\u015fturulurken Field Type<\/strong> olarak image se\u00e7ilmelidir. Field Name<\/strong>, label ile ayn\u0131 olacak \u015fekilde otomatik olarak ekleniyor ama de\u011fi\u015ftirmek isterseniz de\u011fi\u015ftirebilirsiniz.<\/li>\n<\/ul>\n\n\n\n
      \"ACF<\/figure>\n\n\n\n
        \n
      • Ba\u015fl\u0131\u011f\u0131m\u0131z\u0131 olu\u015fturduktan sonra Add Field butonuna t\u0131klayarak olu\u015fturmak istedi\u011fimiz Fieldlar\u0131<\/strong> olu\u015fturaca\u011f\u0131z. <\/li>\n<\/ul>\n\n\n\n
        \"ACF<\/figure>\n\n\n\n
          \n
        • Kendi blok yap\u0131mda kullanaca\u011f\u0131m fieldlar\u0131 resimdeki gibi olu\u015fturdum sizde ihtiyac\u0131n\u0131z olan fieldlar\u0131 resimdeki gibi olu\u015fturarak kendi blo\u011funuzu \u00f6zelle\u015ftirebilirsiniz.<\/li>\n<\/ul>\n\n\n\n
          \"ACF<\/figure>\n\n\n\n

          Bu i\u015flemleri yaparken dikkat etmeniz gereken en \u00f6nemli unsurlardan bir tanesi olu\u015fturdu\u011funuz fields i\u00e7in type \u00f6zelli\u011fidir. Her field kendi \u00f6zelli\u011fini yans\u0131tmal\u0131 ki daha sonra bu \u00f6zel bloklar\u0131 sayfaya ekledi\u011fimizde se\u00e7ti\u011fimiz field tipine g\u00f6re alanlar gelece\u011fi i\u00e7in sorun ya\u015famayal\u0131m. \u00d6rne\u011fin link eklemek istedi\u011fimizde text olarak se\u00e7ersek, bu link sadece bir metin olarak g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\n\n\n\n

          Yukar\u0131daki gibi \u00f6zel blo\u011fumuzu olu\u015fturduktan sonra Gutenberg i\u00e7erisinde \u00f6zel blok yap\u0131m\u0131z\u0131 nas\u0131l kullanabilece\u011fimize hep birlikte g\u00f6z atal\u0131m.<\/p>\n\n\n\n

          <\/span>Tema \u0130\u00e7erisinde Advanced Custom Blok Nas\u0131l Olu\u015fturulur?<\/span><\/h2>\n\n\n\n

          Advanced Custom Fields ile olu\u015fturdu\u011fumuz bloklar\u0131 teman\u0131n i\u00e7erisinde \u00e7a\u011f\u0131rmak i\u00e7in bir klas\u00f6r olu\u015fturmal\u0131y\u0131z. Bu klas\u00f6r\u00fc aktif olan temam\u0131z\u0131n i\u00e7erisinde a\u00e7\u0131yoruz. Dosyan\u0131n ismini kendi yap\u0131n\u0131za g\u00f6re belirleyebilirsiniz ben anla\u015f\u0131labilir olmas\u0131 a\u00e7\u0131s\u0131ndan blocks<\/strong> ad\u0131nda bir klas\u00f6r olu\u015fturaca\u011f\u0131m. Siz istedi\u011finiz isimle bir klas\u00f6r olu\u015fturabilirsiniz.<\/p>\n\n\n\n

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

          Blocks ismini verdi\u011fim klas\u00f6rde Advanced Custom Fields taraf\u0131ndan olu\u015fturdu\u011fum bloklar\u0131 tutaca\u011f\u0131m.<\/p>\n\n\n\n

          Olu\u015fturdu\u011fumuz bloklar\u0131 saklamam\u0131z i\u00e7in gereken blocks klas\u00f6r\u00fcn\u00fc olu\u015fturduktan sonra bu klas\u00f6r i\u00e7erisinde istedi\u011fimiz isimde bir klas\u00f6r a\u00e7\u0131yoruz. Benim olu\u015fturdu\u011fum blok ismim Custom Block<\/strong> oldu\u011fu i\u00e7in custom<\/strong> ad\u0131nda klas\u00f6r a\u00e7\u0131yorum. Bu klas\u00f6r i\u00e7erisine blok yap\u0131s\u0131n\u0131n PHP ve JSON dosyalar\u0131n\u0131 ekleyece\u011fiz. Olu\u015fturdu\u011fumuz PHP dosyas\u0131 ACF ile olu\u015fturdu\u011fumuz blok i\u00e7erisindeki de\u011fi\u015fkenleri \u00e7a\u011f\u0131rmam\u0131z\u0131 ve HTML yap\u0131m\u0131z\u0131 olu\u015fturmam\u0131z\u0131 sa\u011flar. JSON dosyas\u0131 ise blok yap\u0131m\u0131z\u0131n isim, icon, \u00f6zelliklerinin yer ald\u0131\u011f\u0131 dosyad\u0131r. JSON dosyam\u0131z\u0131 Gutenberg taraf\u0131ndan blo\u011fumuzu tan\u0131tmak i\u00e7in kullan\u0131r\u0131z. A\u015fa\u011f\u0131da benim olu\u015fturdu\u011fum JSON dosyas\u0131n\u0131 inceleyebilirsiniz.<\/p>\n\n\n\n

          {\n \"name\": \"acf\/custom-block\", \/\/ blok Name\n \"title\": \"Custom Block\", \/\/ blok Title\n \"description\": \"Custom blok exercise\", \/\/ blok description\n \"category\": \"formatting\", \/\/ blok category\n \"icon\": \"ellipsis\", \/\/ blok icon\n \"keywords\": [ \/\/ blok yap\u0131m\u0131z\u0131n anahtar kelimeleri\n \"custom\",\n \"block\",\n \"exercise\"\n],\n\"acf\": {\n  \"mode\": \"preview\",\n  \"renderTemplate\": \"custom-block.php\"\n},\n \"align\": \"full\", \/\/ Full hizalama\n \"supports\": {\n  \"anchor\": true\n  }\n}<\/pre>\n\n\n\n
          Olu\u015fturdu\u011fumuz JSON dosyas\u0131ndan sonra HTML yap\u0131m\u0131z\u0131 olu\u015fturuyoruz. A\u015fa\u011f\u0131daki \u00f6rnekte oldu\u011fu gibi ihtiyac\u0131ma uygun olarak tasarlad\u0131\u011f\u0131m HTML yap\u0131m bulunmakta sizde kendi HTML yap\u0131n\u0131z\u0131 olu\u015fturup bu PHP dosyas\u0131nda yazabilirsiniz. A\u015fa\u011f\u0131da bulunan kod yap\u0131m\u0131zda bilmeniz gereken \u00f6nemli bir konu; WordPress fonksiyonu get_field($selector, [$post_id], [$format_value])<\/strong>\u015fekilde \u00e7a\u011fr\u0131lmaktad\u0131r. get_field(“field_name”)<\/strong> bu \u015fekilde olu\u015fturdu\u011funuz \u00f6zel blok de\u011fi\u015fkenleri html i\u00e7erisinde echo ile yazd\u0131rm\u0131\u015f olursunuz. Dikkat etmeniz gereken get(“field_name”)<\/strong>, olu\u015fturdu\u011funuz field de\u011fi\u015fkeninin sayfada bizim taraf\u0131m\u0131zdan d\u00fczenlenecek name<\/strong> \u00f6zelli\u011fini al\u0131r bunu field label name ile kar\u0131\u015ft\u0131rmayal\u0131m.<\/p>\n\n\n\n
          <?php\n    $title = get_field('title');\n    $description = get_field('description');\n    $link = get_field('button')\n    $image = get_field('image');\n?>\n<div class=\"custom-block-container\">\n    <div class=\"custom-block\">\n        <div class=\"custom-block-left-side\">\n            <div class=\"custom-block-title\">\n                <?php echo esc_html($title); ?>\n            <\/div>\n            <div class=\"custom-block-description\">\n                <?php echo esc_html($description); ?>\n            <\/div>\n            <a class=\"custom-block-button\" \n                href=\"<?php echo esc_attr($link['url']) ?>\" \n                 target=\"<?php echo esc_attr($link['target']) ?>\">\n                <?php echo esc_html($link['title']); ?>\n            <\/a>\n        <\/div>        \n        <div class=\"custom-block-right-side\">\n            <div class=\"custom-block-image\">\n                <?php echo wp_get_attachment_image($image); ?>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div><\/pre>\n\n\n\n
          Yukar\u0131daki yap\u0131da dikkat etti\u011finiz gibi get_field(‘button’)<\/strong> bir dizi ve i\u00e7inde farkl\u0131 bilgiler saklad\u0131\u011f\u0131 i\u00e7in dizi \u015feklinde \u00e7a\u011f\u0131r\u0131yoruz. Sizde \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131z de\u011fi\u015fkenin t\u00fcr\u00fcn\u00fc  <?php var_dump(variablesName) ?><\/strong> kodunu yazarak de\u011fi\u015fkenizin i\u00e7indeki verileri ve t\u00fcr\u00fcn\u00fc \u00f6\u011frenebilirsiniz.<\/p>\n\n\n\n
          <\/span>Advanced Custom Blok Tema \u0130\u00e7ine Nas\u0131l Eklenir?<\/span><\/h2>\n\n\n\n
          \"ACF<\/figure>\n\n\n\n
          Yazd\u0131\u011f\u0131m\u0131z JSON ve PHP dosyalar\u0131n\u0131n temam\u0131z\u0131n i\u00e7ine aktar\u0131lmas\u0131 gerekmektedir. Ancak ACF zaten otomatik olarak temam\u0131z\u0131n i\u00e7erisinde olu\u015fturulan JSON dosyalar\u0131n\u0131, tema i\u00e7erisinde yarat\u0131yor. B\u00f6ylece JSON i\u00e7in herhangi bir i\u015flem yapmam\u0131za gerek yoktur.  Bu otomatik olarak olu\u015fturulan dosyalar Advanced Custom Fields i\u00e7erisinde olu\u015fturdu\u011fumuz Custom Block gibi \u00f6zel blok de\u011fi\u015fkenlerinin tutuldu\u011fu alan i\u00e7erisinde saklayacakt\u0131r.<\/p>\n\n\n\n
          ACF taraf\u0131nda otomatik olarak olu\u015fturulan JSON dosyas\u0131 silinmedi\u011fi s\u00fcrece di\u011fer kullan\u0131c\u0131lar taraf\u0131ndan import edilerek ayn\u0131 \u015fekilde kullan\u0131labilir. Bunun i\u00e7in ACF i\u00e7inde Fields Group sayfas\u0131nda senkronizasyon sekmesinden import edilebilir durumda olan bloklar\u0131 indirip kullanabilirsiniz.<\/p>\n\n\n\n
          Olu\u015fturdu\u011fumuz Custom Blocklar\u0131n ACF taraf\u0131ndan tan\u0131mlanmas\u0131 i\u00e7in i\u00e7e aktarman\u0131z gerekmektedir. Bunun i\u00e7in a\u015fa\u011f\u0131daki fonksiyonu kullanmak istedi\u011fimiz tema i\u00e7erisinde bir dosya olu\u015fturup oraya yazmam\u0131z gerekmektedir. Ben bu dosya ismini acf.php<\/strong> ad\u0131nda olu\u015fturuyorum, sizde ismini kendinize g\u00f6re belirleyip yaratabilirsiniz.<\/p>\n\n\n\n
           acf.php<\/strong> dosyam\u0131z\u0131 yaratt\u0131ktan sonra a\u015fa\u011f\u0131da bulunan kodumuzu yaratt\u0131\u011f\u0131m\u0131z dosya i\u00e7ine yerle\u015ftiriyoruz.<\/p>\n\n\n\n
          <?php\nfunction custom_register_acf_blocks() {\n  register_block_type(get_template_directory() . '\/blocks\/custom');\n}\nadd_action( 'init', 'custom_register_acf_blocks' );<\/pre>\n\n\n\n
          Yukar\u0131daki gibi kodlar\u0131m\u0131z\u0131 yazd\u0131ktan sonra Advanced Custom Fields pluginine girip kendi yaratt\u0131\u011f\u0131m\u0131z Blok i\u00e7erisine t\u0131klay\u0131p sa\u011f \u00fcstte bulunan De\u011fi\u015fiklikleri Kaydet Butonuna bast\u0131\u011f\u0131m\u0131z zaman ACF otomatik olarak JSON dosyam\u0131z\u0131n olu\u015ftu\u011funu g\u00f6rebilirsiniz.<\/p>\n\n\n\n
          \"ACF<\/figure>\n\n\n\n
          <\/span>Advanced Custom Fields \u0130le Gutenberg’e Custom Blok Nas\u0131l Eklenir ?<\/span><\/h2>\n\n\n\n
          Son ad\u0131m\u0131m\u0131zda Advanced Custom Fields ile yaratt\u0131\u011f\u0131m\u0131z blok yap\u0131m\u0131z\u0131 kullanmam\u0131z i\u00e7in eklememiz gereken kod a\u015fa\u011f\u0131da bulunmaktad\u0131r. Bu kodda custom_includes= array(.\/acf.php)<\/strong> ile acf.php<\/strong> i\u00e7erisinde \u00e7a\u011fr\u0131lan dosyalar\u0131 sayfam\u0131zda i\u00e7e aktar\u0131yoruz. Ben bu kodu kulland\u0131\u011f\u0131m\u0131z tema i\u00e7erisinde bulunan function.php i\u00e7erisine ekliyorum.<\/p>\n\n\n\n
          $custom_inc_dir = get_template_directory();\n\n\/\/ Array of files to include.\n$custom_includes = array(\n        '\/acf.php'\n);\n\n\/\/ Include files.\nforeach ( $custom_includes as $file ) {\n    require_once $custom_inc_dir . $file;\n}<\/pre>\n\n\n\n
          Bu i\u015flemi yapt\u0131ktan sonra Advanced Custom Fields i\u00e7erisinde olu\u015fturdu\u011fumuz Custom Blok yap\u0131m\u0131z\u0131n tipini se\u00e7memiz gerekmektedir. Bunun i\u00e7in a\u015fa\u011f\u0131daki resimde bulunan Edit Field Group i\u00e7erisinde Settings k\u0131sm\u0131nda olu\u015fturdu\u011fumuz custom blok yap\u0131s\u0131n\u0131, Blocks<\/strong> klas\u00f6r\u00fc ad\u0131 alt\u0131nda olu\u015fturdu\u011fumuz Custom Block<\/strong> klas\u00f6r\u00fcne e\u015fitlememiz gerekmektedir. <\/p>\n\n\n\n
          \"ACF<\/figure>\n\n\n\n
          Bu \u015fekilde Custom Block klas\u00f6r\u00fcm\u00fczle olu\u015fturdu\u011fumuz blok yap\u0131s\u0131n\u0131 i\u00e7e aktarabiliriz ve olu\u015fturdu\u011funuz de\u011fi\u015fkenleri kullanabiliriz. Bu e\u015fitlemeyi yapmazsan\u0131z yaratt\u0131\u011f\u0131n\u0131z blok yap\u0131s\u0131n\u0131 sayfan\u0131zda kullanmazs\u0131n\u0131z.<\/p>\n\n\n\n
          <\/span>Gutenberg’de Advanced Custom Blok Nas\u0131l Kullan\u0131l\u0131r?<\/span><\/h2>\n\n\n\n
          Yukar\u0131daki ad\u0131mlar\u0131 izledikten sonra b\u00fct\u00fcn i\u015flemlerimiz tamamland\u0131 ve art\u0131k sadece olu\u015fturdu\u011fumuz \u00f6zel blok yap\u0131m\u0131z\u0131 \u00e7a\u011f\u0131rmak kald\u0131. Gutenberg i\u00e7erisinde bu yap\u0131y\u0131 \u00e7a\u011f\u0131rmak i\u00e7in sayfam\u0131za gidelim.<\/p>\n\n\n\n
          WordPress panelinde \u00fcst k\u0131sm\u0131nda bulunan +Yeni<\/strong> butonuna basarak olu\u015fturmak istedi\u011fimiz yap\u0131y\u0131 se\u00e7iyoruz. Daha sonra Gutenberg i\u00e7erisinde Advanced Custom Fields ile olu\u015fturdu\u011fumuz blok yap\u0131s\u0131n\u0131 \u00e7a\u011f\u0131rmam\u0131z gerekmektedir. Bunun i\u00e7in +Yeni<\/strong> butonuna bast\u0131\u011f\u0131m\u0131zda a\u00e7t\u0131\u011f\u0131m\u0131z post veya sayfada \u00fcst k\u0131sm\u0131nda bulunan + butonuna basarak sayfam\u0131za blok yap\u0131s\u0131n\u0131 ekleyebiliriz.<\/p>\n\n\n\n
          \"Gutenberg<\/figure>\n\n\n\n
          + Butonuna<\/strong> bast\u0131ktan sonra kar\u015f\u0131m\u0131za bir Search kutusu<\/strong> \u00e7\u0131k\u0131yor. Bu k\u0131s\u0131ma Advanced Custom Fields ile olu\u015fturdu\u011fumuz \u00f6zel blok ismini yazarak blok yap\u0131m\u0131z\u0131 \u00e7a\u011f\u0131r\u0131yoruz. Bu i\u015flemi yapt\u0131ktan sonra geriye tek bir i\u015flem kald\u0131. Ekledi\u011fimiz blok yap\u0131s\u0131n\u0131n de\u011fi\u015fkenlerini yazmam\u0131z gerekiyor haydi birlikte son i\u015flemi de tamamlay\u0131p sayfam\u0131za olu\u015fturdu\u011fumuz \u00f6zel bloklar\u0131 \u00e7a\u011f\u0131ral\u0131m.<\/p>\n\n\n\n
          \"Gutenberg<\/figure>\n\n\n\n
          Olu\u015fturdu\u011fumuz Custom Blok yap\u0131s\u0131n\u0131 sayfam\u0131m\u0131za yaratt\u0131k. \u015eimdi de\u011fi\u015fkenlerimizi girelim. De\u011fi\u015fkenlerimi girdikten sonra olu\u015fturdu\u011fumuz blok kar\u015f\u0131m\u0131zda. Ekledi\u011fimiz blok yap\u0131m\u0131z Gutenberg Editor sayfas\u0131nda bu \u015fekilde g\u00f6z\u00fck\u00fcyor \u015fimdi sayfam\u0131zda nas\u0131l g\u00f6z\u00fckt\u00fc\u011f\u00fcne beraber g\u00f6z atal\u0131m. <\/p>\n\n\n\n
          \"Gutenberg<\/figure>\n\n\n\n
          Sayfam\u0131zda alttaki g\u00f6rsel gibi g\u00f6z\u00fck\u00fcyor \u015fimdi css kodlar\u0131m\u0131z\u0131 yazarak g\u00f6r\u00fcnt\u00fcm\u00fcz\u00fc biraz d\u00fczenleyelim.<\/p>\n\n\n\n
          \"Geli\u015fmi\u015f<\/figure>\n\n\n\n
          Css kodlar\u0131n\u0131z\u0131 kendinize g\u00f6re uygulayarak, istedi\u011finiz g\u00f6r\u00fcnt\u00fcy\u00fc elde edebilirsiniz. <\/p>\n\n\n\n
          Gutenberg edit\u00f6r yazd\u0131\u011f\u0131n\u0131z css kodlar\u0131n\u0131 i\u00e7e aktarmaz. O y\u00fczden sayfada g\u00f6z\u00fckt\u00fc\u011f\u00fc gibi Gutenberg Edit\u00f6rde g\u00f6remezsiniz bunu d\u00fczenlemek i\u00e7in dosyan\u0131za Gutenberg Edit\u00f6r i\u00e7inde yazd\u0131\u011f\u0131n\u0131z css dosyas\u0131n\u0131 i\u00e7e aktarman\u0131z gerekmektedir. Bunun i\u00e7in WordPress fonksiyonlar\u0131ndan wp_enqueue_style<\/strong> fonksiyonunu kullanman\u0131z gerekmektedir. A\u015fa\u011f\u0131da bulunan kodu function.php<\/strong> dosyan\u0131za ekleyerek Gutenberg Edit\u00f6r i\u00e7erisinde css dosyalar\u0131n\u0131 i\u00e7e aktarmay\u0131 sa\u011flayabilirsiniz. Benim ekledi\u011fim css dosyas\u0131 custom-block.css<\/strong> dosyas\u0131 oldu\u011fu i\u00e7in get_theme_file_uri<\/strong> ile kendi dosyam\u0131n uzant\u0131s\u0131n\u0131 yazd\u0131m sizde kendi dosya uzant\u0131n\u0131z\u0131 yazabilirsiniz.<\/p>\n\n\n\n
          function enqueue_editor_styles() {\n    wp_enqueue_style(\n            'mytheme-block-editor-styles',\n            get_theme_file_uri('assets\/css\/custom-block.css')\n    );\n}\n\nadd_action( 'enqueue_block_editor_assets', 'enqueue_editor_styles' );<\/pre>\n\n\n\n
          Yukar\u0131daki Advanced Custom Fields Gutenberg Blok Nas\u0131l Olu\u015fturulur<\/strong> makalemizde ad\u0131m ad\u0131m ilerleyerek yapt\u0131\u011f\u0131m\u0131zda sizde Advanced Custom Fields kullanarak kendi \u00f6zel blo\u011funuzu olu\u015fturabilir be bu \u015fekilde sayfalar\u0131n\u0131z\u0131, postlar\u0131n\u0131z ve kullanmak istedi\u011finiz alanlar\u0131 editleyebilirsiniz. Akl\u0131n\u0131za tak\u0131lan t\u00fcm sorular\u0131 a\u015fa\u011f\u0131daki yorumlara b\u0131rakabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Bu yaz\u0131m\u0131zda sizlerle beraber Advanced Custom Fields ile Gutenberg Blok nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 inceleyip kendi \u00f6zel blok yap\u0131m\u0131z\u0131 olu\u015fturaca\u011f\u0131z. Tek yapmam\u0131z gereken Advanced Custom Fields ile Gutenberg Blok Nas\u0131l Olu\u015fturulur sorusu i\u00e7in \u00e7\u00f6z\u00fcmleri ad\u0131m ad\u0131m inceleyerek uygulamak.<\/p>\n","protected":false},"author":2,"featured_media":2948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[16,3],"tags":[],"class_list":["post-2247","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\/2247","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/comments?post=2247"}],"version-history":[{"count":36,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/posts\/2247\/revisions"}],"predecessor-version":[{"id":2994,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/posts\/2247\/revisions\/2994"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/media\/2948"}],"wp:attachment":[{"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/media?parent=2247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/categories?post=2247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcenter.io\/tr\/wp-json\/wp\/v2\/tags?post=2247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}