Didats Triadi - Wordpress expert and CSS Superhero

Lanjut lagi.

Setelah membahas masalah desain, kini kita berlanjut ke kode-kode aneh kepunyaan Wordpress. Sebenarnya untuk membuat template Wordpress tidak diperlukan pengetahuan PHP tingkat lanjut. Yang terpenting adalah pengetahuan HTMl dan CSS saja.

Langkah pertama

Kita tidak akan membuat template dari awal. Kita akan coba merubah file yang ada saja. Karena akan lebih sulit menerangkan setiap bagian, lagipula butuh waktu yang cukup panjang. Aku berasumsi PHP dan MySQL sudah terpasang dan bisa diaktifkan, juga instalasi wordpress sudah selesai. Bagi yang belum tahu bagian ini silahkan install terlebih dahulu.

Copy-paste direktori default

Direktori default adalah kepunyaan Kubrick, terlihat standar memang, tapi paling tidak aku bisa memberikan sesuatu yang standar terlebih dahulu, baru kemudian dikembangkan masing-masing. Mungkin keterangan di pada gambar bisa membantu. Setelah selesai proses copy-paste, ganti nama direktori hasil copy-paste menjadi pertamax.

Hapus isi file style.css

File style.css adalah file CSS yang merupakan jantung setiap template. Karena semua informasi yang berkaitan dengan template ditampung di sini. Setelah menghapus semua isi file (ingat, yang dihapus isi file, bukan file-nya), maka tulis kode di bawah ini di bagian paling atas file style.css

/*
Theme Name: Pertamax
Theme URI: http://url-anda.com/
Description: My first wordpress template
Version: 1.0
Author: Didats Triadi (Isi dengan nama anda)
Author URI: http://url-anda.com/
*/

Hapus isi direktori images

Kita tidak lagi memerlukan file-file gambar yang ada di direktori tersebut, untuk itu kita harus menghapusnya terlebih dahulu, agar terlihat lebih bersih. :)

Buka file header.php

Untuk membuka file header.php, akan lebih baik membukanya dengan editor khusus PHP seperti Dreamweaver, PHPEdit, Notepad++ atau program editor lain kesukaan anda. Jangan menyiksa diri dengan Notepad, Wordpad, atau Microsoft word. Ingat, anda mengedit skrip, bukan mau mengetik. :D

Kita mulai dengan bagian header

Setelah file header.php terbuka, hapus bagian yang tidak perlu mulai
dari <style type=”text/css” media=”screen”> sampai penutupnya,
</style>.

Tambahkan kode berikut ini untuk mengoptimalkan search engine. Kode di bawah ini bermaksud menyuruh Google untuk mengindex semua konten yang ada di blog dan berkunjung kembali tiap 2 hari sekali. Pada 3 baris pertama menjelaskan tentang isi blog kita. Perlu diingat, kode di bawah ini ditambahkan diantara tag header.

<meta name="author" content="Didats Triadi" />
<meta name="description" content="Deskripsinya diisi terserah
deh. " />
<meta name="keyword" content="Jangan, lupakan, untuk, mengisi,
keyword" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="revisit-after" content="2 days" />
<meta name="expires" content="never" />

Lalu kita berpindah ke bagian setelah tag body. Seperti yang sudah kita bahas kemarin, struktur div yang akan kita pakai adalah seperti di bawah ini. Jika masih bingung, lebih baik baca lagi bagian kedua.

<div id="wrap_header">
<div id="header">
</div>
</div>
<div id="wrap_menu">
<div id="menu">
</div>
</div>

Template Tags

Setelah struktur selesai, kini kita lanjut ke bagian tag-tag khusus Wordpress. Semua daftar tag bisa dilihat di situs resmi. Sayangnya, kita harus online dengan internet untuk melihatnya. Aku sudah mengambil semua daftar tag, dan bisa dilihat secara offline. Sayang, ukurannya sampai dengan 40 MB, jadi agak susah di share disini. Untuk mengambilnya sendiri, bisa menggunakan HTTrack.

Dan inilah kode HTML yang sudah ditambahkan tag Wordpress, tentunya masih dalam lingkungan header saja.

<div id="wrap_header">
<div id="header">
<h1 id="title"><a href="<?php echo get_settings('home');

?>/"><?php bloginfo('name'); ?></a></h1>
<h2 id="description"><?php bloginfo('description'); ?></h2>
</div>
</div>
<div id="wrap_menu">
<div id="menu">
<ul>
<li <?php
if (((is_home()) &&
!(is_paged())) or
(is_archive()) or
(is_single()) or
(is_paged()) or
(is_search()))
{ echo "class="active""; }
?> >
<a href="<?php echo get_settings('home'); ?>" ><?php
_e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
</div>
</div>

Keterangan:

Header

<h1 id="title"><a href="<?php echo get_settings('home');

?>/"><?php bloginfo('name'); ?></a></h1>

Penggunaan h1 untuk header sangat dianjurkan, karena setiap search engine
menganggap penting penggunaan header tag dari h1 sampai dengan h7. Ini juga termasuk
dalam optimisasi search engine. Tag yang digunakan adalah get_setting
dan bloginfo bisa dilihat keterangannya di situs resminya.

Menu

<li <?php
if (((is_home()) &&
!(is_paged())) or
(is_archive()) or
(is_single()) or
(is_paged()) or
(is_search()))
{ echo "class="active""; }
?> >
<a href="<?php echo get_settings('home'); ?>" ><?php
_e('Home'); ?></a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

Kode di atas bermaksud untuk memberikan menu Home dan atribut class active. Keterangan
tag silahkan dilihat di situs
resmi. Tidak memungkinkan untuk menjelaskan di sini semuanya.

Sampai disini dulu tutorial ini. Untuk selengkapnya, silahkan lihat file lengkapnya.

Hidup Itali! Aku memang sudah tahu Itali akan juara tahun ini! :D

No related posts.