Bagaimana cara melihat kode postingan wordpress?

Apakah Anda ingin menampilkan sedikit kode di situs Anda tetapi tidak yakin dengan cara terbaik untuk melakukannya? . Dalam panduan ini, kami akan menunjukkan kepada Anda berbagai metode untuk menampilkan kode dengan mudah di WordPress

Mengapa sulit untuk menampilkan kode di WordPress?

Jika Anda memiliki situs tempat Anda memposting panduan yang bermanfaat bagi pengguna, Anda mungkin perlu menampilkan cuplikan kode di postingan blog Anda. Masalahnya adalah tidak sesederhana menempelkan kode. Sebenarnya, jika Anda menempelkan cuplikan HTML di postingan blog Anda, misalnya, itu tidak akan berhasil. Seperti yang Anda ketahui, editor teks WordPress adalah editor berbasis HTML, sehingga secara otomatis memproses kode dan mencetaknya

Demikian pula, jika Anda menyalin dan menempelkan kode pendek, WordPress akan menampilkan fungsinya alih-alih hanya menampilkan kode pendek tertulis

Ini tidak ideal jika Anda ingin menampilkan kode dan dapat menyebabkan pemformatan yang buruk. Misalnya, jika Anda ingin menyematkan beberapa kode HTML di artikel Anda melalui editor klasik WordPress, editor akan memproses kode tersebut dan menampilkannya di dalam konten.  

Cara terbaik untuk memperbaiki masalah ini adalah menggunakan gaya khusus untuk cuplikan kode Anda. Dan itulah yang akan kami tunjukkan pada Anda di artikel ini

Cara menampilkan kode di WordPress

Ada 3 metode utama untuk menampilkan kode di WordPress

1. Menggunakan editor WordPress
   1. Gutenberg
   2. Editor Klasik
2. Menggunakan plugin WordPress khusus
3. Memasukkan kode secara manual

Mari kita lihat setiap metode dan tunjukkan cara menampilkan kode di situs Anda selangkah demi selangkah

1) Menggunakan Editor WordPress

Cara termudah untuk menampilkan kode di WordPress adalah dengan menggunakan Editor WordPress. Di bagian ini, kami akan menunjukkan cara melakukannya menggunakan Gutenberg dan Editor Klasik

1. 1) Gutenberg

Pertama, masuk ke situs web WordPress Anda dan buka pos tempat Anda ingin menampilkan kode. Cari blok bernama Kode dan pilih

Anda dapat mulai menulis kode Anda di sana dan setelah selesai, publikasikan postingannya. Di ujung depan, Anda akan melihat kodenya

Ini adalah bagaimana Anda dapat menggunakan editor Gutenberg untuk menampilkan kode di situs Anda

1. 2) Editor Klasik

Jika Anda masih menggunakan Editor Klasik, Anda juga dapat menampilkan cuplikan kode menggunakan opsi teks yang telah diformat sebelumnya. Pertama, buka postingan tempat Anda ingin memasukkan kode menggunakan editor klasik

Kemudian, pilih cuplikan kode dan pilih opsi teks yang telah diformat sebelumnya dari dropdown

Anda akan melihat bagaimana teks berubah. Kemudian, publikasikan artikel dan periksa halaman dari ujung depan dan Anda akan melihat kode di dalam kotak khusus seperti yang ditunjukkan di bawah ini

Dengan cara ini, Anda dapat menampilkan kode apa pun di situs web WordPress Anda.  

Seperti yang Anda lihat, menggunakan Editor WordPress itu sederhana dan mudah. Namun, jika Anda menginginkan lebih banyak opsi untuk menampilkan jenis kode yang berbeda, Anda memerlukan sesuatu yang lain

2) Tampilkan kode dengan plugin WordPress

Cara lain untuk menampilkan kode di WordPress adalah dengan menggunakan plugin khusus. Ada banyak opsi di luar sana, tetapi untuk demonstrasi ini, kami akan menggunakan alat gratis bernama SyntaxHighighter Evolved.  

Pertama, Anda perlu menginstal plugin, jadi setelah masuk ke situs Anda, buka Plugins > Add New. Cari plugin SyntaxHighlighter Evolved, instal, dan aktifkan

Di bawah bagian Pengaturan WordPress, Anda akan melihat opsi konfigurasi plugin

