Cara Buang Elemen HTML Dalam Post WordPress

Efektif, jimatkan masa dan baik untuk SEO.

Cara ini boleh digunakan untuk buang elemen HTML seperti berikut:

<a class="butang-v" href="https://www.ithmm.com">Ini adalah link</a>

Hasilnya, semua elemen html tersebut akan hilang daripada post anda.

Teknik ini amat berguna jika anda nak buang bahagian tertentu yang berulang-ulang dalam blog anda.

Contohnya butang link, banner yang diletakkan secara manual dan sebagainya.

Anda tak perlu buat satu persatu.

Dan anda juga boleh aktifkan (adakan) semula bahagian itu bila-bila masa sahaja.

Contoh situasi:

Dalam blog saya, terdapat banyak butang seperti berikut:

Butang-butang tersebut khas untuk link affiliate.

Apa yang terjadi adalah, bila masa program affiliate yang berkaitan, contohnya Shopee ‘memberhentikan’ program affiliate mereka, butang-butang tersebut menjadi tidak berfungsi.

Apabila diklik ia akan memberikan error page, page 404 atau page not found.

Keadaan ini sangat tidak baik untuk SEO.

Untuk padam satu persatu butang link tersebut adalah satu kerja yang mengambil masa, memenatkan dan tidak efektif.

Dan bila program affiliate tersebut disambung semula, lagi satu kerja nak letak balik link-link tersebut.

Jika anda juga mengalami situasi yang sama, atau hampir sama boleh gunakan cara ini.

NOTA PENTING: Sebelum membuat apa-apa perubahan pada fail, pastikan anda telah membuat back-up.

Kod dan syarat perlaksanaan

Untuk mencapai matlamat yang dikehendaki kita perlukan 3 ini:

1. Target Elemen html
2. ‘The kod’ – kod phpnya
3. Akses ke fail function.php

Pertama sekali, sudah tentu anda perlu ketahui apakah target element html anda.

Apa yang anda nak hilangkan @ buang dari post atau page anda.

Selanjutnya kita akan gunakan kod php atau custom php function.

Php function yang kita akan gunakan lebih kurang seperti berikut:

function buang_butang_link($content) {
	if (is_single()) {
		$string = $content;
		$pattern = '#<a class="butang-link"(.*?)</a>#';
		$replacement = '';
		$content = preg_replace($pattern, $replacement, $string);
	}
	return $content;
}
add_filter('the_content', 'buang_butang_link');

Kod tersebut perlu diubahsuai sedikit mengikut kemahuan anda.

Akhir sekali, anda perlukan akses ke fail function.php bagi theme yang anda gunakan.

Letak kod tersebut dekat sana untuk mengaktifkannya.

Teruskan membaca untuk penerangan lanjut setiap bahagian ini.

1. Target HTML Element

Untuk buang bahagian yang anda nak buang, kena kenal pasti struktur html bahagian tersebut.

Kita ambil contoh butang link yang saya nak buang tadi:

Saya nak buang butang ‘lihat di Shopee’.

Oleh kerana saya buat link tersebut secara manual saya tahu struktur html untuk link tersebut adalah seperti berikut:

<a class="butang-link-v3" href="###">Lihat di Shopee</a>

Jika anda nak pasti apakah struktur html target anda gunakan cara berikut.

Gunakan pelayar internet firefox ataupun chrome.

Right-klik bahagian yang anda nak buang kemudian pilih ‘Inspect element‘.

Struktur html bahagian tersebut akan dipaparkan seperti berikut:

Copy dan simpan struktur tersebut untuk digunakan dalam kod php nanti.

2. ‘The kod’ – kod php untuk buang element html

Seperti yang saya nyatakan tadi struktur asas kod php yang digunakan adalah seperti berikut:

function buang_butang_link($content) {
	if (is_single()) {
		$string = $content;
		$pattern = '#<a class="butang-link"(.*?)</a>#';
		$replacement = '';
		$content = preg_replace($pattern, $replacement, $string);
	}
	return $content;
}
add_filter('the_content', 'buang_butang_link');

Terdapat beberapa bahagian yang anda kena ubah untuk kegunaan anda, iaitu bahagian:

• nama function – Tidak wajib, mungkin anda nak letak nama lain.
• Condition – if (is_single)
• $pattern – ikut target html yang nak dibuang
• add_filter – jika anda tukar nama function

Kita lihat satu persatu.

#NAMA FUNCTION

Bahagian ini tidak wajib nak ubah.

Tapi mungkin anda nak buat nama function sendiri, bolehlah tukar…

Dalam kod ini saya namakan function sebagai buang_butang_link.

function buang_butang_link($content)

Mungkin anda boleh tukar ke:

function remove_element($content)

dan sebagainya.

#CONDITION UNTUK FUNCTION AKTIF

Untuk kod yang asal saya letak:

if (is_single())

Yang bermaksud kod tersebut hanya berfungsi @ diaktifkan untuk paparan jenis post sahaja.

Terdapat beberapa condition lain yang anda boleh gunakan mengikut kesesuaian seperti:

is_page() - Untuk paparan page sahaja
is_singular() - Untuk semua jenis paparan (post, page, attachement...)

Contohnya jika saya nak kod tersebut diaktifkan disemua page, post dan attachment saya boleh ubahsuai kod menjadi seperti berikut:

function buang_butang_link($content) {
	if (is_singular()) {
		$string = $content;
		$pattern = '#<a class="butang-link"(.*?)</a>#';
		$replacement = '';
		$content = preg_replace($pattern, $replacement, $string);
	}
	return $content;
}

Jika anda nak lebih spesifik, sebagai contoh anda nak aktifkan kod tersebut di post tertentu sahaja boleh gunakan conditon seperti ini:

if (is_single(12)) - 12 ialah id post, slug juga boleh digunakan

Jika anda nak yang lagi spesifik, contoh anda nak kecualikan beberapa post tertentu boleh gunakan ini:

if ( is_single() && (!is_single(array(23, 45, 108, 'petua-kuruskan-badan'))) )

Yang mana bermaksud kod tersebut aktif untuk semua post kecuali post dengan id 23, 45, 108 dan dengan slug ‘petua-kuruskan-badan’.

(Juga dibaca sebagai => Hanya aktif jika paparan jenis post dan (&&) bukan (!) post yang tersenarai dalam array).

# $PATTERN

$pattern adalah parameter yang diperlukan dalam function preg_replace().

function buang_butang_link($content) {
	if (is_singular()) {
		$string = $content;
		$pattern = '#<a class="butang-link"(.*?)</a>#';
		$replacement = '';
		$content = preg_replace($pattern, $replacement, $string);
	}
	return $content;
}

Sini anda nyatakan struktur html yang hendak dibuang.

Struktur yang anda nyatakan sini digunakan sebagai rujukan oleh kod php diatas.

Struktur tersebut anda masukkan dalam sini:

$pattern = '#struktur element html sini#';

Kita ambil contoh butang shopee tadi, struktur htmlnya adalah seperti berikut:

Kuncinya disini kita nak cari struktur yang unik dalam element tersebut.

Yang mana boleh membezakan element tersebut daripada element yang lain tetapi wujud di setiap struktur yang kita nak buang.

Tak perlu tulis kesemuanya.

Selalunya kita akan target attribute id, name ataupun class.

Kemudian yang selain daripada itu kita akan gunakan short-cut atau nama rasminya ‘regular expression’.

Dalam contoh diatas kita akan target attribute class.

Untuk itu, $pattern boleh ditulis seperti ini:

$pattern = '#<a class="butang-link-v3"(.*?)</a>#';

# adalah delimiters. Kebiasaanya kita akan gunakan / tapi jika kemungkinan target struktur mungkin mengandungi / kita gunakan # ataupun ~.

Simbol (.*?) mewakili apa-apa huruf, simbol dan tempat kosong diantara:

<a class="butang-link-v3" dan </a>

Bila kita tetapkan $pattern seperti diatas dia akan mencari semua element html yang bermula dengan:

<a class="butang-link-v3"

Dan berakhir dengan:

</a>

Tidak kira apa yang ada dekat tengah-tengah.

# BAHAGIAN add_filter

Jika anda ubah nama function maka bahagian ini juga kena diubah.

Contohnya anda nak guna nama remove_element maka bahagian parameter add_filter juga perlu diubah:

function remove_element($content) {
	if (is_singular()) {
		$string = $content;
		$pattern = '#<a class="butang-link-v3"(.*?)</a>#';
		$replacement = '';
		$content = preg_replace($pattern, $replacement, $string);
	}
	return $content;
}
add_filter('the_content', 'remove_element');

Apa sebenarnya add_filter ini?

Ia adalah cara untuk memasukkan function yang anda untuk beraksi @ melakukan tugas tertentu.

Dalam topik ini, function untuk buang semua element html tertentu daripada laman wordpress kita.

3. Akses ke fail function.php

Fail ini terletak dalam root folder theme yang anda gunakan.

Anda boleh akses melalui cPanel ataupun melalui dashboard wordpress ‘Appearance > theme editor’.

Selalunya kita tidak galakkan untuk mengubah terus fail utama dalam theme.

Cara yang betul adalah dengan menggunakan child-theme.

Tetapi, saya andaikan ini adalah perubahan sementara maka kira oklah ubah dekat ‘mother’ theme…

So, hasil akhir kod yang saya nak gunakan adalah seperti berikut:

function remove_element($content) {
	if (is_singular()) {
		$string = $content;
		$pattern = '#<a class="butang-link-v3"(.*?)</a>#';
		$replacement = '';
		$content = preg_replace($pattern, $replacement, $string);
	}
	return $content;
}
add_filter('the_content', 'remove_element');

Kod tersebut harus diletakkan dalam fail function.php untuk membolehkan ia berfungsi.

Copy kod tersebut, akses fail function.php anda dan letakkan kod tersebut pada bahagian paling bawa sekali.

Klik pada butang save dan cuba lihat hasilnya.

Kongsikan jika post ini bermanfaat pada anda.

Jika terdapat sebarang persoalan boleh nyatakan dalam ruangan komen dibawah.