freebitco.in

Menambahkan Featured Image Pada Halaman Index WordPress

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

Anda sedang membaca artikel tentang Menambahkan Featured Image Pada Halaman Index WordPress. Silahkan baca artikel Be Log tentang Tutorial, Web lainnya. Semoga bermanfaat ...

Setup Storage Path The Dude di RB750G r3
Setup Storage Path The Dude di RB750G r3
The Dude merupakan tool yang cukup penting
Install Teamviewer via Terminal di Ubuntu 18.04 Bionic Beaver
Install Teamviewer via Terminal di Ubuntu 18.04 Bionic Beaver
Aku coba install Teamviewer menggunakan GUI tapi
Setup Raspberry Pi 3 Video Resolution
Setup Raspberry Pi 3 Video Resolution
Raspberry Pi, saat ini bisa menjadi alternatif
Mengatasi Ubuntu 16.04 Yang Hang Pada Saat Reboot atau Shutdown
Mengatasi Ubuntu 16.04 Yang Hang Pada Saat Reboot atau Shutdown
Pada beberapa laptop terkadang Ubuntu yang sudah

Top