Optimasi Template dengan Hilangkan Code Redundant

Jika Anda perhatikan, area page banner dari semua template file adalah code dengan struktur HTML yang sama. Jika suatu saat kita mengubah struktur, maka kita perlu mengupdate semua file template tersebut. Tentu akan lebih efisien jika kita hanya perlu mengubah satu file saja.

Berikut contoh code bagian page banner yang diulang di file template lainnya.

<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>

Untuk itu, salah satu pendekatan adalah dengan membuat fungsi untuk menampilkan page banner pada functions.php. Fungsi ini kita panggil disetiap page yang membutuhkan.

Tambahkan code dibawah pada functions.php.

<?php
    function PageBanner($args = NULL){
        if(!$args['title']){
            $args['title'] = get_the_title();
        }
        if(!$args['subtitle']){
            $args['subtitle'] = get_field('pb_subtitle');
        }
        if(!$args['imgbg']){
            if(get_field('pb_bg_img')){
                $args['imgbg'] = get_field('pb_bg_img')['sizes']['PageBanner'];
            }else{
                $args['imgbg'] = get_theme_file_uri('images/ocean.jpg');
            }            
        }
?>
        <div class="page-banner">
            <div class="page-banner__bg-image" style="background-image: url(<?php echo $args['imgbg']; ?>);"></div>
            <div class="page-banner__content container container--narrow">
                <h1 class="page-banner__title"><?php echo $args['title']; ?></h1>
                <div class="page-banner__intro"><p><?php echo $args['subtitle']; ?></p></div>
            </div>
        </div>

Langkah selanjutnya adalah ubah untuk file template. Pada tutorial akan diberi contoh archive.php, archive-program.php dan single-instructor.php

Jika Anda mengikuti tutorial ini dari awal, maka lakukan juga perubahan pada file template lainnya yaitu: index.php, page.php, page-past-events.php, single.php, single-event.php, dan single-program.php

//archive.php
<?php
    get_header();
    PageBanner(array(
      'title' => get_the_archive_title(),
      'subtitle' => get_the_archive_description()
    ));        
?>

<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();?>">Read more » </a></p>
    </div>
  </div>
<?php
  }
  
  echo paginate_links();
?>
</div>

<?php
    get_footer();
?>

//archive-program.php
<?php
    get_header();
    PageBanner(array(
      'title' => 'Programs Home',
      'subtitle' => 'Program Studi SkillPlus'
    ));    
?>

<div class="container container--narrow page-section">
<ul class="link-list min-list">
<?php
  while(have_posts()) {
    the_post();
?>
    <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
<?php
  }
  
  echo paginate_links();
?>
</ul>
</div>

<?php
    get_footer();
?>

//single-instructor.php
<?php
    get_header();

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

<div class="container container--narrow page-section">
    <div class="generic-content">
        <div class="row group">
            <div class="one-third"><?php the_post_thumbnail('InstructorPort'); ?></div>
            <div class="two-thirds"><?php the_content(); ?></div>
        </div>        
    </div>
    <?php
        $relatedProg = get_field('related_program');
        if ($relatedProg){
            echo '<hr class="section-break">';
            echo '<h2 class="headline headline--medium">Program Studi</h2>';
            echo '<ul class="link-list min-list">';
            foreach ($relatedProg as $prog){ ?>
                <li><a href="<?php echo get_the_permalink($prog); ?>"><?php echo get_the_title($prog); ?></a></li>
            <?php
            }
            echo '</ul>';
        }

    ?>
</div>

<?php
    }
    
    get_footer();
?>