Cara Membuat First Post Image Pada WordPress

Pada wordpress yang kita install sendiri di hosting, biasanya kita selalu mencari theme gratis yang bisa kita pakai. Theme ini biasanya sudah memiliki fungsi thumb, atau gambar thumbnail yang ada pada halaman depan web wordpress (Index / home). Namun beberapa theme standar ada yang tidak punya fungsi tersebut. Untuk itu anda bisa membuat fungsi tersebut di theme wordpress. Cara membuatnya:

• Anda bisa buka menu editor template pada wordpress anda, Appearance >> Editor. Klik pada file function.php.


• Kemudian masukkan kode PHP di bawah ini. Letakkan paling bawah kode.

<?php 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;
} ?>

• Kalau sudah simpan file tersebut.


• Kemudian untuk memunculkan gambarnya gunakan kode ini:

<img src=”<?php echo catch_that_image() ?>”>

Kode di atas anda masukkan di tempat mana yang ingin anda buat thumb. Biasanya di bagian index atau home. Jadi yang anda edit adalah bagian index.php atau home.php. Anda bisa sesuaikan tampilannya berupa ukuran lebar dan tinggi gambar, posisi, dan lain sebagainya dengan CSS.

PS: Tutoril ini buat yang sudah mengerti seluk beluk template wordpress, dan sedikit PHP. Bagi anda yang belum paham silahkan googling untuk informasi tambahan

Artikel ini di cari dengan kata kunci:

• cara buat first
• membuat posted by di php
• membuat function pada wordpress
• indeks photo pada wordpress
• fungsi editor pada appearance di wordpress
• cara menaruh photo pada web wordpress
• cara membuat slider pada wordpress premium
• cara membuat postimage
• cara membuat fist
• membuat posted by di wordpress

The post Cara Membuat First Post Image Pada WordPress appeared first on PesutWeb.

Source: http://pesutweb.com/tutorial-wordpress/cara-membuat-first-post-image-pada-wordpress/

Read More

Membuat Popular Post Dengan Thumbnail Di wordpress

Trik ini adalah untuk wordpress yang menggunakan hosting sendiri. Trik ini melibatkan PHP dan CSS. Jadi tips ini buat yang sudah paham sedikit mengenai PHP dan CSS HTML, dan juga seluk beluk template wordpress. Saya sendiri masih payah Soal PHP, baru paham Kulitnya. Hehehe…

Membuat popular Post dengan thumbnail adalah bertujuan untuk mempercantik tampilan blog anda. Biasanya wordpress secara default sudah memiliki fungsi ini, namun tanpa thumbnail. Oleh sebab itu tips ini bisa di gunakan untuk membuat popular post dengan di sertai thumbnail image. Berikut caranya:

• Pertama masukkan kode ini di function.php paling bawah

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;
}

Untuk menampilkan gambarnya, bisa gunakan ini nanti <img src=”<?php echo catch_that_image() ?>”>

• Kemudian kita akan menampilkan popular postnya. Silakan masukkan kode ini di tempat mana yang ingin anda tampilkan popular postnya. Kalau sudah di save.

<?php // Popular Posts
 $opn_popular_posts = new WP_Query();
 $opn_popular_posts->query('showposts=5&orderby=comment_count'); ?>
 <?php  // Start the loop
 while ($opn_popular_posts->have_posts()) : $opn_popular_posts->the_post(); ?>

 <a href="<?php the_permalink();?>"><img src="<?php echo catch_that_image() ?>" width="50" height="50" /></a>
 <h3><a href="<?php the_permalink();?>"><?php the_title();?></a></h3>
 <span><?php comments_popup_link(__('0 Comments', 'open'), __('1 Comment', 'open'), __('% Comments', 'open')); ?></span>

• Kemudian kita masukkan CSS kodenya di style.css. Ini kodenya, kemudian save.

/* Popular Posts Sidebar */
#sb_popular_posts_box {overflow:hidden;width:300px; padding-bottom:0px;}
#sb_popular_posts_box .sb_popular_thumbs a:hover {/* background-color: #000;  color:#dcd9d9;*/}
.custom #sb_popular_posts_box ul li {list-style-image: none; list-style:none; height:35px;padding-bottom:14px;}
.sb_popular_thumbs {float:left; border:1px; font-size:12px; padding-bottom:0px; padding-top:0px;}
.sb_popular_thumbs a { text-decoration:none; }
.sb_popular_thumbs a:hover { color: #000;text-decoration:none;}
.sb_popular_thumbs li { clear:both; height:45px; width:280px; display:block; float:left; list-style:none; list-style-image: none; padding-top:5px;}
.sb_gp_pen {}
.sb_popular_avatar {float:left; margin-right:10px;margin-left:10px;}
.sb_popular_avatar img {border:2px solid #CCC;}
.sb_popular_avatar img:hover {border:2px solid #336699;}
.sb_popular_title {margin-right:0px;}
.sb_popular_comments {}
.sb_popular_comments_img { margin-top:.50px;}
.sb_gp_comment_img {margin-bottom:-2px;}

• Dan selesai, anda bisa melihat hasilnya sendiri di website anda.

Artikel ini di cari dengan kata kunci:

• php membuat top popular
• membuat popular post di wordpress
• bikin popular post wordpress
• menampilkan tumbnail wordpress
• menampilkan thumnail page pada wordpress
• membuat list top artikel dengan php
• membuat link self ke halaman sendiri
• cara menampilkan popular post wordpress
• cara membuat recent new php
• cara membuat latest post di wordpress

The post Membuat Popular Post Dengan Thumbnail Di wordpress appeared first on PesutWeb.

Source: http://pesutweb.com/tutorial-wordpress/membuat-popular-post-dengan-thumbnail-di-wordpress/

Read More