Cara Memasukkan Syntax Code Di Postingan WordPress – Bagi pemilik blog WordPress yang membahas tentang tutorial yang berhubungan dengan coding bisa dipastikan mereka ingin memasang kode di postingannya, tapi sayangnya secara default WordPress memfilter kode mentah apa pun yang ditambahkan ke dalam postingan blog, halaman, widget, atau komentar sehingga kode tidak tampil sempurna dan tag-tag kode penting dirubah menjadi karakter yang tidak jelas. Hal ini akan mengakibatkan kode jika di copy oleh pengunjung menjadi tidak berjalan dan menimbulkan error.

Untuk mengatasi hal diatas untung saja WordPress memiliki banyak plugin yang dikembangkan oleh pengembang-pengembang kompeten di seluruh dunia untuk memecahkan berbagai masalah dan menambahkan berbagai macam fungsi sehingga WordPress dapat digunakan untuk berbagai macam hal. Untuk menampilkan kode di post WordPress, Anda juga dapat menemukan beberapa plugin yang bisa menampilkan kode secara sempurna. Pada artikel ini, saya akan menunjukkan cara mudah untuk memasang atau menampilkan kode di postingan WordPress.

Cara Menampilkan kode di Posting Blog WordPress

Pada artikel ini saya akan memberikan satu contoh penggunaan plugin yang bernama SynatxHighlighter Evolved untuk menampilkan kode di WordPress, Dan dibagian bawah saya juga akan memberikan beberapa plugin alternatif yang juga memiliki fungsi sama.

Untuk memulainnya pertama Anda perlu menginstal dan mengaktifkan plugin Synatx Highlighter Evolved. Jika Anda masih belum memahami cara menginstall plugin, silahkan terlebih dahulu membaca tutorial saya tentang Panduan lengkap cara menginstall plugin WordPress.

Setelah plugin Anda aktifkan, Silahkan masuk ke halaman pengaturan plugin di menu Settings » SyntaxHighlighter untuk mengkonfigurasi pengaturan plugin.

Secara default, pengaturan plugin ini sudah bekerja untuk sebagian besar situs web. Namun, Anda harus meninjau semua pengaturan dan membuat perubahan jika perlu. Dan di setiap pilihan sudah terdapata deskripsi untuk menjelaskan maksud dari pengaturan tersebut. Jika pengaturan yang Anda lakukan sudah terasa cukup, silahkan untuk klik tombol save changes untuk menyimpan pengaturan Anda.

Syntax Highlighter Evolved menggunakan shortcode sederhana untuk menampilkan kode. Untuk setiap bahasa pemrograman Anda perlu membungkus kode Anda dalam shortcode untuk bahasa itu.

Untuk menampilkan kode PHP Anda akan membungkus kode Anda seperti ini

[HTML] Kode Anda disini [/HTML]

Ini akan muncul di postingan anda seperti ini:

Untuk CSS Anda akan membungkus kode Anda seperti ini:

[CSS] Kode Anda disini [/CSS]

Ini akan muncul di situs Anda seperti ini:

.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727; }

Syntax Highlighter secara otomatis akan menyoroti kode untuk bahasa tertentu. Ini juga akan menambahkan nomor baris dan handle tab indent dengan benar. Pengguna Anda dapat dengan mudah menyalin dan menempelkan cuplikan kode dari situs WordPress Anda.

Plugin Untuk Menampilkan Kode Di WordPress

Memasukkan cuplikan kode ke WordPress yang lebih mudah bagi Anda untuk disematkan dan memudahkan pengguna membaca.

1. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved adalah plugin yang saya gunakan sebagai contoh pada artikel ini dan ini juga plugin yang saya gunakan pada blog centerklik, ini merupakan plugin code snipet yang populer untuk menyematkan potongan kode bernomor dan sintaks yang ingin di pasang dalam postinga WordPress. Yang perlu Anda lakukan adalah membungkus kode Anda dalam shortcode yang relevan dan akan ditampilkan seperti ini:

Fitur Utama:

