Wordpress
Jan30

Sekilas tentang post thumbnail dan plugin thumbnail wordpress

Ktzagcplugin free agcplugin
Iklan
Sekilas tentang post thumbnail dan plugin thumbnail wordpress. Post thumbnail adalah fitur yang diperkenalkan wordpress setelah Versi wordpress versi 2.9. Ini dengan cepat berubah menjadi hal menarik dengan setelah versi 3.0. Post Thumbnail atau sekarang biasa disebut dengan Featured Image, adalah gambar yang dipilih sebagai gambar yang mewakili Postingan, Halaman atau Custom posttype.Tampilan gambar ini biasa anda lihat di halaman kategori, halaman beranda atau halaman lainnya yang menampilkan gambar tunggal yang menonjolkan atau menerangkan suatu postingan. Hal ini sangat berguna jika anda memiliki themes/ web yang bergaya magazine, di mana setiap posting memiliki gambar. Ingin tau apa itu post thumbnail lihat contoh gambar dibawah:
Klik gambar untuk memperbesar gambar ini:
wordpress post thumnail

wordpress post thumnail

Lihat gambar2 yang ada di gambar diatas. Ya itulah yang dinamakan dengan post thumbnail atau yang biasa kita sebut dengan featured image.

Mengaktifkan dukungan post thumbnail di theme wordpress anda.

Kebanyakan themes mungkin saja sudah menggunakan themes, so bagaimana cara mengaktifkan fitur ini jika themes belum mendukung featured image. Anda bisa mengaktifkannya dengan menambahkan beberapa code di functions.php, berikut adalah kodenya:

add_theme_support( 'post-thumbnails' );

NB: Fungsi sudah ada di theme kentooz jadi anda tidak perlu memasukkan fungsi ini. :)

Pengaturan post thumbnail di postingan.

Jika tema Anda berhasil menambahkan dukungan untuk Post Thumbnail maka Metabox “Featured Image” akan terlihat pada pada layar Edit Post dan Edit Halaman. Jika tidak, pastikan “Feature Image” diaktifkan di kanan atas pada tulisan “Screen Options” lalu centang “Featured Image“. Lihat contoh gambar dibawah:

Klik gambar untuk melihat ukuran sebenarnya.

wordpress post thumnail featured image

wordpress post thumnail featured image

Setelah diaktifkan fitur itu, maka anda akan melihat box Featured Image di kanan bawah “Defaultnya” dan box ini lah yang secara default yang akan menampilkan thumbnail di postingan anda. Lihat contoh gambar box “featured image” dibawah ini:

Klik gambar untuk melihat ukuran sebenarnya.

wordpress post thumnail featured image box

wordpress post thumnail featured image box

Lihat gambar diatas klik set featured image, setelah mengklik “set featured image”  ikuti langkah yang sama seperti memasukkan gambar di postingan dan Halaman. Setelah anda memilih gambar dan menentukan pengaturan gambar, klik tombol “Set featured image“, untuk mengaturnya sebagai gambar yang akan ditampil untuk halaman anda.

Sedikit penjelasan. Mungkin ada beberapa script yang menggunakan image pertama sebagai thumbnail dan ada juga beberapa script yang menggunakan external image sebagai thumbnail, tetapi cara terbaik untuk menampilkan post thumbnail atau featured image di wordpress tetap menggunakan native wordpress alias fitur yang sudah dibawa oleh wordpress.

Contoh kode atau script featured image untuk menampilkan gambar di halaman:

Fungsi asal atau default pada wordpress:

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
the_content();

NB: Untuk mengembalikan fungsi Post Thumbnail dalam kode PHP anda daripada menampilkannya, gunakan: get_the_post_thumbnail() maka contoh kode jika menggunakan fungsi ini adalah sebagai berikut:

if ( has_post_thumbnail() ) {
	echo get_the_post_thumbnail();
} 
the_content();

Ukuran thumbnail:

Ukuran gambar default dari WordPress adalah “thumbnail“, “medium“, “large” dan “full“. Ukuran gambar ini dapat dikonfigurasi dalam dasboard anda yang letaknya dibawah “Settings> Media”. Ini jika anda menggunakan ukuran standar dengan the_post_thumbnail (), contoh kode jika anda ingin menampilkan sesuai ukuran yang anda kehendaki:

the_post_thumbnail();                  // tanpa parameter Thumbnail

the_post_thumbnail('thumbnail');       // Ukuran Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Ukuran Medium (default 300px x 300px max)
the_post_thumbnail('large');           // Ukuran Large (default 640px x 640px max)
the_post_thumbnail('full');            // Ukuran Original image(Tanpa di resize atau croping)
// jika anda ingin menggunakan ukuran lain:
the_post_thumbnail( array(100,100) );  // Ukuran 100px x 100px

Set the Post Thumbnail Size

Menetapkan ukuran Post Thumbnail dengan mengubah ukuran gambar secara proporsional (yaitu, tanpa distorsi):

