• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 6 - Membuat Template Header

11‘13
May

info80.jpg

Semoga anda tidak menemui kendala di tahapan perjalanan menjadi WordPress desainer sebelumnya dan dapat mengerjakan semua tahapan belajar membuat template wordpress dengan baik. Sekarang dan berikutnya kita sudah mulai berada di tahapan inti pembangunan template wordpress, mari kita mulai dengan membuat template header WordPress. Disini kita akan banyak bekerja dengan file header.php dan menambahkan beberapa fungsi baru pada file function.php

Anda tentu masih ingat pada tahap pengerjaan Struktur File dan Folder Theme WordPress di tahap itu Anda sudah membagi struktur HTML kedalam 3 bagian dan file header kita berisi tag HTML sebagai berikut

<div id="page" class="hfeed site">
	
    <header id="masthead" class="site-header" role="banner">
    
    	<hgroup></hgroup>
        
        <nav role="navigation" class="site-navigation main-navigation"></nav><!-- .site-navigation .main-navigation -->
        
    </header><!-- #masthead .site-header -->
    
    <div id="main" class="site-main">

Saat ini di bagian header secara teknis Anda memiliki tag header yang tidak valid karena itu mari kita tambahkan validasi HTML DOCTYPE dan beberapa teknik optimisasi mesin pencari (SEO). Doctype memberi tahu browser tantang bagaimana dia harus mengurai dokumen yang kita buat, sesuai dengan standar terbaru dari W3C kita akan menggunakan doctype HTML5. Pada pembelajaran wordpress ini saya sekalian mengajarkan anda membuat template HTML5 semantic dan di CSS nanti akan kita desain dengan teknik responsif

Pembuatan Template Bagian <head>

Buka file header.php dan di baris pertama file silahkan paste tag inline documentation wordpress berikut tag HTML doctype

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package W3functionDesign
 * @since W3functionDesign 1.0
 */
?><!DOCTYPE html?>
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

Pada tag diatas kita membungus tag <html> dengan komentar dan menambahkan statement tentang kondisi yang harus dilakukan apabila ternyata browser yang membukanya adalah IE8. Pada jenis browser IE 8 kita tambahkan id=ie8 yang berguna untuk menargetkan gaya CSS pada browser kuno yang akan dijelaskan lebih lanjut dibagian CSS nanti.

Ok selanjutnya kita akan menambahkan bagian tag <head> kedalam template wordpress yang berisi informasi meta tentang halaman web, seperti judul web, link ke file CSS dan lainnya.

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
// Add the blog name.
bloginfo( 'name' );
 
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
 
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'W3functionDesign' ), max( $paged, $page ) );
 
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>

Hufftt apa tuh? memang banyak bahasa gagu diatas tapi sabar jangan pergi dulu saya jelaskan satu per satu kegunaan masing-masing tag diatas :)

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />

Baris pertama digunakan untuk menentukan encoding karaker yang akan digunakan untuk blog kita, bloginfo( 'charset' ); adalah fungsi dari wordpress untuk set karakter seperti utf-8, iso dan sebagainya pada meta. Baris kedua digunakan untuk menentukan lebar viewport dari perangkat browser yang digunakan seperti laptop, desktop, tablet dan handphone.

<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
// Add the blog name.
bloginfo( 'name' );
 
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
 
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'W3functionDesign' ), max( $paged, $page ) );
 
?></title>

Baris tag diatas adalah tag <title> yang digunakan untuk menentukan judul dari sebuah halaman website, bagaimana isi judul nanti di tampilkan tergantung dari halaman mana yang kita lihat. Judul-judul halaman di atur oleh fungsi-fungsi WordPress yang terdapat di tag <?php ?>

Pada fungsi diatas disetiap halaman wordpress kita akan menampilkan judul halaman dan info blog yang dipisahkan karakter pemisah "|". Fungsi wp_title() berfungsi untuk menampilkan judul kemudian setelah judul kita menambahkan karakter pemisah "|" selanjutnya disebelah kanan kita memanggil info blog dengan fungsi bloginfo().

Fungsi bloginfo() merupakan sebuah array yang memiiliki beberapa data, kita mengambil data description dengan fungsi get_bloginfo( 'description', 'display' ); lalu mendeklarasikannya kedalam sebuah variable $site_description. Selanjutnya kita membuat statement untuk hanya menampilkan $site_description.di halaman utama is_home() atau is_front_page().

Terakhir kita menambahkan keterangan nomor halaman yang sedang dibuka dengan fungsi sprintf( __( 'Page %s', 'W3functionDesign' ), max( $paged, $page ) );

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

Pada baris diatas kita menambahkan support XFN dan menyediakan link url pingback

<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

Diatas adalah kondisional HTML yang lain untuk memberikan dukungan support HTML5 di browser IE9 dan IE versi sebelumnya, disini kita memerlukan sebuah plugin JavaScript untuk melakukannya silahkan download plugin HTML5 kemudian simpan di folder js yang sebelumnya kita buat lalu beri nama file dengan html5.js.

Baris selanjutnya kita punya

<?php wp_head(); ?>

Ini adalah sebuah fungsi yang dibutuhkan untuk menjalankan Plugin-plugin WordPress dan hal-hal lainnya seperti stylesheet

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

Tag <body> untuk theme kita, fungsi  body_class() berguna untuk menambahkan class class CSS pada body dimana dengan fungsi ini nanti kita bisamenambahkan berbagai macam gaya tampilan wordpress. 

Pembuatan Template Bagian <header>

