Cách lấy ảnh Thumbnail Youtube cho WordPress



Bạn đang xây dựng  một trang web mà cần sử dụng nhiều video, và cách tốt nhất để làm giảm tài nguyên của host và đạt hiệu quả cao chính là upload video lên youtube và chèn video youtube vào WordPress. Thế nhưng mỗ một bài viết đều cần có ảnh đại diện (ảnh Thumbnail) để những người truy cập vào website của bạn có thể thấy hình ảnh đầu tiên để có thể truy cập vào bài viết đó.

Mặc định trong WordPress không thể tự động lấy ảnh Thumbnail cho bài viết, Tuy nhiên WordPress lại được hỗ trợ nhiều sức mạnh bởi các Plugin, do đó để làm việc này tốt nhất là chúng ta sử dụng Plugin.

Thiết lập Video Thumbnails Plugin trong WordPress

Đầu tiên các bạn tải Plugin Video Thumbnail về tại đây sau đo cài đặt lên và cấu hình như  sau:

vào Setttings » Video Thumbnails

video-thumnails-options-general_imageTrong thẻ này là cấu hình mặc định xác định tất cả các hình thu nhỏ (Thumbnail) được tạo ra và đưa vào thư viện media trong wordpress.

Ở các lựa chọn tiếp theo, các bạn có thể thiết lập để quét tất cả các bài viết, các bài viết nào có video thì nó sẽ tự động lấy ra làm ảnh thumbnail. và kết quả sẽ là

generate-video-thumbnail_imageTrường hợp Theme WordPress của bạn không hỗ trợ Video Thumbnai

Trong trường hợp này bạn cần thêm vào dòng sau trong tập tin style.css

<?php the_post_thumbnail();

Các hình đại diện cho video nếu không có nút Play sẽ khiến cho các độc giả nhầm tưởng đó là bài viết văn bản chứ không phải video, và cách xử lý cho việc này như sau:

add-play-button_image

Bạn có thể tìm dòng mã băng cách vào Appearance > Editor > archive.php hoặc index.php hoặc content.php/category.php file. Tìm đến dòng có đoạn code sau:

<a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail();

Và sau đó thay thế bằngdòng sau:

<? php if (in_category (‘video’)):>

? <a href=”<?php the_permalink(); ?> “> <? php the_post_thumbnail (); ?> <span class = “playbutton”> </ span> </a>

<? php khác:?>

? <a href=”<?php the_permalink(); ?> “> <? php the_post_thumbnail (); ?> </a>

<? php endif; ?>

Dòng mã trên chính là để hiển thị nút Play trên hình ảnh video, và nếu cần thiết các bạn có thể tùy chỉnh CSS cho nút play này, đây là một ví dụ:

.playbutton {
    background: url('https://example.com/wp-content/uploads/playbutton.png') center center no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 74px;
    height: 74px;
    margin: -35px 0 0 -35px;
    z-index: 10;
    opacity:0.6;
}
.playbutton:hover { 
    opacity:1.0;
}

Nhớ thay thế URL bằng URL của bạn nhé.

Kết luận:

Như vậy thông qua các bước trên, các bạn  hoàn toàn có thể lấy ảnh Thumbnail cho video Youtube một cách đơn giản, Ngoài ra bạn cũng có thể sử dụng cho video vimeo bằng cách làm tương tự như trên. Chúc các bạn thành công!

6 Comments

  1. khanh 16/12/2015 Reply
    • Chung hic 16/12/2015 Reply
  2. Xoan Nguyen 01/01/2016 Reply
    • Chung hic 22/01/2016 Reply
  3. Tuấn 28/04/2016 Reply
    • Tuấn 28/04/2016 Reply

Bình luận

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *