kentoozAvatar border
TS
kentooz
Cara membuat wordpress theme dengan baik dan benar
Ane anggota baru forum ini. Sebelumnya ane pernah share nih topic di forum tetangga, newbie mau sedikit berbagi ilmu, kalau agan gak keberatan bisa komentar, kalau agan gak suka maafkan karena ane cuman newbie.

Untuk theme yang pernah ane buat nanti ane share dimari.

Ane mau sedikit berbagi cara membuat theme wordpress:
Langkah awal:
1. Selalu aktifkan WP_DEBUG menjadi true di wp_config (ini untuk menghindari kesalahan kode karena beberapa kesalahan kode jika ini nonactive tidak ditampilkan di wordpress anda dan untuk menghidari functions2 yang deprecate)
2. Sebelum anda membuat theme install terlebih dulu theme-check di WP anda.. linknya hxxxxp://wordpress.org/extend/plugins/theme-check/ (ini agar theme hasil buatan Standart dengan WP standat coding sehingga theme anda bisa support plugin dari WP)

Langkah Berikutnya: 1. Menulis kode CSS. (WP required style.css yang di taruh di folder awal theme anda).

Berikut contoh kode dari CSS:
Code:

/*
Theme Name: namathema
Theme URI: hxxp://namadomainthema.com
Description: ini adalah keterangan dari theme yang anda buat
Author: namapembuattheme
Author URI: hxxp://namadomainauthor.com
License: GNU General Public License version 3.0
License URI: hxxp://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0
Tags: tags theme yang anda buat lihat di hXXp://wordpress.org/extend/themes/about/ untuk tags nya */
.class{}
#id{}


nah simpan css anda dengan nama style.css berikut adalah CSS standart WP yang harus ada di CSS anda:
Code:
/* =WordPress Core -------------------------------------------------------------- */ .alignnone {} 
.aligncenter,div.aligncenter {}
.alignright {}
.alignleft {}
.aligncenter {}
a img.alignright {}
a img.alignnone {}
a img.alignleft {}
a img.aligncenter {}
.wp-caption {}
.wp-caption.alignnone {}
.wp-caption.alignleft {}
.wp-caption.alignright {}
.wp-caption img {}
.wp-caption
p.wp-caption-text {}

Ingat jangan menghapus kode diatas... Anda bisa mengkosongkannya atau memberi comment tag pada kode tersebut.

Sekarang anda buat file theme anda, berikut adalah list file yang harus anda buat di WP theme:

1. index.php ini untuk mengidentifikasi halaman homepage anda
2. comments.php ini untuk mengidentifikasi comment form dan comment list di theme anda
3. 404.php ini untuk halaman error 404 jika post anda tidak ditemukan 4. front-page.php (optional)
5. home.php (optional)
6. single.php ini merupakan halaman utama postingan anda atau single post jika anda menggunakan post-type anda bisa membuat baru halaman single anda dengan nama single-posttype.php posttype bisa diisi misal membuat posttype portfolio anda bisa membuat single-portfolio.php
7. page.php ini merupakan halaman page anda semisal sample page
8. tag.php (optional untuk mengidentifkasi postingan berdasarkan tag)
9. category.php (optional untuk mengidentifkasi postingan berdasarkan category)
10. date.php (optional untuk mengidentifkasi postingan berdasarkan waktu/date)
11. author.php (optional untuk mengidentifkasi postingan berdasarkan author)
12. archive.php ini merupakan halaman archive jika halaman tag, category,date, author anda tidak dimasukkan maka halaman ini yang menjadi utamanya.
13. search.php ini merupakan halaman pencarian biasanya diisi dengan the_excerpt() untuk contentnya.
14. attachment.php (optional untuk single file attachment anda)

Oke berikut merupakan tambahan file theme untuk mempermudah pembuatan theme anda:
1. header.php merupakan header theme anda dipanggil dengan get_header();
2. sidebar.php merupakan sidebar theme anda dipanggil dengan get_sidebar();
3. footer.php merupakan footer dari theme anda dipanggil dengan get_footer();
4. functions.php merupakan functions 2 php tertentu yang membantu mempercantik theme anda seumpama function share post dan lain2.

Oke sekarang bagaimana caranya memanggil file javascript dan CSS yang benar di theme anda berikut adalah
1. Untuk css
Code:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Oke diatas merupakan function dari wp_codexnya. Keterangan: $handle untuk menghandle function yang akan dipanggil CSS nya
1. $src path CSS anda
2. $depts CSS harus di load sebelum CSS ini... Seumpama disini functions cssframework.css.. Default array();
3. $ver versi css anda bisa diisi dengan tanggal (01012012)
4. $media merupakan media CSS contohnya all, screen, dll list lengkapnya di hXXp://www.w3.org/TR/CSS2/media.html#media-types

Oke berikut contoh penulisan CSS nya:
Code:

function theme_cssanda() {
wp_register_style( 'handdlecssini', get_template_directory_uri() . '/css/custom-style.css', array(), '01012012', 'all' );
wp_enqueue_style( 'handdlecssini' );
}
add_action('wp_enqueue_scripts', 'theme_cssanda'); // add action fungsi wp


2. Untuk JS Kurang lebih hampir sama dengan css wp_enqueue_script( $handle ,$src ,$deps ,$ver ,$in_footer );

Berikut contoh penggunaannya

Code:

function theme_jsanda() {
wp_enqueue_script('handdlejs', get_template_directory_uri() . '/js/custom_script.js', array('jquery'));
wp_enqueue_script( 'handdlejs' );
}
add_action('wp_enqueue_scripts', 'theme_jsanda');


Nah contoh diatas atas untuk array('jquery') ini merupakan fungsi memanggil jquery terlebih dahulu sebelum memanggil js ini...

SEEEPPP diatas merupakan dasar2 nya cara baik untuk membuat theme.

Dengan membuat theme yang benar maka website anda bisa di load dengan baik dan cache menjadi lebih baik sehingga website anda bisa di load dengan cepat...

Berikut adalah contoh theme free yang udah ane buat:
hxxp://kentooz.com/theme/kres-theme/
hxxp://kentooz.com/theme/kandas-theme/

Untuk kodenya akan ane share di postingan ini..
Diubah oleh kentooz 29-11-2012 02:13
0
11.3K
61
GuestAvatar border
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Urutan
Terbaru
Terlama
GuestAvatar border
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Komunitas Pilihan