Cara Membuat Template WordPress Bagian 2 – Header

Cara Membuat Template WordPress Bagian 2 – Header


Bapak-bapak ... ibu ibu ... sekalian ... kita akan memasuki tutorial bagaimana cara membuat template wordpress bagian ke 2, yakni pembuatan header. Prok prok prok...


Di pertemuan yang kedua ini kita akan coba lebih dalam menggarap bagaimana cara  membuat template wordpress dengan menggunakan template yang sudah ada. Di praktik kali ini kita akan mencoba sebuah template yang sudah distandarkan sesuai dengan syarat-syarat SEO, dan cocok untuk dijadikan ke dalam template wordpress. Yakni template yang saya berikan di akhir tutorial ini, template coolblue, penulis dapet mungut di jalan. Bukan buatan penulis sendiri.

Template coolblue, akan kita konversikan ke dalam wordpress. Mengikuti langkah sebelumnya
Silahkan download file templatenya di sini http://www.ilmuwebsite.com/wp-content/uploads/2013/11/coolblue-template.rar

 

Langkah 1

Tempatkan folder template Anda yang berisi file-file HTML, CSS,  gambar-gambar dan lain lain, letakkan di :

x:/xampp/htdocs/wplabz/wp-content/themes/coolblue

Struktur file didalamnya kurang lebih seperti ini nantinya :

  1. Folder images,
  2. index.html,
  3. style.css

Langkah 2 

/*
Theme Name: CoolBlue Themes
Theme URI: http://www.google.com
Description: Ini adalah template coolblue, tumbal praktik, kelinci percobaan
Author: Nama Saya
Author URI: http://facebook.com/nama.saya
Version: 1
*/

Memasukkan script tersebut di bagian paling Atas dari file style.css

Kemudian jika bagian template utama nama filenya adalah index.html maka silahkan diganti terlebih dahulu menjadi index.php

Setelah itu silahkan masuk ke dalam admin wordpress dan masuk ke bagian :
Appearance > Themes

http://localhost/wplabz/wp-admin/themes.php

 

lalu akan muncul sebuah template baru bernama coolblue :

result

Nah di bagian kali ini kita akan mencoba masuk ke dalam pembuatan template wordpress bagian header templatenya terlebih dahulu, pada praktik sebelumnya saya sudah menyediakan :

Di langkah ke 3 ini kita akan mencoba memasukkan tag-tag di atas ke dalam bagian header template.

Langkah pertama silahkan buka file index.php nya, kita akan masukkan script ini kebagian <title></title> , jadi nanti scriptnya ada di dalam tag title,

<title>
<?php

	if (function_exists('is_tag') && is_tag()) {
		single_tag_title("Tag Archive for &quot;"); echo '&quot; - '; }
		elseif (is_archive()) {
		wp_title(''); echo ' Archive - ';
	}
	elseif (is_search()) {
		echo 'Search for "'.wp_specialchars($s).'" - ';
	}
	elseif (!(is_404()) && (is_single()) || (is_page())) {
		wp_title(''); echo ' - ';
	}

	elseif (is_404()) {
		echo 'Not Found - ';
	}

	if (is_home()) {
		bloginfo('name'); echo ' - '; bloginfo('description');
	}

	else {
		bloginfo('name');
	}

	if ($paged>1) {

		echo ' - page '. $paged;

	}

	?>

	</title>

 

 

... di sini mewakili script script yang lain ...

Kemudian sebelum tag headnya berakhir silahkan sisipkan script di bawah ini

</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

Kemudian lakukan activate pada template di dalam admin panel wordpress bagian Appearance > Themes

Itu adalah praktik kali ini untuk cara membuat template wordpress bagian header kita akan lanjutkan membuat template wordpress bagian body di pertemuan selanjutnya ... Silahkan lanjutkan ke tutorial Cara Membuat Template WordPress Bagian 3 – Body Single.php

Artikel Terkait :