turtle:Caraku Cek Kualitas Theme WordPress

sekedar share sedikit. dengan banyaknya theme wordpress yang ada di forum ini, baik diberikan secara free ataupun dijual di Trade Forum. mungkin ada yang bertanya,

“Gimana sih cara cek theme WordPress yang saya pakai itu berkualitas atau tidak?”

Ini pertanyaan yang mungkin yang umum, tapi jawabannya bisa sangat panjang, banyak theme developer yang membuat theme yang bisa dibilang sangat keren, high ctr, theme option yang cantik, seo friendly, dll.. Sebagai adsenser yang mungkin sehari-hari duduk di depan komputer dan menggunakan WordPress, tidak ada salahnya tahu sedikit tentang “Best Practice" dan "Standar" di "WordPress Theme Coding“. saya menulis ini untuk bersama belajar, saya bukan expert di bidang WordPress, tapi saya suka bikin theme untuk web saya, dan penghasilan tambahan sebagai freelancer (yang utama tetep adsense lah…) memaksa saya untuk mengikuti aturan “WordPress Coding Standard” yang berlaku. Bukan hanya ini baik untuk hosting (karena ga ada error dan aman), tapi juga untuk menghindari konflik dengan plugin-plugin yang jumlahnya ribuan (ga semuanya bener sih..). Semoga info ini bisa berguna buat semua WordPress-er dan theme developer adsense-id. Info: test ini hanya untuk digunakan di Test Site atau localhost..

1. Install Theme yang akan anda test

tanpa plugin apapun… (kecuali kalau themenya butuh plugin untuk bisa jalan)

2. Bikin dummy content.

Untuk dummy content yang baik bisa didownload di
_http://codex.wordpress.org/Theme_Unit_Test
ini link yang terbaru (tapi cek link diatas, siapa tahu ada yang lebih baru ): _https://wpcom-themes.svn.automattic.com/demo/test-data.2011-01-17.xml

kenapa dummy content dari WordPress dan bukannya bikin sendiri?

karena Dummy content dari WordPress berisi konten yang bervariasi, dari post yang kategorinya ada puluhan, tagnya ada puluhan, post yang judulnya puaaannnjanggg…., post yang ngga ada judulnya, post yang ngga ada isinya, post yang komentarnya banyak, post yang diproteksi dengan password, post yang ada banyak halaman, dsb ini penting untuk melihat bagaimana konten anda akan terlihat jika di isi dengan konten yang bervariasi tersebut

(terutama penting kalau pake autoblog, karena kita ngga punya full control atas konten yang dipublish).

Ini juga untuk cek bagaimana gambar dan gallery ditampilkan (baik di float left, right, none, pake caption, tidak pake caption, dll). Untuk lebih jelas, install WordPress default theme, Twentyeleven, bisa juga Twentyten, dan bandingkan dengan theme yang ada pakai. Apakah ada yang tidak ditampilkan dengan benar atau tidak.

3. Cek Error dengan wp_debug

Kalau testnya sudah lolos, sekarang kita cek “kualitas koding dari theme developer”. caranya cukup mudah, edit wp_config.php dan ubah dari

PHP:

define('WP_DEBUG', false);

ke

PHP:

define('WP_DEBUG', true); 

biasanya di baris 81.

WP_DEBUG digunakan WordPress untuk menampilkan pesan error dan peringatan kalau ada kesalahan. setelah itu kembali lihat ke website anda apakah ada web anda bebas dari pesan error. Agar bisa mengerti dengan baik, saya pake contoh salah satu free theme, yang dibagikan disini oleh Om Satrya, IndoPress.

saya cek theme ini bukan untuk bilang kalau theme om satrya ngga bagus, tapi ini theme yang sudah agak lama, jadi mungkin belum diupdate sesuai dengan WordPress yang terbaru. Saya sendiri berpendapat kalau Om Satrya adalah salah satu yang terbaik dibidangnya, (blognya berisi tips tips WordPress yang keren ..) Alasan lain theme lain dari Om Satrya, sudah diterima di WordPress.org (sudah pasti mengikuti coding Standar Wordpress). Jadi Saya bisa memastikan kalau om satrya cuma belum ada waktu untuk update theme ini.

