Kursus WordPress

Appearance

Chapter 4: Pages — Interior Template ​

Ringkasan ​

Video ini membahas cara membuat template interior page — template yang digunakan untuk halaman-halaman generik seperti About Us, Privacy Policy, dll. Kita mengintegrasikan design dari template statis HTML ke page.php.

Step-by-Step ​

Step 1: Buat Halaman Baru di WordPress ​

  1. WordPress Admin → Pages → Add New
  2. Buat page "About Us" → isi dummy content → Publish
  3. Buat page "Privacy Policy" → Publish (WordPress sudah menyediakan draft-nya)

Step 2: Copy HTML Interior Template ke page.php ​

  1. Dari folder template statis yang didownload, buka file interior-page.html di text editor
  2. Copy HTML dari setelah closing </header> sampai sebelum section yang tidak diperlukan (sekitar div page-banner sampai div generic-content)
  3. Paste ke page.php menggantikan HTML lama

📄 page.php — versi baru:

php
<?php
get_header();

while(have_posts()) {
    the_post(); ?>

    <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_title(); ?></h1>
        <div class="page-banner__intro">
          <p>Don't forget to replace me later.</p>
        </div>
      </div>
    </div>

    <div class="container container--narrow page-section">
      <!-- Menu sidebar (di-comment dulu untuk nanti) -->
      <!--
      <div class="page-links">
        <h2 class="page-links__title"><a href="#">About Us</a></h2>
        <ul class="min-list">
          <li class="current_page_item"><a href="#">Our History</a></li>
          <li><a href="#">Our Goals</a></li>
        </ul>
      </div>
      -->

      <div class="generic-content">
        <?php the_content(); ?>
      </div>
    </div>

<?php }

get_footer();
?>

Penjelasan perubahan key:

BagianApa yang dilakukan
<?php the_title(); ?>Mengganti judul hardcoded "Our History" dengan judul page dinamis
Don't forget to replace me later.Placeholder subtitle — nanti akan diganti dengan custom field
Background imageMenggunakan get_theme_file_uri('/images/ocean.jpeg') agar path benar
<?php the_content(); ?>Menampilkan isi page dari database
Menu sidebarDi-comment dulu (<!-- ... -->) — akan diaktifkan di lesson berikutnya

Step 3: Tambahkan Title Tag Otomatis ​

Saat ini, tab browser menampilkan URL alih-alih judul halaman yang proper. Perbaikan:

📄 functions.php — tambahkan di bagian bawah:

php
function university_features() {
    add_theme_support('title-tag');
}

add_action('after_setup_theme', 'university_features');
KodePenjelasan
add_theme_support('title-tag')Memberitahu WordPress untuk otomatis generate tag <title> di <head> berdasarkan halaman yang dikunjungi
'after_setup_theme'Hook/event WordPress — momen ketika theme selesai dimuat
university_featuresNama function (bebas) untuk mendaftarkan fitur-fitur theme

Hasil: Tab browser sekarang menampilkan "About Us – Fictional University" secara otomatis.

Ganti placeholder # di link-link header dan footer dengan URL yang benar.

Di header.php — link About Us:

html
<a href="<?php echo site_url('/about-us'); ?>">About Us</a>

Di header.php — logo link ke homepage:

html
<a href="<?php echo site_url(); ?>">

Di footer.php — link-link:

html
<!-- Homepage -->
<a href="<?php echo site_url(); ?>">Homepage</a>

<!-- About Us -->
<a href="<?php echo site_url('/about-us'); ?>">About Us</a>

<!-- Privacy Policy -->
<a href="<?php echo site_url('/privacy-policy'); ?>">Privacy Policy</a>
FungsiKegunaan
site_url()Mengembalikan URL root website (contoh: http://fictionaluniversity.local)
site_url('/about-us')Mengembalikan URL absolut ke path tertentu (contoh: http://fictionaluniversity.local/about-us)

site_url() lebih reliable daripada hardcode relative path seperti /about-us, terutama jika menggunakan XAMPP/MAMP yang mungkin punya structure URL berbeda.

Gambaran functions.php Lengkap Saat Ini ​

php
<?php

function university_files() {
    wp_enqueue_script('main-university-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);
    wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
    wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
}

add_action('wp_enqueue_scripts', 'university_files');

function university_features() {
    add_theme_support('title-tag');
}

add_action('after_setup_theme', 'university_features');

Poin Penting ​

  • page.php mengontrol tampilan semua individual pages (About Us, Privacy Policy, dll)
  • site_url() adalah cara terbaik membuat URL di WordPress — selalu menghasilkan URL absolut
  • add_theme_support('title-tag') membuat WordPress auto-generate <title> tag — tidak perlu manual
  • Hook after_setup_theme digunakan untuk mendaftarkan fitur theme (title-tag, menu, dll)
  • Sidebar menu di-comment dulu — akan diaktifkan dan dibuat dinamis di lesson selanjutnya