İçeriğe geç
Tüm projeler
Web & Full StackÖzel

WordPress DOM Override ve Tailwind v4 Enjektörü

Çalışma zamanında (runtime) yerel Gutenberg düzen kısıtlamalarını temizleyen, CSS özgüllüğünü (specificity) sıfırlayan ve Tailwind v4 motorunu frontend, admin paneli ve blok düzenleyiciye enjekte eden agresif bir WordPress mimari geçersiz kılma (override) katmanı.

Teknoloji yığını

Çatılar & kütüphaneler

Performans & metrikler

  • CSS özgüllük savaşlarını (specificity wars) ortadan kaldırarak şişkin alt-tema (child-theme) stillerine olan ihtiyacı büyük ölçüde azaltır
  • FOUS engelleme rutini tamamen asenkron çalışarak render engelleyici (render-blocking) kalıntıları önler
  • Hedefli backend yürütmesi, Tailwind'in yalnızca belirli, izin verilen (whitelisted) yönetici arayüzlerinde çalışmasını sağlayarak sunucu tarafı belleğini korur

Neden geliştirdim?

Modern arayüz mühendisliği, DOM üzerinde mutlak ve deterministik bir kontrol gerektirir. WordPress, kendi düzen yapıtaşlarını (örneğin is-layout-constrained, is-layout-flow) ve şişkin varsayılan stillerini render hattına zorla enjekte ederek bu kontrolü doğal olarak bozar. Yerel WordPress stillendirme motorunu acımasızca ezmek için bu yürütme katmanını geliştirdim. Bu yapı, eski CSS teknik borçlarını ortadan kaldıran kaba kuvvet (brute-force) bir sıfırlama işlevi görür ve Tailwind v4'ün tek stillendirme otoritesi olarak çalışabileceği tamamen boş bir tuval sağlar.

Mimari & kararlar

Uygulama, çok aşamalı bir geçersiz kılma (override) dağıtmak için WordPress yürütme hook'larına (wp_head, wp_footer, enqueue_block_editor_assets) dayanır. Aşama 1: Tailwind çalışma zamanını enjekte et ve WP blok kütüphanesinin global dolgu (padding) ve kenar boşluğu (margin) mantığını felç etmek için !important kullanan devasa bir CSS reset bloğu devreye sok. Aşama 2: Nihai çizimden (final paint) önce zorunlu düzen sınıflarını dinamik olarak soymak için sayfa yüklendikten hemen sonra asenkron bir JavaScript DOM temizleyicisi (scrubber) çalıştır. Aşama 3: Tailwind derleyicisi değerlendirmesini tamamlayana kadar kök düğüme (root node) opacity: 0 uygulayan ve 1.5 saniyelik asenkron bir arıza korumasıyla (failsafe) desteklenen FOUS (Stilsiz İçerik Parlaması) hafifletme dizisini uygula.

Temel özellikler

  1. 01Hedeflenmiş JavaScript yürütmesi ile zorunlu Gutenberg düzen sınıflarının çalışma zamanında (runtime) DOM'dan temizlenmesi
  2. 02Tailwind v4 derleyicisinin tüm ortamlara CDN aracılığıyla asenkron olarak enjekte edilmesi
  3. 03Otomatik UI gösterme (reveal) arıza korumaları ile katı FOUS (Stilsiz İçerik Parlaması) engelleme
  4. 04Blok Düzenleyici (Gutenberg) ile ön yüz (frontend) arasında WYSIWYG (Ne Görürsen Onu Alırsın) eşitliğini sağlayan ortamlar arası senkronizasyon
  5. 05Yerel WordPress elementleri (butonlar, linkler, listeler) için otomatik CSS özgüllük (specificity) sıfırlaması

Teknik değerlendirme

Bu kod parçası, monolitik bir CMS render hattının düşük seviyeli manipülasyonunu göstermektedir. Header ve footer sınırlarında DOM inşasını araya girerek kesen bu kod, varsayılan düzen motorunu başarılı bir şekilde felç eder. Agresif CSS sıfırlamalarının (specificity overrides) çalışma zamanı JavaScript sınıfı kaldırma işlemiyle senkronizasyonu, karmaşık tema yeniden yapılandırmalarına gerek kalmadan Tailwind'in görsel katman üzerinde mutlak mimari hakimiyet kurmasını garanti eder.

Benzer projeler

Tüm projeler

Web & Full Stack

Özel

Maxend WooCommerce Vitrini: Özel PHP ve Tailwind Oluşturucu

Tamamen PHP ile yazılmış modüler, yüksek performanslı bir WooCommerce arayüz oluşturucu. Hantal sayfa oluşturucularını atlayarak, donanım hızlandırmalı ürün kaydırıcılarını (slider), kategori ızgaralarını ve özel düzenleri dinamik olarak oluşturmak için yerel WordPress kısa kodlarını (shortcodes) ve Tailwind CSS'i kullanır.

  • PHP
  • JavaScript
  • HTML
  • +6

Web & Full Stack

Özel

Mavi Bahçem: Decoupled Next.js & PHP CMS Mimarisi

Kesin bir biçimde ayrıştırılmış (decoupled) mimari kullanan, yüksek düzeyde optimize edilmiş ve statik olarak üretilen bir web platformu. Altyapı maliyetlerini en aza indirirken performansı en üst düzeye çıkarmak için özel bir Next.js arayüzünü, güvenli ve hafif bir PHP/MySQL arka ucu ile eşleştirir.

  • TypeScript
  • PHP
  • SQL
  • +7

Web & Full Stack

Özel

MAN-AR Canada: B2B Kurumsal Tedarik Platformu

Kanada merkezli bir B2B endüstriyel tedarik firması için geliştirilmiş yüksek performanslı, çok dilli kurumsal platform. Next.js ile tasarlanmış, Tailwind CSS v4 ile optimize edilmiş ve güvenli bir PHP iletişim köprüsü ile desteklenmiştir.

  • TypeScript
  • PHP
  • Next.js 15
  • +5

Benzer bir ihtiyacınız mı var?

Bu tür bir sistemi sizin için de kurabilirim.

Projenizi birkaç cümleyle anlatın; doğru yaklaşımı ve tahmini kapsamı birlikte belirleyelim.

Projenizi anlatınHizmetleri inceleyin