Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan

Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan

Bola Hero Gawai

Mengganti Thumbnail Anew Theme Wordpress Dengan Gambar Pertama Postingan

Mengganti Thumbnail Anew Theme Wordpress
Melanjutkan dari postingan saya yang lalu tentang mengamankan bandwidth hosting dari image postingan pada blog Wordpress, kini saya share cara mengganti thumbnail pada Anew theme Wordpress dengan gambar pertama pada postingan yang diupload di pihak ketiga seperti Picassa dan lainnya. Dengan begitu, meskipun kita tidak mengupload gambar di postingan wordpress tapi thumbnail postingan di homepage akan tetap muncul dengan post-format image. Sebagai contoh adalah blog wordpress saya, silahkan klik kanan dan open image in new window kemudian lihat URL-nya. Itu adalah URL dari Google+.

Namun tentunya dengan ini akan menambah kerjaan lagi ketika kita membuat postingan, selain mengupload terlebih dahulu gambar kita di pihak ketiga, kita juga harus menambahkan lagi kode html image ke dalam postingan secara manual. Namun menurut saya, demi menghemat bandwidth hosting maka hal ini harus kita lakukan.

Seperti yang saya katakan pada postingan sebelumnya, karena ini menggunakan image yang dihosting di pihak ketiga, maka agar gambar tidak menjadi beban loading blog maka kita gunakan juga trik defer image (menunda penayangan gambar).

Langkah Pertama

Silahkan buka functions.php melalui Dashboard > Appearance > Editor. Kemudian simpan php di bawah ini.


function catch_that_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 = "/images/default.jpg";
  }
  return $first_img;
}

Silahkan save perubahannya. Kode di atas adalah untuk menampilkan gambar pertama di postingan. 

Langkah Kedua

Kemudian buka post-formats.php dan cari kode berikut


<?php if ( has_post_format( 'image' ) ): // Image ?>

<div class="post-format">
<div class="image-container">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumb-large'); 
$caption = get_post(get_post_thumbnail_id())->post_excerpt;
if ( isset($caption) && $caption ) echo '<div class="image-caption">'.$caption.'</div>';
} ?>
</div>
</div>

<?php endif; ?>

Kemudian silahkan ganti kode di atas dengan kode di bawah ini.


<?php if ( has_post_format( 'image' ) ): // Image ?>

<div class="post-format">
<div class="image-container">
<img alt="<?php the_title(); ?>" src="data:image/gif;base64,R0lGODlhAwABAIAAAP///wAAACH5BAEAAAAALAAAAAADAAEAAAIChAsAOw==" data-src="<?php echo catch_that_image() ?>" title="<?php the_title(); ?>"/>
</div>
</div>

<?php endif; ?>

Kemudian jangan lupa simpan perubahannya. 

Langkah Ketiga

Sekarang silahkan buka footer.php dan simpan kode javascript di bawah ini di atas kode </body>


<script type='text/javascript'>
function init(){var e=document.getElementsByTagName("img");for(var t=0;t<e.length;t++){if(e[t].getAttribute("data-src")){e[t].setAttribute("src",e[t].getAttribute("data-src"))}}}window.onload=init;
</script>

Nah perubahan pada kode php untuk menampilkan gambar pertama postingan untuk dijadikan thumbnail di homepage pada tema Anew di wordpress sudah beres.

Langkah Keempat

Sekarang tinggal cara membuat postingan dengan menggunakan image yang dihosting di pihak ketiga.

Seperti biasa, silahkan tulis postingan Anda pada tampilan visual. Kemudian pada format postingan di sebelah kanan, atur pada poin Image. Setelah selesai membuat postingan, silahkan alihkan editor postingan pada tampilan Text. Kemudian silahkan simpan kode di bawah ini di awal postingan.


<img class="aligncenter thumbnail-postingan" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="URL IMAGE DARI PICASSA DI SINI" alt="" title="" width="" height="" />

Silahkan sesuaikan URL image-nya, begitu pun untuk tag alt, title, width, dan height. Nah agar gambar tidak tampil di dalam postingan juga (karena gambar akan tampil di atas postingan), maka kita harus menyembunyikannya. Perhatikan pada kode class="aligncenter thumbnail-postingan" nah kode thumbnail-postingan ini untuk mengaturnya.

Sekarang publikasikan dulu postingannya dalam keadaan tampilan editor postingan Text. Setelah itu silahkan masuk ke Appearance > Editor dan silahkan buka style.css kemudian simpan css di bawah ini untuk menyembunyikan gambar pertama di postingan.


.thumbnail-postingan{display:none!important;visibility:hidden;width:0;height:0}

Selesai sekarang thumbnail postingan akan muncul dari image pertama postingan dan image pertama postingan tidak akan tampil di postingan.

Namun permasalahan lain muncul yaitu ketika postingan di share ke sosial media maka postingan tidak akan memiliki image alias no-image karena tidak memiliki featured image. Untuk saat ini saya belum mendapatkan solusinya, jika sudah ada akan saya share kembali.

Fixed (21 Feb. 2015): Silahkan ikuti trik untuk membuat Open Graph dan Twitter Card secara manual agar bisa dishare ke sosial media DI SINI.

Selesai....untuk selanjutnya setiap kali membuat postingan, Anda hanya perlu melakukan langkah keempat saja. Selamat mencoba.

Sumber:
Get First Post Image: http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×