10 Tips Tipografi untuk kenyamanan membaca

Tipografi adalah seni penataan dan pemilihan huruf. Dalam web tipografi dimaksimalkan untuk memberikan kenyamanan pengunjung dalam membaca. Nah, berikut ini beberapa tips yang bisa diterapkan pada blog kita. Saya ambil dari web favorit saya CatsWhoCode.com

Perbaiki Tinggi Baris (Line Height)

Kesalahan yang sering terjadi pada tipografi banyak web adalah tinggi baris yang kurang tepat. Tinggi baris seharusnya berdasarkan ukuran font. Sebagai panduan, saya biasanya menggunakan 7px dari ukuran font saat men-setting line-height pada CSS. Sedangkan ukuran font-nya antara 12 – 15 px. Continue reading 10 Tips Tipografi untuk kenyamanan membaca

Membuat File Single.php, archive.php, dll

Sesuai janji, hari ini saya akan share bagaimana cara membuat file-file wordpress themes yang jumlahnya berjibun itu. Sebenarnya file-file itu isinya sama kok. Hanya saja fungsinya berbeda-beda. Bahkan sebenarnya kalau isinya sama semua dengan index.php anda tidak perlu membuatnya.

Oke, sekarang akan jelaskan lebih dahulu skema perintah file di WordPress.

Saat anda mengetikkan URL, maka WordPress akan melakukan analisa, ini URL apa? Apakah halaman utama, arsip kategori, arsip tanggal, artikel, page atau kategori? Setelah tahu ini URL apa, WordPress kemudian akan mencari file template yang sesuai: Continue reading Membuat File Single.php, archive.php, dll

Memecah Sidebar

Oke, kita lanjutkan kegiatan memecah belah kita hehehe.. Jika sebelumnya kita telah memisahkan header dan footer, tapi bagian konten dan sidebar kan masih menyatu tuh di index.php. Nah, sudah saatnya kita ceraikan mereka hahahaha….

Baik, langsung aja buka index.php lalu cari kode yang membangun sidebar. Kalau anda mengikuti pelajaran themes ini dari awal, harusnya kode sidebarnya seperti ini:
Continue reading Memecah Sidebar

Memecah File Themes

Baiklah, karena ke depan kita akan melakukan modifikasi themes yang lebih expert lagi, rasanya akan sangat memusingkan kepala kalau kita masih juga bekerja dengan 1 file index.php dan 1 file functions.php kita butuh file-file lain untuk mengelola semua tampilan themes. Sekaligus memperkenalkan masing-masing fungsi file yang biasanya terdapat di themes2 gratisan.

Baiklah, sebagai awal, silahkan anda buka file index.php didalam file ini sebenarnya terkandung banyak file hehehe… Tapi anda tidak sadar kan? Baiklah. Untuk awalnya, kita pecah dulu file index.php ini menjadi 3 file yaitu header.php, index.php dan footer.php

Sebenarnya suka-suka hati anda sih mau memecahnya dimana. Kalau saya biasanya untuk footer, saya ambil dari baris paling awal hingga kode

. Jadi

akan tetap di index.php Ini isi file header.php saya Continue reading Memecah File Themes

Bermain-main dengan Looping WordPress

Untuk memunculkan list artikel, WordPress menggunakan loop system. Biasanya menggunakan perintah while seperti ini:

< ?php while ( have_posts() ) : the_post(); ?>

< ?php endwhile; ?>

Antara while dan endwhile biasanya akan dimasukkan aneka macam hal yang ingin ditampilkan dalam list artikel. Biasanya adalah Judul artikel beserta link ke artikel tersebut, ringkasan artikel, tanggal, kategori, jumlah komentar dan penulisnya. Secara default, semua list itu akan tampil sama persis mulai artikel pertama sampai terakhir. Continue reading Bermain-main dengan Looping WordPress

Membuat Featured Slide Show

Akhirnya kita coba sesuatu yang sedikit rumit.. hehehe.. Jika anda mengikuti panduan ini dari awal, insya Allah panduan berikut biasa-biasa aja. Silahkan copy paste dan modif sendiri koding-kodingnya ya.

Featured slide show adalah sebuah fasilitas di sebuah web berita yang memungkinkan pemilik web berbagi sesuatu yang spesial. Misalnya berita-berita khusus yang penting dan hot atau peristiwa yang langka dan layak diketahui oleh banyak orang. Untuk blog, biasanya dipakai di artikel-artikel khusus. Fasilitas ini dibuat dalam bentuk dinamis dengan animasi yang keren.

Ada macam-macam slideshow sih. Tapi yang coba saya share disini adalah slideshow yang cukup sederhana sehingga mudah untuk memodifikasinya. Anda bisa mengkombinasinya sendiri agar nampak lebih keren misalnya dengan menambah thumbnail dengan ukuran lebih besar khusus untuk slideshow ini. Anda juga bisa memodifikasi tampilannya. Oke, mari kita mulai. Continue reading Membuat Featured Slide Show

Memperbaiki tampilan halaman depan

Melanjutkan artikel sebelumnya tentang cara membuat featured image, sebagaimana dibagian akhir artikel tersebut, tampilan home blog kita masih terlihat berantakan. Ini karena kita masih menampilkan artikel dalam format full HTML sehingga jika kita pasang gambar, sudah tentu akan muncul.

Maka, kita perlu menambah sedikit kode di index.php agar full HTML hanya muncul di halaman single saja. Sedangkan jika ada di home atau arsip, semua kode HTML dinonaktifkan dan hanya menampilkan ringkasannya saja. Caranya? Continue reading Memperbaiki tampilan halaman depan

Memasang Featured Image

Sejak versi 2.9 WordPress memiliki fasilitas baru dengan nama featured image. Ini adalah gambar thumbnail yang mewakili sebuah artikel. Tak banyak blog yang memanfaatkan ini (termasuk blog ini juga), tapi karena kita belajar membuat themes WordPress, jadi kita perlu untuk mempelajarinya juga.

Apalagi, seperti biasa kita lihat di themes-themes premium dimana di bagian home kita bisa melihat sebuah gambar dengan sedikit tulisan dan di bagian artikel, gambar yang lebih besar muncul dengan lebih jelas. Bagaimana sih cara membuatnya? Ternyata gampang lho.

Ada 3 file yang kita edit kali ini yaitu functions.php, index.php dan tentunya style.css untuk mempercantik tampilannya. Continue reading Memasang Featured Image

Search Form Gaya dengan Image

Kalau sebelumnya sudah saya sampaikan bagaimana memasang search form di menu bar, maka di artikel kali ini kita akan melakukan modifikasi agar search form itu bisa tampil lebih gaya. Bagaimana caranya?

Oke, pertama kita perlu memodifikasi kode form yang dipakai sebelumnya:

  

Kita akan ganti menjadi seperti ini: Continue reading Search Form Gaya dengan Image

Lorem Ipsum Test Posting

Secara kasat mata, kita bisa menyatakan jika themes yang sudah kita buat telah siap, tapi kalau belum diujicoba dengan aneka macam jenis artikel, maka themes tersebut masih belum layak untuk disebarluaskan. Untungnya ada paket posting untuk ujicoba.

Paket ini berisi beberapa postingan dengan berbagai macam format penulisan. Dengan cara ini, anda tak perlu pusing-pusing mengujicoba themes untuk berbagai macam kondisi. Cukup impor file xml-nya menggunakan fasilitas impor WordPress dan sim salabim blog ujicoba anda akan memiliki beberapa artikel yang berisi aneka format penulisan. Continue reading Lorem Ipsum Test Posting