Improvement pada header.php

by

Pada modul sebelumnya kita sudah implementasikan desain di header.php. Namun ada beberapa hal yang terlewat mengenai meta tag untuk mengatur charset dan viewport agar web responsive.

Tambahkan meta tag agar web kita responsive terhadap ukuran device. Selain itu css yang Anda buat juga harus didesain untuk responsive. Cara membuat responsive web tidak akan dibahas pada tutorial ini. Selain itu tambahkan juga meta charset dari website.

<meta charset= "<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">

Tambahkan language attribute dari website

<html <?php language_attributes(); ?>>

Pada body tag tambahkan fungsi WordPress untuk menambahkan class default dari WordPress. Class ini dapat Anda gunakan pada css atau JavaScript.

<body <?php body_class(); ?>>

Berikut isi header.php setelah diubah.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset= "<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
        <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>
                    <li><a href="#">Programs</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Campuses</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
                </nav>
                <div class="site-header__util">
                <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
                <a href="#" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>
                <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
                </div>
            </div>
            </div>
        </header>
Sharing is caring:

Leave a Comment