Implementasi Desain untuk page.php

by

Pada modul ini kita akan implementasikan desain untuk file template page.php. File html statis yang digunakan adalah interior-page.html yang sudah didownload pada modul sebelumnya.

Modul ini juga akan membahas tentang Parent – Child Page. Kita buat dulu beberapa page dummy untuk keperluan tutorial ini.

  • About Us.
  • Privacy Policy.
  • Our History, dengan parent About Us.
  • Our Goals, dengan parent About Us.

page.php

copy dari tag <div class=”page-banner”> sampai ke close dari <div class=”generic-content”>. Lalu ganti fixed title dan content menggunakan fungsi WordPress, the_title dan the_content().

Untuk background image, ganti fixed uri dengan fungsi WordPress get_theme_file_uri().

<?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>AKAN DIGANTI MENGGUNAKAN FIELD </p>
      </div>
    </div>  
  </div>

  <div class="container container--narrow page-section">

    <div class="metabox metabox--position-up metabox--with-home-link">
      <p><a class="metabox__blog-home-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Back to About Us</a> <span class="metabox__main">Our History</span></p>
    </div>
    
    <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();
?>

function.php

Bila diperhatikan tab browser, title tidak tampil (lihat gambar dibawah). Untuk itu kita tambahkan perintah add_action(‘after_setup_theme’) pada functions.php untuk menampilkan title pada tab caption.

    function aftertheme(){
        add_theme_support('title-tag');
    }
    add_action('after_setup_theme', 'aftertheme');

header.php

Untuk sementara, pada bagian menu kita lakukan hardcode untuk link akses page. Pada modul berikutnya kita akan bahas cara gunakan widget menu dari WordPress.

PERHATIAN Pada code dibawah tidak dimasukan semua header.php

<!DOCTYPE html>
<html>
    <head>
        <?php wp_head(); ?>
    </head>
    <body>
        <header class="site-header">
            <div class="container">
            <h1 class="school-logo-text float-left"><a href="<?php echo site_url();?>"><strong>Fictional</strong> University</a></h1>
            <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
            <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
            <div class="site-header__menu group">
                <nav class="main-navigation">
                <ul>
                    <li><a href="<?php echo site_url('/about-us');?>">About Us</a></li>

footer.php

Sama seperti pada header.php, kita update agar link untuk about us dan privacy policy bisa diclick.

PERHATIAN, code dibawah tidak berisi seluruh footer.php, hanya ditampilkan bagian yang diubah saja.

            <div class="site-footer__col-one">
            <h1 class="school-logo-text school-logo-text--alt-color"><a href="<?php echo site_url();?>"><strong>Fictional</strong> University</a></h1>
            <p><a class="site-footer__link" href="#">555.555.5555</a></p>
            </div>

            <div class="site-footer__col-two-three-group">
            <div class="site-footer__col-two">
                <h3 class="headline headline--small">Explore</h3>
                <nav class="nav-list">
                <ul>
                    <li><a href="<?php echo site_url('/about-us');?>">About Us</a></li>
                    <li><a href="#">Programs</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Campuses</a></li>
                </ul>
                </nav>
            </div>

            <div class="site-footer__col-three">
                <h3 class="headline headline--small">Learn</h3>
                <nav class="nav-list">
                <ul>
                    <li><a href="#">Legal</a></li>
                    <li><a href="<?php echo site_url('/privacy-policy');?>">Privacy</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
                </nav>
            </div>

Setelah kita implementasikan desain, page akan tampil seperti gambar diatas. Pada modul berikutnya kita akan membahas Parent – Child page, dan desain breadcrumb (lihat gambar diatas, menu back to about us dan our history).

Sharing is caring:

Leave a Comment