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..
code share cara memanggil js/css di halaman tertentu
Untuk contoh theme bisa di download di hxxp://kentooz.com/theme/kandas-theme/ ini framework theme yang udah ane buat.
Sedikit code share cara memanggil js/css di halaman tertentu misalnya halaman utama saja maka halaman lain tidak dipanggil (fungsi dari theme ane):
Register css anda:
Enqueue funstions urutan css dipanggil berdasarkan urutan:
Sedikit code share cara memanggil js/css di halaman tertentu misalnya halaman utama saja maka halaman lain tidak dipanggil (fungsi dari theme ane):
Register css anda:
Code:
function ktz_register_css() {
if( !is_admin() ) { // jika bukan di halaman admin maka .....
wp_register_style( 'bootstrapmin-css',ktz_url . 'css/bootstrap.css', array(), '1.0', 'screen, projection' );
wp_register_style( 'nivo-theme',ktz_url . 'css/themes/default/default.css',array(), '1.0', 'all' );
wp_register_style( 'nivo-css',ktz_url . 'css/nivo-slider.css',array(), '1.0', 'all' );
wp_register_style( 'main-css',ktz_url . 'style.css',array(), '1.0', 'all' );
}
}
add_action( 'init', 'ktz_register_css' );
Enqueue funstions urutan css dipanggil berdasarkan urutan:
Code:
function ktz_enqueue_css() {
if( !is_admin() ) {
wp_enqueue_style( 'bootstrapmin-css' );
wp_enqueue_style( 'nivo-theme' );
if (is_home()) { wp_enqueue_style( 'nivo-css' ); } // jika di home maka ... lihat di hXXp://codex.wordpress.org/Conditional_Tags
wp_enqueue_style( 'main-css' );
}
}
add_action( 'wp_enqueue_scripts', 'ktz_enqueue_css' );
Code populer post tanpa plugin
Berikut merupakan kode untuk menampilkan popular post di theme anda (kode dari theme ane gan):
Cara menampilkan di theme ente sebagai berikut:
Code:
if( !function_exists('ktz_popcon')) { // tetap bersih dari duplicate fungsi yang menyebabkan error mastah
function ktz_popcon() {
$popcontent = new WP_Query(array('post_type'=> 'post', 'showposts' => 9, 'post_status' => 'publish', 'ignore_sticky_posts' => 1,'orderby' => 'comment_count')); // ini merupakan kode array untuk menampilkan query post... terserah ente dah nih array mau diisi apa
$popcon = '<ul>';
while ($popcontent->have_posts()) : $popcontent->the_post();
global $post;
$permalink = get_permalink();
$title = get_the_title();
$popcon .= '<li><a href="' . $permalink . '" title="' . $title . '">' . $title . '</a></li>';
endwhile;
$popcon = '</ul>';
return $popcon;
}
}
Cara menampilkan di theme ente sebagai berikut:
Code:
<?php echo ktz_popcon(); //simple yah ?>
Code cara merubah default class di avatar
Ini berguna jika anda menggunakan css framework dan merubah class atavar anda:
Singkat tapi bermanfaat...
Code:
function change_avatar_css($class) { // Hehehe ane gunain ini karena ana pake bootstrap dan untuk class imagenya menggunakan thumbnail...
$class = str_replace("class='avatar", "class='thumbnail", $class) ;
return $class;
}
Singkat tapi bermanfaat...
Code membuat breadcrumbs di theme
Berikut kode function breadcrumbs yang ane ambil dari theme ane:
Cara menampilkan crumb di theme ente:
untuk kentooz framework (theme nya nanti ane share) ente bisa liat di init.php
lihat:
dan fungsi:
Ya itu fungsi hook untuk memanggil crumbs versi kentooz framework
Code:
if ( !function_exists('ktz_crumbs') ) {
function ktz_crumbs() {
if( is_front_page() ) // jika di homepage maka tidak ditampilkan so ubah ini jika ente mau menampilkan di homepage
return;
echo '<div id="breadcrumbs-wrap"><div class="breadcrumbs">';
if ( get_theme_option('ktz_breadcrumbs') != '' ) :
echo '<a href="';
echo home_url(); // call link homepage
echo '">';
echo __('Home');
echo "</a>";
if (is_category() || is_single()) { // jika berada dihalaman category atau single
the_category(' '); // mendapatkan judul category
if (is_single()) { // jika di single maka
echo the_title();
}
} elseif (is_page()) {
echo the_title();
}
elseif (is_tag()) {
echo single_tag_title();
}
elseif (is_day()) {echo __("Archive for ",ktz_theme_textdomain); the_time('F jS, Y');}
elseif (is_month()) {echo __("Archive for ",ktz_theme_textdomain); the_time('F, Y');}
elseif (is_year()) {echo __("Archive for ",ktz_theme_textdomain); the_time('Y');}
elseif (is_author()) {echo __("Author Archive",ktz_theme_textdomain);}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "Blog Archives";}
elseif (is_search()) {echo __("Search Results",ktz_theme_textdomain);}
elseif (is_404()) {echo __("Page not found");}
endif;
echo '</div></div>';
}
}
Cara menampilkan crumb di theme ente:
Code:
<?php echo ktz_crumbs(); ?>
untuk kentooz framework (theme nya nanti ane share) ente bisa liat di init.php
lihat:
Code:
add_action( 'do_ktz_after_header', 'ktz_crumbs' );
dan fungsi:
Code:
function hook_ktz_after_header() {
do_action('do_ktz_after_header');
}
Ya itu fungsi hook untuk memanggil crumbs versi kentooz framework
Source : KASKUS.COM
No comments:
Write komentarPengunjung Yang Baik Adalah Pengunjung Sering Berkomentar Pada Suatu Blog Yang Di Kunjunginya...