Cara mudah menampilkan kode di situs WordPress Anda

Apakah Anda ingin menampilkan kode di posting blog WordPress Anda? Jika Anda mencoba menambahkan kode sebagai teks biasa, 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 Anda.

Pada artikel ini, kami akan menunjukkan cara yang tepat untuk menampilkan kode dengan mudah di situs WordPress Anda. Kami akan menunjukkan kepada Anda berbagai metode, 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 blog atau halaman tempat Anda ingin menampilkan kode. Pada layar edit posting, tambahkan blok kode baru ke posting Anda.

Tambahkan blok kode ke posting WordPress Anda

Anda sekarang dapat memasukkan kode di area teks blok.

Tambahkan kode ke posting blog Anda

Anda kemudian dapat menyimpan posting blog dan mempratinjaunya untuk melihat blok kode beraksi.

Kode PHP ditampilkan di WordPress

Bergantung pada tema WordPress Anda, blok kode mungkin terlihat berbeda di situs Anda.

Metode 2. Menampilkan Kode di WordPress Menggunakan Plugin

Untuk metode ini, kami akan menggunakan plugin WordPress untuk menampilkan kode di posting blog Anda. Cara ini direkomendasikan untuk pengguna yang sering menampilkan kode di postingannya.

Ini memberi Anda keuntungan berikut dibandingkan blok kode default:

  • Ini memungkinkan Anda untuk dengan mudah melihat kode apa pun dalam bahasa pemrograman apa pun.
  • Tampilkan kode dengan penyorotan sintaks dan nomor baris.
  • Penggunanya dapat dengan mudah mempelajari kode dan menyalinnya.

Pertama, Anda perlu menginstal dan mengaktifkan plugin SyntaxHighlighter Evolve. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Setelah diaktifkan, Anda dapat melanjutkan dan mengedit posting blog tempat Anda ingin menampilkan kode. Pada layar edit posting, tambahkan blok Kode SyntaxHighlighter ke posting Anda.

Blok kode sintaks

Anda sekarang akan melihat blok kode baru di editor pos tempat Anda dapat memasukkan kode Anda. Setelah menambahkan kode, Anda harus memilih pengaturan blok dari kolom kanan.

Kode pengaturan kunci penyorotan sintaks

Pertama, Anda harus memilih bahasa untuk kode Anda. Anda kemudian dapat mematikan nomor baris, memberikan nomor baris pertama, menyorot setiap baris yang Anda inginkan, dan menonaktifkan fitur untuk mengklik tautan.

Setelah selesai, simpan postingan Anda dan klik tombol pratinjau untuk melihatnya beraksi.

Kode ditampilkan dengan penyorotan sintaks

Plugin ini hadir dengan beberapa skema warna dan tema. Untuk mengubah tema warna, Anda harus mengunjungi Pengaturan » Sintaks Halaman.

Pengaturan sintaks

Dari halaman pengaturan, Anda dapat memilih tema warna dan mengubah pengaturan SyntaxHighlighter. Anda dapat menyimpan pengaturan Anda untuk melihat pratinjau blok kode di bagian bawah halaman.

Pratinjau blok kode

Menggunakan SyntaxHighlighter dengan Editor Klasik

Jika Anda masih menggunakan editor WordPress klasik lama, berikut adalah cara menggunakan plugin SyntaxHighlighter untuk menambahkan kode ke posting blog WordPress Anda.

Cukup bungkus kode Anda dalam tanda kurung siku dengan nama bahasa. Misalnya, jika Anda akan menambahkan kode PHP, Anda akan menambahkannya seperti ini:

[php]

php
fungsi pribadi get_time_tags() {
$time = get_the_time(‘d M, Y Tampilkan);
kembali $waktu;
}
?>
[/php]

Demikian pula, jika Anda ingin menambahkan kode HTML, itu akan membungkus kode pendek HTML seperti ini:

[html]

Contoh tautan
[/html]

metode 3. Lihat kode di WordPress secara manual (tanpa plugin atau pemblokiran)

Metode ini ditujukan untuk pengguna tingkat lanjut karena memerlukan lebih banyak pekerjaan dan tidak selalu berfungsi sebagaimana mestinya.

Sangat cocok untuk pengguna yang masih menggunakan editor klasik lama dan ingin menampilkan kode tanpa menggunakan plugin.

Anda harus terlebih dahulu meneruskan kode Anda melalui alat penyandian entitas HTML online. Ini akan mengubah markup kode Anda menjadi entitas HTML, memungkinkan Anda untuk menambahkan kode dan melewati filter pembersihan WordPress.

Sekarang salin dan tempel kode Anda ke editor teks dan bungkus

  và nhãn 

Tambahkan kode secara manual di editor klasik

Mã của bạn sẽ trông như thế này:

Đây là một liên kết mẫu


Anda sekarang dapat menyimpan posting Anda dan melihat pratinjau kode yang sedang beraksi. Browser Anda akan mengonversi entitas HTML dan pengguna akan dapat melihat dan menyalin kode yang benar.

Tampilkan kode secara manual di WordPress

Kami harap artikel ini membantu Anda mempelajari cara menampilkan kode dengan mudah di situs WordPress Anda. Anda mungkin juga ingin melihat daftar pamungkas kami tentang kiat, trik, dan peretasan WordPress yang paling dicari.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.

Pos terkait

Back to top button