Situs Elementor Tampil Polos Setelah Import dari Prod: WP Rocket RUCSS di Studio Lokal

Saya sedang menyiapkan rebuild untuk situs klien berbasis Elementor, dan langkah pertamanya standar: clone produksi ke lokal. Untuk itu saya pakai Studio by WordPress.com, environment lokal yang menjalankan PHP lewat WASM dengan SQLite sebagai database. Import DB produksi selesai, saya buka home page, dan seluruh situs tampil polos. Nav berantakan, hero berantakan, semua section turun jadi tumpukan teks kiri-rata. HTML-nya utuh. Yang hilang adalah styling-nya.

Refleks pertama: buka DevTools, cari 404 di Network tab. Dan di sinilah jebakan pertamanya. Studio punya layer Express di depan PHP-nya, dan layer itu me-redirect request file statis yang tidak ada ke /?ver=.... Request itu mengembalikan HTML home page dengan mime text/html. Jadi browser diam-diam memuat HTML sebagai stylesheet, parsing CSS gagal dalam senyap, dan Network tab tidak menunjukkan 404 yang jelas. Semuanya terlihat "berhasil". Butuh waktu sebelum saya sadar respons "CSS" itu isinya halaman home.

Berhenti percaya Network tab, cek disk

Begitu saya cek filesystem langsung, gambarnya jelas: file CSS per-post Elementor di /wp-content/uploads/elementor/css/post-{ID}.css tidak ada. Elementor menulis satu file CSS untuk tiap dokumen, dan di clone ini file-file itu hilang untuk hampir semua halaman.

Saya coba trik klasik: buka halamannya di browser dengan harapan Elementor regenerate file-nya sendiri. Tidak terjadi apa-apa. Di Elementor 4.x, sekadar page hit tidak menulis ulang file CSS per-post. Jadi ini bukan masalah yang sembuh sendiri; file-nya memang harus dibuat ulang secara eksplisit.

Root cause: state RUCSS ikut terbawa dari prod

Situs produksinya menjalankan WP Rocket dengan Remove Unused CSS (RUCSS) aktif. Cara kerja RUCSS: file CSS per-post Elementor diproses menjadi baris inline yang sudah dioptimasi di tabel wp_wpr_rucss_used_css, lalu file aslinya dihapus atau diganti. Prosesnya jalan lewat background job asinkron. Di produksi, siklus itu jalan normal. Di dalam container Studio, job itu tidak pernah selesai dengan andal.

Dan karena saya import DB produksi mentah-mentah, seluruh state RUCSS ikut terbawa. Tabel RUCSS berisi 783 baris sisa dari prod. Bahkan setelah saya menonaktifkan WP Rocket, gejalanya tetap ada, karena artefaknya tertinggal di mana-mana: direktori cache seperti used-css/, min/, wp-rocket/, critical-css/, background-css/, dan busting/, baris wp_rocket_* plus transient-nya di wp_options, dan file post-{ID}.css yang memang sudah dihapus RUCSS di prod. Deactivate saja tidak mengembalikan file yang sudah tidak ada.

Perbaikannya: bersihkan, lalu regenerate lewat kode

Pertama, nonaktifkan WP Rocket di clone Studio saja. Di prod dia tetap aktif dan tidak perlu disentuh; masalah ini murni soal environment lokal yang tidak bisa menjalankan siklus RUCSS.

Kedua, hapus direktori cache peninggalannya:

wp-content/cache/used-css/
wp-content/cache/min/
wp-content/cache/wp-rocket/
wp-content/cache/critical-css/
wp-content/cache/background-css/
wp-content/cache/busting/

Ketiga, bersihkan sisa barisnya di wp_options:

DELETE FROM wp_options
WHERE option_name LIKE '%rocket%'
   OR option_name LIKE '%wp_rocket%'
   OR option_name LIKE '%wpr_%';

Keempat, dan ini kuncinya: regenerate CSS per dokumen secara programatik. Bootstrap WordPress, kumpulkan semua dokumen Elementor (kit, header, footer, template, dan setiap page yang punya meta _elementor_data), lalu panggil API file CSS-nya satu per satu:

require __DIR__ . '/wp-load.php';
 
// kit, header, footer, template, dan semua post ber-_elementor_data
$ids = get_posts( [
    'post_type'      => 'any',
    'post_status'    => 'any',
    'posts_per_page' => -1,
    'fields'         => 'ids',
    'meta_key'       => '_elementor_data',
] );
 
foreach ( $ids as $pid ) {
    \Elementor\Core\Files\CSS\Post::create( $pid )->update();
}

Satu jebakan penting: jangan panggil \Elementor\Plugin::$instance->files_manager->clear_cache() setelahnya. Kedengarannya seperti langkah "bersih-bersih" yang wajar, tapi dia justru menghapus file yang baru saja kamu generate.

Begitu WP Rocket nonaktif dan regen selesai jalan, rendering langsung pulih. Nav kembali jadi nav, hero kembali jadi hero.

Risiko lanjutan: cascade level kit

Ada satu perilaku yang perlu diwaspadai setelah ini. Memanggil update() untuk satu halaman bisa memicu cascade di level kit yang ikut menghapus file CSS per-post milik dokumen LAIN, termasuk header dan footer. Gejalanya khas: header dan footer tampil polos, logo dan item menu menumpuk vertikal sebagai teks biasa. Jadi setiap kali ada edit data Elementor, jalankan ulang regen untuk seluruh daftar dokumen yang dikenal, bukan cuma halaman yang barusan diedit.

Pelajaran

Import DB produksi ke environment lokal ikut membawa state plugin optimasi. RUCSS tanpa background job yang jalan berarti CSS per-post hilang tanpa pengganti.
Kalau environment lokal me-redirect file statis yang hilang ke HTML, Network tab akan bohong. Cek disk, dan cek isi respons stylesheet-nya.
Di Elementor 4.x, page hit tidak menulis file CSS. Regenerasi harus eksplisit lewat Post::create( $pid )->update().
Jangan clear_cache() setelah regen, dan ulangi regen full list setiap ada edit data Elementor, supaya cascade kit tidak menggugurkan header dan footer.