Solusi Thumbnails Pintar untuk Blog Wordpress dengan Paket Hosting Hemat

Transkripsi

1

2 Solusi Thumbnails Pintar untuk Blog Wordpress dengan Paket Hosting Hemat Oleh: Adexon Seringkali kita memulai blogging dengan space hosting yang kecil. Masalah yang paling kerasa adalah kita gk bisa simpan file banyak - banyak disana termasuk image. Apabila kita ingin ada Thumbnails setiap artikel maka saran saya adalah tidak perlu gunakan fitur Featured image bawaan Wordpress. Seringkali kita memulai blogging dengan space hosting yang kecil. Masalah yang paling kerasa adalah kita gk bisa simpan file banyak - banyak disana termasuk image. Apabila kita ingin ada Thumbnails setiap artikel maka saran saya adalah tidak perlu gunakan fitur Featured image bawaan Wordpress.Fitur itu mewajibkan kita upload image ke dalam Hosting dan menyimpannya ke dalam beberapa versi dengan ukuran yang berbeda. Saya pribadi lebih menyukai IMGUR untuk hosting image - image untuk postingan & thumbnail Wordpress. Untuk pluginnya sendiri saya memilih Advance Custom Field. Tetapi, ada kalanya kita lupa atau meletakan link thumbnail ke dalam form ACF. Tidak masalah sebenarnya, toh gambarnya saja yang tidak muncul kan?. Betul, tetapi kalo kamu suka kerapihan dan mewajibkan semua postingan memiliki thumbnails maka theme blog kamu mau tidak mau harus dimodifikasi agar fitur thmbnail-nya jadi pinter. Pinter dalam artian mampu menampilkan thumbnails lain jika kamu lupa atu belum mengisi url thumbnail ke dalam form ACF. Nah, saya sendiri sering menggunakan 3 kondisi yakni 1. Jika form ACF terisi maka thumbnail akan muncul dari form ACF 2. Jika form ACF tidak terisi maka sepotong script akan mencari gambar pertama dalam postingan tersebut. Kenapa gambar pertama? Rata - rata gambar pertama dalam artikel adalah gambar terbaik agar pembaca lebih tertarik membaca artikel tersebut. 3. Jika postingan tidak memiliki gambar barulah tampilkan thumbnails khusus "Post Has No Image" - nahmean Terlihat rumit padahal sederhana sekali. Saya hanya scripkiddies yang suka menggabung - gabung snippet yang saya temukan di Internet. Nah, untuk membuat Thumbnails pintar seperti itu berikut saya uraikan cara - caranya... Step 1. Download & Instal Advance Custom Field. Download yang versi gratisan di Kita cuma butuh 1 custom field saja kok. Setelah di download lanjutkan dengan mengistalnya ke dalam blog Wordpress anda. Setelah itu buat sebuah Custom Field dengan nama apa saja lalu Add Field "Poster". Secara otomatis ACF akan menjadikan Judul Poster menjadi Field Name. Jangan lupa Save. Oh ya kalo anda belum terbiasa dengan ACF maka silahkan paste saja snippet ini ke dalam

3 function.php. Dengan catatan anda belum membuat custom field lewat Panel ACF di Dashboar, supaya form yang muncul tidak double. if( function_exists('acf_add_local_field_group') ): acf_add_local_field_group( 'key' => 'group_56cec8d4e1e6a', 'title' => 'Post Info', 'fields' => 'key' => 'field_56cec8dc3eb22', 'label' => 'Poster', 'name' => 'poster', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => 'width' => '', 'class' => '', 'id' => '', 'default_value' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'maxlength' => '', 'readonly' => 0, 'disabled' => 0, 'location' => 'param' => 'post_type', 'operator' => '==', 'value' => 'post', 'menu_order' => 0, 'position' => 'acf_after_title', 'style' => 'default', 'label_placement' => 'top', 'instruction_placement' => 'label', 'hide_on_screen' => '', 'active' => 1, 'description' => '', ));

4 endif; Step 2. Buat Script untuk Kondisi kedua. (Jika lupa meletakan URL image ke dalam for ACF) Pastikan form ACF telah muncul di Editor barulah paste kode berikut ke dalam function.php. function get_first_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = "url default"; return $first_img; Silahkan ganti URL Default dengan lokasi image default jika postingan tidak memiliki image thumbnail. Anda bisa bikin image sendiri dengan tulisan "Post ini tidak Punya Thumbnail". Lalu upload ke IMGUR dan paste URLnya di dalam tanda kutip tersebut. Simplenya seperti itu, silahkan kreasikan sendiri desainnya. Step 3. Tampilkan Thumbnails Sekarang pergi ke lokasi yang ingin anda pasang thumbnailnya, bisa di index.php atau single.php terserah lalu paste kode ini <?php if ( get_field( 'poster' ) ):?> <img src="<?php the_field('poster');?>);"> <?php else:?> <img src="<?php echo get_first_image()?>"> <?php endif;?> Nah saatnya testing. Bikin sebuah post dan jangan isi url image di form custom field tadi dan jangan juga masukan gambar ke dalam postingan. Jika yang tampil adalah URL thumbnail default maka fitur thumbnails pinter anda sudah bekerja dengan baik. Selesai. Bonus untuk Jago Coding Saya lebih suka thumbnails yang bisa diklik dan mampu beradaptasi dengan segala jenis layar alias Responsif. Saya sering menggunakan property background ketimbang <img src>. Berikut snippetnya :

5 <?php if ( get_field( 'poster' ) ):?> <div class="entry-poster" style="background-image:url(<?php the_field('poster');?>);"> <a href="<?php the_permalink();?>"><?php the_title();?></a> </div> <?php else:?> <div class="entry-poster" style="<?php echo get_first_image()?>"> <a href="<?php the_permalink();?>"><?php the_title();?></a> </div> <?php endif;?> Sedangkan CSSnya;.entry-poster{background-position:center;background-size:cover;width:100%;.entry-poster a:link,.entry-poster a:visited{display:block;text-indent:-9999px;padding-top: %; 2 baris CSS tersebut terlihat sederhana kan? Tapi powerfull kok. Ada pertanyaan bisa di kolom komentar. Saya yakin anda pasti pasti heran dengan padding-top: %; :D Mari Berdiskusi Akhir kata, Salam Hangat. Tentang Penulis Adexon suka Lensko, Tobu & Modestep