Menulis source code di WordPress

Assalamu’alaikum

Akhirnya,

Setelah kesana kemari cari-cari tutorial mengenai cara menulis SC di blog alhasil ketemu juga. Setalah sekian lama dan mungkin palah belum pernah memposting tulisan terkait jurusan dan salah satu hobi saya yang lain yaitu coding dan utak atik script, terutama sekali berhubungan dengan web design.

Banyak -tidak terlalu banyak si- projek yang sudah saya buat dan ingin sekali berbagi, namun kendala-nya adalah bagaimana menampilkan source di blog dengan bisa menghiasinya secara warna-warni serta ada nomer baris per baris mirip di Editor Notepad++ maupun Dreamwever. Dan wordpress ternyata sudah menyediakan fasilitas tersebut.

Kemungkinan jika tidak ada fasilitas tersebut -yang akan saya praktekan nanti- akan sangat sulit sekali jika kita ingin menghias SC secara menarik. Dan lagi sangat rumit jika harus membuat coding sendiri lewat Editor HTML yang telah disediakan oleh wordpress.

Dan wordpress sudah menyediakan tag sendiri yaitu

[ sourcecode language=”parameter”]

source code

[ /sourcecode]

Mari kita praktekan

caranya yaitu dengan menuliskan script sederhana berikut pada tab Visual -sebelah kirinya HTML-

[ sourcecode language=”html”]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”j_gambar/icon.png” rel=”shortcut icon” type=”image/x-icon” />
<link href=”j_css/style.css” rel=”stylesheet” type=”text/css” />
<script src=”j_js/js.js” language=”javascript”>

</script>
<title>Halaman depan</title>
</head>
<body onload=”slide()”>
<table width=”920″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”>
<tr>
<td>
<div id=”isi_header”></div>
</td>
</tr>
</table>

<table width=”920″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”>
<tr>
<td>
<div id=”nav_kiri”><!–letak kiri bukan isi–>
<div id=”isi_kiri” class=”kotak”>
<li><div class=”judul_kiri”>Internal</div></li>
<li><div class=”sub_kiri”><a href=”#”>Kalibeber</a><hr /></div></li>
<li><div class=”sub_kiri”><a href=”#”>Mojotengah</a><hr /></div></li>
<li><div class=”sub_kiri”><a href=”#”>Wonosobo</a><hr /></div></li>
<li><div class=”sub_kiri”><a href=”#”>Jawa Tengah</a><hr /></div></li>

</div>
</body>
</html>

[/sourcecode ]

*tidak harus ditebal

taraaaaaa, hasilnya seperti ini ni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="j_gambar/icon.png" rel="shortcut icon" type="image/x-icon" />
<link href="j_css/style.css" rel="stylesheet" type="text/css" />
<script src="j_js/js.js" language="javascript">

</script>
<title>Halaman depan</title>
</head>

<body onload="slide()">
<table width="920" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div id="isi_header"></div>
</td>
</tr>
</table>

<table width="920" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div id="nav_kiri"><!--letak kiri bukan isi-->
<div id="isi_kiri" class="kotak">
<li><div class="judul_kiri">Internal</div></li>
<li><div class="sub_kiri"><a href="#">Kalibeber</a><hr /></div></li>
<li><div class="sub_kiri"><a href="#">Mojotengah</a><hr /></div></li>
<li><div class="sub_kiri"><a href="#">Wonosobo</a><hr /></div></li>
<li><div class="sub_kiri"><a href="#">Jawa Tengah</a><hr /></div></li>

</div>
</body>
</html>

Karena jika kita langsung menuliskan script pada tab HTML tanpa memakai tag  [sourcecode language=”html”] [/sourcecode] maka wordpress akan membaca script kita sebagaimana pada tampilan browser.

Nah,

value parameter bisa kita ganti sendiri sesuai dengan script yang akan kita tempelkan, dan wordpress -setahu saya menyediakan- beberapa value parameter untuk sourcecode antara lain

  • html
  • xml
  • php
  • css
  • javascript
  • java
  • vb
  • actionscript
  • sql
  • text

dan lain sebagainya,,,(soalnya saya belum coba-coba banyak …hhe), mungkin bagi teman-teman yang baca tulisan ini bisa kasih tahu script apa saja yang bisa dibaca, kita share bareng-bareng aja yaks, oke ?!! 🙂

Semoga bermanfaat

Wassalamu’alaikum

Advertisements

One thought on “Menulis source code di WordPress

Comments are closed.