Cách tạo Slider cho video và hình ảnh trên WordPress (Cách dễ dàng)

Mục lục

Bạn có thắc mắc làm thế nào để tạo slider hình ảnh và video cho WordPress không?

Thanh trượt là một cách tuyệt vời để thể hiện content của bạn và thu hút sự chú ý của người dùng website. Chúng có thể làm nổi bật content quan trọng hoặc nổi bật mà không chiếm nhiều không gian trên trang.

Trong bài viết này, WPBeginner Việt Nam sẽ hướng dẫn từng bước cách dễ dàng tạo slider hình ảnh và video cho WordPress bằng Soliloquy.

tạo-video-và-hình-ảnh-wordpress-slider-og

Tại sao nên tạo slider hình ảnh và video cho WordPress?

Hãy nhìn nhận thực tế: slider content thật tuyệt. Khi thực hiện đúng, chúng tiết kiệm được không gian màn hình quý giá và giúp thu hút người dùng ngay khi vào trang của bạn.

Thanh trượt video và hình ảnh là slider chứa cả video và hình ảnh. Đôi khi, bạn sẽ muốn cả video và hình ảnh trong một slider thay vì tạo slider cho một trong hai.

Giả sử bạn có một website bất động sản cho nhiều danh sách nhà khác nhau. Bạn có thể thêm hình ảnh ngôi nhà cùng với video hướng dẫn bên trong, mang đến cho người dùng trải nghiệm tương tác hơn.

Hoặc bạn có thể sử dụng slider content để thêm lời chứng thực của người dùng hoặc các mục category đầu tư. Một số plugin thậm chí có thể cung cấp chức năng tự động phát để người dùng có thể xem video ngay lập tức.

Ngoài ra, slider là một cách tuyệt vời để nhóm content vào một nơi. Thay vì sắp xếp video và hình ảnh theo chiều dọc, bạn có thể phân loại tất cả chúng trong một slider.

Nếu bạn muốn giới thiệu lời chứng thực trên landing page của mình, thì tốt hơn hết là nên đưa chúng vào slider để người dùng có thể xem toàn bộ cùng một lúc thay vì phải cuộn xuống.

Bạn cũng có thể sử dụng slider để giới thiệu content nổi bật để có thể hướng traffic đến các trang quan trọng nhất của mình.

Với những điều đã nói ở trên, WPBeginner Việt Nam sẽ hướng dẫn bạn cách tạo slider hình ảnh và video trên website WordPress của bạn.

Bước 1: Cài đặt Plugin Slider WordPress

Cách dễ nhất để tạo slider video và hình ảnh là sử dụng Người nói một mình. Đây là plugin slider WordPress tốt nhất, với hơn 900.000 lượt cài đặt. Bạn có thể dễ dàng tạo slider đơn giản bằng hình ảnh từ media library cùng với video được lưu trữ trên các nền tảng của bên thứ ba như YouTube.

Khi được thêm vào website của bạn, slider sẽ trông đẹp mắt trên mọi thiết bị, bao gồm máy tính xách tay, máy tính để bàn, máy tính bảng và điện thoại thông minh.

Thanh trượt hình ảnh WordPress độc thoại

Đó là lý do tại sao nhiều website sử dụng slider Soliloquy trên các trang quan trọng nhất của họ, chẳng hạn như trang chủ, trang bán hàng và landing page.

Điều tuyệt vời nhất là bạn không cần phải viết một dòng code nào để thực hiện điều đó!

Để bắt đầu, tất cả những gì bạn phải làm là cài đặt và kích hoạt plugin Soliloquy trên website của bạn. Nếu bạn cần trợ giúp cài đặt, hãy xem hướng dẫn của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Tin tốt là bạn có thể sử dụng phiên bản miễn phí của Soliloquy cho hướng dẫn này.

Nói như vậy, bạn có thể muốn xem xét Phiên bản chuyên nghiệp nếu bạn cần các addon như tính năng lightbox, bảo vệ bằng mật khẩu, content nổi bật và các tích hợp khác như Instagram, Pinterest và WooCommerce.

Bước 2: Thêm Slide Video Responsive vào WordPress

Sau khi kích hoạt, bạn sẽ cần phải đi đến Độc thoại » Thêm mới trong khu vực quản trị WordPress.

Từ đó, bạn có thể đặt tiêu đề phù hợp cho slider.

Bây giờ, bạn đã sẵn sàng thêm tất cả content phương tiện vào slider của mình. Đây là nơi bạn có thể thêm cả video và hình ảnh.

