Menambahkan Featured Image Pada Halaman Index WordPress

In Tutorial, Web 848 views

Mungkin cara ini sudah banyak yang membahas dan bahkan mungkin sudah ada sejak beberapa tahun yang lalu πŸ˜€ . Β Tapi ga pa pa, buat newbie saja dan sekedar catatan buat saya …… πŸ™‚

Sebelumnya, apa siy Featured Image …. nah featured image adalah sebuah gambar yang melekat pada sebuah artikel. Maksudnya apa tuh gambar yang melekat …… stiker??? #garuk2 kepala#

Jadi yang jelas ketika kita menerbitkan sebuah artikel dan ada gambar didalamnya, maka gambar tersebut dapat digunakan sebagai featured image atau gambar yang mewakili isi artikel, begitulah kira-kira…..koreksi kalo salah πŸ˜€ .

Ok degh, langsung ke intinya saja ….. ada beberapa hal yang harus dilakukan sebelum menampilkan featured image pada halaman index berfungsi. Nah, berikut langkah-langkahnya …..

1. Tentukan gambar yang akan menjadi featured image pada sebuah artikel, untuk membuat gambar menjadi sebuah featured image pada artikel mungkin banyak cara yang bisa dilakukan. Tapi aku hanya tau satu cara yang mudah menurutku yaitu dengan menggunakan plugin Simple Auto Featured ImageΒ πŸ˜€Β .

Dengan plugin ini maka setiap image yang dimasukkan dalam sebuah artikel akan secara otomatis menjadi featured image untuk artikel tersebut. Mudah kan …..

2. Setelah menentukan featured image pada sebuah artikel maka langkah selanjutnya adalah memasang kode untuk menampilkan featured image tersebut didalam sebuah halaman index dan letakkan sebelum kode :

the_content( __( 'Continue reading <span>β†’</span>', 'twentyeleven' ) );

Berikut kode untuk menampilkan featured image nya ….. jangan lupa masukkan diantara kode <?php dan ?>

if ( has_post_thumbnail() ) { // untuk melihat apakah terdapat gambar pada artikel
 the_post_thumbnail();
}

3. Sebenarnya kode diatas sudah cukup untuk menampilkan featured image namun ukurannya masih menggunakan ukuran asli, bagaimana jika kebetulan gambarnya besar …… nah tentu akan merusak pandangan visitor.

Untuk mengubah ukuran featured image maka perlu menambahkan kode berikut pada file function.php pada folder theme yang digunakan.

add_theme_support( 'post-thumbnails' );
add_image_size($name, $width, $height, $cropBoolean);

untuk kode add_image_size perlu dijabarkan sedikit mengenai parameter yang ada didalamnya,

$name : nama / nilai yang akan dipanggil pada kode the_post_thumbnail
$width : lebar featured image
$height : tinggi featured image
$cropBoolean : memiliki nilai true atau false, dan jika true maka featured image akan melakukan crop gambar secara otomatis

Sehingga kode add_image_size dapat dituliskan menjadi seperti berikut :

add_image_size('fiturimg', 250, 200, true);

4. Setelah menambahkan kode pada function.php maka kode pemanggil featured image pada halaman index perlu diubah sedikit dengan menambahkan nilai pemanggil yang disesuaikan pada parameter $name tadi dan dalam contoh tadi berupa “fiturimg”.

if ( has_post_thumbnail() ) { // untuk melihat apakah terdapat gambar pada artikel
 the_post_thumbnail('fiturimg');
}

5. Ok, saat ini dengan hasil yang ada biasanya gambar sudah bisa tampil namun dengan tampilan menurun kebawah. Nah, untuk menampilkan gambar rata kiri maka cukup tambahkan kode berikut :

if ( has_post_thumbnail() ) { // untuk melihat apakah terdapat gambar pada artikel
 the_post_thumbnail('fiturimg', array('class' => 'alignleft'));
}

Jika langkah-langkah diatas diikuti dengan benar maka tampilan featured image akan tampak rapi rata kiri ….. semoga πŸ˜€

Selamat mencoba ….. dan kalau ada kekurangan mohon dimaafkan πŸ˜€

Related Search

Tags: #wordpress

Install Pi-Hole DNS Blokir Iklan dan Tracker
Install Pi-Hole DNS Blokir Iklan dan Tracker
Pi-Hole merupakan salah satu pelindung user internet
Migrasi VPS Panel dari Tuxlite ke VestaCP
Migrasi VPS Panel dari Tuxlite ke VestaCP
Setelah sekian lama menggunakan Tuxlite akhirnya diputuskan
Cara Cepat Root Unlock STB ZTE B760H Tanpa Bongkar
Cara Cepat Root Unlock STB ZTE B760H Tanpa Bongkar
Mungkin beberapa ada yang pernah berlangganan Indihome
Upgrade PHP 5.6 ke PHP 7.0 Nginx Debian Jessie
Upgrade PHP 5.6 ke PHP 7.0 Nginx Debian Jessie
Sebetulnya sudah agak lama warning untuk upgrade

Top