Memperoleh keterampilan untuk menampilkan kode secara efektif di WordPress sangat penting bagi blogger dan pembuat konten yang secara konsisten menerbitkan kode secara online untuk digunakan audiens mereka. Kode komputer, sebagaimana dimaksud, menghasilkan keluaran visual baru di bagian depan situs web, berbeda dari tag, garis miring, dan tanda kurung yang ada dalam potongan kode yang sebenarnya.
Namun, hal ini menimbulkan kesulitan bagi individu yang menulis tentang pengembangan dan desain, karena mereka memerlukan sarana untuk menyajikan kode dengan tepat tanpa menjalankan fungsi yang dimaksudkan, seperti membuat tombol atau menerapkan gaya ke blok paragraf.
Sederhananya, saat membuat posting blog yang menyertakan cuplikan kode sebagai contoh, sangat penting untuk mencegah eksekusi kode. Pendekatan ini memungkinkan pembaca untuk melihat kode dalam bentuk aslinya, melihatnya dalam blok yang diformat dengan baik, dan bahkan menyalin isinya untuk upaya pengembangan mereka sendiri.
Panduan ini bertujuan untuk mendemonstrasikan berbagai metode untuk menampilkan kode di WordPress, terlepas dari tema WordPress yang dipilih. Selain itu, ini akan membantu Anda menentukan metode yang paling cocok untuk alur kerja khusus Anda.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangYang Terjadi Ketika Anda Menambahkan Kode Reguler di WordPress?
Saat Anda menambahkan kode biasa langsung ke postingan atau halaman WordPress, tanpa melakukan tindakan khusus apa pun, kode tersebut dapat menyebabkan konsekuensi yang tidak diinginkan. WordPress memiliki mekanisme bawaan yang secara otomatis memproses dan membersihkan konten untuk memastikan keamanan dan fungsionalitas yang tepat. Akibatnya, ketika kode reguler ditambahkan, kode tersebut dapat dimodifikasi atau dihapus sepenuhnya oleh WordPress.
Berikut beberapa hal yang dapat terjadi saat Anda menambahkan kode reguler di WordPress:
- Perubahan Kode: WordPress mungkin mengubah kode dengan menghapus atau memodifikasi elemen tertentu untuk mencegah potensi risiko keamanan atau konflik dengan fungsionalitas platform. Ini dapat mengakibatkan kode tidak berjalan sebagaimana mestinya atau menghasilkan kesalahan.
- Pengupasan Kode: WordPress memiliki filter dan langkah-langkah keamanan yang dapat menghapus jenis kode tertentu yang dianggap tidak aman atau tidak perlu. Ini dapat menyebabkan penghapusan cuplikan kode penting atau seluruh blok kode itu sendiri.
- Distorsi Visual: Kode biasanya berisi karakter, simbol, dan pemformatan khusus yang dapat mengganggu presentasi visual konten WordPress Anda. Ini dapat menyebabkan masalah pemformatan, ketidaksejajaran, atau kode muncul sebagai teks biasa alih-alih dirender sebagai kode.
- Eksekusi Kode: Dalam beberapa kasus, jika kode tidak dibersihkan atau ditangani dengan benar, kode tersebut dapat mengeksekusi dan menjalankan fungsi yang dimaksudkan. Ini dapat menimbulkan konsekuensi yang tidak diinginkan, seperti membuat tombol, mengubah tampilan konten, atau bahkan memengaruhi keseluruhan fungsi situs web Anda.
Untuk mengatasi masalah ini dan menampilkan kode dengan aman di WordPress, disarankan untuk menggunakan metode atau plugin yang sesuai yang dirancang khusus untuk menampilkan cuplikan kode. Metode ini memastikan bahwa kode diformat, dipertahankan, dan ditampilkan dengan benar tanpa modifikasi atau eksekusi yang tidak diinginkan.
Di sini kita akan menambahkan kode HTML berikut di cuplikan:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
Kutipan kode khusus ini menggunakan elemen gaya HTML untuk menghasilkan tiga blok konten yang dihiasi warna hijau, lengkap dengan header dan paragraf.
Namun demikian, niat kami adalah untuk menampilkan kode yang belum diproses dalam postingan blog, daripada membiarkannya merender di blok yang diberikan.
Hasil berikut dapat diamati ketika kode langsung disisipkan ke Editor Blok WordPress Gutenberg:
Mengingat hal tersebut di atas, terbukti bahwa WordPress berupaya menggunakan kode untuk fungsi utamanya dalam menghasilkan konten. Namun, itu menghilangkan gaya dari kode, sehingga gagal menyajikan hasil yang diinginkan kepada pembaca.
Untuk menghindari keadaan seperti itu, kami sangat menganjurkan pemanfaatan salah satu metode yang disebutkan di bawah ini untuk tujuan menampilkan kode.
4 Cara Menampilkan Kode Di WordPress
Teknik berikut disusun dalam urutan kesulitan yang menaik, dan kami menawarkan pendekatan khusus yang disesuaikan untuk individu yang mendapatkan kepuasan dari menulis kode dan konten dalam editor penurunan harga, bukan menggunakan WordPress.
Metode 1: Menggunakan Editor Blok Gutenberg
Editor Gutenberg menyertakan blok Kode yang sudah ada sebelumnya yang memfasilitasi penyajian cuplikan kode sambil mempertahankan pemformatannya dan tanpa mengeksekusi kode.
Untuk memulai, akses posting atau halaman di WordPress dan lanjutkan dengan memilih salah satu tombol Tambahkan Blok.
Pilih salah satu tombol "Tambahkan Blokir" untuk melanjutkan.
Dengan melakukan itu, bermacam-macam blok yang tersedia akan terungkap. Anda memiliki opsi untuk mencari blok "Kode" atau memasukkan kata kunci seperti "kode" ke dalam bilah pencarian.
Setelah menemukan blok Kode, dapat diidentifikasi dengan ikon braketnya, lanjutkan dengan mengkliknya untuk memasukkan bagian kode ke dalam kiriman.
Saat ini, area yang menampilkan isyarat "Tulis kode…" harus dapat Anda lihat.
Editor WordPress Gutenberg menyediakan dukungan penurunan harga, memungkinkan penemuan dan penyisipan blok Kode melalui penggunaan garis miring (/) diikuti dengan masukan "C" atau "Kode" di dalam editor. WordPress selanjutnya akan menampilkan semua blok terkait, memfasilitasi proses penyisipan yang lebih bijaksana.
Penting untuk diperhatikan perbedaan antara blok Kode dan blok HTML Khusus. Sementara blok HTML Khusus dimaksudkan untuk penyertaan kode HTML khusus yang akan dirender di frontend, blok Kode dirancang khusus untuk penambahan kode mentah untuk tujuan tampilan.
Saat ini, ini adalah saat yang tepat untuk mereplikasi kode yang diinginkan dan memasukkannya ke area yang ditunjuk berlabel "Tulis Kode..."
Kode yang Anda berikan sekarang terlampir di dalam blok Kode yang ditunjuk.
Aspek yang menguntungkan dari blok Kode adalah kepatuhannya pada pemformatan spasi dan tab dalam cuplikan kode asli. Konsekuensinya, kode yang ditampilkan harus menjaga konsistensi visualnya dengan sumber dari mana kode itu disalin.
Untuk menunjukkan kode Anda di dalam posting atau halaman WordPress Anda, akhiri prosesnya dengan mengklik tombol "Publikasikan". Selain itu, Anda memiliki opsi untuk mendapatkan representasi visual dari tampilannya sebelum dipublikasikan dengan memilih "Pratinjau".
Setelah mengklik tombol "Publikasikan", lanjutkan untuk mengakses versi langsung postingan untuk memverifikasi bahwa potongan kode ditampilkan sebagai kode mentah.
Seperti yang diamati, blok Kode dicirikan oleh kesederhanaannya, namun melayani tujuan penting untuk mempertahankan pemformatan saat menyajikan kode dalam posting blog.
Lihat tangkapan layar yang disediakan di bawah ini. Dalam contoh khusus ini, cuplikan kode asli tetap tidak berubah; itu hanya disajikan di ujung depan dalam kotak abu-abu.
Untuk meningkatkan keunggulan blok Kode, disarankan untuk mempertimbangkan untuk memodifikasi tampilan standarnya.
Untuk mengakses pilihan gaya yang tersedia untuk blok, silakan pilih blok Kode dan lanjutkan dengan mengklik tombol Pengaturan (ikon roda gigi). Tindakan ini akan membuka tab Blokir, secara eksklusif menampilkan pengaturan Blokir yang berlaku untuk blok yang dipilih, yaitu blok Kode dalam contoh ini.
Seseorang memiliki kemampuan untuk menyesuaikan blok Kode sesuai dengan preferensi pribadi, termasuk opsi untuk mengubah aspek seperti teks dan warna latar belakang.
Metode 2: Menggunakan Plugin
Silakan gunakan metode pemasangan plugin pilihan Anda untuk memasukkan plugin Enlighter – Customizable Syntax Highlighter ke dalam situs WordPress Anda.
Setelah diaktifkan, plugin akan berfungsi penuh dan memungkinkan Anda memasukkan kode ke pos/halaman mana pun melalui blok Gutenberg atau tombol Sisipkan Editor Klasik.
Jika Anda menggunakan Editor Blok Gutenberg WordPress, akses posting di mana Anda ingin menampilkan kode. Pilih salah satu tombol Tambahkan Blok (diidentifikasi dengan simbol "+") untuk mengungkap bermacam-macam blok yang tersedia.
Baca dengan teliti atau masukkan kata kunci yang berkaitan dengan blok Enlighten Sourcecode. Lanjutkan dengan mengklik blok masing-masing untuk memasukkannya ke dalam kiriman.
Blok Penyorot Enlighter selanjutnya muncul dalam antarmuka Editor Blok, menampilkan tajuk yang ditunjuk berjudul "Penyorotan Umum" dan kolom input teks berlabel "Sisipkan Kode Sumber..."
Harap masukkan atau salin dan tempel kode yang diinginkan untuk ditampilkan di WordPress ke bidang teks "Sisipkan Kode Sumber..." yang ditentukan.
Dalam kapasitasnya sebagai penyorot sintaks, plugin mempertahankan semua preferensi pemformatan dan tabulasi. Setelah mencapai kepuasan dengan hasilnya, lanjutkan untuk memilih tombol "Publikasikan".
Dengan memanfaatkan fungsi ini, Anda dapat mengakses antarmuka pengguna postingan Anda untuk mengamati konten yang sama dengan pengunjung situs.
Plugin Enlighter menyediakan tema default sederhana untuk menampilkan kode, disertai dengan nomor baris yang membantu proses penataan dan referensi.
Seperti disebutkan sebelumnya, menggunakan plugin untuk menampilkan kode di platform WordPress menawarkan keuntungan berbeda jika dibandingkan dengan metode alternatif. Contoh ilustrasi dari keunggulan tersebut adalah fungsionalitas frontend yang disediakan oleh plugin sintaks Enlighter, di mana baris kode disorot secara dinamis saat pengguna menelusuri konten.
Selanjutnya, di dalam kotak kode yang terletak di pojok kanan atas, terdapat beberapa tombol yang meningkatkan pengalaman pengguna. Khususnya, salah satu tombol ini memungkinkan penyajian kode dalam format teks biasa, tanpa nomor baris.
Tombol kedua, dilambangkan sebagai "Copy To Clipboard," memfasilitasi duplikasi instan semua konten di dalam kotak kode, memungkinkan pengguna untuk mentransfer dan menempelkan kode dengan mudah ke program apa pun yang diinginkan.
Terakhir, tombol ketiga membuka kode di jendela baru, sehingga menampilkannya di jendela browser yang diformat sebagai teks biasa.
Plugin Enlighter menawarkan berbagai tema dan alat penyesuaian yang kuat untuk menyesuaikan tampilan kotak kode sesuai dengan preferensi Anda. Jika Anda memilih untuk tidak menggunakan tema default, Anda dapat menavigasi kembali ke postingan Anda di dalam WordPress dan memilih blok Enlighter Sourcecode yang sedang aktif.
Tindakan ini akan mengungkap sidebar Blokir di dalam WordPress. Jika tidak segera muncul, pastikan Anda mengklik tombol Pengaturan (ikon roda gigi) yang terletak di pojok kanan atas jendela WordPress.
Opsi penyesuaian awal untuk dipertimbangkan adalah bidang Bahasa, karena ini menginstruksikan plugin tentang bahasa kode mana yang akan ditampilkan, mengaktifkan fitur pemformatan dan penyorotan yang sesuai.
Ada banyak pilihan bahasa pengkodean untuk dipertimbangkan, oleh karena itu teliti daftarnya dan pilih salah satu yang paling sesuai.
Fitur Speciallines menekankan garis yang ditunjuk dengan memungkinkan pengguna memasukkan nomor baris yang dipisahkan dengan koma.
Konsekuensinya, garis yang ditunjuk yang telah Anda tentukan ditekankan secara visual untuk semua individu yang mengakses situs.
Parameter Lineoffset menyediakan sarana untuk memulai cuplikan pengkodean Anda pada nomor baris tertentu, terbukti menguntungkan saat menampilkan subkumpulan kode dari rangkaian baris yang lebih besar.
Terbukti, dengan memasukkan nilai "10" di bidang Lineoffset, keseluruhan kotak kode dimulai dari nomor baris 10.
Metode 3: Menggunakan Alat Pembuat Enkode
Silakan kunjungi situs web W3Docs HTML Encoder. Di halaman tersebut, Anda akan menemukan dua bidang kotak yang berdekatan. Yang kiri ditujukan untuk menempelkan kode Anda, sedangkan yang kanan menampilkan versi yang disandikan yang dapat Anda salin dan tempel ke WordPress.
Sebelum melanjutkan, Anda perlu menentukan jenis pelestarian kode yang diinginkan:
- Pilih JavaScript Unicode jika Anda berencana menempelkan kode yang berisi elemen JavaScript.
- Pilih simbol HTML jika Anda bekerja dengan HTML.
Silakan masukkan kode yang diinginkan untuk ditampilkan di WordPress ke kolom yang ditunjuk di sebelah kiri. Selanjutnya, cari dan pilih tombol Encode yang terletak di atas di sisi kanan.
Hasil akhirnya mungkin tampak membingungkan; namun, ini pada dasarnya adalah penggabungan elemen HTML yang bertujuan untuk menjaga keseluruhan kode yang disisipkan, sambil menghindari aktivasi atau tampilan konten alternatif yang tidak diinginkan di frontend.
Silakan klik tombol "Salin".
Kembali ke WordPress dan akses posting atau halaman yang dimaksud. Lanjutkan untuk memilih menu Opsi (diwakili oleh tiga titik vertikal) yang terletak di sudut kanan atas. Selanjutnya, pilih fitur Code Editor.
Antarmuka saat ini akan menyajikan Editor Kode alih-alih Editor Blok visual. Temukan bagian yang diinginkan untuk menampilkan kode dan lanjutkan untuk memasukkan kode HTML Anda ke dalam editor.
Jika Anda menggunakan editor WordPress Klasik, Anda harus menavigasi ke tab Teks, yang sesuai dengan Editor Kode di Editor Blok Gutenberg.
Silakan pilih opsi "Perbarui" atau "Terbitkan" untuk menyelesaikan kiriman, dan lanjutkan ke ujung depan kiriman untuk mengamati presentasi visualnya.
Anda akan dapat mengamati kode yang tidak diubah yang awalnya dimasukkan ke pembuat enkode, sebelum dimasukkannya elemen penyandian HTML. Penting untuk diperhatikan bahwa pembuat enkode tidak menyediakan kemampuan gaya apa pun, yang menjadikan pendekatan ini ideal untuk mencapai estetika yang rapi dan minimalis.
Metode 4: Menggunakan Kode Pendek Kustom
Pembuatan kode pendek khusus memenuhi tugas memasukkan blok kode yang dapat digunakan kembali tanpa perlu menyalin dan menempel secara manual. Inilah mengapa shortcode khusus memberikan peluang kuat untuk menampilkan kode di platform WordPress.
Keuntungan menggunakan kode pendek khusus untuk presentasi kode adalah sebagai berikut:
- Kode pendek khusus memungkinkan penyimpanan bagian kode yang rumit untuk digunakan kembali di masa mendatang, menghilangkan kebutuhan untuk berulang kali mengetik potongan kode yang panjang.
- Dimungkinkan untuk menentukan gaya CSS yang dipersonalisasi untuk penyorot kode dan wadah.
- Kode pendek dapat digunakan oleh pengguna mana pun, memungkinkan kontributor lain untuk dengan mudah memanfaatkan penyorot dan blok kode Anda dengan satu klik sederhana.
Membuat kode pendek khusus memerlukan kemahiran dalam memodifikasi file tema WordPress, bekerja dengan kode PHP, dan berpotensi mengembangkan plugin WordPress. Akibatnya, membuat kode pendek khusus untuk WordPress dapat menimbulkan kesulitan bagi individu yang baru mengenal PHP.
Meskipun demikian, hasil akhirnya menawarkan pendekatan yang jauh lebih sederhana untuk menampilkan kode di platform WordPress.
Seseorang memiliki kebebasan untuk memilih nama yang diinginkan untuk kode pendek khusus dan membuat berbagai alternatif, seperti [html] [/html] dan [css] [/css], untuk mengakomodasi beragam bahasa pemrograman.
Harap diperhatikan bahwa untuk penyorotan sintaks yang optimal, disarankan untuk menggunakan kode pendek khusus bersama dengan Editor Teks (di WordPress Klasik) atau kotak HTML Kustom saat bekerja dengan Editor Blok Gutenberg WordPress.
Tujuannya adalah untuk membangun shortcode yang dipesan lebih dahulu yang memungkinkan pengguna untuk memasukkan atau menyisipkan kode dalam batas-batas yang dibatasi dari tag pembuka dan penutup shortcode.
Tujuannya adalah untuk mengembangkan shortcode yang disesuaikan yang memungkinkan pengguna untuk memasukkan atau menyisipkan kode dalam tag pembuka dan penutup yang ditunjuk dari shortcode.
Membungkus
Menampilkan kode di WordPress sangat penting untuk berbagi konsep pemrograman, memastikan akurasi, meningkatkan estetika, dan mendorong kolaborasi. Ini memungkinkan pengembang untuk mengedukasi audiens mereka, memberikan bukti nyata, meningkatkan pengalaman pengguna, dan mendorong keterlibatan komunitas. Menampilkan cuplikan kode mempromosikan transparansi, kepercayaan, dan informasi yang andal. Kode pendek atau plugin khusus dapat memastikan tampilan kode yang menarik secara visual dan terstruktur dengan baik. Berbagi kode memfasilitasi diskusi, umpan balik, dan inovasi. Secara keseluruhan, tampilan kode yang efektif di WordPress sangat penting untuk penyebaran pengetahuan, jaminan kualitas, dan pertumbuhan komunitas pengembangan WordPress.
