Friday 9 May 2025
Pasang Iklan
Blogging Resources
About
TeknoHere.com TeknoHere.com
  • Home
  • Internet & Web
  • Komputer
  • Gadget
  • SEO
  • Bisnis
  • Kontes
  • Selingan
  • Review
  • Berita

Cara Menambahkan Thumbnail Posting Pada WordPress Theme Apapun

 Cara Menambahkan Thumbnail Posting Pada WordPress Theme Apapun
Internet & Web

Cara Menambahkan Thumbnail Posting Pada WordPress Theme Apapun

by admin 24 June 2012

Bagaimana Anda bisa menambahkan thumbnail posting ke WordPress Theme apapun? Thumbnail posting adalah fitur desain yang bagus dari WordPress theme yang memungkinkan blogger WordPress untuk melabelkan satu gambar di setiap artikel sebagai gambar featured.

Thumbnail posting yang menampilkan gambar featured dapat dibuat untuk menampilkan pada halaman tema dengan mudah di samping link artikel dan kutipan pos. Semua WordPress theme yang modern akan memiliki dukungan thumbnail posting dan jika Anda telah mengaktifkan fitur ini, thumbnail posting akan menampilkannya secara default.

thumbnail posting

Jika Anda memiliki tema kustom yang bukan modern, Anda dapat menambahkannya ke dalam kode tema hanya dalam beberapa langkah.

Melabelkan Gambar Featured

Bagian pertama adalah melabelkan satu gambar dari posting Anda sebagai gambar featured. Post edit page > Add Media > Gallery > Image. Sekarang buat salah satu gambar menjadi gambar featured.

gambar featured

Anda perlu mengaktifkan gambar featured untuk semua artikel dimana Anda perlu menampilkan thumbnail posting. Berikut ini cara tercepat untuk menambahkan gambar featured untuk beberapa posting dengan cepat.

Menambahkan Dukungan Theme Thumbnail Posting

Tambahkan kode berikut ini ke dalam file functions.php tema Anda.

add_theme_support('post-thumbnails');

Jika tema Anda tidak memiliki file functions.php, maka Anda dapat membuat file teks baru dan beri nama function.php lalu upload ke direktori tema WordPress.

<?php
add_theme_support('post-thumbnails');
?>

CATATAN: Ingat tidak boleh ada baris kosong setelah tag penutup PHP dalam file ini atau akan ada pesan kesalahan. Sebagai catatan bahwa ini adalah file yang sangat penting dan jika Anda menggunakan kode yang salah di manapun maka tema, WP admin dan situs Anda akan menjadi tidak tersedia. Jadi, lakukan backup terlebih dahulu. Jika error terjadi, maka Anda perlu mengembalikan file backup.

Menampilkan Post Thumbnail

Sekarang Anda perlu menambahkan kode dalam file index.php dan archive.php dari theme. Anda dapat menambahkannya tepat di atas judul posting atau di atas konten.

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail' );
}
?>

Yang kode ini lakukan adalah memeriksa jika ada thumbnail posting (yang berarti jika Anda telah melabelkan gambar featured untuk artikel) dan akan menampilkannya. Thumbnail akan berukuran tinggi 150px dan lebar 150px, yang merupakan ukuran default-nya.

Jika ukuran thumbnail terlalu besar untuk tema, Anda dapat menentukan ukuran gambar.

<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( array(80,80) );
}
?>

Kode ini menentukan bahwa tema harus menampilkan thumbnail dengan tinggi 80px dan lebar 80px. Anda tentu saja dapat memilih ukuran apapun yang disukai.

Memberikan Style pada Thumbnail Posting

Saya menggunakan kelas CSS img.wp-post-image untuk memberikan style pada thumbnail. Pada kebanyakan style yang mendasar, Anda ingin menyelaraskan perataan kiri (atau kanan) gambar dan menambahkan beberapa padding untuk sisi-sisinya. Sehingga Anda dapat menambahkan kode sederhana seperti ini ke dalam file style.css Anda

img.wp-post-image {float:left; padding: 5px;}

Kami menggunakan teknik ini untuk mendapatkan dukungan thumbnail posting pada tema WordPress kami dan Anda juga bisa melakukannya. Tentu saja Anda perlu menentukan gambar featured untuk artikel Anda terlebih dahulu atau thumbnail posting tidak akan muncul.

Share This:

  • 0
    Share
    Facebook
  • 0
    Share
    Twitter
  • 0
    Share
    LinkedIn
  • 0
    Share
    Pinterest
  • 0
    Share
    Skype
Tags: blogging gambar thumbnail wordpress
Previous post
Next post

Leave a Reply

Your email address will not be published. Required fields are marked *

TeknoHere.com TeknoHere.com
app_store
google_play
About Us
Work With Us
Blogging Resources
Contact
Disclaimer
Privacy Policy
Terms of Use
Copyright 2025. All Right Reserved