Programming, Tutorial Series, wordpress

Membangun Theme – header.php dan footer.php

Post ini adalah rangkaian dari Membuat Theme WordPress Untuk Newbie – Tutorial Series 🙂

DAFTAR TUTORIAL SERIES

  1. Perispan & Instalasi WordPress
  2. Membangun Theme – style.css dan index.php
  3. Membangun Theme – header.php dan footer.php
  4. Membangun Theme – Navigasi

Tutorial ini akan singkat saja, karena di bagian terakhir rasanya agak terlalu panjang. Sampai di post terakhir, sebenarnya kita sudah bisa menampilkan daftar post pada blog kita. Tapi untuk efisiensi code, kita akan memisahkan bagian header dan footer dari file index.php. Ini bertujuan agar kedua bagian tersebut tidak perlu ditulis ulang untuk template lainnya. Kita cukup memanggilnya dengan fungsi dari WordPress.

Untuk tutorial ini, kita akan melakukan modifikasi di file index.php. Sejauh ini, isi dari file index seperti ini:

<!DOCTYPE html>
<head>
    <title><?php bloginfo('name'); echo ' - '; is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
    <!-- Def. CSS -->
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
    <?php wp_head(); ?>
</head>
<body>

Karena bagian head dan footer akan kita pakai berulang kali di tiap template, kita akan pisahkan menjadi file tersendiri. Di root folder theme, kita buat dua file baru, header.php dan footer.php.

File Header: header.php

File header.php akan kita panggil dengan fungsi get_header() pada setiap template yang memerlukan. Jadi, buka file header.php lalu cut dan paste code ini dari index.php

<!DOCTYPE html>
<head>
    <title><?php bloginfo('name'); echo ' - '; is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
    <!-- Def. CSS -->
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
    <?php wp_head(); ?>
</head>
<body>
<div class="container">
<?php
if ( have_posts() ) :
	while ( have_posts() ) : the_post();
	?>

		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_date(); ?> oleh <?php the_author(); ?></small>
		<?php the_content(); ?>
		<hr />
		<?php
	endwhile;
else :
	echo 'Maaf, tidak ada post ditemukan.';
endif;
?>
</div>
<?php wp_footer(); ?>
</body>
</html>

Simpan, dan kita lanjut ke file berikutnya.

File Footer: footer.php

Sama seperti header.php, footer.php juga akan dipanggil dengan fungsi dari WordPress, yaitu get_footer. Cut dan paste bagian code ini dari index.php ke footer.php.

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

Save, dan jadi! Sekarang kita benahi sedikit file index.php.

File Hompage: index.php

Karena sudah dipisah, kita harus panggil bagian-bagian template tadi dari index.php. Tambahkan fungsi get_header() dan get_footer() di sebelum dan sesudah Loop post. Hasilnya seperti ini.

<?php get_header(); ?>
<div class="container">
<?php
if ( have_posts() ) :
	while ( have_posts() ) : the_post();
	?>

		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_date(); ?> oleh <?php the_author(); ?></small>
		<?php the_content(); ?>
		<hr />
		<?php
	endwhile;
else :
	echo 'Maaf, tidak ada post ditemukan.';
endif;
?>
</div>
<?php get_footer(); ?>

Save dan coba refresh halaman utama blog. Ada perubahan? Harusnya tidak. 😀 Kalau ada, coba review lagi code di atas.

Berikutnya kita akan bahas tentang navigasi di WordPress. Kita bisa otak-atik menu di blog kita sendiri dari dashboard tanpa harus menyentuh code sama sekali, setelah kita persiapkan tentunya. Jadi, kita ketemu lagi di bagian berikutnya, Membangun Theme – Navigasi.

File untuk bagian ini bisa didownload di sini atau di sini. Panduan Download di sini.

Iklan
Standar

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s