Parent dan Child Page

by

Pada modul ini kita akan implementasikan desain dengan menampilkan breadcrumb, jika sebuah page adalah child. Text pada breadcrumb juga akan dinamis disesuaikan dengan judul dari child dan parent page.

Selain itu menu untuk mengakses childpage akan ditampilkan disisi kanan. JIka bukan parent page atau child page, maka menu akan disembunyikan.

TIPS, jika fungsi dari WordPress dimulai dengan kata “get”, maka untuk menampilkan hasil return harus menggunakan perintah echo. Contoh, get_the_title($id), untuk menampilkan isinya harus menggunakan perintah echo. Sementara untuk fungsi the_title(), tidak diperlukan perintah echo.

page.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.jpg') ?>);"></div>
    <div class="page-banner__content container container--narrow">
      <h1 class="page-banner__title"><?php the_title(); ?></h1>
      <div class="page-banner__intro">
        <p>JANGAN LUPA NANTI DIGANTI</p>
      </div>
    </div>  
  </div>

  <div class="container container--narrow page-section">
    <?php 
      $pID = wp_get_post_parent_id(get_the_ID());
      if ($pID) {
    ?>
      <div class="metabox metabox--position-up metabox--with-home-link">
        <p><a class="metabox__blog-home-link" href="<?php echo get_permalink($pID); ?>"><i class="fa fa-home" aria-hidden="true"></i> Back to <?php echo get_the_title($pID); ?></a> <span class="metabox__main"><?php the_title(); ?></span></p>
      </div>
    <?php
      }
    ?>
    <?php 
      $isParent = get_pages(array(
        'child_of' => get_the_ID()
      ));
      if ($pID or $isParent){ 
    ?>
    <div class="page-links">
      <h2 class="page-links__title"><a href="<?php echo get_permalink($pID); ?>"><?php echo get_the_title($pID); ?></a></h2>
      <ul class="min-list">
      <?php
        if($pID){
          $childOf = $pID;
        }else{
          $childOf = get_the_ID();
        }

        wp_list_pages(array(
          'title_li' => NULL,
          'child_of' => $childOf,
          'sort_column' => 'menu_order'
        ));
      ?>
      </ul>
    </div>
    <?php } ?>
    <div class="generic-content">
        <?php the_content(); ?>
    </div>

  </div>
<?php
    }

    get_footer();
?>
?>

Pembahasan code

Code ini adalah bagian dari menampilkan breadcrumb. Breadcrumb akan ditampilkan jika page memiliki parent.

Untuk memeriksa apakah sebuah page memiliki parent, digunakan fungsi wp_get_post_parent_id(id). parameter id diisi dengan id dari page saat ini, yang dapat diperoleh dengan menggunakan fungsi get_the_ID().

Jika memiliki parent id, maka akan mengembalikan nilai > 0, jadi bisa digunakan if statement untuk menampilkan breadcrumb.

<div class="container container--narrow page-section">
    <?php 
      $pID = wp_get_post_parent_id(get_the_ID());
      if ($pID) {
    ?>
      <div class="metabox metabox--position-up metabox--with-home-link">
        <p><a class="metabox__blog-home-link" href="<?php echo get_permalink($pID); ?>"><i class="fa fa-home" aria-hidden="true"></i> Back to <?php echo get_the_title($pID); ?></a> <span class="metabox__main"><?php the_title(); ?></span></p>
      </div>
    <?php
      }
    ?>

Pada code dibawah, menu untuk mengakses child page akan ditampilkan jika page saat ini adalah child page atau parent page, jika bukan keduanya menu tidak akan ditampilkan.

Untuk memeriksa apakah sebuah page adalah page parent, digunakan trik dengan memeriksa apakah page memiliki child. Fungsi yang digunakan adalah get_pages(array).

Setelah itu dapat kita gunakan if statement untuk memeriksa apakah current page adalah child atau parent, yaitu if ($pID or $isParent).

Untuk menampilkan link ke child page gunakan fungsi wp_list_pages(array). Untuk mengatur urutan dari page, gunakan ‘sort_column’ => ‘menu_order’. Order dari page dapat diatur saat kita membuat page.

<?php 
      $isParent = get_pages(array(
        'child_of' => get_the_ID()
      ));
      if ($pID or $isParent){ 
    ?>
    <div class="page-links">
      <h2 class="page-links__title"><a href="<?php echo get_permalink($pID); ?>"><?php echo get_the_title($pID); ?></a></h2>
      <ul class="min-list">
      <?php
        if($pID){
          $childOf = $pID;
        }else{
          $childOf = get_the_ID();
        }

        wp_list_pages(array(
          'title_li' => NULL,
          'child_of' => $childOf,
          'sort_column' => 'menu_order'
        ));
      ?>
      </ul>
    </div>
    <?php } ?>
Sharing is caring:

Leave a Comment