Dalam dunia desain web, khususnya saat mengembangkan sebuah website dengan WordPress, terkadang ada kebutuhan untuk memasukkan elemen tertentu ke dalam konten secara dinamis. Salah satu skenario yang mungkin ditemui adalah memasukkan gambar sebelum heading tertentu dalam artikel atau halaman.
Dalam artikel ini, kita akan membahas bagaimana memasukkan gambar sebelum heading ke-4 dan ke-7, tanpa memperdulikan apakah itu heading jenis <h2> atau <h3>.
Script untuk Memasukan Gambar Sebelum Heading
Latar Belakang
Sebelumnya, kita mencoba menambahkan gambar setelah heading tertentu dengan menargetkan jenis heading tertentu, seperti <h2>. Namun, kita menemukan sebuah tantangan: jenis heading yang digunakan dalam konten bisa bervariasi, kadang-kadang <h2> atau kadang-kadang <h3>. Oleh karena itu, diperlukan solusi yang lebih fleksibel.
Solusi: Regex dan preg_replace_callback
Dengan menggunakan regex (regular expression), kita bisa mencocokkan lebih dari satu pola dalam satu kali pencarian. Fungsi preg_replace_callback dari PHP memungkinkan kita untuk melakukan pencarian dan penggantian berdasarkan pola tertentu dan memberikan fleksibilitas lebih melalui penggunaan callback.
Berikut adalah skrip yang kita gunakan:
function insert_images_before_headings($content) {
// Definisi gambar dengan hyperlink
$image1_html = '<a href="https://volunoid.com" rel="nofollow" target="_blank"><img src="URL_GAMBAR_1" alt="ALT_TEXT_1"></a>';
$image2_html = '<a href="https://volunoid.com" rel="nofollow" target="_blank"><img src="URL_GAMBAR_2" alt="ALT_TEXT_2"></a>';
// Pemasangan gambar sebelum heading ke-4 dan ke-7
$content = preg_replace_callback('/<h[23]>/', function($matches) use (&$count, $image1_html, $image2_html) {
$count++;
if ($count == 4) {
return $image1_html . $matches[0];
} elseif ($count == 7) {
return $image2_html . $matches[0];
}
return $matches[0];
}, $content);
return $content;
}
add_filter('the_content', 'insert_images_before_headings');
Bagaimana Cara Kerjanya?
- Fungsi
insert_images_before_headingsdipanggil setiap kali konten diproses. - Dalam fungsi tersebut, kita menggunakan
preg_replace_callbackuntuk mencari setiap kemunculan dari tag<h2>atau<h3>dalam konten. - Callback akan memeriksa apakah heading saat ini adalah heading ke-4 atau ke-7. Jika ya, maka gambar dengan hyperlink akan ditempatkan sebelum heading tersebut.
- Akhirnya, filter
the_contentmemastikan bahwa fungsi kita dijalankan setiap kali konten ditampilkan.
Hasil
Tampilan
Script ini telah kami uji coba dan berhasil. Berikut ini adalah hasil yang telah kami terapkan di dalam situs Volunoid.
Coba Praktekan
Jika Anda ingin mencobanya, silahkan gunakan materi banner yang kami miliki berikut ini.
Kesimpulan
Dengan kombinasi dari regex dan fungsi bawaan PHP, kita dapat dengan mudah memodifikasi konten WordPress kita sesuai kebutuhan. Meski demikian, pastikan selalu untuk menguji kode Anda di lingkungan pengembangan sebelum mengaplikasikannya pada website live agar menghindari potensi masalah.
