Bulan Ramadhan adalah bulan yang paling sesuai untuk meningkatkan ibadah dan juga memberikan lebih komitmen untuk bekerja pada siang hari sebagai ibadah.

Bagi mengisi kekosongan di bulan Ramadhan, saya ada beberapa projek berkenaan pembangunan web yang dibangunkan terutamanya WordPress. Harap maaf kerana saya agak mengetepikan blogspot tetapi saya akan mencari koding yang sesuai diapplikasikan ke dalam Blogspot sebagaimana diapplikasikan ke dalam WordPress.

1. Meniru Theme atau Layout
Buat masa ini, ada dua theme yang bagi saya agak menarik untuk ditiru seperti theme RedMudah dan juga Mashable. Sebabnya theme berikut adalah ringkas dan menarik serta dilihat sebagai professional. Theme ini jika digunakan, pelawat atau pengunjung blog pastinya tidak membezakan pengguna blog itu sama ada newbie, average atau pro user. Apa yang saya buat ialah menggunakan theme yang bersifat minimal dan simpe seperti theme Kubrick dan kemudian saya transformkan theme tersebut kepada theme RedMudah dan Mashable.

2. Mengurangkan Atau Maintain Penggunaan Plugin Sebaliknya Menyumbat Plugin Ke Dalam Theme
Mengurangkan penggunaan plugin tidak semudah deactivate atau delete plugin. Ada sesetengah plugin seperti Akismet, Comluv, Top Commentator dan sebagainya sering digunakan. Bagi WordPress, setiap plugin akan loading pada setiap page blog walaupun kita tidak nampak plugin itu fungsi di depan mata seperti Akismet.

3. Theme atau Speed Optimization
Perkara paling mustahak yang akan saya lakukan pada bulan ini. Theme optimization adalah untuk memastikan blog loading pantas dan lancar. Saya akan elakkan menggunakan plugin yang melibatkan theme atau speed optimization.

4. Menggurangkan panggilan HTTP
Panggilan HTTP sebenarnya adalah memanggil atau mendapatkan file seperti php, gambar dan sebagainya ketika meng access sesebuah page blog. Memandangkan line internet dan kurangnya CDN services di Malaysia, file seperti php dan js sepatutnya saiznya maksimum pada 10kb sahaja. Ini kerana file php 10kb sudah mengandungi coding yang dianggap panjang. Coding seperti function, if dan seupamanya akan memakan masa loading. File php 10kb dan file gambar 10kb, jika dibandingkan, gambar loading lebih laju.

Ini serba ringkas projek yang saya akan lakukan tetapi sebenarnya lebih banyak lagi saya akan lakukan.

http://wordpress.org/download/counter/

WordPress 3.0 boleh didapati di sini: http://wordpress.org/ dan boleh diinstall secara offline/localhost/ftp/fantastico. Tutorial WordPress bersepah-sepah kat mana-mana ada, cuma google sahaja. Pengguna Blogspot atau platform selain WordPress digalakkan mencuba WordPress sekurang-kurangnya daftar di wordpress.com meskipun belum mampu membeli hosting. Teruskan berusaha dan terus berjaya!

P/s: Jangan tunggu sudah 100 M download, baru nak cuba WordPress.

Bagaimana? Sudah puas menonton. Dalam video itu bukan muka saya. Berbalik kepada asal usul Custom Menu seperti yang ditunjukkan dalam video, function Custom Menu pada awalnya diasaskan oleh Woo Themes yang telah diapply ke dalam WooThemes Framework v2 sebelum kewujudan WordPress 3.0 seperti ditunjukkan dalam gambar di bawah.[1][2]

“With the custom nav, you can easily mix and match categories and pages, and even add custom menu items into the mix. You can add your own structure to the menu by arranging the menu items via our drag and drop interface, and also add dropdowns or sub-navigations to each menu point. You can have as many levels as you want although this is usually limited to 3-4 levels by CSS in the theme itself.” [1]

WooThemes Framework dipaparkan seperti video di bawah. Lihatlah perbezaan fungsi Custom Menu WooThemes yang kemudiannya diapply ke dalam WordPress 3.0.

Keseluruhannya, WooThemes satu-satunya pengeluar theme yang terkenal dengan functionality. Maka, tidak hairanlah fungsi Custom Menu keluaran WooThemes menjadi fungsi utama dalam WordPress 3.0.

“Jeff has already begun working with Ryan Boren (one of WordPress’ lead developers) on porting the WooNav into “patch form”, which will then in turn be submitted to the core of WordPress. Feature freeze for WordPress 3.0 is this week and we’re hoping to have ported the WooNav to the core ASAP, so that the community may start discussing the functionality, after which we will continue to work with the WP developers and the community on improving and finalizing the functionality for WP 3.0.

“Unfortunately” this impacts our users, since these developments mean we have to delay the integration & roll-out of the WooNav to all our themes. Whilst the implementation thereof will stay 99% the same, we don’t want to potentially duplicate work for ourselves and have decided to wrap-up the porting & development of the WooNav into core WP first, before integrating it with all of our themes.

You can however rest assured that by the time WordPress 3.0 hits your web browser, we’ll have included support for this amazing functionality in all of our themes. So this new awesomeness from the two W’s is not far off and all WooThemes will soon be able to enjoy it in all of its glory.” [2]

Citations:
[1] http://www.woothemes.com/2010/01/the-awesome-custom-woo-navigation/

[2] http://www.woothemes.com/2010/02/woonav-integrated-in-wp-30/

Apa perlu anda buat?

1. Buka Comments pada Admin Panel.
2. Standby Google pada New Tab atau New Page.
3. Copy semua teks commen itu dari hujung ayat ke hujung ayat. Kalau ada perenggan atau lebih dari 2 baris, copy sahaja semua.
4. Paste pada form Google dan tekan search.
5. Lihat About ….. Results. Lihat ada berapa ratus ribu atau juta.
6. Jika beribu results, delete sahaja comment itu.
7. Satu lagi cara, copy dan paste comment seperti cara nombor 3 dan 4.
8. Pada search form Google, tambahkan ” pada awal dan akhir ayat.
9. Ikut cara nombor 5 dan 6 seperti biasa.

Aku benci SPAM!!! Yea!

Pernah tak tengok perkataan WordPress selalu disalah eja bila menaip dalam entri? Biasanya huruf P dalam perkataan WordPress jadi huruf kecil bila salah eja. Ada satu plugin yang boleh buat huruf P dalam perkataan WordPress menjadi huruf besar.

Huruf WordPress seolah-olah seperti unta seperti yang dinyatakan dalam WPCamelCase. Saya illustrate sikit macam mana seperti unta di bawah.

Inilah pluginnya, Remove WordPress to WordPress filter.

http://wordpress.org/extend/plugins/remove-wordpress-to-wordpress-filter/

P/s: Plugin ini just untuk filter perkataan WordPress sahaja dari hURUFtEKAN atau setaraf menjadi HurufTekan. Saja taip perkataan selain WordPress sebab sudah on plugin ini.

Saya telah mengikuti tutorial saudara Etomyam iaitu Tutorial: Floating Social Bookmark Gaya Mashable. Malangnya tidak menjadi yang diharapkan. Saya tidak tahu salah siapa. Tutorial bro Etomyam, saya ikuti 100% sama dan masih tidak jadi. Saya telah mencuba tutorial ini pada theme Twenty Ten dan juga theme Etomyam, kedua-duanya tidak menjadi. Sedih betul.

Saya telah buat ikut tutorial itu dua tiga kali sampai saya dah terhafal step dalam tutorial itu. Saya telah setkan kedua-dua plugin FBshare dan TweetMeme secara manual insertion kerana saya telah semak socials.php mengandungi kod fbshare_button(); dan tweet_button yang akan berfungsi secara manual. Sepatutnya berfungsi sebab coding snippet itu telah ada dan setkan plugin secara manual.

Sayangnya tak menjadi pula tutorial ini sebab TweetMeme ada analytical. Jadi, bro Etomyam tolong saya. Any ideas geng?

Saya akan menunjukkan cara membuat child theme untuk Twenty Ten.

1. Mula-mula, buat satu folder di dekstop dan namakan folder itu sebagai ABC.
2. Buka folder ABC itu dan buat file style.css.
3. Buka style.css dan copy code di bawah ini dan paste ke dalam style.css.

/*
Theme Name: ABC
Description: Child theme for the Twenty Ten theme
Author: Nama anda
Template: twentyten
*/

4. Berdasarkan code di atas, code di atas adalah code paling asas untuk child theme untuk berfungsi terutamanya “template: twenty ten”, jika tidak child theme tidak berfungsi. Theme Name boleh diubah mengikut selera anda. Nama folder juga mestilah sama mengikut Theme Name. Dalam Theme Anak Child Theme Twenty Ten , saya namakan folder dan Theme Name sebagai Anak.

5. Seterusnya, kita akan import style.css dari parent theme iaitu theme Twenty Ten. Fungsi import adalah supaya child theme mewarisi ciri-ciri parent theme. Copy code di bawah ini dan paste selepas code yang ditunjuk pada cara no 3.

@import url("../twentyten/style.css");

6. Baiklah, anda sudah siap child theme dari segi teknikal tetapi belum sedia untuk digunakan. Selebihnya adalah mengubah style.css dengan meletakkan beberapa code css. Berikut adalah code css yang saya gunakan dalam style.css dalam child theme yang saya buat iaitu Theme Anak Child Theme Twenty Ten :

Besarkan Tajuk Blog menjadi 1.5 kali ganda
Yang ini membesarkan size font Tajuk Blog pada header menjadi 1.5 kali ganda

#site-title a {
font-size:150%		/* Besarkan Tajuk Blog menjadi 1.5 kali ganda*/
}

Ubah Font Menu menjadi HURUF BESAR

#access {
font-variant:small-caps;	/* Ubah Font Menu menjadi HURUF BESAR */
} 

Buat kotak untuk meta description dan taksonomi entri

.entry-meta {
padding:4px 0 4px 20px;
background-color:#F8F8F8; border: solid 1px #A0A0A0;	/* Buat kotak untuk meta description entri */
}
.entry-utility {
padding:4px 0 4px 20px;
background-color:#C0C0C0; border: solid 1px #A0A0A0;	/* Buat kotak untuk taksonomi entri */
} 

Buat underline pada Tajuk Sidebar dan Ubah Font Tajuk Sidebar menjadi HURUF BESAR

.widget-title {
border-bottom: 2px solid #737373;		/* Buat underline pada Tajuk Sidebar*/
font-variant: small-caps;				/* Ubah Font Tajuk Sidebar menjadi HURUF BESAR */
}

Membuat Sidebar Lebih Lebar

#container { float: left; margin: 0 0px 4px 0; width: 628px; }			/* Menetapkan size overall page iaitu container */
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;			/* Kecilkan ruangan entri */
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;		/* Besarkan ruangan sidebar */
     margin: 0 0 4px 0;}

7. Hasil akhir style.css yang sudah siap adalah seperti di bawah.

/*
Theme Name: Anak
Description: Child theme for the Twenty Ten theme
Author: RozaniGhani
Template: twentyten
*/

@import url("../twentyten/style.css");

#site-title a {
font-size:150%		/* Besarkan Tajuk Blog menjadi 1.5 kali ganda*/
}

#access {
font-variant:small-caps;	/* Ubah Font Menu menjadi HURUF BESAR */
}

.entry-meta {
padding:4px 0 4px 20px;
background-color:#F8F8F8; border: solid 1px #A0A0A0;	/* Buat kotak untuk meta description entri */
}
.entry-utility {
padding:4px 0 4px 20px;
background-color:#C0C0C0; border: solid 1px #A0A0A0;	/* Buat kotak untuk taksonomi entri */
}

.widget-title {
border-bottom: 2px solid #737373;		/* Buat underline pada Tajuk Sidebar*/
font-variant: small-caps;				/* Ubah Font Tajuk Sidebar menjadi HURUF BESAR */
}

#container { float: left; margin: 0 0px 4px 0; width: 628px; }			/* Menetapkan size overall page iaitu container */
#content {width: 590px; overflow:hidden; margin:0 0px 10px 0px;			/* Kecilkan ruangan entri */
     padding: 5px 0px 0px 20px;}
#primary, #secondary { float: right; overflow: hidden; width: 300px;		/* Besarkan ruangan sidebar */
     margin: 0 0 4px 0;}

8. Sekian sahaja. Child theme anda sudah siap dan sedia diupload secara Filezilla upload atau upload guna dashboard WP.
* Jika upload guna dashboard WP, zipkan folder child theme dan upload seperti biasa.
* Jika upload guna Filezilla, buat folder baru di dalam direktori themes dan namakan folder itu. Upload style.css ke dalam folder yang baru dinamakan itu.