set_post_thumbnail_size( 50, 50 ); // 50 x 50, resize mode

Menetapkan ukuran Post Thumbnail dengan mengcrop atau croping gambar (baik dari sisi, atau dari atas dan bawah):

set_post_thumbnail_size( 50, 50, true ); // 50 x 50, crop mode

Add New Post Thumbnail Sizes

Contoh ukuran Post Thumbnail baru, misalkan ane kasih nama “bostheme-thumb“.
Berikut adalah contoh kode dengan nama tersebut (Gunakan atau tambah kode di file function.php atau file fungsi anda)

add_image_size( 'bostheme-thumb', 300, 9999 ); //300px untuk lebar dan panjang tidak terbatas

Berikut adalah contoh bagaimana menggunakannyadalam file template theme anda:

<?php the_post_thumbnail( 'bostheme-thumb' ); ?>

Contoh di functions.php atau file fungsi anda:

if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail (cropped)

// Ukuran gambar tambahan 
add_image_size( 'bostheme-thumb', 300, 9999 ); //300px untuk lebar dan panjang tidak terbatas
}

Styling post thumbnail

Secara default Post Thumbnail diberi class “wp-post-image“. Mereka juga mendapatkan class tergantung pada ukuran thumbnail yang ditampilkan. Anda bisa mengubah style thumbnail sesuai yang anda inginkan. Berikut adalah jika anda menggunakan default dari wordpress:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

Anda juga dapat memberikan class Post Thumbnail sendiri. Misal ingin menambkan fungsi class “styleku” maka contoh kodenya:

<?php the_post_thumbnail('thumbnail', array('class' => 'styleku')); ?>

Jika anda mengalami beberapa masalah dengan thumbnail di situs atau themes anda maka ada beberapa solusi yang mungkin bisa anda gunakan semisal penggunaan plugin atau mengubah beberapa kode thumbnail di themes yang anda gunakan. Untuk mengubah kode thumbnail akan saya tulis di postingan selanjutnya, untuk kali ini saya akan coba membahas mengenai plugin thumbnail  yang mungkin bisa menyelesaikan masalah thumbnail anda:

1. Regenerate thumbnail atau force regenerate thumbnail.

Regenerate Thumbnail memungkinkan Anda untuk mengcrop thumbnail untuk lampiran gambar anda. Hal ini sangat berguna jika anda telah mengubah salah satu dimensi thumbnail anda (melalui Settings -> Media) atau mengganti themes anda setelah sebelumnya mengupload gambar atau telah berubah ke tema dengan dimensi fitur posting gambar yang berbeda.
Plugin ini ini bisa anda unduh di: http://wordpress.org/plugins/regenerate-thumbnails/
Plugin lainnya yang sama fungsi dengan plugin diatas adalah plugin Force Regenerate Thumnail. Ini salah satu plugin favorit ane jika ada salah satu client ane yang ada masalah dengan croping thumbnail. Karena fungsi plugin ini sama dengan plugin diatas hanya plugin ini akan menghapus image di media yang tidak sesuai dengan ukuran thumbnail di themes, dan anda bisa lebih menghemat space webhosting anda.
Plugin ini ini bisa anda unduh di: http://wordpress.org/plugins/force-regenerate-thumbnails/
2. Auto Post thumbnail
Auto post thumbnail adalah plugin untuk menghasilkan post thumbnail dari gambar pertama dalam posting atau custom posttype. Jika gambar pertama tidak bekerja secara otomatis akan mencari yang berikutnya, dan seterusnya sampai post thumbnail dimasukkan.

Plugin ini juga menyediakan kemampuan Batch Processing untuk menghasilkan posting thumbnail untuk posting yang sudah diterbitkan. Plugin ini bisa anda unduh di: http://wordpress.org/plugins/auto-post-thumbnail/

3. Media tools
Jika anda punya masalah dengan image external sebagai image post mungkin solusinya anda harus mengubah script thumbnail, alternatif lain anda bisa menggunakan plugin ini. Dengan plugin ini maka anda dapat mengimpor semua gambar external yang ditemukan dalam posting anda atau halaman dan mengimpornya ke media dan melampirkannya.
Plugin ini akan membantu Anda mengkonversi dari menggunakan scrip Timthumb ( yang kabarnya dulu pernah ada bugs besar dan sekarangpun masih di komplen pihak hosting :D ) ke fungsi native wordpress featured image / post thumbnail.
Plugin ini bisa anda unduh di: http://wordpress.org/plugins/media-tools/
Lain lain:
Masih ada masalah dengan thumnail silahkan anda cek upload permission usahakan permission tiap folder 755 dan file 644.
Tanyakan pihak hosting apakah GDlibrary dan imagemagick terinstall di hosting anda.
Jika masih ada problem silahkan komentar..
Sumber: http://codex.wordpress.org/Post_Thumbnails
Tags:
Iklan