Ini adalah tampilan IndoPress di halaman depan setelah WP_DEBUG diaktifkan:

​

dan ini tampilan admin (theme option):

​

dengan melihat ini saja kita bisa tahu dibagian mana yang error dan kode apa yang mengakibatkan error tersebut.

NOTE: jangan langsung marah sama theme developer kalau themenya banyak pesan error, pesan error ini bukan berarti theme anda tidak bisa jalan/rusak, cuman ada yang kurang optimal. Beritahu ke theme developer, dan saya yakin theme developer anda akan bisa memperbaiki ini, atau memberikan alasan yang jelas kenapa pesan itu muncul dan tidak akan bermasalah dengan website anda.

4. Install Plugin Theme Check _http://wordpress.org/extend/plugins/theme-check/

Theme Check plugin adalah plugin yang didevelop oleh Otto (salah satu developer favorit saya..) . Ini plugin yang digunakan untuk menseleksi theme-theme (ada ribuan..) yang disubmit ke WordPress.org sebelum dicek secara manual, oleh team WordPress.org aktifkan plugin ini dan cek theme nya.. (menu ada di Appearance Menu di WordPress Admin)

disini bisa dilihat, ada peringatan apa (WARNING) apa saja yang kurang di theme ini (REQUIRED) dan apa yang sebaiknya ada tapi tidak wajib ada (RECOMENDED),

Di theme indopress, contohnya:

WARNING: Found PHP short tags in file related-post.php. Line 24:
bisa dilihat kalau om satrya lupa ketik php di related post nya.. seharusnya

PHP:

<?php the_permalink()?>

REQUIRED: Could not find post_class. See: post_class

kalau dilihat di theme on satrya di index.php cuma pake:

PHP:

<div id="post-<?php the_ID(); ?>">

seharusnya yang benar:

PHP:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

ini kadang dipakai beberapa plugin, jadi lebih baik ada, toh cuma copas beberapa huruf saja. tentu saja ada perkecualian kalau theme anda pake sistem post_class sendiri, yang bisa difilter dengan filter hook post class. misalnya theme saya, saya lebih suka pake post class sendiri, tapi tetap bisa difilter dengan wordpress post_class.

BERSAMBUNG..PENUH

 

5. Tambahan lain-lain…

Ini check list saya pribadi, bahkan sebelum saya install themes saya biasanya cek dulu:

1. apakah menggunakan body_class() .

di header.php biasanya ada <body> untuk mengawali html. theme yang baik sebaiknya menggunakan

PHP:

<body <?php body_class(); ?>> 

body class cukup sering digunakan di plugin untuk mengontrol tampilan, dengan menambahkan css class pada body,
sebagai orang yang suka utak atik themes, ini sama pentingnya dengan post_class, karena di body_class ini anda dapat mengubah css bukan hanya untuk seluruh website anda tapi untuk sebagian, misalnya di kategori tertentu. Karena body class ini dinamic dan ditambahkan sesuai dengan halaman yang dilihat.
misalnya di halaman depan:

HTML:

<body class="home blog logged-in">

anda bisa lihat wordpress menambahkan home, blog dan logged-in, jadi anda bisa menampilkan atau menyembunyikan bagian tertentu web anda dari yang login. atau menampilkan style yang berbeda untuk yang login. misalnya:

Code:

.logged-in #something {display:none}

ini tampilan body class dihalaman uncategorized:

HTML:

<body class="archive category category-uncategorized category-1  logged-in">

jadi anda bisa dengan mudah membuat bisalnya, background yang berbeda khusus untuk halaman archive uncategorized dengan css:

Code:

.category-1 {background:blue;} 

selain itu dengan adanya body_class anda bisa menambahkan fitur background (WordPress 3) dengan hanya menambahkan satu baris:

PHP:

add_custom_background(); 

