Agar featured image tetap cantik seperti asal.
Perkara ini akan terjadi apabila kita menukar theme.
Gambar featured image tak kelihatan seperti yang sepatutnya.
Untuk kes saya, featured image dipotong sebahagian menjadikan gambar tak bermakna.
Jika laman anda mempunyai bilangan post yang sedikit tak jadi masalah.
Boleh buat semula featured image ikut saiz yang sesuai untuk theme tersebut.
Tapi untuk blog yang sudah lama dan mempunyai banyak post, untuk buat secara manual agak mencabar.
Cara yang paling mudah?
Lakukan langkah ini.
Langkah untuk menentukan saiz single post featured image adalah seperti berikut:
- Pastikan setting untuk single featured image dalam keadaan ‘enabled’.
- Masukkan php kod untuk mendaftarkan new image saiz dalam function.php.
- Regenerate semula image yang terlibat menggunakan plugin ‘regenerate thumbnail’.
- Pilih saiz yang telah di daftarkan dalam senarai saiz image
Penerangan untuk setiap langkah tersebut adalah seperti berikut.
1 Setting featured image
Untuk theme Genesis, anda boleh menampakkan / menghilangkan featured image daripada setting berikut.
Untuk featured image pada bahagian archives:
Appearance > Customize > Theme setting > Content Archive > Display featured image
Untuk featured image pada bahagian single post:
Appearance > Customize > Theme setting > Singular content > Display featured image
Langkah pertama adalah pastikan setting untuk ‘singular content’ tersebut dalam keadaan ‘show’.
Kotak ‘tik’ ditandakan.
2Daftarkan saiz image pilihan dalam function.php
Untuk bahagian ini anda perlu akses fail function.php untuk theme yang anda gunakan.
Anda boleh akses fail tersebut melalui:
- cPanel. Gunakan file manager untuk akses function.php di dalam folder theme yang anda gunakan
- Daripada admin wordpress. Appearance > theme editor. Pilih theme function.
Saya selalu gunakan cara no 1.
Tambahkan kod berikut pada bahagian akhir dalam fail function.php:
add_image_size( 'genesis-singular-images', 1280, 720 );
Dalam contoh di atas 1280 adalah width image dalam pixel (px).
720 pula adalah adalah height image, juga dalam pixel.
Gantikan width dan juga height ikut saiz kemahuan anda.
Anda boleh gunakan juga variasi kod ini:
add_image_size( 'genesis-singular-images', 1280, 'auto' );
Yang mana bermaksud height untuk image adalah auto.
Ini sesuai jika saiz featured image anda berbeza antara satu dengan lain.
Selain itu, terdapat juga variasi kod ini:
add_image_size( 'genesis-singular-images', 1280, 720, true );
Kod ini akan membuatkan image anda di crop tepat-tepat kepada saiz yang ditentukan.
Tips: Anda boleh gunakan fungsi inspect element dalam browser untuk menentukan saiz image yang paling optimum.
3Regenerate thumbnail untuk image yang terlibat
Seterusnya, anda kena generate semula saiz image baru untuk semua image yang terlibat.
Untuk proses ini gunakan plugin ‘Regenerate Thumbnail’.
Anda boleh pilih untuk regenerate thumbnail untuk image yang terlibat sahaja.
Ini akan menjimatkan masa dan ruang server.
4Set saiz baru dalam setting
Siap semua langkah di atas, baru lah anda boleh pilih setting saiz image yang baru anda tentukan tersebut.
Dalam setting genesis, tidak ada setting untuk memilih saiz featured image bagi single post (singular content).
Setting untuk saiz featured image singular post dikongsi bersama dengan setting saiz featured image archives (Content archives).
Akses setting berikut:
Appearance > Customize > Theme setting > Content Archive > Featured image size
Daripada menu pilihan dropdown anda akan lihat setting yang anda buat atas nama ‘Genesis singular image’.
Pilih setting berikut untuk mengaktifkan saiz featured image baru.
Kemudian lihat hasilnya.
Jika anda menggunakan sebarang plugin cache, jangan lupa untuk clear cache.
Jika anda gunakan plugin jetpack, jangan lupa untuk disable setting: Performance > Speed up image load times & Speed up static file load times.
Sebagai tambahan, jika anda nak mengubah kedudukan featured image, mungkin nak letak sebelum title, boleh rujuk post ini:
Cara Ubah Posisi ‘Featured Image’ di Genesis.
Kongsikan jika post ini bermanfaat pada anda.
Leave a Reply