Cách thêm hình thu nhỏ cho video YouTube trong WordPress

1. Hình thu nhỏ video trong wordpress là gì?

WordPress đi kèm với chức năng tích hợp để thêm hình ảnh nổi bật hoặc hình thu nhỏ của bài đăng và hầu hết các chủ đề WordPress đều hỗ trợ tính năng này. Tuy nhiên, nếu bạn muốn làm nổi bật nội dung video của mình từ YouTube , thì bạn cần giới thiệu nội dung đó bằng hình thu nhỏ của video.

2. Thiết lập Plugin Video Thumbnails trong WordPress?

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Video Thumbnails . Sau khi kích hoạt plugin, bạn cần đi tới Setttings » Video Thumbnails để định cấu hình cài đặt plugin.

video-thumbnails-settings

Ở đây có các tuỳ chỉnh các bạn nên chuyển sang tiếng Việt để dễ lựa chọn và check hơn.

3. Tạo hình thu nhỏ video trong bài viết WordPress

Bh hãy tạo hình thu nhỏ video bằng cách thêm URL video vào bài đăng WordPress. Để làm điều đó, bạn cần tạo hoặc chỉnh sửa một bài đăng WordPress và thêm URL video của bạn vào khu vực chỉnh sửa bài đăng. Sau khi xuất bản bài đăng, bạn sẽ thấy rằng plugin đã tạo hình thu nhỏ video cho bạn và thêm nó vào bài đăng của bạn.

Xem thêm:  Cách để kiểm tra dung lượng data mạng Viettel?

video-thumbnail-post

4. Hiển thị Hình thu nhỏ Video trong Chủ đề WordPress của bạn

Plugin hình thu nhỏ video sử dụng chức năng Hình thu nhỏ của bài đăng WordPress. Hầu hết các chủ đề WordPress được thiết lập để tự động hiển thị hình thu nhỏ của bài đăng. Điều này có nghĩa là chủ đề của bạn sẽ tự động hiển thị hình thu nhỏ của video cùng với nội dung bài đăng hoặc đoạn trích của bạn. Tuy nhiên, nếu chủ đề của bạn không hiển thị hình thu nhỏ của video, thì bạn cần chỉnh sửa tệp chủ đề của mình và thêm mã này vào mẫu mà bạn muốn hiển thị hình thu nhỏ.

<?php the_post_thumbnail(); ?>

5. Cách thêm nút phát  hình thu nhỏ video trong WordPress

Mục đích của việc này là giúp người dùng, người xem phân biệt hình thu nhỏ hình ảnh thông thường với hình thu nhỏ video của mình. Điều này sẽ cho người dùng của bạn biết rằng có một video trong bài đăng và họ có thể nhấp vào nút phát để xem bài đăng video.

Truy cập vào các tệp của chủ đề của bạn như index.php, archive.php, category.php, or content.php tìm dòng mã này:

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

Bây giờ chúng ta cần thay thế mã này bằng mã sau:

<?php if ( in_category( 'video' )) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?><span class="playbutton"></span></a>
<?php else : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> 
<?php endif; ?>

Bước tiếp theo là tải lên một tệp hình ảnh từ Media »add news . Hình ảnh này sẽ được sử dụng làm nút phát. Khi bạn đã tải lên tệp hình ảnh, hãy lưu ý vị trí tệp hình ảnh bằng cách nhấp vào liên kết Chỉnh sửa bên cạnh hình ảnh.

Xem thêm:  Sửa lỗi kernel32.dll

Bước cuối cùng là hiển thị nút play. Sử dụng CSS để hiển thị và định vị nút phát trên hình thu nhỏ của video. Để làm điều đó, bạn cần sao chép và dán mã CSS này vào biểu định của chủ đề bằng cách nhấp vào Appearance » Editor.

.playbutton {
    backgroundurl('http://example.com/wp-content/uploads/playbutton.png'center center no-repeat;
    positionabsolute;
    top50%;
    left50%;
    width74px;
    height74px;
    margin-35px 0 0 -35px;
    z-index10;
    opacity:0.6;
}
.playbutton:hover {
    opacity:1.0;
}

Đừng quên thay thế url hình nền bằng URL của tệp hình ảnh nút phát mà bạn đã tải lên trước đó. Vậy là xong chúc các bạn thành công.

0/5 (0 Reviews)