Home » Tutorial » Wordpress » Cara Menggunakan Syntaxhighlighter di WordPress

Cara Menggunakan Syntaxhighlighter di WordPress

loading...

Cara Menggunakan Syntaxhighlighter di WordPress – Bila anda memposting artikel di wordpress tentunya anda mengerti bahwa terkadang bila saat anda menulis artikel tutorial yang perlu menampilkan kode script program seperti php, html, css dan coding program lainnya, tentunya hal ini merupakan salah satu hal yang sulit dilakukan bila belum mengerti cara melakukannya. Terkadang bila kita tidak menulisnya secara benar maka kode script yang ditampilkan tidak seperti yang diharapkan. Salah satu cara yang pernah saya lakukan untuk menampilkan script html, css dan sebagainya saya mengetikkannya dulu di Microsoft Word lalu setelah selesai menuliskan script tersebut, kemudian menggunakan tools yang banyak tersebar di internet yang bisa digunakan secara gratis untuk memparse kode tersebut lalu memasukkannya atau menyisipkannya ke dalam salah satu post artikel yang belum di publish yang perlu menampilkan script tersebut di wordpress pada posisi EDIT HTML bukan Visual. Namun sayangnya bila ditampilkan kayaknya kurang menarik bila dilihat.

Bila anda ingin menampilkan script kode tertentu dengan tampilan yang menarik, maka anda bisa menggunakan salah satu plugin WordPress untuk melakukannya yaitu Syntaxhighlighter Evolved buatan Alex Mills (Viper007Bond). Mungkin anda penasaran bagaimana perbedaan menulis script dengan menggunakan plugin dengan tanpa plugin yang hanya memparse kode scriptnya ? Lihatlah perbedaannya dibawah ini.

Perhatikan contoh penulisan script tanpa plugin dibawah ini

<div class="relatedposts">
<h3>Artikel Terkait Lainnya</h3>
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>10, // jumlah artikel terkait lainnya.
'orderby'=>date,
'caller_get_posts'=>1

Perhatikan contoh penulisan script yang dibantu menggunakan plugin WordPress yaitu Syntaxhighlighter Evolved