• Menambahkan nomor baris ke cuplikan kode
• Menambahkan penyorotan sintaks ke cuplikan kode
• Pilihan warna tema yang berbeda
• Dapat menambahkan CSS class khusus untuk opsi styling

2. Crayon Syntax Highlighter

Crayon Syntax Highlighter adalah plugin populer lainnya yang dapat menambahkan nomor baris dan sintaks kode ke cuplikan kode di postingan WordPress Anda. Bila dibandingkan dengan SyntaxHighlighter Evolved, Crayon Syntax Highlighter memiliki lebih banyak penyesuaian. Anda dapat mengkonfigurasi hampir semua hal tentang plugin di tab pengaturannya.

Anda juga bisa melakukan hal-hal seperti menduplikat secara otomatis gaya Sublime Text (editor kode populer):

Fitur Utama:

• Menambahkan nomor baris ke cuplikan kode Anda
• Menambahkan penyorotan sintaks
• Mendukung 65 bahasa yang berbeda
• Banyak style, beberapa di antaranya meniru editor kode populer
• Box kode mudah di sesuaikan dengan tampilan tema WordPress Anda

3. oEmbed Gist

oEmbed Gist adalah plugin sederhana yang memungkinkan Anda dengan mudah menanamkan kode atau syntax code. Gist berasal dari GitHub dan merupakan cara mudah untuk berbagi cuplikan dan catatan kode. Untuk menggunakannya, Anda hanya perlu menempelkan kode Anda ke Editor utama dan membuat intisari publik.

Kemudian, Anda hanya perlu menempelkan URL intisari Anda ke Editor WordPress dan plugin akan secara otomatis menyematkan cuplikan kode Anda seperti ini:

Fitur Utama:

• Manfaatkan GitHub Gist
• Sematkan kursor dengan menempelkan URL
• Dapat menanamkan revisi tertentu atau file tunggal dari file multi-file

4. WP-GeSHi- Highlight

WP-GeSHi-Highlight adalah plugin lain yang menambahkan nomor baris dan Highlight syntax code yang Anda sisipkan di editor WordPress. Seperti namanya, ini didasarkan pada mesin Highlight GeSHi. Ini juga memungkinkan Anda menggunakan tag standart selama Anda menentukan bahasa pengkodean.

WP-GeSHi-Highlight ringan, baik dari segi fungsionalitas dan kode keluaran:

Fitur Utama:

• Menambahkan syntaxs Highlight menggunakan GeSHi
• Menambahkan penomoran baris
• Sematkan menggunakan tag
• Tag standar dengan bahasa yang ditentukan
• Ringan – hanya menambahkan satu permintaan HTTP

5. Pastebin

Pastebin adalah situs web lain untuk berbagi cuplikan kode. Ini sangat mirip dengan alat GitHub Gist yang saya sebutkan pada nomor tiga tadi. Dan seperti dengan GitHub Gist, plugin ini membuatnya sangat mudah untuk menanamkan kode Pastebin ke situs WordPress Anda.

Yang perlu Anda lakukan adalah menambahkan kode Anda ke Pastebin, maka Anda bisa langsung menempelkan URL Pastebin ke editor WordPress Anda untuk secara otomatis memasukkan potongan kode Anda seperti ini:

Apakah kode tersebut memiliki penyorotan sintaks akan bergantung pada pengaturan yang Anda gunakan di Pastebin.

Fitur Utama:

• Sematkan kode langsung dari Pastebin
• Termasuk nomor baris dan (opsional) syntaxs Highlight
• Cukup tempel URL ke Editor WordPress
• Bisa juga ditempelkan dengan menggunakan shortcode dan Pastebin ID

Baca : Panduan Membuat Postingan di WordPress dan Penjelasan Fiturnya.

Dan itulah cara mudah untuk memasang atau menampilkan kode di postingan WordPress agar terlihat sempurna dan bekerja dengan baik saat di copy oleh pengunjung Anda. Dan juga beberapa plugin yang bisa Anda pilih untuk menjadikan WordPress mampu menampilkan syntax code dengan sempurna di WordPress. Semoga artikel ini bermanfaat buat Anda dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis