[{"data":1,"prerenderedAt":467},["ShallowReactive",2],{"post-\u002Ftr\u002Fyeni-tema-honeywind":3},{"page":4,"translation":292,"nav":311,"related":442,"random":455},{"id":5,"title":6,"body":7,"categories":290,"category":292,"date":293,"description":294,"draft":295,"extension":296,"image":297,"kind":292,"lang":70,"meta":298,"navigation":299,"path":300,"readingTime":285,"seo":301,"slug":302,"stem":303,"tags":304,"translationKey":302,"type":291,"updated":309,"__hash__":310},"postsTr\u002Ftr\u002Fyeni-tema-honeywind.md","Yeni WordPress Temam Honeywind: Tailwind CSS ve Minimalizm",{"type":8,"value":9,"toc":280},"minimark",[10,43,55,58,63,152,154,159,178,180,184,225,227,231,234,237,240,245],[11,12,13,21],"blockquote",{},[14,15,16,17],"p",{},"💡 ",[18,19,20],"strong",{},"Özet (TL;DR):",[22,23,24,31,37],"ul",{},[25,26,27,30],"li",{},[18,28,29],{},"Honeywind Nedir?:"," Yazarın 2021 yılında, WordPress tema geliştirme yeteneklerini tazelemek amacıyla sıfırdan geliştirdiği Tailwind CSS tabanlı minimal bir WordPress temasıdır.",[25,32,33,36],{},[18,34,35],{},"Özellikler:"," Bricks.js ile ultra hızlı \"masonry\" ızgara düzeni, yerleşik karanlık mod (dark mode) desteği ve eklentisiz yapışkan başlık (sticky header) özellikleri sunar.",[25,38,39,42],{},[18,40,41],{},"Güncel Durum:"," Web sitesi Next.js tabanlı headless (başsız) mimariye taşındığı için bu tema artık aktif değildir; yazı arşiv amaçlı saklanmaktadır.",[11,44,45],{},[14,46,47,51,54],{},[48,49,50],"span",{},"!WARNING",[18,52,53],{},"Tarihsel Not:"," Blogumu Headless WordPress yapısına geçirip ön yüzü Next.js ile yeniden inşa ettiğim için bu makalede bahsedilen Honeywind teması artık aktif olarak kullanılmamaktadır. Ancak yazı, bir tema geliştirme denemesi olarak arşiv amaçlı saklanmaktadır.",[56,57],"hr",{},[59,60,62],"h3",{"id":61},"honeywind-tema-özellikleri-ve-teknolojileri","Honeywind Tema Özellikleri ve Teknolojileri",[64,65,66,83],"table",{},[67,68,69],"thead",{},[70,71,72,77,80],"tr",{},[73,74,76],"th",{"align":75},"left","Özellik",[73,78,79],{"align":75},"Kullanılan Teknoloji \u002F Kütüphane",[73,81,82],{"align":75},"Avantajı",[84,85,86,100,113,126,139],"tbody",{},[70,87,88,94,97],{},[89,90,91],"td",{"align":75},[18,92,93],{},"CSS Altyapısı",[89,95,96],{"align":75},"Tailwind CSS",[89,98,99],{"align":75},"Hızlı geliştirme, küçük CSS dosya boyutu",[70,101,102,107,110],{},[89,103,104],{"align":75},[18,105,106],{},"Izgara Düzeni (Masonry)",[89,108,109],{"align":75},"Bricks.js",[89,111,112],{"align":75},"Harici ağır kütüphanelere kıyasla hafiflik ve yüksek performans",[70,114,115,120,123],{},[89,116,117],{"align":75},[18,118,119],{},"Karanlık Mod (Dark Mode)",[89,121,122],{"align":75},"CSS Variables + JavaScript",[89,124,125],{"align":75},"Eklenti yükü olmadan native gece modu seçeneği",[70,127,128,133,136],{},[89,129,130],{"align":75},[18,131,132],{},"Sonsuz Kaydırma",[89,134,135],{"align":75},"Jetpack Infinite Scroll desteği",[89,137,138],{"align":75},"Kullanıcı deneyimini artıran dinamik içerik yükleme",[70,140,141,146,149],{},[89,142,143],{"align":75},[18,144,145],{},"Geliştirici",[89,147,148],{"align":75},"Evren Bal",[89,150,151],{"align":75},"%100 özelleştirilebilir, temiz kaynak kod",[56,153],{},[155,156,158],"h2",{"id":157},"tailwind-css-ile-wordpress-teması-honeywind","Tailwind CSS ile WordPress Teması: Honeywind",[14,160,161,162,172,173,177],{},"Blogum 21.07.2021 tarihi itibarıyla yeni görünümüne kavuştu. Yeni temam \"Honeywind\", tamamen el emeği göz nuru oluşturduğum bir çalışma. Böylece hem ",[163,164,171],"a",{"href":165,"rel":166,"target":170},"https:\u002F\u002Fwww.wordpress.org",[167,168,169],"nofollow","noopener","noreferrer","_blank","WordPress"," ekosisteminde çok yaygın olmayan ",[163,174,96],{"href":175,"rel":176,"target":170},"https:\u002F\u002Ftailwindcss.com\u002F",[167,168,169]," tabanlı bir temaya sahip oldum hem de uzun yıllar sonra bir WordPress temasını sıfırdan oluşturarak WordPress tema geliştirme konusundaki pası üzerimden atmış oldum. :)",[56,179],{},[59,181,183],{"id":182},"honeywindde-neler-vardı","Honeywind'de Neler Vardı?",[22,185,186,197,207,213,219],{},[25,187,188,191,192,196],{},[18,189,190],{},"Masonry Düzeni:"," Yazılar ana sayfa, kategori ve arşiv sayfalarında \"masonry\" ızgara düzeni olarak bilinen biçimde gösteriliyor. Bunun için diğer hantal masonry kütüphanelerinin aksine, son derece hafif ve inanılmaz hızlı çalışan ",[193,194,195],"code",{},"bricks.js"," kütüphanesini kullandım.",[25,198,199,202,203,206],{},[18,200,201],{},"Karanlık Mod (Dark Mode):"," Temayı hem açık hem de koyu renk olarak tasarladım. Sayfanın sağ üst köşesine eklediğim tema değiştirme düğmesi, klasik bir ",[193,204,205],{},"checkbox"," elemanına biraz CSS ve JavaScript eklenerek bu işlevi kazandı.",[25,208,209,212],{},[18,210,211],{},"Yerleşik Beğeni (Like) Özelliği:"," Yazıların altında ve kart görünümlerinde yer alan beğeni özelliği tamamen temayla bütünleşik çalışıyor; harici bir eklenti yüküne ihtiyaç duymuyor.",[25,214,215,218],{},[18,216,217],{},"Sonsuz Kaydırma (Infinite Scroll):"," Sayfalar Jetpack'in sonsuz kaydırma özelliğine uyumlu şekilde tasarlandı. Jetpack etkin olmadığında ise sistem otomatik olarak klasik önceki-sonraki sayfa bağlantılarını gösteriyor.",[25,220,221,224],{},[18,222,223],{},"Yapışkan Başlık (Sticky Header):"," Yapışkan başlık bölümü temanın içine gömülü, ayrıca ek bir eklenti gerektirmiyor.",[56,226],{},[155,228,230],{"id":229},"açık-kaynak-durumu-ve-emeklilik","Açık Kaynak Durumu ve Emeklilik",[14,232,233],{},"Tema geliştirme sürecinde kaynak kodlarını açık kaynak olarak yayınlamayı planlamış olsam da, temanın yapısı tamamen bu blogun özel ihtiyaçlarına ve kişisel içerik düzenime göre şekillendiği için birebir başka projelerde doğrudan kullanılmaya uygun bir yapıda değildi. Bu nedenle açık kaynak olarak yayınlamaktan vazgeçtim.",[14,235,236],{},"Daha sonra sitenin Next.js tabanlı modern headless mimarisine taşınmasıyla birlikte Honeywind temasını tamamen geride bırakmış olduk.",[14,238,239],{},"Hazır tema kullanmayı bırakıp, A'dan Z'ye her şeyine hakim olduğum bir temayla geçirdiğim süreç benim için çok keyifliydi. Sitede gördüğünüz herhangi bir özelliğin PHP, CSS ve JS altyapısı hakkında bilgi almak isterseniz lütfen bana ulaşmaktan çekinmeyin.",[241,242,244],"h5",{"id":243},"bu-yazıda-yapılan-değişiklikler","Bu Yazıda Yapılan Değişiklikler",[22,246,247,277],{},[25,248,249,250,253,254,257,258,253,261,257,264,253,267,257,270,253,273,276],{},"21.06.2026: Sitenin Next.js headless altyapısına geçmesi nedeniyle Honeywind temasının emekli edildiği ve projenin kişiye özel yapısı sebebiyle açık kaynak yayınlanmama kararı metne eklendi. Headless güncelleme notu uyarı paneli (alert warning) içerisine taşındı. Türkçe yazım ve klavye hataları (",[193,251,252],{},"Taildwind"," -> ",[193,255,256],{},"Tailwind",", ",[193,259,260],{},"itibarı ile",[193,262,263],{},"itibarıyla",[193,265,266],{},"aşriv",[193,268,269],{},"arşiv",[193,271,272],{},"içerk",[193,274,275],{},"içerik"," vb.) düzeltildi. Özellikler tablosu ve özet paneli eklendi.",[25,278,279],{},"11.05.2022: Yazı özeti düzenlendi.",{"title":281,"searchDepth":282,"depth":282,"links":283},"",2,[284,286,289],{"id":61,"depth":285,"text":62},3,{"id":157,"depth":282,"text":158,"children":287},[288],{"id":182,"depth":285,"text":183},{"id":229,"depth":282,"text":230},[291],"technical",null,"2021-07-23","Tailwind CSS ve WordPress kullanarak geliştirdiğim minimalist Honeywind teması, Bricks.js entegrasyonu ve Next.js öncesi dönem mimarisi.",false,"md","\u002Fimages\u002Fposts\u002F2021\u002F07\u002Fscreenshot.avif",{},true,"\u002Ftr\u002Fyeni-tema-honeywind",{"title":6,"description":294},"yeni-tema-honeywind","tr\u002Fyeni-tema-honeywind",[305,306,307,308],"javascript","php","tailwind-css","wordpress","2026-06-21","CUQo6v3jFtBy5-HC3WpghDT4X4VgAg7k6NeOlsuRaa8",{"prev":312,"next":315,"others":318,"lucky":439,"readingTime":285},{"path":313,"title":314},"\u002Ftr\u002Ftailwind-css-just-in-time-modu","Tailwind CSS Just-in-Time (JIT) Modu Nedir?",{"path":316,"title":317},"\u002Ftr\u002Fdocker-ile-mongodb-kurulumu","Docker ile MongoDB Kurulumu",[319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436],{"path":320,"title":321},"\u002Ftr\u002Fnext-js-on-bellegi-nasil-yenilenir-on-demand-cache-regeneration","Next.js Önbelleği Nasıl Yenilenir? \"On-Demand Cache Regeneration\"",{"path":323,"title":324},"\u002Ftr\u002Fes8-nedir-ecmascript-2017-nedir","ES8 Nedir? ECMAScript 2017 Nedir?",{"path":326,"title":327},"\u002Ftr\u002Fes14-nedir-ecmascript-2023-nedir","ES14 nedir? ECMAScript 2023 nedir?",{"path":329,"title":330},"\u002Ftr\u002Fdocker-ile-litespeed-enterprise-kurulumu","Docker ile LiteSpeed Enterprise Kurulumu",{"path":332,"title":333},"\u002Ftr\u002Fdocker-ile-rabbitmq-kurulumu","Docker ile RabbitMQ Kurulumu",{"path":335,"title":336},"\u002Ftr\u002Frest-api-uri-yapisi-nasil-olmali","REST API URI Yapısı Nasıl Olmalı?",{"path":338,"title":339},"\u002Ftr\u002Fvisitor-tasarim-deseni-nedir","Visitor Tasarım Deseni Nedir?",{"path":341,"title":342},"\u002Ftr\u002Ffull-stack-proje-agaci","Full-Stack Proje Yol Haritası ve İçindekiler",{"path":344,"title":345},"\u002Ftr\u002Ftailwind-css-nerede-kullanilir-tailwind-css-nerede-kullanilmaz","Tailwind CSS Nerede Kullanılır? Tailwind CSS Nerede Kullanılmaz?",{"path":347,"title":348},"\u002Ftr\u002Frest-api-guvenligi-nasil-saglanir","REST Api Güvenliği Nasıl Sağlanır?",{"path":350,"title":351},"\u002Ftr\u002Ftasarim-kaliplari-design-patterns-factory-method-nedir","Factory Method Tasarım Deseni Nedir?",{"path":353,"title":354},"\u002Ftr\u002Fmerhaba-phalcon-framework","Merhaba Phalcon Framework",{"path":356,"title":357},"\u002Ftr\u002Fes15-nedir-ecmascript-2024-nedir","ES15 nedir? ECMAScript 2024 nedir?",{"path":359,"title":360},"\u002Ftr\u002Fmediator-tasarim-deseni-nedir","Mediator Tasarım Deseni Nedir?",{"path":362,"title":363},"\u002Ftr\u002Fubuntu-24-04-uzerinde-cyberpanel-kurulumu","Ubuntu 24.04 LTS ve 22.04 LTS Üzerinde CyberPanel Kurulumu",{"path":365,"title":366},"\u002Ftr\u002Fphalcon-frameworkun-gelecegi","Phalcon Framework'ün Geleceği: Bir Devrin Sonu",{"path":368,"title":369},"\u002Ftr\u002Fjwt-guvenli-mi-guvenlik-acigi-olusturmayin","JWT Güvenli Derken Güvenlik Açığı Oluşturmayın",{"path":371,"title":372},"\u002Ftr\u002Fgo-ve-degiskenler","Go ve Değişkenler",{"path":374,"title":375},"\u002Ftr\u002Fgarbage-collection-ve-golang","Garbage Collection ve Go (Golang)",{"path":377,"title":378},"\u002Ftr\u002Fsingleton-tasarim-deseni-nedir","Singleton Tasarım Deseni Nedir?",{"path":380,"title":381},"\u002Ftr\u002Fmerhaba-gluster","Merhaba Gluster: Dağıtık Dosya Sistemi Nedir?",{"path":383,"title":384},"\u002Ftr\u002Fself-hosted-api-gateway-nasil-kurulur-kapsamli-rehber","Self-Hosted API Gateway Nasıl Kurulur? Kapsamlı Rehber",{"path":386,"title":387},"\u002Ftr\u002Fmerhabadunya","Merhaba Dünya",{"path":389,"title":390},"\u002Ftr\u002Fbridge-tasarim-deseni-nedir","Bridge Tasarım Deseni Nedir?",{"path":392,"title":393},"\u002Ftr\u002Fvite-nedir","Vite Nedir? Modern Web Geliştirme ve Paketleme Aracı",{"path":395,"title":396},"\u002Ftr\u002Froot-yetkisi-olmayan-kullanici-ssh-baglantisini-ssh-baglantisini-ssh-anahtari-ile-nasil-kurabilir","Root yetkisi olmayan kullanıcı, SSH bağlantısını, SSH anahtarı ile nasıl kurabilir?",{"path":398,"title":399},"\u002Ftr\u002Fprototype-tasarim-deseni-nedir","Prototype Tasarım Deseni Nedir?",{"path":401,"title":402},"\u002Ftr\u002Fmemento-tasarim-deseni-nedir","Memento Tasarım Deseni Nedir?",{"path":404,"title":405},"\u002Ftr\u002Fadapter-tasarim-deseni-nedir","Adapter Tasarım Deseni Nedir?",{"path":407,"title":408},"\u002Ftr\u002Fes11-nedir-ecmascript-2020-nedir","ES11 Nedir? ECMAScript 2020 Nedir?",{"path":410,"title":411},"\u002Ftr\u002Fmutable-ve-immutable-kavrami","Mutable ve Immutable Kavramları Nedir?",{"path":413,"title":414},"\u002Ftr\u002Fnostalji-ibibik-online","Nostalji: İbibik Online (1998'den Bir Web Macerası)",{"path":416,"title":417},"\u002Ftr\u002Fes9-nedir-ecmascript-2018-nedir","ES9 Nedir? ECMAScript 2018 Nedir?",{"path":419,"title":420},"\u002Ftr\u002Fwebpack-nedir","Webpack Nedir? Modern JavaScript Paketleyici Ekosistemi",{"path":422,"title":423},"\u002Ftr\u002Fdocker-nedir","Docker Nedir?",{"path":425,"title":426},"\u002Ftr\u002Fdocker-ile-mariadb-kurulumu","Docker ile MariaDB Kurulumu",{"path":428,"title":429},"\u002Ftr\u002Fecmascript-nedir-ecmascript-ne-degildir-bilinmesi-gerekenler","ECMAScript Nedir? Bilinmesi Gerekenler...",{"path":431,"title":432},"\u002Ftr\u002Fes12-nedir-ecmascript-2021-nedir","ES12 Nedir? ECMAScript 2021 Nedir?",{"path":434,"title":435},"\u002Ftr\u002Fmerhaba-tailwind-css","Merhaba Tailwind CSS",{"path":437,"title":438},"\u002Ftr\u002Fgo-slice-veri-tipi","Go Veri Tipleri: Slice",{"path":440,"title":441},"\u002Ftr\u002Fstate-tasarim-deseni-nedir","State Tasarım Deseni Nedir?",[443,447,450,451],{"path":444,"title":445,"date":446},"\u002Ftr\u002Fearly-return-erken-donus-nedir","Early Return \u002F Erken Dönüş nedir?","2021-09-11",{"path":448,"title":449,"date":293},"\u002Ftr\u002Fprogralama-ipucu-yoda-gosterimi","Yoda Koşulları (Yoda Conditions) Nedir? Programlama İpucu",{"path":392,"title":393,"date":309},{"path":452,"title":453,"date":454},"\u002Ftr\u002Fes13-nedir-ecmascript-2022-nedir","ES13 nedir? ECMAScript 2022 nedir?","2026-06-20",[456,459,463],{"path":457,"title":458,"date":454},"\u002Ftr\u002Fes17-nedir-ecmascript-2026-nedir","ES17 nedir? ECMAScript 2026 nedir?",{"path":460,"title":461,"date":462},"\u002Ftr\u002Fbuilder-tasarim-deseni-nedir","Builder Tasarım Deseni Nedir?","2021-08-03",{"path":464,"title":465,"date":466},"\u002Ftr\u002Fubuntu-guncellemesi-sonrasi-cyberpanele-ulasilamama-sorunlarini-giderme","Ubuntu Güncellemesi Sonrası CyberPanel'e Ulaşılamama Sorunlarını Giderme","2023-10-14",1782142063947]