Planet Bloggerian » Aban » July 2010

Bagi mereka yang bosan sama tampilan navigasi default wordpress yang hanya menampilkan Older Entries dan Newer Entries, sudah tentu mereka bakal menambahkan plugin WP-PageNavi yang membuat tampilan navigasi paging menjadi lebih variatif dan user-friendly.

Tampilan PageNavi default tersebut bisa dimodifikasi agar lebih atraktif dengan cara mengedit file pagenavi-css.css sesuai keinginan kita. Saya pun mencoba memodifikasinya, terinspirasi oleh navigasi paging yang ada di halaman eRepublik (game online berbasis web yang aktif saya mainkan 2 tahun terakhir).

Pertama-tama, Anda membutuhkan 4 file gambar untuk first, last, previous dan next link-nya.

Unggahlah keempat gambar tadi ke server hosting Anda.

Selanjutnya, ubahlah setting plugin PageNavi yang bisa diakses dari Settings > PageNavi. Ubahlah value yang ada pada Text For First Page, Text For Last Page, Text For Previous Page dan Text For Next Page dengan kode html untuk memanggil gambar. Misalnya, untuk mengganti value yang ada pada Text For First Page, gunakan tag berikut:

<img src="http://domainanda.com/images/first.png" />

Note: Sesuaikan url gambar dengan tempat directory kemana kita mengunggah gambar-gambar tadi.

Terakhir, Sesuaikan tampilan dengan sedikit memodifikasi file pagenavi-css.css dan jadilah tampilan navigasi paging yang kita inginkan.

Ketika pengunjung blog melakukan pencarian melalui search form, kemungkinan besar apa yang mereka cari adalah postingan blog, bukan content static page. Modul pencarian WordPress secara otomatis akan meng-query keduanya, baik postingan maupun static page.

Untuk membuat hasil pencarian hanya berlaku terhadap postingan saja, Anda bisa menambahkan sedikit code pada file functions.php Anda.

function SearchFilter($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
}

add_filter('pre_get_posts','SearchFilter');

Dengan tambahan code di atas, maka engine akan melakukan pencarian untuk postingan (post_type) saja. Jika Anda membutuhkan hal yang sebaliknya, Anda hanya perlu mengubah post_type menjadi page.

Sumber:
bavotasan

Saya sering mendapatkan klien yang menyodorkan draft desain website mereka (dari paling sederhana dalam bentuk .ppt sampai dengan format .psd). Rata-rata mereka sangat “kreatif” dalam hal penggunaan font sebagai typografi mereka. Ketika saya jelaskan kaidah penggunaan font di website, rata-rata mereka cukup bisa untuk berkompromi dan akhirnya mengembalikan jenis font ke jenis yang “diizinkan”.

Tapi sebenarnya, saya bisa memenuhi permintaan mereka dengan memanfaatkan @font-face. Relatif bukan hal yang baru memang, karena @font-face sudah diajukan untuk standarisasi CSS2 dan bahkan sudah diimpelementasikan di Internet Explorer versi 5, meskipun implementasinya menggunakan format Embedded Open Type (.eot) yang notabene tidak semua browser menggunakan format tersebut.

OK, sekarang bagaimana cara kita memasang kaidah @font-face dalam blog/website kita?

Pertama, perlu diingat format font apa saja yang di-support oleh browser-browser yang ada.

• Internet Explorer (semua versi): EOT
• Safari (3.2+): TTF/OTF
• iPhone (3.1) SVG
• Chrome (semua versi): SVG (TTF/OTF supported sejak 25 Januari 2010)
• Firefox (3.5+): TTF/OTF (.WOFF sejak versi 3.6)
• Opera (10+) TTF/OTF

So, .eot + .ttf /.otf + svg + woff adalah format-format yang banyak di-support oleh browser. Artinya, ketika kita hendak menggunakan kaidah @font-face, sangat disarankan agar kita menyertakan format-format tersebut. Anda bisa memanfaatkan @font-face generator untuk meng-generate font pilihan dari komputer Anda (harap diperhatikan juga mengenai lisensi font yang akan Anda gunakan). Unggahlah file font yang akan Anda gunakan.

Kedua, syntax yang digunakan untuk implementasi @font-face:

@font-face {
  font-family: NamaFont; /* required */
  src: source;	/* required */
  font-weight: weight;	/* optional */
  font-style: style;  /* optional */
}

NamaFont
Nama font yang akan dipanggil untuk properti CSS kita.
source
URL tempat font tersebut kita simpan, bisa juga ditambahkan dengan local("NamaFontLokal"), dengan NamaFontLokal adalah nama yang terbaca oleh komputer lokal kita.
weight
Font weight value, misalnya bold atau normal.
style
Font style value, misalnya italic atau normal.

Note: Syntax CSS ini bisa digunakan berulang, jika kita menggunakan lebih dari 1 jenis font.

Ketiga, panggillah nama font tadi sesuai kebutuhan, misalnya:

h1{
   font-family: 'NamaFont', arial, serif;
}

Note: Tetap disarankan untuk menyertakan jenis font standar lain sebagai alternatif.

Untuk lebih jelasnya, Anda bisa membaca juga artikel-artikel berikut ini:

• @Font-face Mozilla Developer Center
• W3C – CSS Fonts Module
• @Font-face Tutorial and Guide by Milton Bayer
• @Font-face Browser Support and Tutorial