Trang chủ WordpressHướng dẫn Wordpress Cách lấy ảnh host bên ngoài làm ảnh thumbnail

Cách lấy ảnh host bên ngoài làm ảnh thumbnail

bởi Thạch Phạm
49 bình luận 3423 views
Khuyến mãi hosting

Có một điều rất khó chịu khi dùng WordPress là nếu bạn upload một tấm ảnh lên host thì nó sẽ tự động nhân ra thêm 3 tấm khác nếu  bạn không vào Settings -> Media đưa các thông số về thành 0.

Còn những ai không muốn host mình nặng thêm thì có thể sử dụng các dịch vụ lưu trữ ảnh bên ngoài như Flickr, Photobucket để lưu và sau đó chèn ảnh vào bài. Nhưng nếu bạn dùng các theme có sử dụng thumbnail giống như giao diện hiện tại của Thạch Phạm chẳng hạn thì làm thế nào bây giờ? Vì tính năng Featured Image chỉ cho phép bạn upload ảnh lên.

featured-thumbail

Vậy thì trong bài này, mình sẽ cho bạn biết 2 giải pháp để có thể tạo ảnh thumbnail sử dụng link ảnh bên ngoài.

Cách 1: Sử dụng code

Ở đây chúng ta sẽ tạo một function tự động bóc tách link ảnh đầu tiên của bài viết, dù ảnh đó là trên host của bạn hay ở host ngoài. Sau đó, chúng ta chỉ cần thay thế hàm the_post_thumbnail() – là hàm mặc định để gọi featured image thành hàm mà chúng ta vừa tạo.

Đầu tiên bạn chèn code sau vào file functions.php

function get_first_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)) {
    $first_img = "/path/to/default.png";
  }
  return $first_img;
}

Sau đó bạn mở file index.php hoặc content.php (nếu có) và tìm hàm để gọi ảnh featured image cũ ra, đa phần là dùng the_post_thumbnail(). Sau đó bạn thay thế nó thành

<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

Sửa tương tự ở các file khác như archive.php, category.php, tag.php nếu cần.

Cách 2: Sử dụng plugin

Nếu bạn là người không mấy thân thiện với code thì có thể sử dụng plugin để làm việc này, nghĩa là bạn chỉ cần kích hoạt plugin và làm theo hướng dẫn của plugin là có thể sử dụng Featured Image bằng ảnh ở ngoài.

Có 2 plugin rất tốt mà mình khuyến khích bạn sử dụng là:

Trong khi các bạn làm cách 1 mà không biết sửa ở đâu, thì hãy copy code file index.php của theme bạn đang dùng lên Pastebin và bỏ lên comment cho mình xem nhé để mình có thể giúp.

49 bình luận

Có thể bạn quan tâm

49 bình luận

Tút lấy ảnh bên ngoài làm ảnh thumbnail Wordpress 18/07/2018 - 7:13 Chiều

[…] Theo: Thạch Phạm […]

Reply
huy thong 15/06/2017 - 7:18 Chiều

thầy ơi nó không xuát hình ra được …trong thẻ img ,src nó báo “/path/to/default.png”; chứ không lấy được url thì phải

Reply
4idea 25/05/2017 - 5:44 Sáng

a xem giúp em nha, code file index của em https://pastebin.com/QXANzPzv

Reply
V An. 21/05/2017 - 10:50 Sáng Reply
Minh Clear 28/04/2017 - 3:04 Chiều

Help me anh ơi 😀

max_num_pages &gt; 1) tie_pagenavi();
?&gt;

Reply
Thạch Phạm 29/04/2017 - 4:43 Sáng

BẠn paste code vô pastebin.com rồi gửi link nha.

Reply
Minh Clear 29/04/2017 - 10:31 Sáng

Pastebin.com vào ko được anh ơi,
Anh check giúp e link sau với nhé
http://notepad.vn/share/izdxarl83

Reply
Minh Clear 29/04/2017 - 10:43 Sáng

Còn đây là file function.php trong thư mục sahifa: http://notepad.vn/qhirxok52
Đây là file theme-function.php: http://notepad.vn/mdgaepb06
Đây là file loop.php http://notepad.vn/aergjod20
Cảm ơn anh 😀

Reply
Vu Huong 27/04/2017 - 2:27 Chiều

mình cài External URL To Post Thumbnail nhưng vẫn không hiện?

Reply
Hiếu Lê 11/10/2016 - 7:21 Chiều

M cũng đang dùng themes Newpaper 7 và cũng đã thử làm giống bác Tuấn Phạm nhưng cũng bị lỗi giao diện trang chủ. và hok hiện ảnh thumbnail. M muốn bạn Thạch phạm giúp cho cách giải quyết với ạ. M cảm ơn

Reply
Tuận phạm 28/11/2016 - 3:45 Sáng

ko đc đâu, 2 plugin trên củng lừa tộc chứ ko xài đc :)) nói chung Wp bắt buộc phải để hình ảnh trên host chứa code chứ ko cho lấy ảnh ngoài.

Reply
Tuấn phạm 02/10/2016 - 6:18 Chiều

Mình đã Inbox riêng info host + web nhờ bạn xem dùm. mình làm theo cách bạn chỉ như dưới nhưng ko được.

Reply
Tuấn phạm 07/10/2016 - 4:29 Sáng

hic, ko đc à thạch. vậy thôi cám ơn nhé

Reply
tuấn phạm 29/09/2016 - 8:16 Sáng

http://pastebin.com/sLMf84fd
nhờ bạn xem hộ mình với 😀
theme news7paper

link themes: https://www.fshare.vn/file/5TE8QP469IIP

cám ơn b.

Reply
tuấn phạm 29/09/2016 - 6:43 Chiều

giúp mình dùm với bạn, m thay lung tung quyền mà ko có cái nào đúng 😀

Reply
Thạch Phạm 30/09/2016 - 8:57 Sáng

Bạn mở toàn bộ các tập tin td-modules tại includes/modules rồi tìm đoạn sau:

<?php echo $this->get_image('td_324x160');?>

Thay thành

<img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />

Nhớ chèn đoạn code trong bài của mình vô functions.php nhé.

Reply
tuấn phạm 01/10/2016 - 8:07 Chiều

cám ơn bạn nhiều!

Reply
Tuấn phạm 03/10/2016 - 10:13 Chiều

mình đã thử và lỗi hình thumbnail ở trang chủ luôn, nứt giao diên.
m copy đoạn mã trên bài vào funtions của theme + thêm đoạn dưới cmt vào td_module_1.php – td_module_2.php rồi nhưng nứt giao diện và ko hiện ảnh.
Nhờ b xem lại giúp m với. cám ơn b.

Reply
duy an 12/09/2016 - 7:45 Chiều

anh oi cho em hoi em sử dụng Featured Image ảnh thu nhỏ rất ok nhưng mà nó bị cắt ảnh. anh cho em xin hướng giải quyết với em cám ơn

Reply
Thức 14/08/2016 - 9:29 Chiều

Mình đã làm theo hướng dẫn chèn code vào theme Gomedia, nhưng vẫn không được? Rất mong các bạn giúp đỡ kinhnghiemhay.com.vn

Reply
Huy 06/08/2016 - 8:49 Sáng Reply
Tran Dung 03/08/2016 - 8:53 Sáng

bác xem file này giúp em thay chỗ nào file mega-menus.php
http://pastebin.com/YDPZMuFN

Reply
Kim Anh 31/07/2016 - 12:54 Sáng

Bạn Thạch ơi, theme của mình mặc định trong category không có thumbnail bài viết.
Mình muốn thêm vào category thì phải làm sao ạ?
Đây là file category của mình http://pastebin.com/7ejdKGa7
Cảm ơn bạn nhiều.

Reply
Thạch Phạm 31/07/2016 - 9:07 Sáng

Bạn cho mình xem tập tin loop-category.php nhé. Tuy nhiên thêm thumbnail vào có thể nó chưa hiển thị tốt cho lắm và có thể là sẽ cần sửa lại CSS.

Reply
Kim Anh 02/08/2016 - 10:09 Sáng

Bạn ơi đây là tập tin loop.php
http://pastebin.com/uf73XLQ7

Reply
Thạch Phạm 03/08/2016 - 4:41 Sáng

Ok bạn thay chỗ này nhé:

<?php if ( of_get_option('pkb_post_img') == '1') {  
                if ( (has_post_thumbnail() && function_exists('has_post_thumbnail'))) { ?>
                <div class="post_image"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'post-image', array('class' => 'shadow') ); ?> </a></div>
            <?php } } ?>
Reply
Kim Anh 03/08/2016 - 11:44 Sáng

Mình thay vào mà không được bạn a.
Có thể theme của mình không hỗ trợ thumbnail ở chuyên mục rồi.
Bạn viết một bài hướng dẫn thêm thumbnail vào chuyên mục khi theme không hỗ trơ đi. Mình nghĩ không chỉ mình mà còn nhiều bạn nữa cũng chưa rõ về cái này. Chẳng may đã trót thích một cáo theme nào đó mà muốn sủa đi một chút mà không sủa được cũng thấy đu đầu lắm bạn a.
Ví dụ:
Khi chưa hỗ trợ: http://www.population-2.com/dev/peekaboo-wp/?cat=22
Khi chỉnh sủa để thêm thumbnail vào: http://www.tranthe.net/media/2016/04/tranthe-network-sticky-bar.png
Cảm ơn bạn nhiều.
Chúc bạn sức khỏe.

Kim Anh 31/07/2016 - 1:42 Chiều

