Membuat Template WordPress Dengan Mudah 2

Layout

Sekarang kita lanjutkan ke pembuatan layout WordPress soalnya kemaren baru keluar huruf saja nah sekarang kita masuk ke pembuatan layout.

Buka kembali file index.php dan meminta file tersebut untuk mengakses file style.css yang akan menjadi pemandu dalam tata letak.

Bisa Lihat Dulu Sebentar Postingan …

Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode seperti ini:

  1. <html>
  2.    <head>
  3.       <title>Free-Theme-Wordpress</title>
  4.    </head>

Nah, untuk memanggil style.css, kita tinggal menambahkan sebaris kode ini sebelum tag</head>:

  1. <link rel=”stylesheet”  type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />

Disana terdapat sebuah fungsi WordPress yaitu bloginfo. Fungsi ini berguna untuk menampilkan informasi blog termasuk nama, deskripsi, rss, dll. Karena kita akan memanggil file style.css theme, maka kita gunakan perintah

<?php bloginfo( ‘stylesheet_url’ ); ?>

Simpanlah file index.php yang sudah kita tambahin style. Biar jelas, hasil akhir kodenya nanti akan seperti ini:

  1. <html>
  2.    <head>
  3.       <title>Theme Ujicoba</title>
  4.       <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
  5.    </head>

Paham Kan?

Zona awal yang kita tentukan adalah wrap. Fungsi zona ini untuk menentukan luas wilayah keseluruhan blog. Ibaratnya, ini pagar paling luar. Masukkan ini di baris paling bawah style.css

  1. #wrap {
  2.   border:solid 1px #000;
  3.   width:900px;
  4.   margin:0 auto;
  5.   padding:10px;
  6.   }

Sekarang simpan dan coba lihat blog anda. Harusnya sudah ada garis hitam di batas terluar teritori blog. Dan kotaknya tepat berada di tengah-tengah browser. border untuk nentukan garis tepi, width=lebar, margin jarak antara border dengan tepi browser atau elemen lain. Padding untuk menentukan jarak antara border dengan tulisan. Kalo Belum Jelas Lihat Tutorial CSS

Dan Apakah Tampilannya Sudah Seperti ini

free wordpress theme3

Kalo gak sama mungkin ada kesalahan ketik harap teliti lagi atau bisa ditanyakan langsung

Kalo udah Sama Kita lanjut ke header dan elemen elemen lainnya saya fikir anda juga sudah memahami atau sudah bisa html dan CSS

jadi langsung kita tambahkan style untuk menandai elemen-elemen lainnya

masukan aja kode ini dibawah kode kode yang tadi

#header {
height:120px;
background:red;
}

#maincontent {
margin-top:10px;
}

#content {
width:590px;
background:yellow;
float:left;
}

#sidebar {
width:300px;
background:green;
float:left;
margin-left:10px;
}

#lebar {
background:blue;
margin-bottom:10px;
}

#kiri {
background:grey;
width:145px;
float:left;
margin-right:10px;
}

#kanan {
background:brown;
width:145px;
float:left;
}

nah sekarang boleh dilihat lagi templatenya apakah sudah sama dengan yang saya ini??

free wordpress theme4

Kalo Belum di cek cek lagi atau subscribe aja langsung

Selanjutnya Besok aja apa sekarang yahhh hmmm Besok aja deh biar lebih Fokus

Leave a Reply