Author: 

Freelance designer, tidak terpaku sama yang namanya waktu, hobby mengunjungi localhost setelah itu baru OL. Suka pusing kalau melihat kode kode yang aneh. :| Jangan lupa add ane di link social newtwork dibawah.

author

Related Posts "Sekilas tentang post thumbnail dan plugin thumbnail wordpress"

20 Responses

  1. author

    Rudhi Maya3 years ago

    weiihh,Mantabs sekali tutorialnya mas bro,lengkap singkat dan padat :D

    Thankyu

    Reply
    • author
      Author

      admin3 years ago

      Oke semoga bermanfaat saja masbro.. :D

      Reply
  2. author

    Ageng Siswanto3 years ago

    keren mas…
    mas coba bikin buku yang membahas totorial & project pembuatan themes WP. [sekedar masukkan aja ]

    Reply
    • author
      Author

      admin3 years ago

      Belum ada rencana buat ebook mas. Masih disibukkan dengan buat buat themes dulu, sementara tulis tutorialnya juga sesempetnya atau ada ilmu baru dan dirasa lumayan bermanfaat baru saya tulis. :D

      Reply
  3. author

    idoet3 years ago

    Dah nyoba Easy WP Thumbs belum mas?
    kayaknya bagus juga sebagai penganti scrip Timthumb :D

    Reply
    • author
      Author

      admin3 years ago

      Yups, sudah ane coba ane jatuh pilihan ke bfi_thumb, lebih mudah dimodifikasi dan ada folder khusus untuk imagenya. Stabil jika menggunakan image dari luar meskipun tidak di crop. Sama seperti aqua resizer, tapi settingan lebih banyak seperti grayscale, dll. :D

      Reply
  4. author

    Anggraita3 years ago

    ane uda nda mikirin lagi yang kayak gini lagi
    karna theme dari bostheme sudah menyediakan fitur fitur lengkap
    puas ama pelayanannya :D

    Reply
    • author
      Author

      admin3 years ago

      Makasih gan… Itu buat dasar nya… :D Kali aja lebih mau diperdalam pengetahuan wordpress nya. :D

      Reply
  5. author

    Faip Mardoni3 years ago

    mas mw tanya.
    klo pakai media tools itu gambar externalnya itu membebani hosting atau kagak ya?
    sorry masih newbie

    Reply
    • author
      Author

      admin3 years ago

      Pluginnya menggunakan ajax, agak membebani server terutama CPU, tapi gak perlu kuatir karena saat regenerate saja, setelah regenerate semua, normal kembali. :)

      Reply
  6. author

    Adi3 years ago

    gan biar thumbnail wordpress pake externalink gimana?
    biar gag masuk ke hosting lagi dan gag ngurangi space host

    Reply
    • author
      Author

      admin3 years ago

      Ngga ngurangi space tapi meningkatkan resource memory dan CPU karena load image dari luar server.. :D Bisa pakai timthumb

      Reply
  7. author

    bajank nyelak2 years ago

    mas … ane coba2 di localhost tetep aja ga bisa ?
    kira2 knp ya ? apa harus di web hosting ?

    Reply
    • author
      Author

      admin2 years ago

      Coba generete thumbnailnya bro…

      Reply
  8. author

    Ragil Wk2 years ago

    Halo mas…
    mau nanya… kalo buat short kode nya gimana ya..
    jadi penggunaannya manual didalam artikel..

    jadi kalo pas mau make featured image bisa langsung makek short kode nah kalo gak mau pake..ya gak usah dipakek..jadi bisa menyesuaikan kondisi artikel mas..

    Reply
  9. author

    Infolengkap2 years ago

    Minta tutorial setting timthumb.php agar bisa menampilkan gambar dari external host, donk gan ! terimakasih sebelumnya ^_^ sukses terus

    Reply
  10. author

    patar tambunan2 years ago

    Terimakasih mas, mau coba langsung di wordpress saya..

    Reply
  11. author

    andri2 years ago

    halo mas, mau tanya jika ubah posisinya thumbnaol gimana ya? misal kan ukuran awal gambarnya besar, dan sudah tak buat kecil, nah biar posisinya bukan diatas postingan tapi disamping postingan gimana ya? mohon pencerahanya mas :) matur nuwun

    Reply
    • author
      Author

      admin2 years ago

      Kalau masalah thumbnail yang ente buat itu harus dibuat juga stylenya, seperti float left, height dan width jadi lebih komplex, pelajari struktur html di themenya coba. :D

      Reply
  12. author

    bantoel2 years ago

    gan, kenapa ya.. ane pake auto post tumbhnail ko gambarnya lebar banget ya, makan setengah page. cara ngembaliinya lagi gmna ya?

    Reply

Leave a reply "Sekilas tentang post thumbnail dan plugin thumbnail wordpress"

Captcha: * Time limit is exhausted. Please reload CAPTCHA.