Trước tiên cảm ơn bạn nhiều, bạn phải hồi lại rất nhanh.
Theme mình đang sử dụng khộng có loop-category.php
Demo: http://www.population-2.com/dev/peekaboo-wp/
Trang category cần hiện thumbnail: http://www.population-2.com/dev/peekaboo-wp/?cat=22
Còn đây là cấu trúc theme ạ:
http://i.imgur.com/3iIvaOt.png
http://i.imgur.com/USnkoH3.png
Cảm ơn bạn nhiều.

Reply
Tran Dung 30/07/2016 - 4:53 Chiều

bác Thạch xem giùm em với, em chèn theme sahifa không được. demo

Reply
Tran Dung 30/07/2016 - 5:06 Chiều

Đây là file block-pictures.php
Đây là file functions

Reply
Thạch Phạm 31/07/2016 - 9:12 Sáng

Bạn tìm đoạn này ở file đó:

                        <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) : ?>        
                            <div class="post-thumbnail">
                                <a href="<?php the_permalink(); ?>" class="ttip">
                                    <?php the_post_thumbnail( 'tie-large' ); ?>
                                    <span class="fa overlay-icon"></span>
                                </a>
                            </div><!-- post-thumbnail /-->
                        <?php endif; ?>

Thay thành:

<div class="post-thumbnail">
   <img src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" />
</div>
Reply
Tran Dung 31/07/2016 - 11:11 Sáng

bác xem file này giúp em thay chỗ nào file mega-menus.php

Reply
Tran Dung 31/07/2016 - 11:12 Sáng

Tran Dung 31/07/2016 - 11:12 Sáng
nhật 29/07/2016 - 8:05 Chiều

bác Thạch xem giùm mình cái, ko hiểu sao mình dùng code trên nó lại lấy hình cuối thay vì lấy hình đâu tiên của bài . web mình dkntiengviet.com . thank bác

Reply
Thạch Phạm 29/07/2016 - 9:30 Chiều

Hàm get_first_image() bạn hãy nên chắc là chèn đúng như vầy nha:

function get_first_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)) {
    $first_img = "/path/to/default.png";
  }
  return $first_img;
}
Reply
Nhật 29/07/2016 - 10:23 Chiều

Đã chèn đúng code như trên bác ạ. Bác check giùm mình nhé thank bác

Reply
Thạch Phạm 29/07/2016 - 11:03 Chiều

Bạn cho mình xem một bài viết trên website bạn nhé.

Reply
Nhật 29/07/2016 - 11:13 Chiều

Bác vào trang chủ http://dkntiengviet.com rồi vào một bài bất kỳ sẽ thấy hình thumbnai là hình cuối của bài viết đó ạ.

Thạch Phạm 31/07/2016 - 9:42 Sáng

Bác thay return $first_img; thành:

$debug = print_r($first_img);
return $debug;

Sau đó ra ngoài website copy nội dung trả về ở một bài viết để mình xem nhé.

Trọng 18/07/2016 - 4:05 Chiều

http://pastebin.com/w6PinGqL a ơi giúp e với

Reply
Thạch Phạm 24/07/2016 - 6:26 Sáng

Sửa chỗ này nè bạn:

                                        <?php the_post_thumbnail($slider_full,array('title' => '')); ?>

Reply
conan 09/07/2016 - 6:44 Chiều

Anh xem giúp em file index này với ạ

Reply
Tuan Tran Anh 04/07/2016 - 7:37 Sáng

vì trang pastebin die nên mình để vào file txt bạn xem giúp mình với
http://gameapkvn.tk/au.txt

Reply
Tuan Tran Anh 04/07/2016 - 7:29 Sáng

bạn xem giúp mình với bạn

 



       

        

	    <a href="">MỚI CẬP NHẬT</a>				

        

        


        

        

	 <a href="http://gameapkvn.tk/game-online">Game Online</a>				
	 5, 'cat' =&gt; 5 )); ?&gt;

        

      

        
        
    



<a href="">Chuyên Mục</a>	

&lt;?php $categories = get_categories();
        foreach ($categories as $category)
        echo '
» <a>term_id) . '" title="' . sprintf(__("%s"), $category-&gt;name) . '" ' . '&gt;' . $category-&gt;name.'</a> (' . $category-&gt;count . ')';
?&gt;




    

	

Reply
Duc 01/07/2016 - 2:46 Chiều

Giúp mình với file index này với.
http://pastebin.com/AjMPRtud

Reply
Thạch Phạm 02/07/2016 - 8:20 Sáng

Bạn thay thế chỗ này nhé:

<?php if ( has_post_thumbnail() ) { ?>
                            <div class="advisor-thumbnail-wrap">
                                <div class='advisor-post-image'>
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                <?php echo apply_filters( 'advisor_thumbnail_caption', '' ); ?>
                                </div>
                            </div><!-- .advisor-thumbnail-wrap -->
                        <?php } ?>
Reply
Tuan Tran Anh 24/06/2016 - 9:47 Chiều

trong index có dòng này thui bạn giúp mình với

mình dùng theme better mag

Reply
Thạch Phạm 29/06/2016 - 9:59 Sáng

Bạn paste code vào pastebin.com nha.

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.