Cara membuat template wordpress versi linkDesain (Part2)

Pada part 1 kita telah membuat contoh kasar bagian template dalam bentuk html + css yang akan kita ubah ke dalam bentuk wordpress theme.

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>


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 ~~
 

Share this

Related Posts

Previous
Next Post »

2 comments

comments
March 29, 2014 at 2:18 AM delete

Di tunggu bhas function.php gan..

Reply
avatar
Anonymous
August 9, 2014 at 4:49 PM delete

tutorialnya bagus banget.
lanjut ke step berikutnya dong gan.....

Reply
avatar

Komentar disini ..