Apabila Anda sebelumnya pernah coba membagikannya potongan code di WordPress, Anda barangkali kesukaran bikin block code WordPress tampil di halaman serta konten Anda.
Anda akan senang mengetahui bahwa itu bukan karena kesalahan Anda. Ada dua penjelasan mengapa cuplikan kode Anda tidak dirender:
- Jika Anda mencoba menulis tag HTML di badan posting Anda, WordPress akan menafsirkannya sebagai tag fungsional, bukan sebagai cuplikan kode yang ingin Anda tampilkan. Misalnya, jika Anda menulis “<em>contoh</em>” di postingan Anda, WordPress akan menampilkan “ contoh ”.
- Jika Anda mencoba menulis tag HTML di badan posting Anda, WordPress akan menafsirkannya sebagai tag fungsional, bukan sebAnda tidak dapat menyisipkan tag HTML di kode sumber halaman karena WordPress memfilternya secara otomatis sebagai tindakan pencegahan keamanan . Ini mencegah peretas menyuntikkan kode ke editor pos.
Namun, ada kalanya Anda perlu menampilkan kode di postingan Anda. Misalnya, Anda mungkin membuat blog tentang pengkodean, atau Anda mungkin menerbitkan dokumentasi untuk tema atau plugin yang Anda kembangkan. Apa pun alasannya, Anda memiliki beberapa opsi untuk menampilkan kode di situs WordPress Anda .
Kami akan membahas masing-masing proses ini secara mendetail di bawah sehingga Anda dapat memilih metode yang paling sesuai dengan kebutuhan situs WordPress Anda.
Cara Menampilkan Kode di WordPress Dengan Editor Gutenberg
Jika Anda menginginkan cara mudah untuk menampilkan kode di situs Anda dan mengaktifkan editor Gutenberg , Anda dapat menambahkan kode ke halaman atau posting Anda dengan blok khusus. Begini caranya:
- Di dasbor WordPress Anda, klik Posting atau Halaman .
- Pilih Tambah Baru atau arahkan kursor ke pos atau halaman yang ada dan pilih Edit .
- Letakkan kursor di tempat Anda ingin menampilkan kode.
- Klik ikon Tambahkan Blok (tanda tambah) dan cari “kode”. Pilih blok kode saat muncul.
- Masukkan potongan kode di area teks blok.
- Jika Anda mempratinjau kiriman, Anda akan melihat bahwa kode tersebut ditampilkan di bloknya sendiri.
Namun, perhatikan bahwa blok kode Gutenberg tidak mendukung pengaturan tambahan atau gaya pemformatan. Untuk alur kerja yang lebih mudah dengan lebih banyak fleksibilitas, Anda dapat menggunakan plugin WordPress untuk menambahkan blok kode.
Untuk menampilkan kode yang disorot sintaks, Anda dapat menggunakan plugin Syntax Highlighter Evolved . Gratis, sederhana, dan kompatibel dengan editor klasik dan editor Gutenberg. Berikut adalah langkah-langkah menggunakan editor Gutenberg:
- Instal dan aktifkan plugin Syntax Highlighter Evolved.
- Setelah diaktifkan, buka Pengaturan > Syntax Highlighter Evolved di dasbor Anda.
- Tinjau dan sesuaikan setelan sesuai keinginan Anda, lalu klik Simpan Perubahan
- Pilih Posting atau Halaman dari dasbor.
- Pilih Tambah Baru atau arahkan kursor ke pos atau halaman yang ada dan pilih Edit .
- Klik ikon Tambahkan Blok dan cari “SyntaxHighlighter Code.”
- Masukkan kode Anda di blok kode
- Pilih pengaturan blokir Anda dari kolom kanan. (Klik ikon roda gigi di pojok kanan atas untuk menampilkan setelan.
– Pilih bahasa kode Anda (teks biasa secara default).
– Mengaktifkan atau menonaktifkan nomor baris.
– Jika menampilkan nomor baris, pilih di mana penomoran dimulai.
– Pilih garis tertentu untuk disorot.
– Alihkan apakah URL dapat diklik atau tidak.
Jika Anda menggunakan editor klasik, empat langkah pertama sama. Setelah Anda berada di pos atau halaman tempat Anda ingin menambahkan kode, klik tab Teks untuk beralih ke mode Pengeditan Teks. Kemudian, cukup bungkus kode Anda dengan kode pendek bahasa yang benar. Beberapa shortcode yang paling umum digunakan adalah:
- [html] [/html]
- [css][/css]
- [javascript][/javascript]
- [sql][/sql]
Seperti banyak hal di WordPress, ada lebih dari satu cara untuk menampilkan blok kode kepada pembaca Anda, dan metode terbaik bergantung pada seberapa sering Anda akan menggunakannya, seberapa nyaman Anda dengan kode, dan apakah Anda bersedia atau tidak. untuk menginstal plugin lain.