Di halaman pengaturan plugin, Anda akan melihat beberapa opsi penyesuaian

• Kontrol versi
• Tema warna
• Pemuatan sikat
• Aneka ragam
• Kelas CSS tambahan
• Nomor baris awal
• Padding nomor baris
• Ukuran tab
• Judul

Jika Anda adalah pengguna dasar, konfigurasi default sudah cukup baik, sedangkan jika Anda adalah pengguna tingkat lanjut, Anda mungkin ingin melihat pengaturan dan menyesuaikannya dengan kebutuhan Anda. Setelah Anda mengubah pengaturan, simpan perubahan. Di bawah bagian pratinjau langsung, Anda akan melihat kode contoh dengan efek penyorotan

Pada titik ini, prosesnya bervariasi tergantung pada editor yang Anda gunakan. Mari kita lihat keduanya

2. 1) Editor Gutenberg

Setelah mengaktifkan plugin, Anda akan melihat blok baru bernama SyntaxHighlighter Code di editor

Anda dapat menggunakan blok itu untuk menampilkan berbagai jenis kode di postingan Anda. Cukup pilih blok dan di panel pengaturan, Anda akan melihat opsi untuk memilih bahasa yang ingin ditampilkan. Anda akan melihat bahwa ada lusinan bahasa yang dapat Anda pilih

Untuk contoh ini, kami akan menampilkan potongan kode CSS, jadi kami akan memilih CSS dari dropdown

Anda juga dapat mengubah bahasa kode dari bagian blokir

Setelah memilih bahasa kode, rekatkan skrip di blok

Selain itu, Anda dapat menyesuaikan pengaturan default plugin dari bagian Lanjutan di panel kanan dan mengubah gaya

Setelah selesai, publikasikan (atau perbarui) postingan dan periksa postingan dari ujung depan untuk melihat hasilnya

Seperti yang Anda lihat pada tangkapan layar di atas, kami telah berhasil menyorot kode CSS di pos kami. Dengan cara ini, Anda dapat menampilkan kode apa pun yang Anda inginkan di WordPress hanya dengan memilih bahasa kode yang benar dari pengaturan blok

2. 2) Editor Klasik

Jika Anda tidak menggunakan editor Gutenberg, Anda harus memasukkan kode bahasa secara manual. Untuk menampilkan kode Syntaxhighlighter menggunakan editor klasik, kami akan menggunakan shortcode. Jika Anda tidak terbiasa dengan shortcode, kami sarankan Anda melihat panduan ini

Pertama, buka postingan apa pun atau buat postingan baru menggunakan editor Klasik. Untuk menampilkan konten HTML, misalnya, gunakan shortcode [html] [/html] dan tempelkan kode di antaranya sebagai berikut dan publikasikan postingan

[html]
QuadLayers
[/html]

Jika Anda memeriksa posting dari ujung depan, Anda akan melihat kode HTML yang disorot

Ini adalah bagaimana Anda dapat menggunakan fitur penyematan HTML tetapi Anda dapat melakukan hal yang sama untuk bahasa kode lainnya. Misalnya, untuk menampilkan potongan PHP, gunakan shortcode [php] [/php], shortcode [css] [/css] untuk menampilkan CSS, dan seterusnya

Dengan cara ini, Anda dapat memodifikasi shortcode dan menampilkan potongan kode apa pun yang Anda suka. Mari kita tampilkan contoh potongan kode PHP dalam sebuah artikel

[php]

?>
[/php]

Seperti yang Anda lihat, Anda dapat mengubah kode dan menampilkan cuplikan apa pun di situs WordPress Anda

CATATAN. Jika Anda ingin mengubah font, ukuran font, dan berat font kode Anda, Anda perlu menambahkan kelas CSS khusus untuk plugin Syntaxhighlighter. Anda dapat melakukan ini dari pengaturan plugin dan kemudian menambahkan kode CSS melalui penyesuai WordPress atau editor tema untuk menyesuaikannya

3) Tampilkan kode secara manual

If you have coding skills, you can display code in WordPress manually. This is a more advanced method and provides you with a lot of flexibility. For this demonstration, we will use the

 and  tags to display code in a post.
