Tutorial ini merupakan sambungan dari tutorial pertama, pada tutorial sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi yang belum membaca artikel tersebut maka silahkan merujuk ke link berikut.
- Bagian 1 : Intro & Registering Template
- Bagian 2 : Frontpage, Header & Footer
- Bagian 3 : Single Page
- Bagian 4 : Menu Navigasi & Sidebar (Widget)
- Bagian 5 : Styling Template
Pada artikel sebelumnya kita sudah berhasil mendaftarkan dan mengaktifkan template yang sudah kita buat, selanjutnya pada artikel kedua ini kita akan lanjut untuk proses pembuatan halaman Frontpage (Home), Header dan Footer.
Frontpage, Header dan Footer
Frontpage merupakan halaman utama yang akan tampil pada saat pertama kali kita membuka sebuah halaman website, sedangkan Header sendiri berfungsi sebagai tempat untuk menampilkan Logo, Navigasi, Site Title, Site Description, dan lain-lain. Semua konten yang ada di dalam Header akan tampil di semua halaman website. Begitu juga sama halnya dengan Footer, bedanya kalau Footer biasanya hanya menampilkan kredit website seperti Copyright, Website Creator, dan lain-lain.
Untuk membuat halaman Frontpage, Header dan Footer, lebih jelasnya silahkan ikuti langkah-langkah berikut :
1. Header
Silahkan buat file header.php di dalam folder project template yang kita buat, pada tutorial ini bernama TemaKu, dan isikan file header.php dengan sintak berikut ini :
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="<?php bloginfo('name'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta name="keywords" content="<?php bloginfo('description'); ?>" />
<title>
<?php
global $page, $paged;
wp_title('|', true, 'right');
bloginfo('name');
$site_description = get_bloginfo('description', 'display');
if ($site_description && (is_home() || is_front_page()))
echo " | $site_description";
if ($paged >= 2 || $page >= 2)
echo ' | ' . sprintf(__('Page %s', 'pmadvis'), max($paged, $page));
?>
</title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if (is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply');
wp_head(); ?>
</head>
<body>
<!--Element-elemen tag <body> tulis disini-->
<header>
<!--Section HEADER-->
<div class="logo">
<h1><?php bloginfo('name'); ?></h1>
<h4><?php bloginfo('description'); ?></h4>
</div>
<div class="navigasi">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</header>
Perhatikan kode di atas, di situ kita memasukan section HEADER dimana di dalam section HEADER terdapat sub-section LOGO dan NAVIGASI, semua section yang disimpan di dalam file header.php akan tampil di semua halaman sebagai Header website.
Pada kode di atas kita menambahkan kode PHP dengan beberapa fungsi seperti :
-
- bloginfo(‘name’), untuk menampilkan nama website (site title).
- bloginfo(‘description’), untuk menampilkan deskripsi website.
2. Footer
Setelah selesai membuat file header.php, silahkan buat file footer.php di dalam folder project template yang kita buat, pada tutorial ini bernama TemaKu, dan isikan file footer.php dengan sintak berikut ini :
<footer>
<!--Section FOOTER-->
<div class="footer">
<small>© Copyright - agussuratna.net 2022 | Alright reserved.</small>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Pada file footer.php, disini kita hanya menambahkan section FOOTER yang hanya berisi Copyright pada sub-section-nya. Pada kode tersebut kita menambahkan fungsi ‘wp_footer()‘ yang berfungsi untuk menampilkan toolbar Dashboard admin WordPress.
Sampai sini kita sudah berhasil membuat Header dan Footer template WordPress, langkah selanjutnya tinggal membut halaman Frontpage.
3. Frontpage
Silahkan buka halaman index.php yang sudah kita buat pada tutorial pertama, hapus semua isi yang ada di dalam file tersebut, lalu silahkan masukan kode PHP berikut untuk memanggil Header yang sudah kita buat pada file header.php.
<?php get_header(); ?>
Pastikan kode di atas kita taruh di paling atas atau di baris pertama halaman. Selanjutnya jangan lupa juga untuk memanggil Footer yang sudah kita buat di file footer.php dengan memasukan kode PHP berikut.
<?php get_footer(); ?>
Untuk kode Footer ini pastikan kita taruh di paling bawah atau di baris terakhir halaman.
Terakhir silahkan masukan kode berikut ke dalam file index.php, tepatnya di antara skrip Header dan Footer di atas.
<?php get_header(); ?>
<main>
<!--Section MAIN BODY-->
<div class="konten">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<small>
Publish on <?php the_time('F jS, Y'); ?>
|
Category <?php the_category(', '); ?>
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit'); ?>
</small>
<h2>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h2>
<p><?php print get_the_excerpt(); ?></p>
<hr />
<?php endwhile; ?>
<?php endif; ?>
</div>
</main>
<?php get_footer(); ?>
Pada kode di atas ada beberapa fungsi yang kita gunakan untuk menampilkan elemen-elemen artikel yang akan tampil di halaman Frontpage, di antaranya ialah :
-
- the_time(‘F jS, Y’), untuk menampilkan tanggal publish dari artikel yang bersangkutan.
- the_category(‘, ‘), untuk menampilkan semua kategori dari artikel yang bersangkutan.
- comments_popup_link( ARGS ), untuk menampilkan jumlah komentar dari artikel yang bersangkutan.
- edit_post_link(‘Edit’), untuk menampilkan link ‘Edit‘ pada artikel yang bersangkutan.
- the_permalink(), untuk menampilkan alamat URL dari link yang bersangkutan.
- the_title(), untuk menampilkan title atau judul artikel.
- get_the_excerpt(), untuk menampilkan konten artikel sebanyak 500 huruf, jika ingin di tampilkan semua kontennya cukup ubah skrip ‘get_the_excerpt()‘ menjadi ‘the_content()‘.
Semua fungsi-fungsi di atas berada dalam perulangan ‘while()’, jadi kalau artikelnya ada 10 buah maka akan di tampilkan semuanya.
Sampai sini kita sudah berhasil membuat halaman Frontpage, untuk melakukan pemeriksaan apakah sudah benar-benar berhasil atau belum silahkan buka halaman website yang kita buat, jika sesuai maka kurang lebih tampilannya akan seperti pada gambar berikut :
Semoga tutorial ini bermanfaat, pada artikel berikutnya kita akan lanjut ke proses pembuatan Single Page untuk menampilkan halaman artikel secara penuh.
