Cara Menulis Kode Pemrograman Pada WordPress

0

Menulis kode pada WordPress dapat dilakukan dengan dua cara. Untuk pengguna WordPress.com dengan paket gratis dapat dilakukan dengan tanpa plugin. Namun bagi anda yang menggunakan paket berbayar atau WordPress self-hosted akan lebih maksimal menggunakan plugin. Berikut dijelaskan cara menulis kode pemrograman atau source code/syntax di WordPress tanpa plugin dan menggunakan plugin.


A. Cara Menulis Kode Pemrograman Tanpa Plugin

Banyak hal yang bisa anda pertimbangkan mengapa anda tidak menggunakan plugin untuk menulis kode pada WordPress. Misalkan karena intensitas untuk menampilkan kode program yang sedikit, meminimalkan logika website sehingga kecepatan website tidak berkurang ataupun masih dalam paket gratis WordPress.com.

Untuk menulis kode pemrograman anda dapat menggunakan syntax HTML berikut.Pre Syntax

Syntax pre merupakan syntax tag HTML untuk mendefinisikan preformatted text pada website anda.

Baca juga: Cara Membuat Post Menggunakan WordPress

  1. Masuk ke Halaman Editor Post

    Untuk menulis kode pemrograman masuk ke admin dasbor WordPress anda dengan mengakses www.nama-website.com/wp-admin lalu edit atau buat post baru anda yang akan berisi kode pemrograman untuk ditampilkan. Gunakan mode teks untuk menulis syntax pre sebagai berikut,

    Menulis kode program di wordpressCatatan: mode teks memungkinkan untuk menambah kode html manual pada postingan WordPress

  2. Pratinjau Kode Pemrograman Anda

    Setelah anda selesai menulis kode pemrograman anda dapat melihat hasilnya. Kode program berada dalam div box berwarna abu-abu dan font khusus pada front end situs anda. Dapat diilustrasikan sebagai berikut.

    Tampilan-kode-program pada postingan

  3. Simpan Post Anda

    Selamat anda sudah berhasil menulis kode program di situs WordPress anda.


B. Cara Menulis Kode Pemrograman dengan SyntaxHighlighter Evolved

Plugin SyntaxHighlighter Evolved adalah plugin untuk menulis kode pemrograman terbaik dan gratis yang dapat anda unduh melalui WordPress Plugin Repository. Dengan menggunakan plugin ini anda dapat menulis kode pemrograman menggunakan shortcode melalui editor post situs WordPress anda.

Baca juga: Cara Install/Memasang Plugin WordPress.

Berikut langkah-langkahnya:

  1. Memasang dan Mengaktifkan Plugin SyntaxHighlighter Evolved

    Pasang dan aktifkan plugin SyntaxHighlighter Evolved, anda dapat unduh langsung pada admin dasbor WordPress anda atau unduh secara manual melalui WordPress plugin repository.

    SyntaxHighlighter Evolved
    SyntaxHighlighter Evolved
  2. Mengakses SyntaxHighlighter Evolved

    Setelah anda berhasil mengaktifkan plugin SyntaxHighlighter Evolved, maka anda dapat mengakses konfigurasi plugin di Panel Pengaturan (Settings) » SyntaxHighlighter. Anda dapat melakukan konfigurasi shortcode, tampilan serta konfigurasi lainnya melalui Panel ini.

    Panel SyntaxHighlighter Evolved

    1. Version

      Anda dapat memilih versi javascript dari plugin ini. Versi 3.x untuk mempermudah aksesibilitas pengunjung menggunakan mouse sedangkan versi 2.x lebih ringan karena syntax javascript lebih sederhana, namun pengunjung tidak dapat melakukan scrolling menggunakan scroll mouse apabila syntax dalam satu baris terlalu panjang.

    2. Color Theme

      Untuk merubah tampilan desain di front end website anda.

    3. Load All Brushes

      Untuk replace HTML tag pre menjadi shortcode SyntaxHighlighter Evolved.

    4. Display line number

      Untuk menampilkan angka baris pada front end website anda.

    5. Display the toolbars

      Untuk menampilkan toolbars SyntaxHighlighter Evolved di front end situs anda.

    6. Automatically make URLs clickable

      Jika terdapat anda menuliskan URL pada kode, user dapat melakukan klik melalui URL tersebut

    7. Collapse Code Boxes

      Untuk meminimalkan tampilan kode pada front end website anda, pengunjung perlu melakukan klik untuk melihat detail kode.

    8. Use the light display mode, best for single lines of code

      Mengaktifkan tampilan minimalis.

    9. Use smart tabs allowing tabs being used for alignment

      Mengaktifkan tab untuk indent saat menulis kode.

    10. Wrap long lines

      Menyesuaikan layar sehingga kode dapat dilihat tanpa scroll vertikal (hanya untuk versi 2.x).

    11. Additional CSS Class(es) 

      Untuk menambah class CSS khusus.

    12. Starting Line Number

      Untuk mengatur urutan baris dimulai dengan angka tertentu.

    13. Line Number Padding 

      Untuk menambahkan padding pada line number.

    14. Tab size 

      Merubah ukuran tabulasi.

    15. Title 

      Kalimat pembuka setiap kode yang ditampilkan pada front end website anda.

    16. Klik Save Changes/Simpan Perubahan

      Untuk menyimpan perubahan anda juga dapat langsung melihat preview di bagian bawah. 

      Panel Preview

  3. Parameter Penulisan Shortcode SyntaxHighlighter Evolved

    Shortcode Parameter

  4. Membuat Kode Pemrograman

    Misalkan akan dibuat kode berikut pada suatu post

    Contoh SyntaxHighlighter Evolved

  5. Shortcode Yang Diperlukan

    Contoh Shortcode
    Contoh Shortcode

    Anda hanya perlu menambah shortcode pada editor post dan menyimpannya. Maka tampilan no 5 akan muncul di front end post anda.

  6. Selamat Mencoba

Baca juga: Menulis Rumus Matematika di WordPress dengan MathJax


Sekian artikel Cara Menulis Kode Pemrograman Pada WordPress. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke kerabat anda. Terimakasih…

AYO BERKOMENTAR

Tulis komentar
Masukkan nama Anda