Pertama, Anda perlu menggunakan alat eksternal untuk mengubah teks Anda menjadi HTML. Kami akan menggunakan MotherEff tetapi Anda dapat menggunakan encoder HTML lain yang Anda suka
Kemudian, tempel cuplikan HTML Anda di kotak dekode dan alat tersebut akan memberi Anda versi yang disandikan
Untuk contoh ini, kode kita adalah
<p><a href="/quadlayers">Visit Our Portfolio</a></p>
Dan alat mengubahnya menjadi ini
 
Kode tidak akan terlihat ramah, tetapi akan berhasil
Kemudian, di dasbor WordPress Anda, buka editor Klasik dan alihkan ke editor teks
Paste the encoded code there using the 
 and  open tags and  and 
 to close them. For example, our sample code will look like this:
 



Kemudian, publikasikan postingan dan di bagian depan, Anda akan melihat kode yang disorot seperti yang ditunjukkan di bawah ini
Dengan cara ini, Anda dapat menampilkan kode secara manual di postingan WordPress mana pun
CATATAN. Pengguna Gutenberg tidak akan dapat menggunakan metode ini. Anda hanya dapat melakukan ini menggunakan Editor Klasik
Bonus. Cara menampilkan kode dalam sebuah paragraf
Selain menampilkan kode di postingan WordPress, alternatif lain yang menarik adalah menampilkan kode di paragraf. Di bagian ini, kami akan menunjukkan cara melakukannya. Untuk ini, kita akan menggunakan sedikit CSS dan HTML
Pertama, Anda perlu menambahkan kode CSS sederhana ke situs web Anda. Anda dapat menggunakan penyesuai WordPress atau plugin khusus situs seperti Cuplikan Kode. Untuk demo ini, kita akan menuju ke Appearance > Customize > Additional CSS dan menempelkan kode kita di sana
code {
font-size:1.2em;
color: #1e1e1e; 
position: relative; 
border-radius: 4px; 
background: #e1e1e1
}
_
Setelah Anda mempublikasikan perubahan, buka postingan yang ingin Anda edit. Kemudian, pilih konten yang ingin Anda sorot. Misalnya, kami akan menampilkan frasa "memulai blog" sebagai kode di paragraf ini
Switch to the text editor and wrap the content inside the  and  tags. Following with our example, our code will look like this:
mulai blog
Kemudian, publikasikan atau perbarui perubahan dan periksa bagian depan untuk melihat perubahannya
Dengan cara ini, Anda dapat menyorot kata atau kalimat tertentu. Jika Anda ingin mengubah gaya kode CSS, jangan ragu untuk mengedit skrip CSS yang telah kami gunakan di sini.  
Kesimpulan
Secara keseluruhan, menampilkan kode di situs Anda tidak semudah menempelkan skrip. Namun, dalam panduan ini, kami telah menunjukkan kepada Anda berbagai metode untuk menampilkan kode di WordPress
Menggunakan editor konten WordPress
Dengan plugin khusus
Secara manual
Jika Anda menginginkan solusi yang cepat dan mudah, editor konten WordPress memberi Anda alat untuk menampilkan skrip di postingan mana pun. Namun, jika Anda membutuhkan lebih banyak opsi penyesuaian, plugin SyntaxHighliger Evolved adalah pilihan terbaik Anda. Di sisi lain, jika jika Anda memiliki keterampilan coding, Anda dapat menambahkan cuplikan kode secara manual dan menyesuaikan gaya di frontend dengan sedikit CSS. 
Finally, if you want to highlight specific sentences or words in a paragraph, you can wrap the text in the   tags.
Untuk informasi lebih lanjut tentang cara mengedit kode di situs Anda, lihat panduan berikut untuk mengedit HTML di WordPress
Apakah menurut Anda postingan ini bermanfaat? 
 

Apakah kita mendapatkan kode di WordPress?
Tidak diragukan lagi, WordPress unggul baik sebagai kode maupun alat tanpa kode . Jika Anda ingin mendalami pembuatan situs web secara eksklusif dengan WordPress, Anda tidak perlu dapat menulis kode, karena Anda dapat menyelesaikan banyak hal dengan bagian tanpa kode di WordPress. 
Mengapa WordPress saya menampilkan kode?
WordPress Shortcode dijalankan di inti WordPress, jadi alasan umum pengguna Anda dapat melihat shortcode Anda di front-end situs web WordPress Anda antara lain. Anda memiliki plugin WordPress yang mengganggu shortcode . Anda memiliki tema yang mengganggu kode pendek.