Tutorial WordPress

Suatu saat Anda ingin menampilkan peta di website, misalnya saja Anda ingin menampilkan suatu lokasi. Caranya cukup mudah, ikuti langkah berikut.

• Buka Google Maps (maps.google.com) dan cari lokasi yang ingin Anda tampilkan. Ketikkan lokasi Anda di kolom [Search].
• Setelah lokasi yang Anda maksudkan tertampil, klik menu [Link] yang berada di sudut kanan atas peta. Dari situ muncul jendela yang berisi link dan kode HTML, klik [Customize and preview embedded map].

• Pada jendela pengaturan peta yang muncul kemudian, pilih ukuran peta yang Anda inginkan. Pilihannya [Small], [Medium], [Large], atau isikan ukuran peta – dengan satuan pixel – pada pilihan [Custom].

• Peta yang akan tertampil di website Anda terlihat di Preview. Pada Preview tersebut Anda dapat menggeser-geser peta agar lokasi tertampil sesusai dengan yang Anda kehendaki. Setelah Anda puas dengan ukuran dan tampilan petanya, copy-lah kode HTML yang berada di bawah Preview. (Caranya, klik kode tersebut sehingga terseleksi, klik-kanan, dan pilih [Copy].)

• Login-lah ke website WordPress Anda, dan pilih menu [Appearance][Widget]. Pilih widget Text dan paste kode HTML tadi. Isikan judul peta Anda pada kolom judul widget Text tersebut bila perlu. Klik [Save] untuk menyimpan kode tersebut pada widget Text.
• Kini lihat website Anda, peta sudah tertampil di sidebar. Bila Anda kurang puas dengan ukuran peta, editlah kode HTML pada widget Text tadi, yaitu ubah angka pada “height” (tinggi) dan “width” (lebar). Ubah-ubahlah hingga Anda menemukan ukuran yang pas dengan sidebar Anda. Klik [Save] setiap Anda melakukan pengubahan.
• Bila Anda ingin menyisipkan peta pada artikel Anda, bukan pada sidebar, sisipkan kode HTML di dalam artikel, tapi lebih dahulu Anda pilih mode edit [HTML].

Nah, tunjukkan lokasi pesta perkawinan, jalur bersepeda, atau tempat lainnya, dengan menampilkan peta seperti cara di atas. (Tutorial WordPress)

Anda ingin menampilkan jam di blog WordPress Anda? Caranya cukup mudah karena WorldTimeServer.com telah menyediakan tampilan jam yang siap Anda pindahkan ke blog Anda. Untuk itu ikuti tutorial berikut ini.

• Kunjungi WorldTimeServer.com dan masuklah ke halaman Clock Gallery.
• Pada halaman tersebut Anda akan menemui dua tampilan jam (clock) analog yang akan Anda tampilkan di blog Anda, yaitu clock 12-jam dan, yang kurang umum, 24-jam.

• Klik [for a 12 hour analog clock, click here] misalnya Anda memilih clock yang 12-jam.
• Berikutnya akan ditampilkan pengaturan clock yang telah Anda pilih. Anda dapat memilih warna clock analog Anda sesuai selera dan warna theme blog Anda. Terdapat 24 warna yang tinggal Anda pilih. Kalau merasa belum cocok dengan pilihan warna yang ada, Anda dapat mengisikan kode warna yang Anda ingini pada isian [Custom Hex].

• Selanjutnya, pada pilihan [Size] tentukan ukuran clock, default-nya 200 pixel. Pada isian [Location], misalnya Anda memilih Indonesia – (Western), maka[City Name] otomatis akan terisi “Jakarta”. Dan terakhir klik tombol [Update HTML Code].

• Copy-lah kode pada [Option 1: Object HTML Code].
• Login-lah ke admin WordPress Anda.
• Klik [Widgets] pada menu [Appearance]. Pilihlah widget Text, masukkan (paste) kode yang sebelumnya telah di-copy. Setelah itu klik [Save]. Sekarang lihat halaman muka blog Anda, dan jam telah terpampang. [TUTORIAL WORDPRESS]

Pengelolaan widget pada WordPress 2.8 lebih mudah dibandingkan pada versi sebelumnya – seperti yang telah dikemukakan pada posting sebelumnya. Namun fitur drag & drop pada pengelolaan widget tersebut tidak sekedar menyeret widget dari daftarnya di sebelah kiri ke sebelah kanan. Anda harus “menjatuhkan” widget di dalam kotak tepat di bawah widget yang telah terpasang. Kalau Anda menjatuhkannya di luar kotak itu, widget tak akan berada di kolom sidebar. Seperti pada gambar di bawah ini, widget harus Anda “jatuhkan” tepat di bawah widget Archives dan masuk di dalam kotak.

Selain itu, bila Anda baru saja mengganti theme, biasanya widget belum ada. Sehingga kotak yang dimaksudkan di atas belum muncul seperti pada gambar di bawah ini.

Bila Anda “menjatuhkan” widget tepat di bawah label “Right Navigation” (lihat gambar atas), widget tidak akan mau berada di situ. Untuk itu Anda harus memunculkan kotaknya, yaitu caranya dengan mengklik tanda panah yang ada di sebelah kanan nama siderbar (pada gambar di atas di sebelah kanan “Right Navigation”). Bila Anda telah mengkliknya, akan terlihat kotak seperti gambar di bawah ini. Di dalam kotak itulah Anda harus “menjatuhkan” widget.

Fitur drag & drop ini di satu sisi memang memudahkan. Tetapi bila layar komputer Anda sempit, seperti pada netbook, fasilitas drag & drop ini justru menyusahkan, terutama bila widget yang Anda inginkan berada di bawah. Untuk menyeretnya (drag) Anda harus sambil menggulung layar ke atas. Akan lebih sulit lagi bila Anda menggunakan track-pad, bukan mouse. Memang tak ada gading yang tak retak…

Theme tertentu menyediakan ruang iklan, biasanya di sidebar dan header (lihat gambar di bawah ini), seperti yang juga telah dibahas pada artikel sebelumnya.

Bagaimana cara menyisipkan iklan di tempat tersebut? Berikut ini caranya.

• Pasang dan aktifkan theme tersebut. Misalnya Anda akan menyisipkan iklan di sidebar yang sebelah dalam yang berukuran 160x600pixel (lihat gambar di atas). Untuk siapkan kode iklan, copy kode tersebut. (Cara meng-copy-nya, buka kode iklan Anda menggunakan Notepad, blok kode tersebut dan tekan Ctrl-C.) Selanjutnya masuklah ke admin WordPress dan klik pilihan [Editor] pada menu [Appearance].

• Setelah muncul layar penyuntingan, lihat pada daftar file program di sebelah kanan. Cari dan klik Sidebar. Pada layar penyuntingan terlihat kode program PHP untuk sidebar.

• Sekarang kita cari kode yang menayangkan ruang iklan di sidebar tersebut. Kita temukan kode yang diapit oleh <a dan /a>. Blok kode tersebut tersebut kemudian tekan Ctrl-V untuk mem-paste kode iklan yang sebelumnya ada di Notepad tersebut di atas.

• Kini kode iklan sudah dimasukkan ke dalam program sidebar.php. Klik [Update File]. Kini lihat situs Anda, atau tunggu sekitar 15 menit kalau Anda menggunakan kode iklan yang baru Anda buat dari pemasang iklan (Google atau Affiliate Anda). Kalau cara Anda benar, iklan Anda sudah akan terpampang.

Sekali lagi kami ingatkan bahwa cara ini hanya berlaku untuk software WordPress yang Anda instal di webserver, jadi bukan pada blog yang Anda buat di WordPress.com.

Memasang iklan di sidebar bisa melalui widged Text seperti yang dijelaskan sebelumnya. Baca kembali artikel Memasang Iklan di WordPresss. Lalu kalau memasang iklan selain di sidebar (katakanlah di bagian header atau di antara artikel) bagaimana? Sebab, widget Text kan hanya bisa dipasang pada sidebar.

Memang ada cara untuk memasang iklan selain di sidebar. Ada dua cara malahan. Pertama menggunakan plugin semacam Easy Adsenser yang dapat menempatkan kode Adsense di dalam artikel. Bahkan ada plugin yang bisa menempatkan kode Adsense di bawah gambar di dalam artikel Anda, seperti Adsense Under Image.

Cara kedua adalah menggunakan theme tertentu yang menyediakan ruang iklan. Theme semacam ini tidak hanya menyediakan ruang iklan di sidebar tetapi juga di header. Contohnya theme seperti gambar di bawah ini. (Anda bisa melihat penerapannya di WordPress.FreeTutorial.web.id.)

Pada theme di atas, sudah disediakan ruang iklan berukuran 468×60 pixel di header, 160x600pixel memanjang ke bawah di sidebar, dan ukuran 300×250 pixel di sidebar sebelah kanan. Anda dapat menampilkan iklan pada ruang-ruang yang disediakan itu. Bagaimana caranya, ikuti artikel kami selanjutnya.

Anda perlu mengenali file-file theme. Untuk apa? Banyak manfaatnya walaupun sebenarnya Anda tinggal memakai saja theme tersebut. Manfaatnya antara lain bila Anda ingin mengganti gambar header/footer atau gambar di tempat lain, mengganti logo yang muncul di tab browser, menyisipkan iklan pada theme tertentu, dan lain-lain.

File-file themes terdiri atas program CSS, PHP, dan gambar. Semua file ini yang membentuk tampilan blog WordPress Anda. Tampilan WordPress pada dasarnya terdiri atas header (bagian atas), sidebar (bagian samping – bisa kiri dan kanan), bagian content (isi/artikel), dan footer (bagian bawah).

Layout secara umum dibentuk oleh file/program style.css. Header dibentuk oleh file header.php, sidebar oleh sidebar.php, dan footer oleh footer.php. Masih ada satu file lagi yaitu index.php yang merekatkan bagian isi (content) dengan header, sidebar, dan footer. Inilah file-file dasar yang mesti ada pada theme. Selebihnya adalah variasi atau tambahan seperti rsidebar.php misalnya yang merujuk untuk membentuk sidebar bagian kanan (right sidebar).

Coba lihat file theme Anda dengan memekarkan file theme yang sudah Anda download. Atau Anda juga bisa melihatnya di folder wp-content\themes\’nama-themes’; bisa di webserver atau di PC Anda bila Anda install WordPress di PC. Gunakan cPanel atau program FTP client bila Anda ingin melihatnya di webserver.

Anda juga bisa melihat dan bahkan menyunting file-file theme melalui menu [Appearance][Editor]. Penyuntingan ini akan dibahas pada artikel mendatang, yaitu saat pembahasan penyisipan iklan di dalam theme. Ikuti saja postingan kami mendatang.

Sebelumnya pernah dibahas cara menampilkan gambar di sidebar. Tetapi cara yang dikemukakan sebelumnya terlalu rumit. Berikut cara sederhananya.

• Siapkan gambar yang akan ditampilkan di sidebar. Upload gambar ini ke Library (caranya lihat lagi artikel “Mengunggah Gambar ke Library“).
• Cari tahu URL gambar ini (baca lagi artikel “Mengetahui URL Gambar“).
• Sekarang klik pilihan [Widgets] pada menu [Appearance]. Klik [Add] pada widget Text. Klik [Save Changes] dan klik [Edit] pada widget Text ini.
• Isikan pada bagian bodytext kode ini (jangan menekan Enter ketika menulis kode ini dari <a sampai dengan a>): <a href=”http://www.ABC.com/”><img src=”http://www.DEF.com/gambar.jpg” width=”144″ height=”56″ /></a>

• Gantilah http://www.ABC.com/ dengan alamat URL (link) tujuan (bila gambar nantinya diklik maka akan menuju ke alamat ini). Ganti pula http://www.DEF.com/gambar.jpg dengan URL dari gambar yang Anda akan tampilkan. Ganti angka pada width dan height sesuai dengan lebar dan tinggi gambar (dalam satuan pixel). Setelah mengetikkan kode klik [Done] dan [Save Changes].
• Bila Anda hanya ingin menampilkan gambar dan tidak ada link untuk gambar tersebut, maka hapuslah href=”http://www.ABC.com/” sehingga kodenya menjadi: <a><img src=”http://www.DEF.com/gambar.jpg” width=”144″ height=”56″ /></a>

Selamat mencoba.