Category Archives: Theme WordPress

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

Dicari dengan kata kunci:

tipografi,tipografi adalah,belajar tipografi,tips tipografi,typografi,tipografi yang baik,cara membuat tipografi,belajar typografi,makalah tipografi,typografi adalah

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

Dicari dengan kata kunci:

cara membuat file php,membuat file php,cara buat file php,membuat halaman utama dengan php,membuat php,cara buat file index php,membuat file dengan php,single php,membuat archive dengan php,buat file php

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

Dicari dengan kata kunci:

coding div kiri kanan php,memecah index php,cara memindahkan sidebar dari kiri ke kanan diwordpress,cara memindahkan sidebar dari kiri ke kanan dengan php,memindah side bar wordpress,cara memindahkan kategori ke kiri pada wordpress,memisahkan content dengan sidebar,memisahkan sidebar dengan konten,memcah file index pada php kuliah net,memisahkan index php

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 <div id="maincontent"></div>. Jadi <div id="maincontent"></div> akan tetap di index.php Ini isi file header.php saya Continue reading

Dicari dengan kata kunci:

fungsi div pada php,fungsi div pada html,fungsi div,fungsi file index,fungsi div dalam php,memanggil header php,kegunaan div pada php,fungsi div id pada html,fungsi div di html,memanggil file php di html

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(); ?>
<!-- Perintah-perintah PHP untuk memunculkan artikel beserta pernak-perniknya -->
<?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

Dicari dengan kata kunci:

cara bermain wordpress,cara memainkan wordpress,looping,cara main wordpress,bermain wordpress,cara looping,menambahkan sidebar pada wordpress,cara looping di php,looping dalam looping,loop dalam loop

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

Dicari dengan kata kunci:

cara membuat slideshow di wordpress,membuat slideshow di wordpress,membuat slideshow dengan php,slideshow,cara membuat slideshow di header wordpress,widget slideshow wordpress,membuat slideshow dengan css,MEMBUAT SLIDE DI wordpress,membuat header slideshow,membuat slide header wordpress

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

Dicari dengan kata kunci:

cara memperbagus wordpress,mengatur tampilan wordpress,tampilan blog keren,cara membuat tampilan blog keren,tampilan wordpress,cara memperbaiki tampilan blog,cara memperbagus blog wordpress,cara mendesain tampilan wordpress,memperbagus wordpress,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

Dicari dengan kata kunci:

featured image wordpress,gambar tidak muncul di wordpress,featured image,thumbnail tidak muncul,membuat thumbnail di wordpress,cara membuat Featured Post,cara membuat thumbnail di wordpress,wordpress featured image,feature image wordpress,featured image tidak muncul

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:

  <div id="search">
  <form action="<?php bloginfo('url');?>" method="get">
  <input type="text" size="30" name="s"/>
  <input type="submit" value="search"/>
  </form>
  </div>

Kita akan ganti menjadi seperti ini: Continue reading

Dicari dengan kata kunci:

membuat form search dengan css,search box keren,membuat search box di wordpress,cara membuat search box dengan gambar,membuat form search di php,membuat search dengan gambar,membuat form cari dengan php,membuat search box di pp,membuat custom background dgn image di php,memasang search box di wordpress

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

Dicari dengan kata kunci:

Lorem Ipsum,utak atik wordpress,cara menampilkan banyak menu di wordpress,cara memposting artikel di wordpress beserta dengan continue reading,menampilkan lorem ipsum otomatis php,cara buat lorem ipsum,cara membuat lorem ipsum,cara menampilkan from yg sudah ada di menu editor,header wordpress keren,edit tampilan content wordpres