Membuat template Wordpress dari html + css
Format template sebelumnya yang kita buat adalah seperti berikut..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
<div class="wraper">
<div class="header"> ini bagian header</div>
<div class="content"> bagian artikel</div>
<div class="sidebar"> bagian sidebar</div>
<div class="footer"> bagian footer</div>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
<div class="wraper">
<div class="header"> ini bagian header</div>
<div class="content"> bagian artikel</div>
<div class="sidebar"> bagian sidebar</div>
<div class="footer"> bagian footer</div>
</div>
</body>
</html>
kita sebut saja file diatas adalah template.html
simpan file template.html tsb menjadi bentuk file .php , yang semula template.html sekarang ubah menjadi template.php (cuma diganti format/ekstensinya aja)
~~ untuk selanjutnya saya asumsikan anda disini sudah tau bagaimana cara mengintall wordpress secara offline di localhost <skip..> ~~
buatlah folder baru untuk template anda di folder wp-content -> theme. beri nama folder tsb mytheme atau lainny sesuka anda
sebelumnya kita sudah membuat file template.php dan style css, pidahkan semua file tsb kedalam folder mytheme.
Mengubah Script pada bagian Header menjadi Dinamis
Selanjutnya kita akan mengubah bentuk scrit pada bagian <head></head> yang awalnya statis menjadi dinamis.
Agar tampilan template.php tsb dapat dijalankan di theme wordpress anda harus mengganti letak url css (style.css) yang sebelumnya seperti berikut :
<link rel="stylesheet" type="text/css" media="all" href="style.css">
menjadi seperti berikut :
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
jika file css anda tidak menggunakan nama style.css misal menggunakan nama helloworld.css dan tidak terletak di folder utama templatenya (misal di sebuah folder bernama css), maka format scriptnya seperti berikut
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mytheme/css/helloworld.css" />
fungsi <?php echo get_template_directory_uri(); ?> adalah url dinamis dalam wordpress untuk mendapatkan directory dimana template anda tersimpan.
Selanjutnya..
ubah script berikut
<title>Untitled Document<title>
menjadi
<title><?php wp_title(); bloginfo( 'name' ); ?> <title>
script <?php wp_title(); ?> berfungi untuk memunculkan title web (yang ada di atas browser) secara dinamis sesuai artikel/postingan yang dibuka, jika anda membuka halaman home/utama title ini tidak akan muncul. Sedangkan <?bloginfo( 'name' );?> berfungsi memunculkan nama web anda. nama web/blog ini bisa anda setting melalui halaman admin (back-end) di menu setting -> general.
selain itu anda juga perlu menambahkan beberapa script lainnya didalam tag <head></head> seperti :
<meta charset="<?php bloginfo( 'charset' ); ?>" />
script tsb untuk memberitahu browser karakter yang pakai, kita tambahkan dan tidak perlu kita ubah-ubah
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
dengan script tsb kita bisa tahu apabila ada yang ngasih link ke kita.
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
script tsb untuk menampilkan comment replay
<?php wp_head(); ?>
Jika anda tidak menambahkan script wp_head tsb beberapa plugin wordpress mungkin tidak bekerja
setelah menambahkan semua script2 diatas maka script lengkap anda (template.php) akan menjadi seperti berikut untuk bagian headernya sekarang sudah dinamis :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); bloginfo( 'name' ); ?> <title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="wraper">
<div class="header"> ini bagian header</div>
<div class="content"> bagian artikel</div>
<div class="sidebar"> bagian sidebar</div>
<div class="footer"> bagian footer</div>
</div>
</body>
</html>
Pisahkan file template.php menjadi beberapa bagian file .php
disini nama file utama harus bernama index.php jadi file template.php tadi harus kita ubah namanya menjadi index.php. pada format wordpress biasanya file index.php akan dipecah menjadi beberapa bagian file .php , seperti header.php, sidebar.php, dan footer.php
index.php -> file utama berfungsi untuk menyimpan file2 .php lainnya (header.php, sidebar.php, footer.php, dan isi postingan atau daftar postingan.
header.php -> berisi file header, semua script bagian template yang termasuk header akan kita buat disini.
sidebar.php -> semua script konten bagian sidebar akan kita simpan disini
footer.php -> semua bagian footer template akan kita simpan disini.
Buatlah 3 file php laiinya seperti diatas dan pecah script index.php yang telah kita buat kedalam 3 bagian (file php header.php, sidebar.php, dan footer.php), lihat script index.php berikut .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); bloginfo( 'name' ); ?> <title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="wraper">
<div class="header"> ini bagian header</div>
<div class="content"> bagian artikel</div>
<div class="sidebar"> bagian sidebar</div>
<div class="footer"> bagian footer</div>
</div>
</body>
</html>
script bewarna merah -> cut (ctrl+x) ke file header.php
script bewarna hijau -> tetap berada di file index.php
script bewarna biru -> cut (ctrl+x) ke file sidebar.php
script bewarna hitam -> cut (ctrl+x) ke file footer.php
sekarang kita memiliki file-file php beserta isinya seperti berikut :
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); bloginfo( 'name' ); ?> <title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="wraper">
<div class="header"> ini bagian header</div>
sidebar.php
<div class="sidebar"> bagian sidebar</div>
footer.php
<div class="footer"> bagian footer</div>
</div>
</body>
</html>
index.php
<div class="content"> bagian artikel</div>
Untuk file index.php adalah file utama dimana kita akan memanggil file lainnya ke dalam file index.php dengan menambahkan script berikut
<?php get_header(); ?> berfungsi memanggil file header.php
<?php get_sidebar(); ?> berfungsi memanggil file sidebar.php
<?php get_footer(); ?> berfungsi memanggil file footer.php
hasilnya file index.php anda akan terlihat seperti berikut
index.php
<?php get_header(); ?>
<div class="content"> bagian artikel</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Untuk mengaktifkan theme wp yang telah Anda buat masuk ke administrator wordpress > http://localhost/wordpress/wp-admin > pilih Appearanca > pilih Themes > pilih theme yang baru Anda Buat dan pilih Activate .
~~ bersambung ~~
2 comments
commentsDi tunggu bhas function.php gan..
Replytutorialnya bagus banget.
Replylanjut ke step berikutnya dong gan.....
Komentar disini ..