Cara Mengubah amp-img to img Otomatis di WordPress

Pindah dari platform Blogspot ke WordPress bisa menjadi langkah besar bagi blogger yang ingin meningkatkan fleksibilitas dan fungsionalitas situs mereka. Namun, migrasi ini seringkali tidak sesederhana yang dibayangkan, terutama ketika ada perbedaan dalam penanganan tag HTML.

Saya mengalami masalah serius saat saya memutuskan untuk beralih ke WordPress dari platform Blogspot yang telah saya gunakan sebelumnya. Situs saya sebelumnya memanfaatkan AMP HTML untuk mengoptimalkan kecepatan halaman dan performa di perangkat seluler. Namun, ketika saya migrasi ke WordPress tanpa menerapkan AMP, saya menemukan bahwa gambar yang telah dimasukkan ke dalam postingan AMP tidak terbaca di WordPress.

Masalah utamanya terletak pada perbedaan dalam penanganan tag gambar antara HTML biasa dan AMP HTML. Di HTML biasa, kita menggunakan tag <img> untuk menyisipkan gambar, sementara di AMP HTML kita menggunakan tag <amp-img>. Ini menyebabkan ketidakcocokan antara konten yang telah dimigrasi dari Blogspot (yang mengandung tag <amp-img>) dan lingkungan WordPress yang tidak mendukung tag tersebut.

Sebelumnya, saya telah mengedit satu per satu artikel dari HTML 5 ke AMP HTML saat masih menggunakan Blogspot. Namun, mengubah 900 artikel secara manual ternyata tidaklah praktis. Dan ketika saya migrasi ke WordPress, saya menemukan bahwa tag <amp-img> masih terbawa, mengakibatkan gambar tidak muncul di dalam postingan.

Untuk mengatasi masalah ini, saya mencari solusi yang dapat bekerja secara otomatis. Akhirnya, saya menemukan cara untuk mengubah tag <amp-img> menjadi <img> secara otomatis menggunakan PHP di WordPress. Saya membuat sebuah fungsi sederhana yang akan mengganti semua kemunculan tag <amp-img> dengan tag <img> dalam konten WordPress.

Replace AMP-IMG To IMG

Berikut adalah logika dari fungsi replace_amp_img_with_img yang saya terapkan:

1. Fungsi ini disebut replace_amp_img_with_img, dengan satu parameter, yaitu $content, yang merupakan konten (biasanya teks HTML) yang akan diproses oleh fungsi.
2. Dalam fungsi ini, saya menggunakan fungsi PHP str_replace() untuk mengganti semua kemunculan tag <amp-img dengan tag <img dalam konten.
3. Setelah mengganti semua tag <amp-img dengan tag <img, saya juga mengganti tag penutupnya dari </amp-img> menjadi </img>.
4. Hasilnya, konten yang telah dimodifikasi disimpan kembali dalam variabel $content.
5. Fungsi ini kemudian ditambahkan sebagai filter pada konten WordPress menggunakan add_filter(), sehingga setiap kali konten ditampilkan di halaman WordPress, filter ini akan dijalankan untuk mengubah tag <amp-img> menjadi <img>.

Berikut adalah kode yang dapat Anda tambahkan ke file functions.php tema WordPress Anda untuk mengimplementasikan solusi ini:

function replace_amp_img_with_img( $content ) {
    // Ubah tag <amp-img> menjadi <img>
    $content = str_replace( '<amp-img', '<img', $content );
    $content = str_replace( '</amp-img>', '</img>', $content );

    return $content;
}
add_filter( 'the_content', 'replace_amp_img_with_img' );

Dengan mengimplementasikan solusi ini, saya berhasil mengatasi masalah tag gambar AMP saat migrasi ke WordPress. Sekarang, semua gambar dalam postingan WordPress saya muncul dengan baik di halaman web biasa (non-AMP), tanpa perlu mengedit satu per satu artikel secara manual.

Ini merupakan langkah yang efisien dan efektif dalam mengelola konten WordPress yang telah saya migrasikan dari Blogspot.