di functions.php, fitur yang sangat keren….
ini hanya contoh, saja, dan dikombinasikan dengan post_class wordpress, anda bisa meredesign website anda hanya dengan css, dan menciptakan website yang dinamis.

2. apakah menggunakan post_class()

ini sudah dijelaskan, post_class() juga salah satu fitur dinamic class hampir sama dengan body_class tapi untuk post.

3. apakah menggunakan wordpress menu (yang diperkenalkan di wordpress 3).

misalnya di indopress memang menggunakan wordpress navigation menu tapi menurut saya kurang efisien di kodenya:

PHP:

<?php
 $pagesNav = '';
 if (function_exists('wp_nav_menu')) {
 $pagesNav = wp_nav_menu( array( 'theme_location' => 'header-pages',  'menu_class' => 'nav', 'menu_id' => 'page-nav', 'echo' =>  false, 'fallback_cb' => '' ) );};
 if ($pagesNav == '') { ?>
 <ul><!-- Navigation Links -->
 <?php if ( is_home() ) { ?>
 <li><a href="<?php echo get_option('home'); ?>">Home</a></li>
 <?php } else { ?>
 <li><a href="<?php echo get_option('home'); ?>">Home</a></li>
 <?php } ?>
 <?php wp_list_pages('title_li='); ?>
 </ul><!-- End Navigation -->
 <?php }
 else echo($pagesNav);
 ?> 

seharusnya lebih simple, karena wp_nav_menu sudah punya fallback_cb (yang akan ditampilkan kalau belum di set, dan defaultnya adalah wp_list_pages )
fungsi yang lebih simple:

PHP:

<?php wp_nav_menu( array( 'menu' => 'Header Navigation',  'menu_class' => 'nav','theme_location' => 'header', 'menu_id'  => 'page-nav' ) );?> 

ini sama saja, karena wordpress sudah otomatis setup fallback_cb ke wp_list pages, jadi ga perlu di set pake if statement, dan cuma untuk menampilkan list pages, . (tapi saya yakin om satrya punya pendapat sendiri mengenai ini. mungkin untuk menampilkan home link ke menu)

4. kalau ada custom widget apakah sudah dibuat dengan benar,

(artinya bisa dipakai di beberapa/unlimited widget area)
bisa juga di cek dengan WP_DEBUG
ini error message front end random post widget dari indopress.

PHP:

Notice: WP_Query was called with an argument that is deprecated since  version 3.1! "caller_get_posts" is deprecated. Use "ignore_sticky_posts"  instead. in  C:\xampp\htdocs\wp\tamatebako\demo03\wp-includes\functions.php on line  3551 

ini masih bisa dipakai tanpa masalah untuk wordpress terbaru saat ini (3.3.1) tapi kita tidak tahu sampai kapan fungsi yang sudah ditinggalkan/deprecated (baca:kadaluarsa) masih bisa dipakai.

ini adalah salah satu alasan, pentingnya untuk selalu cek theme anda apakah “benar-benar” compatible dengan WordPress terbaru, jangan2 ketika anda update wordpress, dan seluruh web anda tidak bisa diakses.,

6. Apakah menggunakan get_template_part untuk me-load bagian themes.

saya suka theme yang rapi, artinya theme yang mungkin banyak filenya, tapi modular, dan mudah diedit / dimengerti.
misalnya saja di Theme IndoPress memasukkan wp_nav_menu di header, tentu saja ini bisa dipakai, tapi, alangkah baiknya kalau dipisahkan di file tersendiri seperti juga sidebar.
bisa di buat satu file sendiri misalnya nav-header-top.php dan dipanggil dengan fungsi

PHP:

get_template_part('nav','header-top'); 

ini sangat membantu ketika menggunakan child theme, dimana get template part akan cek apakah file tersebut ada di childtheme, dan kalau tidak ada akan di load dari parent theme, jadi kita bisa menggantikan dan memodifikasi hanya dari child theme saja.

7. Apakah menggunakan after_setup_theme() hook untuk me-load fungsi-fungsi theme tersebut.