Pada file header.php selanjutnya kita beralih ke tag <hgroup>, didalam tag ini kita akan menambahkan nama dan deskripsi web. Silahkan ganti tag didalam <hgroup> dengan tag berikut:

<hgroup>
    <h1 class="site-title">
        <a href="<?php echo home_url( '/' ); ?>" 
        title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" 
        rel="home">
            <?php bloginfo( 'name' ); ?>
        </a>
    </h1>
    <h2 class="site-description">
        <?php bloginfo( 'description' ); ?>
    </h2>
</hgroup>

Pada kode diatas kita menggunakan template tag wordpress yang disebut home_url() berfungsi untuk mengambil nilai URL halaman utama blog. Untuk mengambil nama dan deskripsi dari blog kita kembali menggunakan fungsi bloginfo() dengan terlebih dahulu menambahkan layer pengamanan esc_attr() sebelum pemanggilannya.

Seharusnya sampai dengan tahap ini Anda sudah mengerti bagaimana logic kita mengerjakan wordpress, mudah bukan? kita mengambil nilai-nilai yang kita butuhkan dengan fungsi php wordpress untuk mengisi konten-konten HTML

Ok selanjutnya kita beralih kebagian <nav>, silahkan ganti tag didalam <nav> dengan tag berikut

<nav role="navigation" class="site-navigation main-navigation">
    <h1 class="assistive-text"><?php _e( 'Menu', 'W3functionDesign' ); ?></h1>
    <div class="assistive-text skip-link">
        <a href="#content" title="<?php esc_attr_e( 'Skip to content', 'W3functionDesign' ); ?>">
        <?php _e( 'Skip to content', 'W3functionDesign' ); ?>
        </a>
    </div>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>

Pada tag diatas kita menambahkan judul menu dan link untuk melompat kebagian konten (Skip to content). Masih ingat pada bagian Menyiapkan Fungsi-fungsi (Functions) Theme? pada bagian tersebut kita mendaftarkan fungsi custom menu dan sekarang dipanggil didalam tag <nav> dengan fungsi wp_nav_menu( array( 'theme_location' => 'primary' ) );

Ok kita masih punya beberapa pekerjaan lagi untuk menuntaskan bagian template header wordpress, silahkan buka file function.php kita akan menambahkan beberapa fungsi baru untuk meload stylesheet dan javascript. Pada function.php tambahkan tag php berikut di baris terakhir

function W3functionDesign_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
 
    wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120206', true );
 
}
add_action( 'wp_enqueue_scripts', 'W3functionDesign_scripts' );

seperti yang anda lihat pada fungsi diatas kita menggunakan fungsi wp_enqueue_style() da  wp_enqueue_scripts() untuk memanggil file cascading stylesheet dan javascript, sebenarnya bisa saja kita meload stylesheet dan javascript secara hardcode di bagian header.php tapi saya disini menunjukan kepada anda bagaimana cara meload yang terbaik.

Diakhir fungsi saya mengaitkan 'W3functionDesign_scripts' kedalam wp_enqueue_scripts(). Saya jelaskan sisa fungsi-fungsi yang lain dibawah

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

Dibagian fungsi ini kita meload comment-reply.js yang sudah ada dipaket wordpress, selanjutnya

    wp_enqueue_script( 'navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20120206', true );
 

Dibagian terakhir saya meload plugin bawaan template wordpress di theme TwentyTwelve yaitu navigation.js, silahkan cari navigation.js di folder js theme bawaan wordpress copy dan paste di folder js theme anda. Plugin navigation tersebut cukup berguna untuk membantu tampilan menu terlihat lebih baik di layar lebih kecil seperti layar handphone

Ok sekarang pekerjaan kita untuk bagian template header sudah selesai, kita sudah menambahkan banyak kode disini dan sudah mengoptimisasi header website untuk mesin pencari. Sampai dengan tahap ini tampilan theme kita akan seperti gambar dibawah ini

Aww, masih banyak yang harus dikerjakan ya kita bertemu lagi di bagian selanjutnya untuk mengerjakan Template Index Wordpress :)

Anda juga mungkin suka dengan artikel ini :

  1. Penyerangan BotNet Kepada Para Pengguna Wordpress
  2. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 4 - Menyiapkan Fungsi-fungsi (Functions) Theme
  3. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 9 - Membuat Template Komentar (comment.php)
  4. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 3 - Struktur File dan Folder Theme
  5. Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 5 - Sanitasi dan Validasi untuk Keamanan Theme

Komentar

  • dunia flowmeter (13 Jun 2016 11:20:00)

    tips dan trik yang bagus dan menarik sekali..thanks atas pencerahannnya ...salam sukses slalu

  • sead (11 Sep 2015 01:06:02)

    ini gan, saya juga buat artikel tentang tutorial cara membuat template WP lengkap http://kafeinkode.com/membuat-template-wordpress/ mohon kritik dan sarannya yak...

  • obat alzheimer (07 Feb 2015 10:13:31)

    mantap dah tutornya kawan
    http://acemaxs31.com/obat-alzheimer-tradisional/
    http://i-bikeco.com
    http://mas-galih.com

  • darul (25 Jan 2014 01:17:58)

    bro yang Tahapan Belajar Membuat Desain Template Theme Wordpress V3.x Bagian 3 -
    link nya mana???

  • GoaGeol (13 Dec 2013 12:50:51)

    pembahasan yang menarik mas.. sekalian mau tanya.. misalkan kita sudah buat tema, trus bagaimana cara nya agar kode-kode php kita itu bisa ter-struktur dengan rapi.. terima kasih atas jawabannya.

    =====
    SAlam

» Muat Komentar Sebelumnya (6 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff