Guntingbatukertas.com

“Saya penasaran, masa gambar di WordPress ngga bisa diutak-atik? Kalo dibiarin gitu aja, tampilannya jelek donk”, komentar temen ketika liat hasil tampilan default WordPress. Dia pengen gambar Dalam bahasa asalnya, istilah umum WordPress yang sering dipakai untuk pembahasan ini adalah ‘Wrapping text around images‘. Sebenarnya agak susah bagi saya untuk menemukan kata-kata yang tepat dari kata ‘wrapping text‘. Bagi saya yang paling mudah pake terjemahan bebas aja, menempatkan tulisan di seputar gambar. Persis seperti saya yang sudah saya lakukan pada gambar di samping ini.

Catatan singkat berikut ini akan mengulas apa sebenarnya Wrapping text dan bagaimana cara penerapannya dalam WordPress sehingga ruang kosong yang biasanya ada di sisi kiri atau kanan gambar bisa ditempati tulisan. Saya rasa semua sepakat jika dikatakan tampilan standar WordPress masih terlalu kaku dan sayang jika tidak dimaksimalkan. Kita akan mengubah tampilan ini menjadi sesuati yang mengagumkan!

Sebenarnya konsep ini adalah konsep dasar yang sudah lama ada dalam bahasa pemrograman HTML. Konsep ini juga diadopsi dalam WordPress. Sebagai program Content Management System (CMS) WordPress mengemas fasilitas ini dalam file suatu file Cascading Style Sheet. CSS merupakan daftar yang memberikan fasilitas pengaturan lengkap WordPress Anda.

Secara default CSS WordPress selalu menset gambar Anda rata kiri tanpa ada teks sedikitpun di samping kanan gambar Anda. Ini yang akan kita ubah!

Pertama, untuk memulai temukan dan edit file style.css dengan program Editor Teks. File ini berada di folder Theme dalam WordPress Anda. Untuk menjaga kemungkinan kesalahan, pastikan Anda telah meng-copy file ini di tempat lain.

Langkah Kedua, temukan baris kode di bawah ini. Di template yang lain mungkin akan berbeda, silakan cari dengan kata kunci left, right, center, atau align.

img.alignleft {
float: left;
padding: 10px;
margin: 0 10px 0 0;
}
img.alignright {
float: right;
padding: 10px
margin: 5px 0 5px 10px;
}
img.aligncenter {
margin: 10px auto;
text-align: center;
display: block;
}

Dalam file Style.css tertulis setting untuk tiap style pengaturan gambar yang disediakan WordPress. Beberapa baris diatas dapat diterjemahkan sebagai berikut:

1. img.alignleft mengatur setting gambar rata kiri
2. img.alignright mengatur setting gambar rata kanan, dan
3. img.aligncenter untuk gambar rata tengah.
4. float: menentukan alignment/aturan perataan gambar
5. padding: nilai ruang kosong di batas luar gambar (dalam px/pixel).
6. margin: nilai berisi ruang kosong yang dijadikan pembatas gambar dengan objek di sekitarnya. Baris ini berisi nilai yang sesuai urutan menentukan Batas Atas, Batas Kanan, Batas Bawah dan Batas Kiri. Batas ini mirip dengan setting Page> Setup di Microsoft Word atau Page > Setting di Open Office.
   Catatan: perhatikan tiga baris yang dibuat tebal. Nanti kita akan melakukan praktek dengan istilah tersebut.

Langkah Keempat, Tulis sebuah post, di sini saya akan langsung berikan contoh di bawah ini. Jika anda switch ke tampilan kode HTML, tampilannya seperti ini:

<a href=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg”><img class=”alignnone size-medium wp-image-111″ title=”warp-text” src=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg” alt=”" width=”107″ height=”160″ /></a>Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kanan teks. Tulisan Anda tentang sapi ada di sini. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Perhatikan pada teks tebal. Secara default WordPress men-setting alignment gambar sebagai alignnone, alias tidak ada aturan alignment yang dipakai. Berdasarkan Style.css Untuk bereksperimen, mari kita ganti alignnone menjadi alignright. Tampilan yang Anda dapatkan akan seperti ini.

Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kanan teks. Tulisan Anda tentang sapi ada di sini. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Selanjutnya jika kita ganti tulisan tersebut di atas menjadi alignleft, akan tampak seperti di bawah ini.

<a href=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg”><img class=”alignleft size-medium wp-image-111″ title=”warp-text” src=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg” alt=”" width=”107″ height=”160″ /></a>Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kiri teks. Tulisan Anda tentang sapi ada di sini. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kiri teks. Tulisan Anda tentang sapi ada di sini. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Bagaimana dengan tampilan aligncenter? Ubah kode seperti ini:

<a href=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg”><img class=”alignright size-medium wp-image-111″ title=”warp-text” src=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg” alt=”" width=”107″ height=”160″ /></a>Ini adalah teks yang akan melingkupi seputar gambar yang berada di tengah teks. Tulisan Anda tentang sapi ada di sini. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Ini adalah teks yang akan melingkupi seputar gambar yang berada di tengah teks. Tulisan Anda tentang sapi ada di sini. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktusehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang sapi berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Kurang puas?

Ada cara lain untuk mengubah posisi gambar berikut teks yang melingkupi gambar. Yakni dengan cara memasukkan kode alignment ke dalam kode HTML tanpa harus mengikuti aturan Style.css.

Saya akan memasukkan kode

style=””border:0pt none; float:right; padding-right:10px; padding-bottom:10px”

dalam tag img secara langsung. Perhatikan, kode ini harus berada dalam lingkup tag img. Agar mudah dikenali lagi untuk diedit, saya sarankan untuk memasukkan di bagian awal sebelum tag src. Lebih jelasnya perhatikan kode di bawah. Saya sudah beri tulisan tebal pada tag img dan src.

<a href=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text2.jpg”><img class=”alignnone size-medium wp-image-111″ style=””border:0pt none; float:left; padding-right:10px; padding-bottom:10px” title=”warp-text” src=”http://guntingbatukertas.com/wp-content/uploads/2009/01/warp-text.jpg” alt=”" width=”107″ height=”160″ /></a>Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kanan teks. Tulisan Anda tentang perahu ada di sini. Ya, itu saja, tulisan Anda tentang perahu berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang perahu berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kanan teks. Tulisan Anda tentangperahu ada di sini. Ya, itu saja, tulisan Anda tentang perahu berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang perahu berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Sama halnya jika Anda ingin mengganti gambar agar bisa rata kiri. Tinggal ganti alignment menjadi :

style=””border:0pt none; float:left; padding-left:10px; padding-bottom:10px”

Maka tampilannya akan menjadi seperti ini:

Ini adalah teks yang akan melingkupi seputar gambar yang berada di sisi kiri teks. Tulisan Anda tentang perahu ada di sini. Ya, itu saja, tulisan Anda tentang perahu berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Ya, itu saja, tulisan Anda tentang perahu berada di sini. Tulisan ini bisa diedit setiap waktu sehingga sesuai dengan yang Anda inginkan. Betul, cukup ini saja.

Tunggu dulu! Ada cara yang lebih cepat lagi! Jika Anda perhatikan, pada saat upload gambar dalam WordPress, maka akan tampak popup window seperti ini:

Perhatikan pada bagian Alignment (diberi warna hijau), ada 4 pilihan: none, left, center dan right. Anda cukup memilih salah satu dari tiga alignment yang ada, selain none. Secara otomatis WordPress akan menatakan gambar Anda dengan baik. Cukup mudah bukan?

Selanjutnya tinggal Anda buat kreasi dan inovasi anda. Saya tunggu hasil Anda..