Tapi saya memaklumi kalau beberapa theme author yang tidak menggunakan ini, karena bahkan theme default wordpress sendiri baru menggunakan ini di Twentyeleven, tapi untuk twentyten sudah diupdate dengan fungsi ini, jadi ini penting untuk mengatur semua fungsi yang berkaitan spesifik ke themes.misalnya,

PHP:

add_image_size(); add_custom_background(); add_custom_image_header();

di IndoPress tidak menggunakan ini, tapi anda bisa lihat theme twentyeleven dan twentyten untuk melihat cara kerjanya.
misalnya di IndoPress akan lebih baik jika di functions.php nya

PHP:

add_action( 'after_setup_theme', 'indopress_theme_setup' );
 function indopress_theme_setup(){
       add_custom_background();
       add_action( 'init', 'satrya_register_my_menu' );
      add_action( 'widgets_init', 'recent_posts_widget' );
      add_action( 'widgets_init', 'popular_posts_widget' );
      add_action( 'widgets_init', 'random_posts_widget' );
      add_action( 'widgets_init', 'dynamic_sidebar_ad' );
 } 

bahkan untuk lebih baiknya, untuk fungsi yang berhubungan dengan custom widget dipisah-pisah ke beberapa file, jadi rapi kan…

8. Penggunaan title_attribute di post/page title

ini menurut saya sangat….sangat penting:
ini saya kopas dari theme IndoPress:
bisa dilihat: kalau title=”" dari link menuju post menggunakan

PHP:

the_title();

,

PHP:

<h2><a href="<?php the_permalink() ?>"  rel="bookmark" title="Permanent Link to <?php the_title();  ?>"><?php the_title(); ?></a></h2>

ini mungkin kesalahan terbesar saya waktu awal2 serius freelance bikin theme wordpress.
yang benar untuk membuat link title:

PHP:

title="<?php the_title_attribute( array('before' => 'Permalink Link to: ', 'after' => '')); ?>" 

kenapa ini penting, karena the_title_attribute adalah versi “bersih” dari the_title() dimana quote, double quote, dan html akan difilter dengan htmlentities(),
Ini juga dipakai untuk image (misalnya.. feature image ingin di link ke post yang bersangkutan)

9. Encripted themes.

Saya yakin theme developer punya alasan sendiri untuk meng-enkripsi themenya.
Saya ngga pake theme yang dienkripsi (dengan tujuan yang ngga jelas). alasannya cukup simple, saya ngga tahu apa isi enkripsinya, dan biasanya saya berpikiran buruk duluan.
(apakah ini akan ngirim url web saya ke yang bikin theme untuk nyuri niche, atau nyuri password, atau nyuri backlink,dll…)

Tapi yang paling saya ga suka adalah, saja jadi ngga bisa cek apakah theme ini pake coding yang benar, dan saya ga bisa update/perbaiki kalo ada error ketika WP_DEBUG diaktifkan.
ini sangat menyulitkan..
bahkan WordPress.org punya thread sendiri tentang hal ini:

_http://wordpress.org/support/topic/encrypted-theme-heres-how-to-decode-it

Tentu saja, enkripsi ini bisa valid penggunaannya bahkan WordPress sendiripun menggunaka enkripsi, misalnya untuk fungsi export import dsb.


10. cara load rss feed link

wordpress sudah punya fungsi yang sangat elegan dan mudah digunakan:

PHP:

add_theme_support( 'automatic-feed-links' ); 

