Auto Readmore Plus auto thumbnail di wordpress

Akhirnya aku bisa dapatkan juga caranya Auto Readmore di wordpress yang seperti aku mau, yang saya maksud dengan Auto Readmore adalah sebuah script yang memotong postingan secara otomatis untuk di tampilkan di halaman depan atau index php. jadi jika biasanya kita memotong tulisan dengan menambahkan tag readmore pada saat posting kali ini gak perlu lagi, karena dengan cara yang akan saya kupas di bawah nanti, postingan akan secara otomatis terpotong dan gambar yang ada di dalama postingan secara otomatis juga tampil dengan ukuran lebih kecil di halaman depan.
Nantinya postingan akan tampak seperti gambar di bawah ini.

Dan berikut ini caranya, tapi sebelumnya mohon maaf ini hanya bisa di lakukan untuk wordpress yang menggunakan hosting sendiri. Lakukan langkah langkah berikut ini.
Langkah 1
buka ftp webhosting anda bisa dengan File Zila atau terserah anda deh, kemudian masuk saja di direktory theme wordpress anda, dan cari folder template yang sedang aktif di blog anda (maksudnya yang sekarang ini sedang anda pakai). atau bisa juga lewat WP-admin klik menu editor atau terserah anda saja bagai mana caranya, yang penting tujuannya edit functions.php dan tambahkan script di bawah ini

<?php // retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

Script ini berguna untuk memanggil url gambar yang terdapat di dalam postingan.
Langkah 2 Edit index.php, dan cari kode seperi ini

<?php the_content((__( '&raquo; Read more: ',
'default')) . the_title('', '', false)); ?>

atau bisa juga seperti ini

<?php the_excerpt((__( '&raquo;
Read more: ', 'default')) .
the_title('', '', false)); ?>

kemudian ganti dengan kode berikut ini

<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php getImage('1'); ?>" height="100" width="100">
</a>
</div> <?php the_excerpt((__( '&raquo; Read more: ', 'default')) . the_title('', '',
false)); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title();?>"><b>Baca Selengkapnya&gt;&gt;&gt;&gt;&gt;&gt;</b></a>
</div>

Langkah 3
Edit style css dan tambahkan kode di bawah ini

/* thumbnail */
.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:100px; height:100px;
margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

oke sekarang mudah mudahan udah jadi sperti punya saya lihat di halaman depan.
Update Auto read more plus Thumbnail
karena cara di atas saya nilai kepanjangan, maka saya memperbaharui langkah no 2 dan 3, sebetulnya memang style dari auto reamore ini bisa anda otak-atik sesuai template anda, untuk kode di bawah ini saya membuang elemen div sehingga stylenya tidak perlu di letakan di css, jadi jika anda ingin menggunakan yang di bawah ini untuk Langkah 1 sama saja, namun abaikan langkah 2 dan 3 dan letakan kode di bawah ini sebagai pengganti langkah 2 dan 3.

<img src="<?php getImage('1'); ?>"
height="100" width="120"
style="DISPLAY: inline; margin: 0px 7px 0px 0px;
FLOAT: left"/>
<?php the_excerpt((__( '&raquo; Read more: ', 'default'))
. the_title('', '',false)); ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php
the_title();?>"><b>Baca Selengkapnya&gt;&gt;&gt;&gt;&gt;&gt;</b></a>

oke sekarang mudah mudahan udah jadi sperti punya saya lihat di halaman depan..
jika anda ingin agar tidak kosong saat postingan tidak ada gambarnya, maka anda bisa menambahkan Background pada tag Img tepat setelah kode Style=” kemudian tambahkan Background di ikuti URL gambar
Anda juga bisa merubah “baca selengkapnya” menjadi kata-kata yang anda mau, seperti Readmore, atau Lanjutkan dan lain-lain.