Filter wptexturize milik WordPress secara diam-diam merusak JavaScript inline, mengubah operator logika && menjadi entitas HTML && dan merusak skrip yang berjalan di dalam shortcode.

Masalah ini muncul pada seorang pengembang yang mengelola sekumpulan shortcode kalkulator. Setelah berminggu-minggu beroperasi tanpa kendala, tombol kirim tiba-tiba berhenti merespons. Tidak ada peringatan PHP, tidak ada kesalahan konsol, dan HTML yang diperiksa tampak bersih—sampai sumber yang dirender mengungkapkan if (!isNaN(bf) && bf > 0). Satu kesalahan sintaksis tersebut mencegah seluruh blok skrip untuk dieksekusi.

Mengapa filter ini penting

WordPress memproses konten postingan melalui serangkaian filter sebelum mencapai browser. wptexturize adalah yang pertama dari filter tersebut; ia mengubah tanda kutip lurus menjadi tanda kutip melengkung tipografi, mengganti tanda hubung ganda dengan em-dash, dan menyanitasi ampersand. Filter ini berasumsi bahwa ia sedang menangani prosa, bukan kode. Ketika sebuah shortcode menyuntikkan tag <script> inline, filter tetap berjalan dan memperlakukan JavaScript sebagai teks biasa. Oleh karena itu, ampersand dalam && diubah menjadi &#038;, yang diinterpretasikan oleh browser sebagai string literal alih-alih operator AND logika.

Pengembang yang menyematkan JavaScript secara langsung di dalam konten postingan—seperti kalkulator, validator formulir, atau widget interaktif—sangat rentan. Masalah ini tidak terbatas pada kalkulator; skrip inline apa pun yang menggunakan &&, &, atau karakter serupa dapat rusak. Karena transformasi terjadi di sisi server, browser tidak pernah melihat kode aslinya, dan kesalahan tersebut tidak muncul sebagai pengecualian (exception) JavaScript yang umum.

Siapa yang terdampak dan apa kerugiannya

  • Pemilik situs: kalkulator atau formulir yang rusak dapat membuat pengunjung frustrasi, meningkatkan bounce rate, dan mengikis kepercayaan.
  • Pengembang: menghabiskan waktu berjam-jam untuk memburu bug "hantu" yang tidak meninggalkan jejak di log atau output konsol.
  • Editor konten: mungkin tanpa sadar merusak fungsionalitas saat mengedit halaman yang berisi shortcode.

Biayanya bukan sekadar waktu; hal ini dapat berujung pada hilangnya konversi, terutama pada situs yang mengandalkan kalkulator khusus untuk penetapan harga, estimasi pinjaman, atau penilaian kesehatan.

Apa yang dilakukan filter ini, dalam istilah sederhana

  1. Mendeteksi tanda kutip lurus – mengganti ' dan " dengan versi tipografi 'smart quotes'.
  2. Membersihkan ampersand – mengubah & menjadi &amp; kecuali jika sudah membentuk entitas HTML yang valid.
  3. Berlaku untuk seluruh string konten – termasuk apa pun di dalam tag <script> yang dihasilkan oleh shortcode.

Ketika filter menemukan &&, ia melihat dua ampersand yang bukan bagian dari entitas HTML yang ada, sehingga ia mengubah masing-masing secara individual, menghasilkan &#038;&#038;.

Cara menghentikan kerusakan

1. Matikan filter untuk halaman yang berisi kode

add_action( 'template_redirect', function () {
    if ( is_page() ) {
        remove_filter( 'the_content', 'wptexturize' );
        remove_filter( 'widget_text_content', 'wptexturize' );
    }
} );

Cuplikan kode ini menonaktifkan wptexturize hanya pada template halaman, tetap mempertahankan peningkatan tipografi untuk postingan dan jenis konten lainnya. Ini juga menghapus filter dari teks widget, yang dapat menjadi sumber sekunder skrip inline.

2. Tulis ulang logika untuk menghindari &&

Jika menonaktifkan filter tidak diinginkan, lakukan refaktor pada JavaScript sehingga operator AND logika tidak diperlukan:

// Original
if (a && b) { … }

// Refactored
var ok = a;
if (ok) { ok = b; }
if (ok) { … }

Meskipun ini menambah beberapa baris ekstra, cara ini menghilangkan ampersand yang memicu filter. Pendekatan ini berhasil untuk kondisi sederhana tetapi bisa menjadi rumit untuk ekspresi yang kompleks.

3. Eksternalisasi semua skrip

Solusi yang paling tangguh adalah dengan melakukan enqueue file JavaScript alih-alih menyematkan kode secara inline:

wp_enqueue_script( 'my-calculator', get_template_directory_uri() . '/js/calculator.js', [], null, true );

Skrip yang di-enqueue sepenuhnya melewati filter the_content. Skrip tersebut juga mendapat manfaat dari caching browser dan dapat diminifikasi atau digabungkan dengan aset lainnya.

Mendeteksi masalah di lapangan

Ketika sebuah skrip berhenti berjalan tanpa kesalahan yang jelas, lihat sumber halaman (bukan inspektur DOM) dan cari &#038;. Jika Anda menemukannya di dalam blok <script>, filter tersebut adalah penyebabnya. Masalah ini tidak akan muncul di konsol karena browser tidak pernah menerima skrip yang valid secara sintaksis untuk diparsing.

Argumen sebaliknya: mengapa tetap mempertahankan wptexturize?

wptexturize meningkatkan keterbacaan di sisi front end. Tanda kutip melengkung dan karakter tanda hubung yang tepat memberikan tampilan prosa yang rapi, dan banyak pemilik situs menganggap hal itu sebagai fitur estetika yang tidak bisa ditawar. Menghapus filter secara global akan mengembalikan teks ke keadaan mentah dan polos secara tipografi.

Komprominya adalah penonaktifan selektif: matikan filter hanya di tempat kode berada, atau gunakan shortcode kustom yang secara eksplisit menandai outputnya aman dari texturizing. WordPress sudah menyediakan wp_kses_post dan pembantu sanitasi lainnya; pengembang dapat menggabungkan fungsi tersebut dengan panggilan remove_filter untuk mendapatkan hasil terbaik dari keduanya.

Apa yang perlu diperhatikan selanjutnya

WordPress core belum mengumumkan perubahan pada wptexturize yang akan secara otomatis mengecualikan tag <script>. Sampai perubahan tersebut hadir, pengembang harus melindungi kode inline mereka secara manual. Pantau tracker pengembangan core untuk proposal apa pun guna membuat filter tersebut sadar konteks. Sementara itu, audit setiap shortcode atau elemen page builder yang menyuntikkan JavaScript dan terapkan salah satu dari tiga perbaikan di atas.

Intinya: jika situs WordPress Anda menjalankan JavaScript inline, pastikan bahwa wptexturize tidak menulis ulang kode tersebut secara diam-diam. Satu ampersand yang ter-escape dapat membuat seluruh fitur tidak berfungsi, dan solusinya biasanya hanya beberapa baris PHP atau beralih ke skrip eksternal.