Sejak versi 2.9 WordPress memiliki fasilitas baru dengan nama featured image. Ini adalah gambar thumbnail yang mewakili sebuah artikel. Tak banyak blog yang memanfaatkan ini (termasuk blog ini juga), tapi karena kita belajar membuat themes WordPress, jadi kita perlu untuk mempelajarinya juga.
Apalagi, seperti biasa kita lihat di themes-themes premium dimana di bagian home kita bisa melihat sebuah gambar dengan sedikit tulisan dan di bagian artikel, gambar yang lebih besar muncul dengan lebih jelas. Bagaimana sih cara membuatnya? Ternyata gampang lho.
Ada 3 file yang kita edit kali ini yaitu functions.php, index.php dan tentunya style.css untuk mempercantik tampilannya.
Baiklah, di function.php kita pasang kode ini:
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 100, 100, true );
Gampang ya? Angka 100 mewakili tinggi dan lebar gambar thumbnailnya. Jadi silahkan dimodifikasi sesuka hati.
Untuk memunculkan thumbnailnya, kita edit index.php tambahkan kode ini ditempat dimana anda ingin thumbnail itu muncul. Karena saya ingin dia muncul sebelum judul artikel, maka saya letakan diatas judul artikel seperti ini:
if (!is_single()) {
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
echo '<img src="'.get_bloginfo('template_url').'/images/thumbnail.png" alt="'.get_the_title().'" class="wp-post-image"/>';
}
}
?>
<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
Yang <h2 class="title">...</h2> adalah judul artikel yang muncul di home. Oke, saya coba jelaskan sedikit. Baris pertama berisi kode untuk mengecek apakah ini halaman artikel atau bukan. Kalau bukan halaman artikel, kita munculkan thumbnailnya, tapi kalau di halaman artikel kita hilangkan.
Baris kedua untuk memeriksa apakah artikel tersebut memiliki thumbnail atau tidak. Kalau punya, munculkan thumbnailnya, tapi kalau tidak, munculkan thumbnail default. Dalam hal ini saya menggunakan gambar dengan nama thumbnail.png sebagai thumbnail default.
Kedua gambar diatas baik thumbnail post maupun thumbnail default sama-sama memiliki class dengan nama wp-post-image. Maka dengan mudah bisa kita modifikasi tampilannya agar lebih menarik. Langsung menuju style.css dan tambahkan kode ini:
img.wp-post-image {
float:left;
margin-right:5px;
width:100px;
height:100px;
padding:3px;
border:solid 1px #cccccc;
}
Tentunya anda bisa memodifikasi sesuka hati CSS-nya. Sesuaikan dengan themes anda yah. sekarang coba anda lihat tampilan blog anda sekarang
Tampilannya masih berantakan karena gambar yang kita masukkan di artikel masih keluar di halaman depan.. hehehe.. trus bagaimana dong?
Ditunggu artikel berikutnya ya xixixi…
Diakses dg kata kunci:
featured image wordpress (30), featured image (20), cara membuat Featured Post (17), membuat thumbnail di wordpress (14), thumbnail tidak muncul (13), wordpress featured image (11), cara membuat thumbnail di wordpress (11), feature image in wordpress (9), feature image wordpress (7), gambar tidak muncul di wordpress (6), menampilkan thumbnail di wordpress (5), featured images wordpress (5), cara membuat featured post di blogspot (5), cara membuat thumbnail di blog (4), cara menaruh gambar di halaman home php (4), menampilkan thumbnail wordpress (4), wordpress featured image code (4), kenapa css tidak tampil di wordpress (3), gambar tidak tampil di wordpress (3), cara menampilkan featured image di home (3), tidak tampil gambar di wordpress (3), memasang gambar di wordpress (3), cara menampilkan feature post pada wordpress (2), fungsi featured image pada wordpress (2), plugin images featured post wp (2), cara menambahkan featured photo wordpress (2), cara menambahkan featured image di wordpress (2), featured image tidak tampil gambar (2), cara membuat slideshow image thumbnail featured products di wordpress widget sidebar (2), cara membuat tampilan menarik pada wordpress (2), cara membuat featured image (2), pasang gambar php (2), menmpilkan featured images posting pada wordpress (2), cara memunculkan featured image (2), cara menambah gambar di thames transcript (2), cara menambah featured di template wordpress (2), cara menampilkan featured image (2), cara menampilkan featured image wordpress (2), Edit photo kita sama photo orang lain berdampingan (2), menampilkan thumbnail images di sidebar wordpress (2), cara menampilkan post image wp (2), menampilkan posting wordpress hanya thumbnail gambar (2), menampilkan gambar thumbnail php (2), menampilkan gambar frontpages wordpress di index (2), cara pasang featured artikel di wordpress (2), cara pasang featured images themes wordpress (2), menampilkan featured image (2), memunculkan thumbnail (2), feature image (2), cara mengatasi width yang terbatas dari template default (2)
Daftar Isi Membuat Theme WP
- Cara Membuat Theme WordPress
- Membangun Theme WP: Style.css
- Membangun WP Theme: index.php
- Bikin Theme WP: Designing
- Bikin Tema WP: Layout
- Membuat Theme: Heading
- Buat Theme WordPress: Blog Header
- Buat Theme WP: Konten
- Mengatur Konten dalam Themes WordPress
- Styling Konten WordPress
- Membuat Sidebar Widget
- Styling Sidebar
- Membuat Footer
- Membuat Custom Background
- Membuat Drop Down Menu
- Search Form Gaya dengan Image
- Memasang Featured Image
- Memperbaiki tampilan halaman depan
- Membuat Featured Slide Show
- Bermain-main dengan Looping WordPress
- Memecah File Themes
- Memecah Sidebar
- Membuat File Single.php, archive.php, dll
sayang aku udah gak jaga net lagi mas. Hiks. Gak bsa coba . Sedih nya
kalo memunculkan thumbnails dibawah judul / berdampingan posting di halaman index, kemudian gambar dengan ukuran sebenarnya muncul di single page gimana yah?
tanpa plugin tentunya
Lha panduan diatas kan gitu cara kerjanya
Saya juga tidak memasang featured images..
Habiss ngak ngerti
Sekarang udah ngerti kan?
Mas… mau nanya nich…. Saya install theme TinyNews pada wordpress saya mas. Theme nya sudah dilengkapi thumbnail pada halaman depan.
Nah… jika saya ambil image dari link lain pada post, thumbnailnya nggak muncul mas…
Thumbnailnya hanya muncul jika imagenya langsung saya upload.
Gmana cara memanggil image agar muncul di thumbnail nya mas?? ( image yg diambil dri link lain )
Trimakasih sebelumnya mas…
Memang ndak bisa bikin thumbnail dari web lain. Biasanya pakai script downloader dulu baru kemudian dibikinkan image thumbnailnya. Logikanya gini lah, itu image orang lain di hosting orang lain, masak anda bisa ngedit image-nya? Gak mungkin layau.
Tapi kalau “memaksa” supaya image tampil kecil, maka cukup kasih atribut width dan height aja di tag img-nya beres
Mau nanya mas., Bagian yang dimasukan dalam fuction.php itu tepatnya dibagian mananya ya?
Terserah. Kalau fungsi kan bisa dimana aja
Salam kenal gan, aq msh baru dlm dunia bloger mhn panduan n kritik dan saran http://ingraya.wordpress.com trims gan.
Waduh punya saya blogspot…
Bagaimana bos untuk blogspot…..?
blogcepot tempatnya ndak disini bos
makasih mas atas infonya. Saya ingin bertanya, web punya saya itu ga ada “feature image” di tempat ketika kita mau post, biasanya setelah “excert” ada “feature image” dalam template itu ga ada. Nah, bagaimana mua tambahkan feature image dalam blog…?
Mas, tanya lagi boleh kan? Saya pakai theme warrior yang ada feature imagenya. Namun ketika url posting saya akses kok yang keluar cuma judul aja. Sedangkan artikelnya tidak keluar. Mohon di cerahkan. Misal saya akses indoblogger.eu/judul-post yang keluar nanti cuma judul post namun artikelnya gak mau tampak. Thanks mas
Mas mau tanya ya!, pada wp 3.2.1 apa tampilannya tdk bisa utk humbnail atau theme nya yg tdk bisa menampilkan thumbnail di postingan? (theme sy 3d sound, 3.2.1).
Jika ada yg hrus di setting pda theme ini agar tampilannya sama dengan post di dashboard bagaimana caranya dan code scriftnya apa?.
trims sbelumnya mas.
catatan: ini contoh image thumbnail yg teks nya selalu di bawah image dan tdk bisa di setting teks nya sejajar dg image.
http://www.penaswara.com/produk-dan-manajemen-entertainmen-studio-musik-penaswara/
di style.css theme, tambahkan kode ini:
.alignleft {float:left; margin-right:5px;} .alignright{float:right; margin-right:5px;}Nah ada alternativ gak, tapi fungsi sama selain dipasang di Indes.php
kalau ada kasih tau yah..
mantap maksih infonya
sekarang wp tambah maju yaa jd pengen nyoba WP
itu pake plugin bisa yaaa ???
terima kasih mas ilmunya…mau tanya mas scirptnya dah tak pasang…hasinya gambarnmya setelah judul….na biar gambarnya itu di atas judul gimana caranya
Ya dipindah aja kodenya dari bawah gambar ke atas gambar
kenapa ya kebanyak tips2 gini selalu make php? kan gak smua newbie paham php
sekiranya ada tips yang gampang ditiru bolehlah dibagikan ya Om….
makasih…
Lha bahasa basic-nya PHP kok. Masak pakai ASP
Lha maunya apa? Bahasa Indonesia gitu tah xixixi….
Rencananya mau pasang featured image di web saya yang http://www.xpower-indonesia.com . Supaya di home ada image di KIRI ringkasan artikel. Terima kasih tips nya. Saya salah satu penggemar Mas Lutfi.
Salam Hormat
HILDAN (0852 340 89 809)
kok aku nyoba gagal yak…
yang kebaca malahan scipt dari fungtion.php ini
if (!is_single()) {
if ( has_post_thumbnail() ) {
the_post_thumbnail(); } else { echo ‘
coba perhatiin di functions.php
dan pastiin yang tertulis adalah ini
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size(100,100,true);
oke mas … dh bisa…. ternyata kurang tag php’nya.. hehe… :p
seandainya gambar yang post bukan dari komputer melainkan dari URL, bisa dijadikan featured image juga
Tidak bisa
request buat di blogger dong
blogger ndak disini tempatnya gan
Saya nggak muncul gambarnya gan,,, gmn neh ceritanya????
ane pake wordpress 3.0.5,,
matur suwuunnnn
mantap gan….
Mantap Mas Bro…
Thanks buat tutorialnya…