Web & Full Stack
Özel

WordPress DOM Override ve Tailwind v4 Enjektörü

PHPJavaScriptCSSWordPress CoreTailwind CSS v4DOM ManipülasyonuGutenberg APIWooCommerce Hookları

Ç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ı

PHPJavaScriptCSSWordPress CoreTailwind CSS v4DOM ManipülasyonuGutenberg APIWooCommerce Hookları

Sistem Metrikleri

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

Bunu Neden İnşa Ettim?

"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

  • 01.Hedeflenmiş JavaScript yürütmesi ile zorunlu Gutenberg düzen sınıflarının çalışma zamanında (runtime) DOM'dan temizlenmesi
  • 02.Tailwind v4 derleyicisinin tüm ortamlara CDN aracılığıyla asenkron olarak enjekte edilmesi
  • 03.Otomatik UI gösterme (reveal) arıza korumaları ile katı FOUS (Stilsiz İçerik Parlaması) engelleme
  • 04.Blok 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
  • 05.Yerel WordPress elementleri (butonlar, linkler, listeler) için otomatik CSS özgüllük (specificity) sıfırlaması
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.