Tiếp tục và nhấp vào ‘Chọn file từ nguồn khác’.

thêm slide mới

Ghi chú: Mặc dù bạn có thể tải video từ máy tính lên WordPress, WPBeginner Việt Nam không khuyến khích vì nó sẽ làm chậm website của bạn. Thay vào đó, bạn nên sử dụng YouTube hoặc nền tảng lưu trữ video khác. Hãy xem danh sách các mẹo hay nhất của WPBeginner Việt Nam để tăng tốc hiệu suất WordPress để tìm hiểu thêm các chiến lược.

Bạn sẽ thấy một popup xuất hiện với các option để chèn file phương tiện. Chúng ta sẽ bắt đầu bằng cách chèn các slide video của mình.

Để thực hiện điều đó, hãy chuyển đến tab ‘Chèn Slide Video’. Đặt tiêu đề, URL video, URL hình ảnh, văn bản thay thế và chú thích cho slide video của bạn.

Đảm bảo bạn lấy URL video từ nền tảng do bên thứ ba lưu trữ như YouTube.

Chèn slide video

Nếu bạn muốn thêm nhiều slide hơn, tất cả những gì bạn cần làm chỉ là nhấp vào nút ‘Thêm slide video khác’.

Sau đó, bạn sẽ thêm thông tin cần thiết cho slide này.

Thêm một slide video khác

Sau khi đã thêm tất cả các slide video, hãy nhấp vào nút ‘Chèn vào slider’.

Các slide của bạn sẽ xuất hiện ở cuối trang để chỉnh sửa sau nếu cần.

Chèn vào slider

Bước 3: Thêm slider hình ảnh vào WordPress

Bây giờ bạn đã có tất cả các slide video, bạn đã sẵn sàng để thêm các slide hình ảnh.

Với slide hình ảnh, bạn chỉ cần kéo và thả hình ảnh từ máy tính, đây là cách dễ nhất để thêm các file này.

Đăng tải hình ảnh

Tuy nhiên, bạn cũng có thể sử dụng media library để thêm slide.

Để thêm từ media library của bạn, chỉ cần nhấp vào ‘Chọn file từ nguồn khác’.

Chọn tập tin từ các nguồn khác

Từ đây, cửa sổ Thêm phương tiện sẽ xuất hiện.

Tiếp tục và chọn hình ảnh bạn muốn thêm. Sau đó, nhấn nút ‘Chèn vào Thanh trượt’.

Chèn vào slider từ media library

Sau khi hoàn tất việc thêm slide hình ảnh, bạn sẽ thấy tất cả các slide ở phần dưới cùng của slider.

Bạn có thể thoải mái sắp xếp lại chúng theo thứ tự phù hợp với nhu cầu của mình.

sắp xếp lại slider

Bước 4: Chỉnh sửa Cài đặt Thanh trượt

Bạn có thể thực hiện các điều chỉnh nhỏ để custom cách slider sẽ hiển thị với người dùng. Cuộn xuống và đi đến tab ‘Cấu hình’ để truy cập cài đặt.

Bạn có thể chỉnh sửa các option như theme slider, kích thước hình ảnh, kích thước slider, v.v.

Tab cấu hình

Chủ đề slider ảnh hưởng đến layout của trang chiếu, do đó bạn có thể chuyển đổi các option khác nhau. Nếu bạn có quyền truy cập vào Phiên bản chuyên nghiệp của Soliloquysau đó bạn cũng có thể cài đặt addon Slider Themes để có thêm nhiều option custom.

Nếu bạn cuộn xuống, bạn sẽ thấy option ‘Video tự động phát’. Bạn có thể đánh dấu vào ô để bật tính năng tự động phát để video tự động bắt đầu trước khi người dùng có thể tiếp tục xuống trang.

video tự động phát

Tính năng phát tự động có thể rất hữu ích đối với video giải thích sản phẩm hoặc trang bán hàng để thu hút người dùng, giảm khả năng họ nhấp chuột đi nơi khác.

Sau khi hoàn tất việc điều chỉnh cài đặt, bạn chỉ cần nhấn nút ‘Xuất bản’.

nút xuất bản

Bước 5: Hiển thị slider của bạn trong Trang hoặc Bài đăng

Bây giờ, tất cả những gì bạn cần làm là đăng slider lên trang hoặc bài đăng.

Bạn có thể dễ dàng sao chép và dán shortcode nếu bạn vẫn đang sử dụng WordPress Classic Editor. Để biết thêm thông tin, hãy làm theo hướng dẫn của WPBeginner Việt Nam về cách thêm shortcode vào WordPress.

sao chép shortcode

Tuy nhiên, nếu bạn đang sử dụng trình chỉnh sửa block Gutenberg mới hơn, thì Soliloquy có một block mà bạn có thể sử dụng để link trực tiếp đến tất cả các slider của mình.

Chỉ cần đi đến Trang/Bài viết » Thêm mới hoặc chỉnh sửa trang/bài viết hiện có.

Tiếp theo, nhấp vào icon ‘+’ và tìm block Soliloquy.

Từ đây, bạn có thể chọn slider video và hình ảnh mà bạn vừa tạo.

Khi hoàn tất, chỉ cần nhấn ‘Xuất bản’ hoặc ‘Cập nhật’.

xuất bản slider

Sau đó, bạn có thể xem trước slider để đảm bảo nó trông đẹp mắt.

Nó sẽ trông giống thế này.

trình chiếu hình ảnh và video gif

Phần thưởng: Thêm Lightbox vào Thanh trượt WordPress của bạn

Soliloquy có nhiều addon có thể cải thiện slider của bạn và mang lại trải nghiệm tương tác hơn cho người dùng.

Ví dụ, nếu bạn đang thêm slider, thì rất có thể bạn sẽ muốn thêm cả hộp đèn.

Bằng cách thêm hiệu ứng hộp đèn vào slider trên website WordPress, bạn sẽ có thể hiển thị content của mình theo cách chuyên nghiệp hơn.

Khi người dùng nhấp vào hình ảnh hoặc video của bạn, nó sẽ mở trong một popup trên website của bạn. Lightbox tạo ra trải nghiệm xem nhập vai hơn cho người dùng của bạn để họ có thể xem content chi tiết hơn. Họ thậm chí có thể download các file phương tiện trên máy tính của họ hoặc chia sẻ hình ảnh trên phương tiện truyền thông xã hội.

Nếu bạn điều hành một website nhiếp ảnh, thì hiệu ứng hộp đèn cho phép người dùng xem hình ảnh của bạn mà không bị phân tâm bởi các yếu tố khác trên website của bạn, điều này giúp tăng cường sự tương tác. Đối với các cửa hàng trực tuyến, hộp đèn sẽ giúp tạo ra các bộ sưu tập sản phẩm hấp dẫn hơn.

Để thêm hộp đèn vào slider của bạn, chỉ cần vào Độc thoại » Bổ sung. Cuộn xuống Lightbox Addon và nhấp vào ‘Cài đặt Addon’.

cài đặt addon lightbox

Sau khi cài đặt, nó sẽ xuất hiện trong phần cài đặt slider của bạn.

Từ đây, bạn có thể điều chỉnh hiệu ứng và layout, thêm mũi tên điều hướng, theme của hộp đèn, v.v.

thiết lập hộp đèn

Sau khi được bật, hộp đèn sẽ tự động hoạt động.

Xem trước slider của bạn và nó sẽ trông giống thế này.

xem trước slider hộp đèn

Chúng tôi hy vọng bài viết này giúp bạn biết cách tạo slider video và hình ảnh WordPress. Bạn cũng có thể muốn xem danh sách các plugin và công cụ WordPress cần có cho các website kinh doanh hoặc hướng dẫn SEO WordPress tối ưu của WPBeginner Việt Nam để giúp bạn có thêm traffic vào website của mình.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên TwitterFacebook.

5/5 - (190 bình chọn)
Facebook
Twitter
LinkedIn
Telegram
Email
Đội Ngũ Biên Tập
WordPress

Đánh giá Sucuri – Sucuri đã giúp WPBeginner Việt Nam chặn 450.000 cuộc tấn công WordPress trong 3 tháng như thế nào

Bất cứ khi nào WPBeginner Việt Nam được hỏi về các mẹo bảo mật WordPress, hai trong số các recommend hàng đầu của WPBeginner Việt Nam là có được giải pháp backup WordPress tốt và bắt đầu sử dụng tường lửa website Sucuri. Tại WPBeginner, WPBeginner Việt Nam đã thử

Đọc tiếp »
WordPress

Cách quản lý tốt hơn các cập nhật WordPress tự động

Chúng tôi quản lý nhiều website WordPress và hiểu rằng việc cập nhật chúng là điều cần thiết để đảm bảo tính bảo mật, hiệu suất và tính ổn định của chúng. Nhưng việc quản lý các bản cập nhật đó theo cách thủ công có thể tốn thời gian

Đọc tiếp »