Mengenal Themes, Plugins, Widgets dan Code di Wordpress

Hari libur minggu kemarin dimanfaatin buat otak-atik blog-ku yg engine-nya Wordpress.
Sebenarnya aku bisa dibilang telat mengenal CMS (Content Management System), maklum biasanya sih kalo mo bikin web ya coding dari awal hehe *narsis mode [on]*
Makanya dulu pas giat2nya coding web sempat heran dan terkagum2 ma perkembangan temen2.. hmm.. mereka udah bisa dan SEMPET bikin web buat blog, mana keren2 semua lagi webnya.. wah bener2 dah ketinggalan nih aku.. :(

Untung akhirnya tahu tentang CMS yang anggotanya antara lain Wordpress, Joomla, Oscommerce dkk. “oooOOO.. itu toh…”
Bahas yang Wordpress dulu ya.. yang lain belum sempat.. *any else want to share?*.. Itu juga udah agak telat ngurusin themes, plugins, widgets dan code-nya.. gpp ya.. buat temen2 yg ngerasa topik nya ‘basi’ ya di-skip ajah bacanya hehe

Themes

Pertama2 yg dipikirkan setelah wordpress sukses ter-install adalah “Mengganti kulit” alias ganti themes. Berikut beberapa website yang menyediakan free template yg bagus2:

http://wordpresstemplates.name/
http://themes.wordpress.net/
http://www.blogger-template.info/
http://**tambahin ya*****

hasil download-an di-extract. Kalo ternyata di folder hasil extract-nya masih ada folder lagi baru kemudian isinya (terdiri dari beberapa file .php dan folder “image”), maka harus dipindahkan dulu file-nya.

Contoh:
“book\retro_book_10\*isinya*”

maka isi-nya di-cut dan ditaruh setelah folder terdepan, jadi:

Contoh:
“book\*isinya*”

kemudian folder ini di-upload ke folder “www/wp-content/themes/”

Untuk mengaktifkan, masuk ke menu admin: “www.namablog.com/wp-admin/” login dengan user & account-nya kemudian masuk ke menu:

“presentation” » “theme” » klik gambar template yang dikehendaki

udah deh.. :-)

Plugins

Plugins merupakan extended-nya Wordpress, dibilang tools atau tambahan applikasi di Wordpress juga bisa. Intinya plugins ini bikin Wordpress lebih idup…

Contoh di blog ini, beberapa plugins yang ter-install antara lain:

Dah paham kan maksud dari plugins? banyak website yang menyediakan plugins buat Wordpress, seperti:

http://wordpress.org/extend/plugins/
http://wp-plugins.net/beta/
http://***tambahin ya****

Sama seperti themes, plugins yang di-download di-extract dan dipastikan posisi folder hasil extract-nya: “namaplugin\*isi plugin*”
kemudian folder ini di-upload ke folder “www/wp-content/plugins/”

Untuk mengaktifkan plugins, masuk ke menu admin, kemudian:

“plugins” » aktifkan plugin yang dikehendaki di kolom “action”-nya *otomatis nama plugins muncul*

Plugins-nya sendiri bisa ditampilkan dengan cara memanggil function plugin-nya:

Contoh:

<?php recent_comments(); ?>

*Baca penjelasan mengenai cara menggunakan plugins di file readme.txt yang biasanya disertakan pada folder plugins*

Function ini disisipkan di sela2 tag HTML themes, umumnya di file sidebar.php (jika plugins hendak ditampilkan di sisi blog).
Gunakan fasilitas “presentation” » “theme editor” untuk mengedit HTML.

Btw, buat yang kurang puas dengan hasil dari plugins-nya, bisa mengubah code-nya. Posisi code tentunya ada di folder plugins-nya, demikian juga dengan tampilan css nya.

Hal itu aku lakuin pada plugin “Image Caption” buat rubah warna backgroundnya n tulisannya aku buat jadi miring. Juga pada “Recent Comments”, aku ganti kalimatnya jadi bahasa Indonesia.

Pokoknya semuanya insya Allah code-nya ada di folder plugin-nya, apalagi kalo cuma mo ganti tulisan, di-search aja tulisannya di masing2 file, kalo ketemu.. tinggal ganti deh :-)

Contoh lain ada pada plugin “Gravatar”, function yang dipanggil hanya mengembalikan alamat URL gambar komentator pada situs Gravatar, jadi kudu buat tag <img src=”<?=gravatar() ?>” /> dan tag ini sendiri bisa diatur sendiri posisinya hendak diletakan dimana.

Cara Gravatar ini cukup unik. Pertama user mendaftarkan email-nya dan dicek kebenarannya (Gravatar mengirim konfirmasi ke email yg didaftarkan untuk diverfikasi sehingga membuktikan bahwa pendaftar adalah memang pemilik email) .
Kemudian user meng-upload foto untuk email yang didaftarkan.
Maka alamat URL foto user adalah “http://www.gravatar.com/avatar/namaemailuser.jpg” hanya saja, “namaemailuser” dienkripsi dengan metode MD5 agar aman.

Nah setiap komentator kan bakal memasukkan nama email (tidak ditampilkan), maka sistem hanya meng-enkripsi MD5 email yang dimasukkan kemudian memanggil linknya ke situs Gravatar untuk ditampilkan.

Widgets

Widgets ini umumnya juga dipasang sebagai pelengkap tampilan blog kita. Hanya saja umumnya widgets ini diproses di hosting web penyedia jasa widgets (termasuk database-nya) kemudian kita hanya menampilkannya di web kita dengan menghubungkannya dengan web penyedia jasa widgets tadi.
Makanya umumnya kita kudu ke website penyedia jasa widgets tadi untuk mendaftar maupun mengatur tampilan yang kita inginkan untuk ditampilkan nantinya.
Kemudian dari website penyedia jasa widgets tersebut akan dihasilkan script yang tinggal kita copy paste ke blog kita diposisi yang dikehendaki.

Contoh widgets antara lain:

  • Shout mix » buku tamu atau shoutbox
  • Recent Visitor » buat menampilkan pengunjung terakhir blog yang terdaftar di mybloglog.com
  • 123 Counter » buat nampilin jumlah pengunjung blog
  • Random Ayat » nampilin ayat - ayat Al-Quran secara random
  • Plurk » Buat narsis-er tingkat tinggi yg pengen kegiatan per-sekian menit-nya di tampilin di web hehe

Banyak lagi deh.. tips-nya kalo liat widgets bloger lain perhatiin ajah, biasanya ada keterangan atau ada link mengenai website penyedia jasa widgets-nya di bawah. So, tinggal dicari tau aja selanjutnya.
Ada juga sih yang gak ada, misalnya shoutbox blog ini, sebab difasilitasi ma rekan sendiri hehe.. makasih ya om Aryo

Code

Masih belum puas juga dengan hasil Wordpress-nya?? Bagoess!! yuk kita coding2 dikit..

Aku sendiri sih awalnya gak puas dibeberapa hal seperti penanggalan yang masih fomat non indonesia, beberapa text yang masih non indonesia, sistem title yang kepanjangan dsb.
Awalnya aku trace satu persatu file2 di Wordpress (berdasarkan logika ma feeling juga sih) n aku find kalimat2 yg mau aku ganti.
Berikut beberapa file yang bisa dirubah:

Folder: “wp-content/plugins/namaplugin/”

  • 404.php
    Mengganti kalimat ketika alamat URL yg dicari di blog kita tidak ada.
  • archive.php
    Kalimat ketika blog menampilkan arsip postingan berdasarkan kategori, bulan, tahun.
  • comments.php
    Kalimat - kalimat ketika pengunjung hendak mengisikan komentar dapat di-edit disini (termasuk pemanggilan plugin “Gravatar”).
    Dibandingkan ato di-search aja kalimat2 yang ada di-blog ketika akan mengisi komentar dengan kalimat - kalimat yang ada di file ini kemudian diganti.
  • header.php
    Tag awal website seperti <html> <head> <meta> <titile> <link> <body>, ada di file ini.
    Jadi sistem title (judul yang muncul di bar atas browser) dapat kita persingkat coz ini berpengaruh ke sistem SEO blog kita di search engine Google.
    Contoh:
    <title><?php bloginfo(’name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
    ketika membaca sebuah postingan akan menghasilkan
    title:
    namablog » Blog Archive » judulpostingan
    diganti:
    <title><?php bloginfo(’name’); wp_title(); ?></title>
    ketika membaca sebuah postingan akan menghasilkan title:
    namablog » judulpostingan
    Disini juga bisa ditambahkan link untuk menampilkan icon kita di sebelah kiri alamat URL di browser.
    Contoh:
    <link rel=”shortcut icon” href=”http://namablog.com/pic/blogicon.ico”>
    Pastiin file iconnya udah ter-upload di alamat yang sesuai.
  • footer.php
    Tag akhir blog seperti </body> </html> terdapat di file ini.
    Anda dapat meletakkan Javascript seperti Google Analytics atau lainnya yang umumnya diletakkan sebelum tag </body> pada file ini.
  • index.php
    Kalimat - kalimat di halaman depan blog dapat anda cari dan ganti di file ini.
    seperti:
    format tanggal posting.
    contoh:
    the_time(’F jS, Y’) = January 1st, 2008
    the_time(’l, j F Y’) = Senin, 1 januari 2008
    Kalimat2 lainnya seperti:
    Posted in <?php the_category(’, ‘) ?> » Posting di <?php the_category(’, ‘) ?>
    <?php comments_popup_link(’No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?> » <?php comments_popup_link(’Kirim komentar »’, ‘1 Komentar »’, ‘% Komentar »’); ?
    “Read more..” » “Baca lebih lanjut..”
    dsb lah..
  • sidebar.php
    Mungkin file ini yang perlu banyak anda edit untuk menyisipkan plugins atau widgets di sisi samping blog.
    Contoh:
    <h2>Komentar Terakhir</h2>
    <ul>
    <?php recent_comments(); ?>
    </ul><h2>Postingan Terakhir</h2>
    <ul>
    <?php recent_posts(); ?>
    </ul>
  • single.php
    Diakhir setiap akhir postingan akan muncul kalimat
    “Ditulis pada….dikategori….”
    nah itu bisa diganti2 disini.
  • style.css
    Tampilan lainnya seperti ukuran, warna dsb bisa diganti2 disini.

Folder: “wp-includes/”

  • deprecated.php
    Tampilan Blogroll dapat di-edit pada function get_links().
  • functions.php
    Deklarasi fungsi rata2 di file ini. Contoh untuk smiley, file gambar dan shortcut-nya dapat di ganti di function smilies_init().
  • locale.php
    Format penamaan hari dan bulan dapat di-indonesia-kan disini.
  • dsb lah..

Mungkin ada cara lebih simpel lagi daripada ngedit2 script langsung kayak yg kulakuin tadi.. ntah lah.. sekarang ini semuanya makin serba simpel soalnya. Kadang malah sampe ngerasa ribet sendiri hehe..

Ok .. CU @ another share…

26 komentar untuk “Mengenal Themes, Plugins, Widgets dan Code di Wordpress”

  1. Komentar Rient:

     

    Wah ini postingan ato tutorial blogging? He3..complete banget sih..Meskipun aqyu pake blogspot gitu. Humm, enak yah kalo bisa programming sendiri, jadi bisa diexplore lebih lanjut..aq coba-coba juga ach :D

  2. Komentar |F|E|R|Y|:

     

    Isinya kok sama ya dengan BLOG-ku :))
    Atau jangan2 kembar :D ?

    Warix:
    Dasar tukang jiplak :p ini namanya pembajakan postingan blog.. hehe gpp sih.. tapi paling gak ya copyright-nya ditulis lah.. :-”

  3. Komentar cnied:

     

    ko nulisnya ga dari dulu2 ci..
    kan lumayan buat nambah2 teori d skripsi q :D…

  4. Komentar ARTECH (^_^)d:

     

    hem..bagus juga tutorialnya, keep it share bro.. Tutorial wordpress bag 2 ditunggu neh..

  5. Komentar jaylangkung:

     

    Last post <– narsis terakhir..

    hehhee

  6. Komentar jenny oetomo:

     

    Thank Bro atas sharingnya, Salam

    Warix:
    Sama2 bro.. salam kenal :-)

  7. Komentar i_one:

     

    Bagus juga tutorialnya, ditunggu tutorial tentang blog yang lain, hususnya wordpress

  8. Komentar dyan:

     

    great info… meski sampean ngakunya telat. ternyata masih ad loh yg lebih telat, he… :P
    ditunggu info2 selanjutnya…

  9. Komentar CaNdLe:

     

    om, aku belum bisa nampilin recent comments di blogspot. ajarin dwonk… kan dah mau deket lebaran *apa hubungannya?*

    pokoknya ajarin! *ancam pake pisau*

    Warix:
    Kalo udah unduh dari http://rmarsh.com/plugins/recent-comments/
    setelah sebelumnya persyaratan pasang plug-in http://rmarsh.com/plugins/post-plugin-library/ terpenuhi..
    pasti….. masih belum bisa! hehe
    Kalo gak salah pas aq nyoba, emang bawaan defaultnya masih ada erros nya dech.. tapi coba liat pesan errosnya dibrowser apa? di line berapa? trus.. buka file yang dimaksud pake dreamweaver or sejenisnya..
    Nah di line yang divonis erros tadi di remaks ajah pakai // insya Allah.. tidak mengacaukan skenario plug-in dan bisa jalan lancar..
    Dah.. balikin gih pisaunya.. dicari’in ama yang lagi masak buat buka puasa tu lohh….!!! mau ikut maem ga???

  10. Komentar CaNdLe:

     

    dwoh om… mumet aku. yuk makan aja. kita cari takjil yuk yuk yuk…

  11. Komentar cahaya:

     

    Ehmmmmmmmmmm ,,,,,,Bner Ngk Ya

    Warix:
    Kamsude?

  12. Komentar keikomita:

     

    tank’s bos atas ilmunya

  13. Komentar songvoy:

     

    bang gi minta code cssnya
    kiirimin yah k email akku
    plss bang bbutuh bangeut

    Warix:
    Save as aja halaman web ku, save complete, nanti pasti dapet css nya.

  14. Komentar septiyan7:

     

    Boss..ajaaari cara menampilkan gravatar di alamat blog ya… thx

    Warix:
    Daftar dulu email n fotonya ke http://www.gravatar.com selanjutnya seperti yg udah dijelaskan di atas.
    Atau coba ke http://codex.wordpress.org/Using_Gravatars

  15. Komentar shinta:

     

    kalo script dari shoutmix nya dah ada trus dicopy paste nya di bagian mna ya mas.?mohon bantuannya,,makasih

    Warix:
    Coba di menu wp-admin ke Presentation -> Theme Editor atau URL mu tambahin wp-admin/theme-editor.php
    Trus edit file sidebar.php, nah paste aja di sekitar itu, posisinya terserah dimana.

    Posisi path sidebar.php ini sendiri adanya di www/wp-content/themes/[nama themesnya]/

  16. Komentar Lahandi:

     

    cara ganti tanggal jadi bahasa Endonesya itu harus edit locale.php itu ya mas? Gimana yah cara buka & edit file itu? Mohon ilmunya.

    Warix:

    Dari hostingmu, biasanya kan ada cpanel - nya, nah masuk ke menu ‘file manager” trus ke www/wp-includes/locale.php diganti disitu.
    Atau kalo gak ganti dilocal trus upload pakai FTP ke hostinganmu

  17. Komentar zaky:

     

    Trims Om Tulisannya sangat membantu
    warix:
    Sama2 :-)

  18. Komentar zaky:

     

    lagi daftar gravatar nih

  19. Komentar Agungehime:

     

    Mau Tanya, Blogwordpressku setiap kali aku kasih shoutmix atau shoutbox-nya oggix.com kok ndak bisa yach? any suggestions?

    Warix:
    Gak bisa nya gimana?

  20. Komentar Via:

     

    Salam kenal ya…
    Mas kalo buku tamu di blog ini bikinnya pake apa? Shoutbox juga bukan? ajarin dung cara bikinnya! (www.maksa.com)

    Warix:
    Salam kenal balik… shoutbox ini pakek script mas Aryo di http://www.mahesajenar.com :-)

  21. Komentar tika:

     

    hai….admin slam kenal ya,ni pendatang baru.semangat para bloger dan maju terus.

  22. Komentar BØB M4RL3Y:

     

    Halo om,
    gimana sich cara bikin email lagi+gravatar.

  23. Komentar Bhongky:

     

    kesel juga di web ku muncul iklan layanan masyarakat, ada yang bilang biar ga muncul harus di ganti Meta description, ada ga cara lain selain itu bos?, kalau harus pakai Meta description ada ga plugin buat itu?
    tq

    Warix:
    Kok bisa? apa situ hostingnya di tempat gratis yang emang konsekuensinya ada iklan layanan masyarakat?
    Atau apa iklan lama dari template?

  24. Komentar dafa:

     

    thanks mas.., w baru sukses upload theme arthemia, besok mau mampir lagi buat belajarnya yang lainnya, abis dah pusing…! hehe

  25. Komentar cah network Slawi:

     

    mas, minta tolong script php

  26. Komentar piter:

     

    Wadow … awaku belom nanya wes di jawab kb,, sek2 gravatar niku opo to ….!!! iso di maem gak …

Silahkan berkomentar >>