Sekarang kita lanjutkan pelajaran kemarin. Kali ini kita akan mencoba membuat header blog. Header ini berisi aneka informasi penting yang biasa dipergunakan search engine untuk mengidentifikasi blog kita.

Membuat Header

Bagian terpenting dalam sebuah blog maupun website adalah header. Sekarang kita akan mencoba membuat header yang akan muncul di setiap halaman blog kita. Untuk memunculkan header, maka pada file template cukup ditempatkan tag :

<?php get_header();?>

Header harus diletakkan didalam file header.php. Ingat pelajaran sebelumnya, kita telah membuat folder dengan nama “Belajar”. Sekarang buatlah sebuah file baru dengan nama header.php di dalam folder belajar. Kita akan mengisinya dengan script berikut ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    <style type="text/css" media="screen">
        @import url( <?php bloginfo('stylesheet_url'); ?> );
    </style>
    <link rel="alternate" type="application/rss+xml" title="RSS    2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS    .92" href=";<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom    0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url');    ?>" />
    <?php wp_head(); ?>
</head>
<body>

Kira-kira seperti itulah script pada file header.php. Nah, mari kita kupas kegunaan dari masing-masing fungsi sekaligus bagaimana konfigurasinya.

Template Tag : language_attributes();

Fungsi ini digunakan untuk menampilkan atribut bahasa yang dipergunakan.

Template Tag : bloginfo();

Untuk menampilkan informasi tentang blog. Cara penggunaanya adalah dengan menggunakan sintax berikut :

<?php bloginfo('show');?>

Adapun show, merupakan parameter string yang bisa diganti dengan atribut berikut :

  • 'name' – Weblog title; set in General Options. (Default)
  • 'description' – Tagline for your blog; set in General Options.
  • 'url' – URL for your blog’s web site address.
  • 'rdf_url' – URL for RDF/RSS 1.0 feed.
  • 'rss_url' – URL for RSS 0.92 feed.
  • 'rss2_url' – URL for RSS 2.0 feed.
  • 'atom_url' – URL for Atom feed.
  • 'comments_rss2_url' – URL for comments RSS 2.0 feed.
  • 'pingback_url' – URL for Pingback (XML-RPC file).
  • 'admin_email' – Administrator’s email address; set in General Options.
  • 'charset' – Character encoding for your blog; set in Reading Options.
  • 'version' – Version of WordPress your blog uses.
  • 'html_type' – “Content-type” for your blog.
  • 'wpurl' – URL for WordPress installation.
  • 'template_url' – URL for template in use.
  • 'template_directory' – URL for template’s directory.
  • 'stylesheet_url' – URL for primary CSS file. Returns: http//example.com/wp-content/themes/ + your-active-theme-name(value from wp_options, “stylesheet” row) + “/style.css”(hardcoded in functions.php)
  • 'stylesheet_directory‘ – URL for stylesheet directory.

Misalnya kita ingin menampilkan nama blog, maka perintahnya adalah <?php bloginfo('name')?>. Bila anda memerlukannya untuk diolah lagi menggunakan script php, maka ganti fungsinya dengan get_bloginfo();.

Template Tag : wp_title();

Fungsi ini digunakan untuk menampilkan judul dari halaman atau artikel yang sedang dibuka. Biasanya diletakkan di tag <title>. Untuk mempergunakannya gunakan sintax sebagai berikut :

<?php wp_title('sep', display); ?>

dimana 'sep' adalah text yang digunakan sebagai tanpa pemisah antara judul dengan text berikutnya. Secara default, pemisah yang digunakan adalah ‘&raquo;’ ( » ). Sedangkan display bisa kita pilih antara TRUE bila kita ingin menampilkan langsung dan FALSE bila kita ingin mengolahnya lagi. Misalnya kita ingin menampilkan text berikut pada title Nama Blog » Hello World. Maka fungsi yang dipergunakan adalah sebagai berikut :

<?php bloginfo('name'); ?><?php wp_title(); ?>

Agar memenuhi SEO, sangat bijaksana jika kita mendahulukan judul artikel baru nama blog. Maka kita perlu menghilangkan tanda pemisahnya dan menggantinya dengan tanda pemisah kita sendiri. Sehingga scriptnya akan menjadi seperti ini :

<title>
   <?php wp_title(' '); ?>
   <?php if(wp_title(' ', false)) { echo '--'; } ?>
   <?php bloginfo('name'); ?>
</title>

Pertama kita hilangkan dulu text pemisah. Ini diperlukan karena text pemisah muncul sebelum judul artikel. Hal ini tentu tidak kita kehendaki bukan. Berikutnya kita menggunakan fungsi IF yang digabung dengan fungsi wp-title untuk menentukan apakah wp-title ada atau tidak. Ingat, wp-title hanya akan muncul di page, category, archive ataupun post saja. wp-title takkan memunculkan apa-apa di halaman utama. Maka kita memerlukan perintah IF agar jika wp_title tak memunculkan apa-apa, maka tanda pemisah buatan kita juga tidak boleh muncul. Untuk membuat tanda pemisah kita sendiri, kita gunakan perintah echo '--'. Dalam hal ini echo bertugas menampilkan tanda pemisah ( — ). Hasil yang akan kita dapatkan di halaman utama adalah Nama Blog. Sedangkan di halaman lain akan muncul : Judul Artikel — Nama Blog.

Template Tag : wp_head();

Fungsi yang satu ini juga tidak boleh kita lewatkan. Fungsi ini dipergunakan untuk menampilkan script-script yang disusun oleh plugin WordPress. Terkadang plugin butuh untuk menempatkan javascript di dalam tag <head>. Nah, fungsi ini digunakan untuk menampilkan script-script milik plugin tersebut.

Nah, sekarang sudah bisa kan mengutak-atik header sendiri?? Tutorial ini adalah sekedar membangun template sederhana. Sengaja tidak saya masukkan aneka perangkat-perangkat yang rumit. Pada intinya, template WordPress memang hanya mengatur penempatan saja. Sedangkan warna dan segala attributnya, termasuk ukuran huruf dan kolom semuanya diatur oleh style.css yang nanti insya Allah juga akan kita kupas tuntas sampai ke biji-bijinya… 😀

Sementara itu dulu, harap sabar mengikutinya ya. Soalnya membaca kan lebih cepat daripada menulis…hehehe

Iklan