• fans
  • 1036 reader
  • followers

Trong video lần trước tôi đã hướng dẫn các bạn cách hiển thị Thumbnail sử dụng Custom Field. Cách này theo tôi là hay nhất bởi vì bạn có toàn quyền quyết định thumbnail của bạn sẽ được hiện ra như thế nào và bạn có thể design thumbnail sao cho nó phù hợp với bài post. Tuy nhiên có những trường hợp bạn không muốn mất thời gian mà chỉ muốn WordPress tự động lầy tấm hình đầu tiên trong bài post và hiển thị nó làm thumbnail.

Đặc biệt nếu bạn làm trang web cho khách hàng họ không biết sử dụng Photoshop và cũng khó hình dung cách sử dụng Custom Field. Cho nên chúng ta có thể tạo thumbnail một cách tự động và hiển thị nó. Dưới đây là 2 cách bạn có thể sử dụng để hiển thị thumbnail mà không cần sử dụng Custom Field.

Sử dụng chức năng Image Attachment

Trong bài hướng dẫn cách tạo Content Slider tôi đã giới thiệu với bạn chức năng Image Attachment trong WordPress, trong bài này chúng ta cũng sẽ sử dụng lại chức năng này để hiển lấy hình của bài post. Cách này dành cho những khách hàng không biết chút gì về HTML, họ chỉ việc upload hình là xong.

Ban đầu bạn hãy mở trang index.php và trong WordPress Loop

<?php if(have_posts) : while(have_posts) : the_post() ?>

vào đoạn code sau

<?php 
		//lấy hình ở trong post
		$args = array(
			'post_type'			=> 'attachment',
			'post_mine_type'	        => 'image',
			'numberposts'		=> -1,
			'order'			=> 'ASC',
			'post_status'		=> null,
			'post_parent'		=> $post->ID
		);

		$attachments = get_posts($args);
		if ($attachments) {
		foreach ($attachments as $attachment) {
			$thumbnail = wp_get_attachment_thumb_url($attachment->ID);
			break;
			}
		}
?>

Tiếp theo bạn chỉ việc echo biến $thumbnail ở trên ra vào thẻ <img> như sau:

<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumbnail; ?>" alt="post image" />
</a>

Cuối cùng khi muốn thêm hình vào bài viết bạn chọn add an image và chèn hình vào bài viết là xong.

wordpress thumbnail
Sử dung hàm preg_match

Trong cách này chúng ta sẽ không cần sử dụng chức năng upload hình như ở trên, nhưng khách hàng của bạn phải tự động chèn thẻ <img> vào bài post.

Ban đầu bạn hãy mở file functions.php trong theme của bạn ra (nếu chưa có thì tạo file functions.php) sau đó đoạn code ở dưới vào.

 function thumb_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)){ 
//Bạn có thể thêm hình mặc định nếu bài post ko có hình
    $first_img = "/images/myImage.jpg";
  }
  return $first_img;
}

Lưu lại và mở tiếp file index.php và gọi hàm vừa tạo ra

<a href="<?php the_permalink();?>">
<img src="<?php echo thumb_image(); ?>" alt="thumbnail" />
</a>

Đến đây chúng ta đã có hình thumbnail rồi nhưng nó có kích thước quá lớn. Bạn có hai cách để sửa nó. Cách thứ nhất là sử dụng CSS và khai báo giá trị width của thẻ <img> với giá trị bạn muốn. Cách thứ hai là bạn sử dụng một đoạn mã có sẵn là timthumb.php bạn có thể download ở đây. Sau khi download về bạn cho nó vào thư mục theme của bạn. Trong ví dụ này tôi để nó ngang hàng với trang index.php. Và việc cuối cùng bạn cần làm là gõ đoạn code sau thay vì đoạn code trên

Nếu đoạn này có gì khó hiểu, bạn có thể xem video về phần Sidebar và Random Posts, tôi có hướng dẫn chi tiết về cách sử dụng timthumb.php

<a href="<?php the_permalink();?>">
<img src="<?php bloginfo('stylesheet_directory') ?>/timthumb.php?src=<?php echo thumb_image(); ?>&amp;h=150&amp;w=150&amp;zc=1" alt="thumbnail" />
</a>

Tất nhiên với giá trị h=150&w=150 thay bằng giá trị bạn muốn. Vậy là xong! nếu có câu hỏi gì hãy post dưới phần comment

Kết luận

Cả hai cách trên đều có thể sử dụng tốt trong mọi trường hợp, nhưng mỗi cách đều có điểm mạnh điểm yếu khác nhau, tùy từng trường hợp bạn nên chọn cách phù hợp cho mình. Tuy nhiên để có toàn quyền quyết định bạn nên sử dụng Custom Field là cách hay nhất bây giờ.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Vuong

    Cho mình hỏi,mình làm theo cách 1 nhưng kết quả trả về là không lấy dc các hình trong gallery nhưng nếu sử dụng trong trang custom page thì lấy dc
    ‘ASC’,
    “post_type” => ‘attachment’,
    “post_parent” => $post->ID,
    “post_mine_type”=> ‘image’,
    “post_status” => null,
    “numberposts” => -1
    );
    $attachments= get_posts($args);
    print_r($attachments);
    ?>

    Mình muốn xem kết quả.Ai giúp với.

  • Huân Nguyễn

    Cho mik hỏi là
    Mik có sử dụng hàm preg_match Cho wordpress
    nhưng mà gặp phải vấn đề khi show thumb ra index cho theme Genesis Framework
    nó không giống như các theme khác
    admin có thể viết 1 bài hướng dẫn thêm thumb cho theme Genesis Framework thì tốt quá mik dùng ảnh ở imageshack nên ko thể hiện thị thumb mặc định của theme.

  • http://tranhchuthap.com Quang

    Nhờ anh và các bạn giúp.

    Đây là trang web mình đang dùng http://tranhchuthap.com
    Phần thumbnail cho các hình ảnh sản phẩm của nó đã có từ ban đầu, nhưng có một điểm rất tệ là khi up ảnh sản phẩm lên web, thì ảnh thumbnail tạo ra không biết tự điều chỉnh kích thước để nằm gọn bên trong khung hình thumbnail đó, vì thế ảnh thumbnail cứ bị chém vào hình gốc, không thể hiện được hết toàn bộ hình, nhìn rất sấu.

    Rất mong được anh và các bạn xem và giúp đỡ xử lý giúp.

    Mong phúc đáp.
    Thanks

    • Quốc Việt Lê

      kích thước ảnh không như ý thi ban phải style lại css phần show ảnh ra chứ có liên qua gì đến code đâu

  • vu duc hai

    anh ơi cho em hỏi ý nghĩa của $matches [1] [0]; là gì đc ko ạ. em dùng function này nó chỉ lấy ảnh ở cuối cùng của bài viết đúng ko ạ?

  • do hieu

    Giúp tôi lấy ảnh trong bài viết để làm Slide Show cho bài viết đó với???

    • tanlevis

      Bài này anh DW giới thiệu rồi đó bạn, nếu bạn không thích cách này thì xài cách custom field. 1 key và nhìu link image, xài function get_post_meta($post->ID, ‘ten_key’, false) ==> return 1 array rồi forearch từng item thôi.

  • chung

    help me! khi toi doc nhun bai tu thiet ke web nhung khong hieu nhung dong nay co ý nghĩa là gì co thể giup tôi khong>

  • balabala

    đãtieeeps thu bài, đã có kết quả… thanks 4 cái.

  • http://skyvnn.net Goncorpius

    Cho em hỏi vấn đề này chút ,em dùng theo bước 1 của anh là Attachment để sử dụng thumb
    Nhưng vấn đề gặp phải là khi em có 2 bài viết bài viết 1 ở dưới ,bài viết 2 ở trên ,và khi em muốn bài viết 1 không có thumb ,và bài viết 2 có thumb ,nhưng khi em add img cho bài viết 2 thì bài viết 1 cũng xuất hiện cái thumb đó
    Em phải làm sao để chỉ add img trong bài nào thì chỉ xuất hiện ở bài đó ?

    • Quốc Việt Lê

      uh mình cũng đang gặp vấn đề đó, bác nào có thể giúp giùm không vậy

  • Quoc hung

    àh, mình có xài evermore plugin để tự động set hiển thị số kí tự hiển thị/1 bài post. sự cố của mình có phải do nó không nhỉ?

  • Quoc hung

    Mình đã làm theo cách 2. đã thấy xuất hiện thumbail nhưng mình nó nằm ở đó, bài viết nằm dưới ko bao quanh. Bạn hướng dẫn giúp được không? Cảm ơn

  • kjsslv

    Anh ơi có cách nào thêm custom field ở ngay phần bài viết phía trên không ah . Tức là thêm một đoạn html vào và nó tự nhận custom field không ah ?

  • http://data.vcn.vn Nguyen ngoc phuc

    Anh ơi cho em hỏi vấn đề giải quyết này không. Em có ý tưởng cho blog của em về cách hiển thị thumbnail cho người sử dùng bằng cách kết hợp cả 2 cái. Làm thế nào có cách kiểm tra khi không sử dụng thumbnail của customfield thì nó lấy giá trị ảnh đầu tiên của bài viết và ngược lại nếu không có nó lấy giá trị thumbnail của customfield. Còn không có thì lấy hình mặc định đưa lên. Vấn đề ở đây là em không biết làm sao kiểm tra giá trị tồn tại của customfield có tên key là thumbnail

    • http://ictexpress.com Nguyễn Ngọc Long

      Bạn có thể tham khảo ở trang http://ictexrpress.com
      Bạn có thể dùng lệnh if else và hàm get_custom_values() để duyệt và lấy. Nếu lấy được nó trả về giá trị của key còn không thì rỗng.

  • Thịnh Hưng

    Anh DW ơi! Có cách nào thêm biến để lưu vào database và nhập giá trị biến đó ở phần post không?. Ví dụ: Em muốn thêm mục tâm trạng trước khi post bài (đây chỉ là ví dụ thôi nhé, bình thường không ai thêm mục này).
    Em đang làm 1 website bằng wordpress cho anh bạn em, anh ý không phải là dân lập trình nên muốn tạo thêm 1 mục mới phải sử dụng những cái có sẵn, chắc hẳn bảo anh ý thêm cặp thẻ làm tiêu đề cho mục mới thì…

    • http://ictexpress.com Nguyễn Ngọc Long

      Mình chưa hiểu. Bạn cho ví dụ cụ thể
      Anh DW ơi! Có cách nào thêm biến để lưu vào database và nhập giá trị biến đó ở phần post không?. Ví dụ: Em muốn thêm mục tâm trạng trước khi post bài (đây chỉ là ví dụ thôi nhé, bình thường không ai thêm mục này).
      Bạn có thể liên hệ với mình qua mail hethongthongtin@gmail.com hoặc qua forum.livesupport.vn

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives