Apakah Anda ingin menampilkan kode di posting blog WordPress Anda? Jika Anda mencoba menambahkan kode seperti teks biasa, maka WordPress tidak akan menampilkannya dengan benar.
WordPress menjalankan konten Anda melalui beberapa filter pembersihan setiap kali Anda menyimpan posting. Filter ini ada untuk memastikan seseorang tidak menyuntikkan kode melalui editor pos untuk meretas situs web Anda.
Pada artikel ini, kami akan menunjukkan kepada Anda cara yang tepat untuk dengan mudah menampilkan kode di situs WordPress Anda. Kami akan menunjukkan kepada Anda metode yang berbeda, dan Anda dapat memilih salah satu yang paling sesuai dengan kebutuhan Anda.
Metode 1. Tampilkan Kode Menggunakan Editor Default di WordPress
Metode ini direkomendasikan untuk pemula dan pengguna yang tidak perlu sering menampilkan kode.
Cukup edit posting atau halaman blog di mana Anda ingin menampilkan kode. Pada layar edit posting, tambahkan blok kode baru ke posting Anda.
Anda sekarang dapat memasukkan potongan kode di area teks blok.
Setelah itu, Anda dapat menyimpan posting blog Anda dan mempratinjau untuk melihat blok kode dalam aksi.
Bergantung pada tema WordPress Anda, blok kode mungkin terlihat berbeda di situs web Anda.
Metode 2. Tampilkan Kode di WordPress Menggunakan Plugin
Untuk metode ini, kami akan menggunakan plugin WordPress untuk menampilkan kode di posting blog Anda. Metode ini direkomendasikan untuk pengguna yang sering menampilkan kode dalam artikel mereka.
Ini memberi Anda keuntungan berikut dari blok kode default:
- Memungkinkan Anda untuk dengan mudah menampilkan kode apa pun dalam bahasa pemrograman apa pun
- Menampilkan kode dengan penyorotan sintaks dan nomor baris
- Pengguna Anda dapat dengan mudah mempelajari kode dan menyalinnya
Pertama, Anda perlu menginstal dan mengaktifkan plugin SyntaxHighlighter Evolved . Untuk detail lebih lanjut, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress.
Setelah aktivasi, Anda dapat melanjutkan dan mengedit posting blog di mana Anda ingin menampilkan kode. Pada layar edit posting, tambahkan blok ‘SyntaxHighlighter Code’ ke posting Anda.
Anda sekarang akan melihat blok kode baru di editor pos tempat Anda dapat memasukkan kode Anda. Setelah menambahkan kode, Anda perlu memilih pengaturan blok dari kolom kanan.
Pertama, Anda perlu memilih bahasa untuk kode Anda. Setelah itu, Anda dapat mematikan nomor baris, memberikan nomor baris pertama, menyorot setiap baris yang Anda inginkan, dan mematikan fitur untuk membuat tautan dapat diklik.
Setelah selesai, simpan posting Anda dan klik tombol pratinjau untuk melihatnya beraksi.
Plugin ini dilengkapi dengan sejumlah skema dan tema warna. Untuk mengubah tema warna, Anda harus mengunjungi halaman Pengaturan »SyntaxHighlighter (Settings » SyntaxHighlighter).
Dari halaman pengaturan, Anda dapat memilih tema warna dan mengubah pengaturan SyntaxHighlighter. Anda dapat menyimpan pengaturan Anda untuk melihat pratinjau dari blok kode di bagian bawah halaman.
Menggunakan SyntaxHighlighter dengan Editor Klasik (Classic Editor)
Jika Anda masih menggunakan editor WordPress klasik lama, maka di sini adalah bagaimana Anda akan menggunakan plugin SyntaxHighlighter untuk menambahkan kode ke posting blog WordPress Anda.
Cukup bungkus kode Anda di sekitar tanda kurung siku dengan nama bahasa. Misalnya, jika Anda akan menambahkan kode PHP, maka Anda akan menambahkannya seperti ini:
[php]
<?php
private function get_time_tags() {
time;
}
?>
[/php]
time;
}
?>
[/php]Demikian pula, jika Anda ingin menambahkan kode HTML, maka Anda akan membungkusnya di sekitar kode pendek HTML seperti ini:
[html]
<a href="example.com">A sample link</a>
[/html]Metode 3. Menampilkan Kode di WordPress secara Manual (Tanpa Plugin atau Blokir)
Metode ini untuk pengguna tingkat lanjut karena membutuhkan lebih banyak pekerjaan dan tidak selalu berfungsi sebagaimana dimaksud.
Sangat cocok untuk pengguna yang masih menggunakan editor klasik lama dan ingin menampilkan kode tanpa menggunakan plugin.
Pertama, Anda harus meneruskan kode Anda melalui alat pembuat HTML entities encoder. Ini akan mengubah markup kode Anda ke entitas HTML, yang akan memungkinkan Anda untuk menambahkan kode dan memotong filter pembersihan WordPress.
Sekarang salin dan tempel kode Anda di editor teks dan bungkus di sekitar tag <pre> dan <code> .
Kode Anda akan terlihat seperti ini :
<pre><code>
<p><a href="/home.html">This is a sample link</a></p>
</pre></code>Anda sekarang dapat menyimpan posting Anda dan melihat pratinjau kode dalam tindakan. Browser Anda akan mengonversi entitas HTML dan pengguna akan dapat melihat dan menyalin kode yang benar.
Kami harap artikel ini membantu Anda mempelajari cara mudah menampilkan kode di situs WordPress Anda. Anda mungkin juga ingin melihat daftar pamungkas kiat, trik, dan peretasan WordPress yang paling dicari.
