Selamat Malam Temen2, sudah lama kita tidak berjumpa,, pada kesempatan kali ini saya ingin melanjutkan beberapa materi yg dulu sempet ane tinggal, berhubungan dengan saya sibuk dengan aktifitas yang lain,,,

masih mengenai CMS Wordpress, cms ini sekarang masih sangat exixst bahkan menurut bebrapa pakar, wordpress masih sangat dominan dipakai oleh sebagian besar developer dunia.. baik sebelum ane bahas tentang cara membuat theme wordpress yang part ke -3 ane ingin memberitahukan kepada temen2, jika ada dari temen2 yang nyasar ke blog ane ini dan mampir tepat di postingan Cara Membuat Themes WP (Wordpress) Part ke-4. silahkan temen2 kunjungi bebarapa list yang mungkin temen2 perlu mengulanginya, berikut linknya : KUMPULAN TUTORIAL WORDPRESS

oke selanjutnya kita akan membahas lebih dalam, tentang worpdress,, kemaren file yang kita siapkan sekitar 7 - 8 file pokok wordpress..

  1. style.css (file ini menetukan siapa dan dari mana asal theme ini dibuat)
  2. index.php (file ini yang pertama kali di index oleh theme wordpress)
  3. home.php (file ini akan tampil menjadi Frontpage yang di theme wordpress)
  4. single.php (file ini berfungsi untuk menampilkan postingan kita.)
  5. archive.php (file ini yang akan menampilakan sekumpulan arsip dari post dan page)
  6. category.php (file ini yang akan menampilkan posting sesuai dengan kategori yang kita cari)
  7. page.php (file ini yang akan menampilkan hasil dali halaman / page yang kita buat)
  8. functions.php (file ini adalah salah satu jantung Theme wordpress, karena dengan file ini kita dapat memodifikasi wordpress dengan bermacam2 konsep yang kita inginkan..)
dan itulah sekilas file pokok dalam theme wordpress.. selain itu kita harus mnyiapkan gambar screenshot yang akan menjadi icon pertama theme kita, ukurannya gambarnya adalah : 883 x 660 pixel, dan perlu di ingat formatnya adalah PNG bukan JPG. lihat contohnya temen2...
SCREENSHOT.PNG adalah screen theme Swiss Forexindo, yang memesan adalah Bapak Nursigit, seorang pengusaha dan bisnismen yang bergerak dalam bidang Trading Forex. anda bisa langsung lihat demonya di WWW.SWISSFOREXINDO.COM 
jika sudah selesai membuat screenshotnya kita lanjut ea temen2,,
persipan yang tidak kalah pentingnya adalah, menyiapkan bebrapa folder yang nantinya akan berguna kepada theme kita, sebagai pokok folder kiata buat 3 terlebih dahulu :
  • images (folder untuk menampung image / gambar yang akan ditampilkan secara default di theme kita)
  • js (folder untuk menampung seluruh javascript yang akan kita masukkan di theme kita)
  • inc (folder yang akan di isi dengan bebrapa file php yang akan kita includekan ke dalam theme kita)
setelah kita selesai membuat folder2 tersebut, selanjutnya kita beranjak kepada file yang akan kita otak atik sekarang:
Silahkan buka aplikasi editor anda : noleh Sublimetext / notepad ++ / dreamweaver, yang penting anda faham untuk malakukannya. 
oke sekarang kita buka 3 file yang akan kita modifikasi, 
yang pertama buka file index.php, yang kedua buka juga file header.php & footer.php

dalam file index.php ada code seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Nama Website Anda</title>
</head>
<body>
 
</body>
</html>

Silahkan cut tulisan mulai dari <!DOCTYPE html> sampai dengan <body>.  pindahkan ke dalam file header.php, dan codenya seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nama Website Anda</title>
</head>
<body>

dan setelah selesai silahkan tambahkan kode ini sebelum tag head (</head>)
<?php wp_head(); ?>

 dan full codenya seperti ini :

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

 <title><?php wp_title('&raquo;', true, 'right'); ?></title>
 <link rel="profile" href="http://gmpg.org/xfn/11" />
    <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>

Silahkan temen2 kopas code diatas dan taruh di file header.php, dan jangan lupa di SAVE temen2.
setelah itu silahkan kembali ke file index.php

dan panggil file header phpnya dengan kode ini : <?php get_header();?>
sekarang kita buka file footer.php dan silahkan cut tulisan di inde.php mulai tag penutup body hingga html (</body></html>);

dan setelah selesai silahkan panggil footer di file index.php dengan kode ini : <?php get_footer();?>
dan selesai untuk tutorial sekarang temen2. dan full script dan codenya silahkan lihat dibawah ini

FILE INDEX.PHP

 

<?php get_header();?>
<?php get_footer();?>

FILE HEADER.PHP

 
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

 <title><?php wp_title('&raquo;', true, 'right'); ?></title>
 <link rel="profile" href="http://gmpg.org/xfn/11" />
    <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>


FILE FOOTER.PHP

 
<?php wp_footer();?>
</body>
</html>

dan jangan lupa temen2, sebelum tag penutupan </body> anda harus menambahkan <?php wp_footer();?>, agar theme anda nantinya tidak Bug dan Crass. OKE..

sekarang waktunya ane istirahat, ane lanjutkan besok temen2 oke.. sekarang waktunya istirahat, sampai bertemu kembali dengan saya.. Abdul Mannan Sya'roni
Blog Abdul Mannan Sya'roni
Previous Post Next Post

Komentar

Komentar kotor, menyinggung dan mengandung karakter yang tidak diperkenankan oleh admin akan di hapus dari Blog, Terimakasih!

Post a Comment

Komentar kotor, menyinggung dan mengandung karakter yang tidak diperkenankan oleh admin akan di hapus dari Blog, Terimakasih!