(lebih baik ditempatkan di fungsi hook after setup theme.)
Tidak perlu lagi link rss diadakan di header.php (tentunya harus ada wp_head() action hook disana.
untuk theme IndoPress:
ada tiga baris yang bisa dihapus dari header.php:

HTML:

<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'); ?>" /> 

dengan hanya menambahkan satu baris di functions.php.

Sebenarnya masih banyak lagi yang bisa dicek, saya tambahkan kalau ada waktu. misalnya pentingnya CSS Reset, dsb.

tapi secara umum info ini sudah bisa dipakai, dan silahkan master-master yang ada disini menambahkan, kalau ada yang kurang pas. Kritik dan saran is welcome.
Kalau ada yang salah, saya mohon maaf,

dan kalau ada yang themenya ternyata perlu di-optimasi bisa reply di thread mungkin bersama-sama bisa didiskusikan untuk perbaiki bersama, sehingga jadi theme wordpress yang lebih baik.

Seperti saya bilang sebelumnya, saya bukan expert, tapi saya yakin banyak yang expert coding di forum ini, dan saya lihat banyak theme author dan developer, mari bersama-sama men-develop theme yang lebih berkualitas, lebih cantik, lebih high CTR, lebih SEO Friendly, dan tentunya lebih user friendly.

 

Like this mas

 

Nice share mastah!!!

 

knp hrs tanpa plugin mastah? maaf nubi...sangat ingin mendalami..

 

hmm... alasannya simple, biar kita lebih gampang cek theme, kalau tanpa plugin kita bisa tahu kalau error tersebut berasal dari theme.
biasanya saya juga gunakan cara ini untuk cek plugin yang saya pakai, tentunya dengan Wordpress Default theme (Twentyeleven)

kalau dua-duanya sudah oke, baru saya install plugin dan theme untuk cek apakah ada konflik. memang perlu kerja lebih, tapi asik kok!

 

nice share gan..
like meluncur...
siap2 gan nerima PM tentang error di theme ane.
mohon di bantu ya gan, jika ane bingung.

 

wew panjang lebar lengkap...
mantap mas bro...

 

Like penceted, mastah
trit kek gni nih yg ane tunggu2 akhirnya ada yg share jg,thanks mastah

 

sblmnya saya ucapkan trima kasih mastah... tp ane jd ketagihan nii...

apakah dgn cara tu bs ngecek theme ato plugin yg ke injek?

 

Luengkap tenan, thanks mastah

 

saya kurang tahu, tapi saya pernah dapet theme yang "ngga jelas" dan nginjek2 theme yang lain.
waktu diinstall dan di debug, hasilnya kacau, notifikasi dimana-mana.. dan buanyakk...

walau saya ngga investigasi lebih lanjut.. langsung saya delete themenya. "ngga layak pakai". dan saya delete juga installan wordpress nya dan fresh install dari awal.

tapi kalau pake theme check plugin paling ga kelihatan kok (ada notifikasinya) kalau ada file atau bagian yang "hard coded url" dan yang dienkripsi misalnya dengan base64.

biasanya code injek-an pake enkripsi, (bener ga sih?)

Saya sebisa mungkin pakai theme yang GPL.(v2)
karena saya punya kebebasan untuk mengedit, tanpa embel2.

Freedom Is Everything! Right?

Contoh theme dengan lisensi GPL: cek footer! (promosi dikit)


Ada yang butuh tutorial dari awal sampai selesai cara saya bikin theme wordpress?
kalau ada yang mau nanti saya bikin tutorial lengkap bikin theme wordpress,
mulai dari perencanaan (istilahnya wireframing)
sampai jadi theme yang bisa dipakai.
mayan lho jadi freelancer...

 

like penceted mas bro..
uhh.. ini baru kenyang bacanya.

 

g bosen2nya saya ucapkan trima kasih dah share ilmunya...
saya urutan pertama yg membutuhkan tutorialnya mastah...hehehehee....

 

makasih sharenya mastah

 

Kereeeenn.. angkat aku jadi muridmu mastah... tutorial berikutya sangat kunanti...

 

keren abis... ternyata tanpa kita sadari theme wp yg dipakai tidak sepenuhnya lolos dari error

like di pencet

 

ane tunggu share selanjutnya super mastah...

 

omaygad.. serasa ngebaca naskah proklamasi dalam bahasa planet mars.. Kudu baca pelan2, biar mudheng. Langsung action ah... Thanks mastah utk share-a..

 

lengkap banget gan.. bookmarkk ahh