Instalasi WordPress di Localhost


lengkapnya di TKP http://webhostmu.com/cara-install-wordpress-di-localhost/

  1. Siapkan file WordPress terbaru. Kalau belum punya bisa ngunduh dulu atau download langsung di WordPress.org.
  2. Buka folder XAMPP di komputer Anda. Lalu bukalah folder htdocs. Copy-kan file WordPress ke dalam folder ini. Lebih mudahnya, buka Windows Explorer, lalu ketik C:\xampp\htdocs pada bagian folder address seperti terlihat pada gambar di bawah ini.
    folder xampp di windows
    *) NB:
    Folder htdocs merupakan folder yang dipakai untuk menaruh file-file yang bisa dibuka di browser. Jika kita menaruh selain di folder ini, maka browser tidak akan bisa membukanya. Biasanya kalau settingan masih default, folder ada di drive C. Jadi pastikan jangan salah taruh ya..
  3. Apabila file masih dalam bentuk compress, maka ekstrak terlebih dahulu. Default folder hasil ekstrak biasanya bernama ‘wordpress’. Jika mau, nantinya Anda bisa mengganti nama folder ini menjadi nama yang Anda sukai. Katakanlah nama website Anda. Di sini saya menggantinya dengan nama ‘blogku’. Jika diakses, hasilnya akan terlihat seperti gambar di bawah ini:
    instal wordpress di localhost, folder htdocs xampp, xampp
  4. Sekarang bukalah browser favorit Anda. Untuk membuka situs wordpress offline ini, nantinya kita bisa mengaksesnya dengan alamat http://localhost/nama_folder. Kalau milik saya ya bukanya pakai alamat http://localhost/blogku. Jika milik Anda tetap memakai folder default, maka alamatnya http://localhost/wordpress. Ketikkan di address bar. Lalu klik Create a Configuration File.
    install wordpress di localhost
  5. Klik Let’s Go.
    9-wordpress-start
  6. Isikan nama database, user name, dan password yang sudah Anda buat sebelumnya. Jika belum, Anda bisa membacanya pada tutorial cara membuat database menggunakan XAMPP. Pada bagian Database Host isikan dengan localhost saja. Klik Submit.

read more at http://webhostmu.com/cara-install-wordpress-di-localhost/

Bikin Tema WP: Layout


Jika kemarin anda sudah belajar menentukan zona-zona di blog termasuk juga membuat desain sementara blog. Saat-nya kita mengatur wilayah tiap zona. Seperti diketahui, kemarin kita cuma memberi nama saja zona-zona yang ada menggunakan tag DIV. Nah, hari ini kita akan menentukan lebar masing-masing zona lengkap dengan tata letaknya sehingga tampilannya nanti akan mendekati design awal kita.

Untuk itu, kita akan buka kembali file index.php dan meminta file tersebut untuk mengakses file style.css yang akan menjadi pemandu dalam tata letak dan tampilan blog nanti. caranya gimana? Perhatikan baris 1 -4 di file index.php yang sudah kita buat kemarin. Disana terlihat kode seperti ini:

  1. <html>  
  2.    <head>  
  3.       <title>Theme Ujicoba</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>  

Sampai sini paham ya?

Oke, berikutnya kita beralih ke style.css dan mulai menentukan luas wilayah tiap-tiap zona. Zona awal yang kita tentukan adalah wrap. Fungsi zona ini untuk menentukan luas wilayah keseluruhan blog. Ibaratnya, ini pagar paling luar lah. 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. Dari perintahnya kira-kira jelaskan? 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.

Seharusnya tampilan blog anda akan seperti ini (klik untuk memperbesar):

Makin seru ya? Yuk, kita tangani bagian headernya. Untuk header ini, kita tentukan saja tingginya. Nantinya bisa kita isi juga lho dengan gambar. Tapi untuk sementara kita bikin jarak dulu biar ndak puyeng :) lagi-lagi tambahkan kode ini di bagian paling bawah style.css lalu simpan

  1. #header {  
  2.   height:120px;  
  3.   background:#cccccc;  
  4.   }  

Ada 2 perintah lagi yang kita masukkan yaitu height untuk menentukan tinggi header. Dalam contoh diatas saya buat 120 pixel. Untuk lebarnya tidak kita tentukan karena dia akan mengikuti wrap yang sudah kita tentukan di atas tadi. Kemudian perintah background adalah menentukan latar belakang zona header ini. Dalam contoh ini saya buat warna abu-abu. Untuk kode-kode warna lain, anda bisa lihat di: html-color-codes.com

Harusnya sekarang kalau direfresh blog anda, maka akan ada box abu-abu di bagian headernya. Tidak usah screen shot ya? Udah bisa bayangkan kan? Kalau belum ya lihat aja blog anda sendiri.. xixixi..

Berikutnya adalah bagian content. Untuk maincontent kita cuma akan berikan perintah untuk mengambil jarak 10px dari header sehingga kelihatan putih wilayahnya nanti akan mengikuti isinya yaitu content dan sidebar. Kita langsung kerjakan ketiganya ya di style.css

  1. #maincontent {  
  2.   margin-top:10px;  
  3.   }  
  4. #content {  
  5.   width:590px;  
  6.   background:#FFCC00;  
  7.   float:left;  
  8.   }  
  9. #sidebar {  
  10.   width:300px;  
  11.   background:#FF9900;  
  12.   float:left;  
  13.   margin-left:10px;  
  14.   }  

Ada satu perintah tambahan lagi yaitu float:left;. Perintah ini dipakai untuk membuat elemen dibawahnya mengalir ke sebelah kanan. Maksudnya left adalah elemen yang bersangkutan ada di kiri dan yang lain ada di kanan :)

Jika lihat blog anda sekarang, harusnya bagian tengah sudah terpecah jadi dua bagian. Untuk content dan untuk sidebar. Yuk, kita terusin lagi menambahkan style untuk zona lebar, kiri dan kanan yang ada di dalam sidebar

  1. #lebar {  
  2.   background:#FF3300;  
  3.   margin-bottom:10px;  
  4.   }  
  5. #kiri {  
  6.   background:#660000;  
  7.   width:145px;  
  8.   float:left;  
  9.   margin-right:10px;  
  10.   }  
  11. #kanan {  
  12.   background:#660000;  
  13.   width:145px;  
  14.   float:left;  
  15.   }  

Perintahnya udah ngerti semua kan? Gak ada yang baru :) Kalau dilihat sekarang, mustinya sudah mulai mirip deh desain blog kita. Cuma masih warna-warni.. hehehe.. Gpp, ini biar anda lebih mudah melihat elemen-elemennya. Untuk footernya kita biarkan aja gitu ya? Dan inilah hasil akhirnya sampai pelajaran ini

Oke, biar ada waktu untuk praktek, silahkan deh dicoba dulu di rumah. Insya Allah besok kita lanjutin dengan perintah-perintah yang lebih keren lagi.

PS: Jangan lupa ngajak teman untuk ikutan belajar ya? Biar seru!

sumber : http://wordpress.or.id/bikin-tema-wp-layout.html