Salin [atau dalam English copy tema] Wordpress bukanlah benda yang mudah tapi tidak terlalu susah seperti yang korang jangkakan. Dalam post aku kali ni aku akan ajar korang cara untuk copy tema Wordpress menggunakan Firefox dan Firefox plugin yang dipanggil Firebug. Tapi aku risau juga jika apa yang aku ajar ni akan membimbing korang untuk menjadi seorang pencuri. Korang kena ingat yang korang perlu hormat hak kerja orang lain ok? . Tutorial ini akan membantu korang untuk meningkatkan pengetahuan korang tentang XHTML, CSS dan jugak code Wordpress.
Sebelum kita mulakan dengan lebih jauh lagi, korang kena Wordpress dalam local machine korang, pengetahuan tentang XHTML, CSS dan programming. Sebab kita nak rip tema ni pakai Firefox, korang mesti install Firefox dalam komputer korang. Oh ya! Plugin dia pun jangan lupa ya. Kalau tak tau nak cari kat mana, klik sini.
Ok! Jom kita mulakan sekarang. Mula-mula, buat tema folder (namakan apa-apa je yang korang suka) kat bawah /wp-content/themes/.Pergi ke blog Wordpress yang korang suka tema dia. Aku guna tema klasik Wordpress. Salin CSS codes dari CSS tab dalam Firebug Windows .
Pilih semua kod CSS dan pastekan kod tu ke teks edior atau dalam notepad. Letakkan kod berikut di awal kod CSS yang korang mula-mula salin ke notepad. Kod kat bawah ni untuk maklumat Wordpress.
/*
Theme Name: Your theme name
Theme URI: [url]http://yourthemeURL.com/[/url]
Description: Your theme description blah blah blah
Version: 1.1
Author: Your name
Author URI: E-Commerce Hosting
*/
Simpan sebagai style.css dalam theme folder yang korang create under wp-content/themes/.Buat index.php di bawah folder korang. Tulis kod berikut.
<!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?>
<head profile=?http://gmpg.org/xfn/11�>
</head>
<body>
</body>
</html> language_attributes() boleh digunakan untuk tambah lang, xml:lang dan dir attributes ke html tag untuk theme korang. Letakkan function ni lepas xmlns attribute dalam tag html.
html xmlns=?[url=http://www.w3.org/1999/xhtml?]XHTML namespace[/url] <?php language_attributes(); ?>> Memahami fungsi BlogInfo
Bloginfo mengembalikan maklumat yang telah korang tetapkan dalam User Profile dan General Options daripada Panel Administration Wordpress korang. Kod berikut adalah maklumat asas yang diperlukan untuk Qordpress korang dalam html. Kod tersebut harus berada di dalam bahagian atas <*head> tag.
[HTML]<meta http-equiv=?Content-Type? content=?<?php bloginfo(?html_type?); ?>; charset=<?php bloginfo(?charset?); ?>? />
<meta name=?generator? content=?WordPress <?php bloginfo(?version?); ?>? />
<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_get_archives(?type=monthly&format=link?); ?>
<?php wp_head(); ?>
<style type=?text/css? media=?screen?>
@import url( <?php bloginfo(?stylesheet_url?); ?> );
</style>
[/HTML]Gunakan tajuk SEO yang betul.
<title><?php wp_title(?); ?> <?php if(is_single() || is_page() || is_category){ _e(???);}?><?php bloginfo(?name?); ?></title> Tajuk tag mesti berada di dalam tag title.
Mari kita mulasalin well-formed elemen tag.
Sebelum kita memulakan sesi P&P ini [ceh dah macam cikgu pulak], korang kena ada pengetahuan tentang html dan kod wordpress. Ideanya adalah.. First sekali kita salin parent element tag dan kemudian korang salin child element. Kita ulangi proses ni sampau semua tags berjaya disalin. :)
Expand setiap tag dan cuba fahami fungsi yang digunakan dalam tema.
Penting untuk mengetahui fungsi wordpress yang digunakan dalam tema yang akan korang salin. Pertama expandkan tag dan look up dan tentukan fungsi apa yang digunakan di dalam tag.
Contoh kod yang dipaparkan di atas,
Wordpress mempunyai fungsi bloginfo yang boleh menghasilkan maklumat asas wordpress yang dah aku letakkan. Sekarang, aku akan ubahkan coding wordpress. Kod seterusnya akan menghasilkan keputusan yang ditunjukkan di atas.
Kod PHP:
<h1><a href=?<?php bloginfo(?url?);?>?><?php bloginfo(?title?);?></a></h1>
<div class=?description?><?php bloginfo(?description?);?></div>
Ramai pereka tema Wordpress ni gunakan default posts query di dalam tema kecuali yang custom je. Ada yang guna query_posts untuk buat custom query bagi tujuan yang tertentu je. Tapi tu semua tak penting. All are in the loop. :)
Memahami Struktur Asas Perulangan Pos
Loop digunakan oleh WordPress untuk menampilkan setiap posting korang. Dengan menggunakan The Loop, Wordpress akan paparkan posting masing-masing pada halaman ini dan format mereka sesuai dengan bagaimana mereka sesuai kan dengan kriteria tertentu dalam The Loop tag. Ini adalah struktur asas the_loop. Dalam perkara ni aku biasanya meletakkan the_title (), the_permalink (), the_content (), dll
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<?php _e(?Sorry, no posts matched your criteria.?); ?>
<?php endif; ?>
Kalau korang buat pogramming, dengan senang korang akan dapat tahu yang kod ni dihasilkan dari loop. :D
Kod seterusnya akan memaparkan apa yang dipaparkan di atas.
<div id=?post-<?php the_ID(); ?>? class=?post?>
</div>
Kembangkan div yang korang nampak dalam sub-elements.
Kembangkan h2 tag element.
the_title dan juga the_permalink
the_title mengembalikan semula tajuk post dan the_permalink mengembalikan permalink post korang. Jadi tulis semula dengan PHP code. :)
<h2>
<a title=?Permanet Link to <?php the_title();?>? rel=?bookmark? href=?<?php the_permalink();?>?>
<?php the_title();?></a>
</h2>
the_time atau the_date
the_time mengembalikan semua tarikh post korang dan the_date hanya mengembalikan tarikh post pertama korang yang dipublish pada hari yang sama.. Aku cadangkan korang guna the_time ^^
<small><?php the_time(?F d, Y?);?></small>
Semak semula format tarikh kat PHP.net
the_content
the_content mengembalikan content post korang. Optional parameter digunakan untuk memapaparkan read more link kalau post tu guna
<div class=?entry?>
the_content (?Read the rest of this entry?);
</div>
the_tags
Fungsi the_tags ialah mengembalikan tags link sesuatu post. Boleh dilaksanakan dalam wordpress 2.3. the_tags(?start?, ?seperate?,?end?);
<<p class=?postmetadata?>
the_tags (?Tags:?, ?, ?, ?<br />?);
</p>
Wordpress menggunakan header.php, index.php, single.php, page.php, category.php, search.php, comments.php, functions.php dan footer.php untuk tema. Oh ya! Korang boleh menggunakan hanya index.php untuk tema korang. Tetapi mungkin korang perlu menulis kod yang lebih rumit ketika korang menggunakan gaya yang berbeza untuk laman yang berbeza. Katakanlah, kalau korang nak laman utama, pos dan satu laman yang berbeza. Korang kena pilih salah satu conditional_tags atau page tu.
Sebagai contoh, kod berikut akan menunjukkan kutipan posting bila korang browse kategori, carian, tag dan halaman utama. Ini menunjukkan kandungan penuh saat browsing? ? Oklah, itu je, semoga korang faham dengan tutorial ni ok. Kalau ada masalah tanya je kat sini atau tanya je Google.
P.S: Code-code yang atas ni, korang kena decode kat lamanw web centricle untuk dapatkan code yang asli. ^^
Blog ini mempunyai tiga penulis yang berasal dari negeri yang berbeza. Secara dasarnya, kami menubuhkan blog ini kerana kami ingin berkongsi ilmu dengan semua pelajar2
di Malaysia. Kami sangat berharap dengan kewujudan blog ini akan dapat memberikan kamu semua maklumat yang menarik. Salam ikhlas dari kami bertiga.
0 komen:
Post a Comment