Auto Readmore Plus auto thumbnail di wordpress

Akhirnya ARiiiiE bisa dapatkan juga caranya Auto Readmore di wordpress yang seperti ARiiiiE mau, yang ARiiiiE maksud dengan Auto Readmore adalah sebuah script yang memotong postingan secara otomatis untukk 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 ARiiiiE 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 Sobat bisa dengan File Zila atau terserah Sobat deh, kemudian masuk saja di direktory theme wordpress Sobat, dan cari folder template yang sedang aktif di blog Sobat (maksudnya yang sekarang ini sedang Sobat  pakai). atau bisa juga lewat WP-admin klik menu editor atau terserah Sobat 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>
   <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 ARiiiiE lihat di halaman depan.

Update Auto read more plus Thumbnail

karena cara di atas ARiiiiE nilai kepanjangan, maka ARiiiiE memperbaharui langkah no 2 dan 3, sebetulnya memang style dari auto reamore ini bisa Sobat otak-atik sesuai template Sobat , untuk kode di bawah ini ARiiiiE membuang elemen div sehingga stylenya tidak perlu di letakan di css, jadi jika Sobat 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 ARiiiiE lihat di halaman depan..

jika Sobat ingin agar tidak kosong saat postingan tidak ada gambarnya, maka Sobat bisa menambahkan Background pada tag Img tepat setelah kode Style=” kemudian tambahkan Background di ikuti URL gambar

Sobat juga bisa merubah “baca selengkapnya” menjadi kata-kata yang Sobat mau, seperti Readmore, atau Lanjutkan dan lain-lain.

Tag : Tips-Trik

SHARE

Tweet