İç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.