Video là một trong những cách tốt nhất để thúc đẩy tương tác của người dùng. Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi về cách tạo lớp phủ chia sẻ trên các video tương tự như trang web phổ biến UpWorthy. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm nút chia sẻ làm lớp phủ trên các video trên YouTube trong WordPress.
Ví dụ về nó sẽ như thế nào:
Thêm nút chia sẻ dưới dạng lớp phủ trên các video trên YouTube
Có nhiều cách để thực hiện điều này. Hầu hết các cách sẽ yêu cầu bạn dán một đoạn mã HTML mỗi khi bạn thêm một đoạn video. Thay vì làm điều đó, chúng tôi quyết định tạo một mã ngắn để tự động hóa hiệu ứng che phủ này.
Đơn giản chỉ cần sao chép và dán mã sau đây vào một plugin cụ thể cho trang web hoặc tệp tin functions.php của chủ đề:
/// Nút che phủ Chia sẻ trên trang web của YouTube
chức năng wpb_yt_buttons ($ atts) {
// Lấy ID video từ mã ngắn
trích xuất (shortcode_atts (mảng (
'video' => ''
), $ atts));
// Hiển thị video
// Thêm nút chia sẻ trên Facebook
$ string = '
‘;
// Đóng vùng chứa video
$ string. = ”;
/ / Trở về đầu ra
return $ string;
}
// Thêm mã vạch
add_shortcode (‘wpb-yt’, ‘wpb_yt_buttons’);
Mã này tạo một mã ngắn để tự động thêm các liên kết twitter và facebook vào video của bạn. Các nút này chỉ hiển thị khi người dùng di chuột qua video. Bạn có thể sử dụng nó thêm bất kỳ kênh truyền thông xã hội khác.
Để sử dụng mã ngắn này, tất cả những gì bạn cần làm là thêm ID video YouTube vào mã ngắn như sau:
[wpb-yt video = "qzOOy1tWBCg"]
Bạn có thể lấy ID video YouTube từ chuỗi URL. Như thế này:
Bây giờ khi bạn thêm một video, bạn sẽ có thể xem video trên YouTube và liên kết văn bản thuần bằng văn bản để chia sẻ video trên Facebook hoặc Twitter. Bạn sẽ nhận thấy rằng các liên kết này không phải là kiểu dáng cả.
Vì vậy, cho phép các phong cách các liên kết này để tạo ra các nút, do đó, nó có vẻ đẹp hơn một chút. Chúng tôi cũng sẽ ẩn các nút này và làm cho chúng xuất hiện chỉ khi người dùng di chuột vào vùng chứa video. Để làm điều này, bạn thêm CSS sau vào biểu mẫu của Child Theme của bạn.
# chia sẻ-lớp phủ video {
vị trí: tương đối;
phải: 40px;
trên cùng: -190px;
list-style-type: none;
hiển thị: khối;
độ mờ: 0;
bộ lọc: alpha (opacity = 0);
-chuyển đổi trang web: độ mờ của .4s, trên cùng .25s;
-moz-chuyển tiếp: độ mờ đứt .4s, trên cùng .25s;
-o-chuyển tiếp: độ mờ đứt của .4s, trên cùng .25s;
chuyển tiếp: độ mờ đứt .4s, trên cùng .25s;
z-index: 500;
}
# chia sẻ-lớp phủ video: hover {
độ mờ: 1;
bộ lọc: alpha (opacity = 100);
}
.share-video-overlay li {
lề: 5px 0px 5px 0px;
}
#Facebook {
màu sắc: #ffffff;
màu nền: # 3e5ea1;
chiều rộng: 70px;
đệm: 5px;
}
.facebook a: link, .facebook a: active, .facebook a: visited {
màu sắc: #fff;
văn bản-trang trí: không có;
}
#twitter {
màu nền: # 00a6d4;
chiều rộng: 70px;
đệm: 5px;
}
.twitter a, .twitter a: link, .twitter a: active, .twitter a: visited, .twitter a: hover {
màu: #FFF;
văn bản-trang trí: không có;
}
Đó là tất cả. Bây giờ, bạn nên chia sẻ nút phủ trên các video trên YouTube của bạn trong WordPress.
Thêm nút chia sẻ làm lớp phủ cho Danh sách phát video trên YouTube trong WordPress
Sau khi xuất bản bài báo này, nhiều độc giả của chúng tôi đã hỏi, cách mã này có thể được sửa đổi để hoạt động cho danh sách phát cũng như video của YouTube. Nếu bạn nhúng các video trên YouTube cũng như các danh sách phát trên trang WordPress của mình, thì bạn nên sử dụng mã này thay thế.
/ *
* Nút che phủ chia sẻ của trang web
* trên Video và Danh sách phát trên YouTube
* /
chức năng wpb_yt_buttons ($ atts) {
// Nhận id video và danh sách phát từ mã ngắn
trích xuất (shortcode_atts (mảng (
'video' => '',
'playlist' => '',
), $ atts));
// Kiểm tra xem ID danh sách phát được cung cấp với mã ngắn hay không
nếu ($ playlist == ''):
// Hiển thị danh sách phát video
// Thêm nút Facebook
$ string = '
‘;
// Đóng vùng chứa video
$ string. = ”;
// Nếu ID danh sách phát không được cung cấp
khác:
// Hiển thị video
// Thêm nút Facebook
$ string = ‘
‘;
// Đóng vùng chứa video
$ string. = ”;
endif;
/ / Trở về đầu ra
return $ string;
}
// Thêm mã ngắn
add_shortcode (‘wpb-yt’, ‘wpb_yt_buttons’);
Sử dụng mã ở trên bạn cũng có thể thêm danh sách phát có nút phủ chia sẻ. Để hiển thị danh sách phát của bạn, bạn sẽ phải cung cấp ID video và id danh sách phát theo mã ngắn như sau:
[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]
Bạn có thể nhận ID video và danh sách phát bằng cách truy cập vào danh sách phát trên YouTube và sao chép ID danh sách từ URL, như sau:
Thêm WordPress Đăng Liên kết trong Lớp phủ Nắp Chia sẻ trên YouTube Videos
Sau khi chúng tôi xuất bản bài báo này, một số người dùng của chúng tôi yêu cầu họ muốn các nút chia sẻ chia sẻ liên kết bài của WordPress thay vì liên kết video trên YouTube. Để làm được điều đó, bạn cần phải thay thế URL video bằng các nút chia sẻ với permalink của WordPress post. Sử dụng mã này trong plugin functions.php hoặc site-specific:
/// Nút che phủ Chia sẻ trên trang web của YouTube
chức năng wpb_yt_buttons ($ atts) {
// Lấy ID video từ mã ngắn
trích xuất (shortcode_atts (mảng (
'video' => ''
), $ atts));
// Hiển thị video
/ / Đăng permalink và mã hóa URL
$ permalink_encoded = urlencode (get_permalink ());
// Thêm nút chia sẻ trên Facebook
$ string = '
‘;
// Đóng vùng chứa video
$ string. = ”;
/ / Trở về đầu ra
return $ string;
}
// Thêm mã vạch
add_shortcode (‘wpb-yt’, ‘wpb_yt_buttons’);
Vui lòng sửa đổi CSS hoặc các đoạn mã ngắn để đáp ứng nhu cầu của bạn. Để tiếp tục tối ưu hóa video của bạn, bạn có thể làm cho video trên YouTube phản ứng nhanh bằng cách sử dụng plugin FitVids jQuery. Bạn cũng có thể tắt các video có liên quan xuất hiện ở cuối video. hoặc thậm chí tạo các hình ảnh nổi bật từ hình thu nhỏ của YouTube.
Chúng tôi hy vọng rằng bài viết này đã giúp bạn thêm các nút chia sẻ tùy chỉnh như lớp phủ trên các video trên YouTube trong WordPress. Hãy cho chúng tôi biết kênh truyền thông xã hội nào bạn định thêm vào video của bạn bằng cách để lại nhận xét bên dưới.