<?php  
        $orig_post = $post;  
        global $post;  
        $tags = wp_get_post_tags($post->ID);  
          
        if ($tags) {  
        $tag_ids = array();  
        foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;  
        $args=array(  
        'tag__in' => $tag_ids,  
        'post__not_in' => array($post->ID),  
        'posts_per_page'=>8, // Number of related posts to display.  
	'orderby'=>rand,
        'caller_get_posts'=>1  
        );            
        $my_query = new wp_query( $args );        
        while( $my_query->have_posts() ) {  
        $my_query->the_post();  
        ?>  

Bagaimana menurut anda mana yang kelihatan lebih menarik dilihat yang menggunakan plugin atau bukan ?

Bila anda tertarik menggunakannya maka anda perlu menginstall dulu plugin Syntaxhighlighter Evolved ke blog wordpress anda.

Cara Install Plugin Syntaxhighlighter Evolved di WordPress

Anda bisa membaca artikel saya terdahulu cara menginstall plugin di wordpress , tetapi untuk membantu anda melakukannya maka perhatikan  penjelasan singkat step by step menginstall plugin syntaxhighlighter di wordpress dibawah ini:

  • Buka Halaman Admin WordPress Anda, misalnya nama blog anda adalah artikel-diet.net maka silahkan membukannya dengan mengetikkan url artikel-diet.net/wp-admin kemudian anda masukkan user dan passwordnya untuk masuk ke halaman Admin WordPress anda.
  • Kemudian Klik Plugins kemudian klik Add New
  • Masukkan nama plugin yang ingin diinstall pada kotak yang tersedia di sebelah kanan atas yaitu Syntaxhighlighter Evolved kemudian tekan tombol Enter
  • Setelah menemukan plugin yang anda cari tekan tombol Install
  • Saat muncul kotak pop up dengan kalimat “ Are you sure want to install this plugin ?” klik OK
  • Kemudian Klik Activate Plugin untuk mengaktifkan plugin Syntaxhighlighter Evolved di wordpress anda.

Lalu bagaimana settingan plugin ini biar sama dengan contoh penulisan scritp diatas, yaitu Highlighter Version yang dipilih adalah yang version 3.x, color theme : default dan Load All Brushes tidak diceklist, serta settingan lainnya untuk plugin syntaxhighlighter perhatikan gambar dibawah ini, namun anda bisa merubah settingan sesuai dengan keinginan anda serta lihat hasilnya.

settingan plugin syntaxhighlighter evolved di wordpress

Cara Menggunakan Plugin Syntaxhighlighter Evolved di WordPress

  • Cara menggunakan Syntaxhighlighter Evolved cukup mudah yaitu anda cukup menuliskan script seperti biasanya tetapi diawal dan diakhir harus diapit oleh kode[ php] dan [ /php]. Sehingga penulisannya secara umum adalah

    [ php] tulis script anda disini [ /php]

  • Yang perlu anda perhatikan dalam menulis script ini saat menulis artikel di wordpress dalam posisi pengeditan HTML bukan dalam keadaan Visual.

Masalah Plugin Syntaxhighlighter Evolved Yang Tidak Berfungsi di WordPress

Bila saat menggunakan plugin Syntaxhighlighter Evolved tidak bekerja sebagaimana mestinya, maka ada beberapa hal yang perlu anda lakukan agar plugin ini bekerja secara normal. Saya pernah mengalami saat memposting artikel yang menampilkan script tertentu yang tampil hanya kode script dengan latar belakang putih saja, saat itu saya mencari referensi dari situs pembuat plugin ini yang menampilkan beberapa cara yang perlu dilakukan yaitu

  • Memastikan pada theme wordpress pada bagian file footer.php sudah memasukkan kode <?php wp_footer(); ?>
  • Merubah ke Theme wordpress lainnya

Tetapi setelah saya cek css pada wordpress yang saya miliki, ternyata menampilkan apa yang disarankan oleh pembuat plugin ini, serta merubah ke theme wordpress lainnya tetapi gagal juga, sehingga membuat saya melakukan mengutak-atik settingan plugin ini sampai beberapa jam dan mengulangnya untuk beberapa hari kemudian tetapi belum memberikan hasil yang berarti, sampai menghapus pengaturan tag <pre> pada css wordpress tapi tidak berhasil juga, hingga hampir pada titik saya akan pasrah dan menyerah dengan keadaan ini, tidak sengaja melihat di salah satu forum berbahasa Inggris yang membicarakan plugin ini, salah satu komentator menyarankan untuk menonaktifkan sementara dulu semua plugin selain Syntaxhighlighter Evolved lalu mengaktifkannya kembali plugin yang telah dinonaktifkan tersebut.

Cara Mengatasi Masalah Syntaxhighlighter Evolved Tidak Berfungsi

  • Nonaktifkan semua plugin selain Syntaxhighlighter Evolved
  • Kemudian aktifkan kembali plugin yang dinonaktifkan tersebut
  • Saat anda menonaktifkan semua plugin kecuali plugin Syntaxhighlighter Evolved dan plugin ini berfungsi dengan baik, namun tidak berfungsi kembali saat mengaktifkan kembali semua plugin yang ada, maka ini berarti ada salah satu plugin atau beberapa plugin yang mengganggu kerja Syntaxhighlighter Evolved ini, maka anda perlu mengaktifkannya secara satu persatu lalu melihat hasilnya untuk mengetahui plugin mana yang bermasalah. Bila ditemukan maka nonaktifkan plugin tersebut atau uninstall saja dari blog wordpress anda.

Semoga artikel terkait Cara Menggunakan Plugin Syntaxhighlighter Evolved di WordPress bisa bermanfaat bagi anda yang baru mau menggunakan plugin ini.

Ini Yang Anda Cari :

cara menggunakan syntax highlighter di wordpress |

One thought on “Cara Menggunakan Syntaxhighlighter di WordPress

  1. Hilman says:

    Artikel nya sangat menarik dan mudah dipahami, silahkan kunjungi tulisan sejenis yang saya punya
    Disini

Leave a Reply

Your email address will not be published. Required fields are marked *