Selamat mencuba! Ganbatte!

Saya release terlebih dahulu child theme Twenty Ten aka 2010 yang saya namakan sebagai Anak. Saya buat child theme ini cuma berasaskan style.css. Tutorial dan penerangannya akan saya release di kemudian hari.

Ciri-ciri Theme Anak “Child Theme Twenty Ten”

• Site Title lebih besar
• Title Page Menu berhuruf besar
• Sidebar lebih luas
• Tajuk Sidebar berhuruf besar dan mempunyai underline
• Meta description berkotak
• Utility description berkotak

Keistimewaan Theme Anak

• Design seperti design Blogger (Blogspot)
• Ringan (Cuma perlu file style.css sahaja)

Download Theme Anak Twenty Ten

Sila berikan komen atau cadangan untuk improve theme Anak. Terima kasih.

Saya sedang dalam proses membuat child theme untuk Twenty Ten aka 2010. Sebenarnya, ini percubaan kali pertama saya untuk membuat child theme secara rasmi iaitu menggunakan theme default WordPress 3.0. Saya tidak berminat menggunakan mana-mana framework untuk membuat theme setelah saya dapat tahu bahawa mana-mana theme boleh jadi parent theme atau framework theme.

Setelah saya menganalisis beberapa kekuatan dan kelemahan Twenty Ten, saya dapati Twenty Ten lebih hebat dari theme Kubrick iaitu theme default WordPress sebelum ini. Coding Twenty Ten agak lebih ringkas berbanding Kubrick, jadi perlu berhati-hati ketika berhadapan dengan code seperti function, if, else dan param yang lain.

Setakat ini, saya sudah berjaya buat child theme 2010 cuma berasaskan style.css. Selepas ini, saya akan release tutorial buat child theme mengikut method yang saya faham.

Admin option page bagi child theme 2010 pun saya sudah berjaya buat cuma beberapa feature akan saya tambah seperti YARPP, content slider, AJAX dan sebagainya. Jika saya release tutorial admin option page agak rumit sedikit kerana tidak semua tutorial valid bagi wordpress 3.0. Dalam membuat atau membeli theme atau plugin, saya amat menekankan admin option sebab lebih user friendly dan boleh key in beberapa data.

Tahap kesukaran membuat child theme bagi wordpress 3.0 ? Tanda soal? Jika start buat atau edit theme dari wordpress versi 2.7 atau versi 2.8 atau versi 2.9.1 atau 2.9.2, keaadaannya amat berbeza sekali. Jika buat theme walking, theme yang cantik dan simple kebanyakannya terdiri dari jenis wordpress 2.7 yang perlu WP-Navi untuk berfungsi. Memandangkan saya pun baru mula menggunakan WordPress sejak WordPress 2.9.1, saya rasa kurang bercelaru untuk mengedit theme.

Nanti child theme saya! Adios!

Sebenarnya saya telah berpindah dari Exabytes ke DataKL pada 25 Jun 2010 yang lalu. Sudah lama saya ingin pindah hosting dan mencari masa yang sesuai untuk berpindah.

Berikutan WP sedang diupgrade ke versi 3.0, saya rasa inilah masa yang sesuai untuk berpindah. Sebelum in, saya menggunakan pakej XStudent dari Exabytes dan sekarang saya beralih ke pakej DataMini dari DataKL.

Sebab pindah? Saya pindah pun sebab storage. Kalau nak upgrade storage di Exabytes agak sakit kepala dari segi kos. Jadi, saya beralih ke DataKL. Kenapa saya perlu pindah? Lazimnya, manusia suka berpindah tempat, jika tidak berpindah tempat, sekurang-kurangnya berpindah barang-barang.

Storage yang lebih besar saya akan gunakan untuk eksperimen theme dan plugin yang saya tweak, modify, godam atau hack untuk melihat compatibility dan stability. Saya mungkin akan membuat beberapa video tutorial. Tetapi, kebanyakan tutorial sudah pun dalam HD, so sizenya agak besar. Sebenarnya, saya sudah tahu compress video menjadi kurang dari 10 MB tetapi kurang HD.

Banyak cakap pulak aku kali ini. Jadi, secara official, saya RG sudah berpindah ke DataKL. Yata!

]]> http://rozanighani.com/2010/06/rg-pindah-dari-exabytes-ke-datakl/feed/ 21