Lanjutan dari seri Tutorial Cara Membuat Theme Wordpress Sendiri. Untuk memastikan tidak ada miskonsepsi, kami rekomendasikan anda membaca seri post ini dari awal :
- Langkah #0 : Pendahuluan, serta tools – tools yang dibutuhkan
- Langkah #1 : Memahami Struktur File Theme Wordpress
- Langkah #2 : Memahami Tag – tag XHTML & Kegunaannya, dan aturan penulisannya
- Langkah #3 : Membuat File Dasar Theme Wordpress : index.php & style.css
- Langkah #4 : Memuat Konten Blog Ke Dalam Theme
- Langkah #5 : Mendesain Theme Menggunakan CSS
Ok. Seperti pada post sebelumnya, awali dengan nyalakan XAMPP Control Panel, hidupkan Apache Server & Database MySQLnya, lalu buka aplikasi browser dan buka halaman wordpress lokal anda ( http://localhost/wordpress/ ).
Well, sudah 6 langkah. langkah selanjutnya apa?
Sebenarnya kami ingin terus lanjut ke langkah membuat file theme lain berdasarkan index.php sesuai dengan hirarki theme wordpress. Tapi sebelum masuk ke langkah itu, tadi kami mencoba mengakses tampilan latihantheme pada dua browser yang berbeda : FireFox ( yang kami wanti – wanti anda untuk gunakan untuk mendesain web ), dan Internet Explorer ( Browser “ajaib”. ahaha ), dan kami menyadari bahwa ada yang harus kita selesaikan *halah* terlebih dahulu :
Merapihkan Styling CSS latihantheme
Jadi begini. Di jagat internet, setidaknya ada 4 jenis browser yang paling sering digunakan : Internet Explorer (IE ), Mozilla Firefox ( FF ), Opera, dan Safari. Browser yang paling banyak digunakan adalah Internet Explorer. lebih dari 70% pengakses internet menggunakan IE sebagai browsernya. Sisanya, menggunakan Firefox, Opera, dan Safari.
Masalahnya adalah : Terkadang, tampilan website yang menggunakan CSS berbeda jika diakses menggunakan satu browser dan browser lainnnya. Hal ini disebabkan karena setiap browser menggunakan “caranya masing – masing” dalam memahami definisi CSS.
Note : buka wordpress lokal anda yang menggunakan latihantheme di Firefox dan Internet Explorer. Dapat perbedaannya?
See? ada beberapa perbedaan yang muncul ketika latihantheme diakses menggunakan FireFox dan Internet Explorer.
Well,setelah kami analisa, ketidak rapihan ini ternyata disebabkan oleh objek yang ID atau CLASS nya belum di definisikan. Maka dari itu, browser otomatis memberikan nilai default pada ID dan CLASS tersebut. Masalahnya adalah : nilai default tiap browser berbeda 
Oke, ini perbedaan latihantheme yang diakses menggunakan IE :
- title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran.
- blog title kebesaran
- konten list item pada sidebar “terlalu menjorok ke dalam”.
- Title widget yang beda ukuran
mari atasi yang satu ini sekarang 
title post yang terdiri atas dua baris tidak enak dilihat : tabrakan dan kebesaran.
Masalah tabrak menabrak antar baris ini terjadi karena line-height title post mengikuti line-height yang kita set untuk <body> . Cara Mengatasinya :
ketik / copypaste kode ini ke style.css
.post h2{
line-height:1.2;
font-size:20px;
}
problem solved. Refresh browser anda 
blog title kebesaran
Menyelesaikan masalah ini cukup mudah juga. Ketik / Copypaste kode ini :
#kepala h1{
font-size:20px;
margin:10px 0 10px 0;
}
konten list item pada sidebar “terlalu menjorok ke dalam”
cari #barsisi li ul{}. tambahkan margin:0; sehingga jadi seperti ini :
#barsisi li ul{
padding:0px;
margin:0;
}
Title Widget beda ukuran
ketik / copypaste kode ini ke style.css
.widgettitle{
font-size:20px;
margin:10px;
}
Hoho, sekarang baik di IE atau di FF tampilannya sudah rapih. Pada post selanjutnya kita bisa meneruskan pembahasan kita pada langkah selanjutnya.
Well, Ada pertanyaan? atau Ada langkah yang kurang jelas? Atau mungkin ada yang terlewat? izinkan kami mengetahuinya. silahkan sampaikan pandangan anda melalui kolom komentar
Enjoy!
Anda merasa post di blog ini bermanfaat untuk anda?
Dapatkan update harian bloggingly GRATIS di RSS Reader anda! Subscribe sekarang RSS FEED BLOGGINGLY !
Apa itu RSS? Kenali RSS di halaman ini
