Kursus WordPress

Appearance

Chapter 5: Building the Blog Section — Blog Archives (archive.php) ​

Ringkasan ​

Video ini membahas cara membuat archive.php — template untuk menampilkan archive screens seperti category archive, author archive, dan date archive. Kita belajar the_archive_title(), the_archive_description(), dan cara membuat if statements untuk tiap jenis archive.

Step-by-Step ​

Step 1: Buat File archive.php ​

  1. Buat file baru: archive.php di root theme folder
  2. Copy seluruh isi index.php → paste ke archive.php
  3. Sekarang archive screens (category, author, date) menggunakan archive.php alih-alih index.php

Apa itu Archive Screen? ​

URLJenis ArchiveMenampilkan
/category/awardsCategory ArchiveSemua post dari kategori "awards"
/author/bradAuthor ArchiveSemua post dari author "brad"
/2017/Year ArchiveSemua post dari tahun 2017
/2017/06/Month ArchiveSemua post dari Juni 2017
/2017/06/08/Day ArchiveSemua post dari 8 Juni 2017

Step 2: Manual If Statements (Pendekatan Pertama) ​

Cara manual untuk menampilkan title berbeda per jenis archive:

php
<?php 
if (is_category()) {
    single_cat_title();
}

if (is_author()) {
    echo "Posts by ";
    the_author();
}
?>
FungsiReturn/EchoKegunaan
is_category()Return booleanCek apakah di category archive screen
is_author()Return booleanCek apakah di author archive screen
single_cat_title()EchoOutput nama kategori saat ini
the_author()EchoOutput nama author saat ini

Step 3: the_archive_title() — One Function to Rule Them All ​

Jauh lebih simpel — satu function menangani semua jenis archive:

php
<h1 class="page-banner__title"><?php the_archive_title(); ?></h1>

Output otomatis:

Jenis ArchiveOutput
Category Archive (awards)"Category: Awards"
Author Archive (brad)"Author: Brad"
Year Archive (2017)"Year: 2017"
Month Archive (June 2017)"Month: June 2017"
Day Archive (June 8, 2017)"Day: June 8, 2017"

Function ini diperkenalkan WordPress di akhir 2014. Sebelumnya harus setup if statement manual untuk setiap jenis archive.

Step 4: the_archive_description() — Subtitle/Deskripsi Archive ​

php
<div class="page-banner__intro">
  <p><?php the_archive_description(); ?></p>
</div>

Dari mana deskripsi ini berasal?

Jenis ArchiveSumber DeskripsiCara Edit
Author ArchiveField "Biographical Info"Admin → Users → Profile → Biographical Info
Category ArchiveField "Description"Admin → Posts → Categories → klik kategori → Description

Step 5: Kode Lengkap archive.php ​

php
<?php
get_header(); ?>

  <div class="page-banner">
    <div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/ocean.jpeg'); ?>)"></div>
    <div class="page-banner__content container container--narrow">
      <h1 class="page-banner__title"><?php the_archive_title(); ?></h1>
      <div class="page-banner__intro">
        <p><?php the_archive_description(); ?></p>
      </div>
    </div>
  </div>

  <div class="container container--narrow page-section">
    <?php
    while(have_posts()) {
        the_post(); ?>
        <div class="post-item">
          <h2 class="headline headline--medium headline--post-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <div class="metabox">
            <p>Posted by <?php the_author_posts_link(); ?> on <?php the_time('n.j.y'); ?> in <?php echo get_the_category_list(', '); ?></p>
          </div>
          <div class="generic-content">
            <?php the_excerpt(); ?>
            <p><a class="btn btn--blue" href="<?php the_permalink(); ?>">Continue reading &raquo;</a></p>
          </div>
        </div>
    <?php }
    echo paginate_links();
    ?>
  </div>

<?php get_footer(); ?>

Perbedaan dengan index.php:

  • Hanya bagian banner title dan subtitle yang berbeda:
    • index.php → hardcoded "Welcome to our Blog!" + "Keep up with our latest news."
    • archive.php → the_archive_title() + the_archive_description()
  • Sisanya (loop, post items, pagination) identik

Template Hierarchy Update ​

URL yang dikunjungi → File template yang digunakan:

/                           → front-page.php (homepage)
/blog                       → index.php (blog listing)
/2017/06/08/post-name       → single.php (individual post)
/about-us                   → page.php (individual page)
/category/awards            → archive.php (category archive)
/author/brad                → archive.php (author archive)
/2017/                      → archive.php (year archive)
/2017/06/                   → archive.php (month archive)

Poin Penting ​

  • archive.php menangani semua jenis archive (category, author, date)
  • the_archive_title() secara otomatis output title yang sesuai — tidak perlu if statement manual
  • the_archive_description() output deskripsi dari category description atau author biography
  • Body content (loop, post items) di-copy dari index.php — hanya banner yang berbeda
  • Tanpa archive.php, WordPress fallback ke index.php — tapi best practice untuk membuat file terpisah
  • Fungsi is_category(), is_author() tetap berguna jika ingin fine-grained control atas phrasing