Cách thêm slider vào trang WordPress

Để có một trang web nổi bật, bạn nên chú trọng vào phần thiết kế của trang. Có rất nhiều cách để khiến website của bạn trở nên sinh động và hấp dẫn hơn, và một trong số đó là sử dụng slider.

Giống như slider vô cùng lôi cuốn và bắt mắt trong theme Yosemite dưới đây, bạn cũng có thể tạo một slider như thế cho trang web một cách dễ dàng.

Slider trong theme Yosemite

Hãy cùng tìm hiểu thông qua bài hướng dẫn này của chúng mình nhé!

Slider là gì và lợi ích của slider

Slider là một cách để trưng bày hình ảnh, video, post và page, … bằng slideshow trên website. Slider bao gồm cả các yếu tố khác như thanh điều hướng, button, thumbnail được thiết kế với nhiều phong cách khác nhau.

Nhờ vào việc trình chiếu slideshow, chủ website có thể hiển thị cùng một lúc tất cả nội dung nổi bật của mình trên một khu vực nhất định, từ đó giúp người đọc nhanh chóng tiếp nhận những thông tin đáng chú ý nhất trên website. Thêm vào đó, slider thường được thiết kế một cách hấp dẫn và bắt mắt, giúp cho trang web của bạn trở nên thu hút và lôi cuốn hơn rất nhiều.  

Thông thường, chúng ta có 4 cách phổ biến sau để thêm slider vào trang WordPress:

  • Sử dụng theme có sẵn tính năng slider
  • Sử dụng plugin để thêm slider
  • Sử dụng page builder
  • Sử dụng code

Trong bài viết này, mình sẽ hướng dẫn bạn 2 cách đầu tiên: hiển thị slider nếu theme của bạn có hỗ trợ sẵn tính năng này, và sử dụng plugin để thêm slider. Bây giờ, hãy cùng bắt tay vào tìm hiểu 2 cách này ngay thôi nào.

Hiển thị Slider trong theme có sẵn tính năng slider

Ngày nay, rất nhiều theme đã có hỗ trợ sẵn tính năng này để giúp bạn hiển thị slider lên trang web. Hầu hết những theme đó sẽ cho phép bạn hiển thị và tùy chỉnh slider ngay trong Customizer. Tuy nhiên, cũng có những theme yêu cầu bạn phải thực hiện các cách khác. Vì thế, bạn cần phải làm theo đúng các hướng dẫn của theme mà bạn đang dùng thì mới thêm và hiển thị slider đúng cách được.

Ví dụ như mình đang sử dụng Memory – một theme có cung cấp sẵn tính năng slider dành cho bài viết nổi bật. Bạn có thể dễ dàng thêm và tùy chỉnh slider bằng cách dùng công cụ  Customizer, đi đến Theme Options > Featured Content. Ngoài ra, nếu muốn tìm hiểu thêm về các tùy chỉnh khác nữa của theme này, bạn có thể tham khảo tài liệu hướng dẫn chi tiết đi kèm với theme.

Với theme Memory mà mình đang sử dụng thì theme chỉ cho phép hiển thị bài viết lên slider thôi. Nhưng với các theme khác thì có thể có thêm nhiều sự lựa chọn khác nữa như là trang, hình ảnh hoặc một chuyên mục bất kỳ. Và như đã nói, mỗi theme có một cách riêng để hiển thị và tùy chỉnh slider, vậy nên bạn cần phải đọc kỹ và làm theo các hướng dẫn của theme đó một cách cẩn thận nhé.

Sử dụng plugin để thêm Slider

Nếu như theme mà bạn đang dùng không có sẵn tính năng hiển thị slider, bạn có thể nhờ tới sự hỗ trợ của một plugin slider. Hiện nay trên thị trường có rất nhiều plugin để giúp bạn thêm và tùy chỉnh slider như thế. Ở trong bài viết này, chúng mình sẽ sử dụng Smart Slider 3 để hướng dẫn, bởi plugin này khá dễ dùng, khả năng tùy chỉnh cao, và đặc biệt là nó miễn phí.

Phiên bản miễn phí của Smart Slider 3 có sẵn trên WordPress.org. Bạn chỉ cần vào Dashboard > Plugins rồi tìm kiếm và cài đặt plugin này một cách vô cùng dễ dàng.

Thêm slider bằng plugin Smart Slider 3

Sau khi cài đặt và kích hoạt plugin này, bạn sẽ cần thực hiện 5 bước sau đây để tạo slider cho website của mình:

  • Bước 1: Tạo mới slider 
  • Bước 2: Tạo các slide bên trong
  • Bước 3: Thiết lập nội dung cho từng slide
  • Bước 4: Cấu hình slider
  • Bước 5: Hiển thị slider trên trang web của bạn

Bước 1: Tạo mới slider 

Trước khi đi vào hướng dẫn cụ thể thì bạn cần làm quen với một số khái niệm sau để sử dụng plugin Smart Slider 3 này thuận tiện hơn:

  • Trong một slider, khi bạn click vào thanh điều hướng hoặc vuốt qua vuốt lại, bạn sẽ được di chuyển từ trang này sang trang khác. Các trang này được gọi là các slide. Trong plugin này, những slide cho phép bạn hiển thị hình ảnh, bài viết, chuyên mục và overlays. Lưu ý đừng nhầm lẫn giữa khái niệm slider slide nhé: một slider thì bao gồm một hay nhiều slide.
  • Mỗi “project” trong plugin này là một slider.

Đầu tiên, bạn cần tạo mới một slider và chọn loại slide bạn muốn hiển thị trong slider đó. Đi tới Dashboard > Smart Slider, click New Project để bắt đầu. 

Tạo một slider mới

Có 3 sự lựa chọn được đưa ra và bạn chỉ cần click vào cái bạn muốn. Và dù bạn chọn cách nào thì cũng đừng quên những khái niệm mà mình đã đề cập ở phần trên nhé.

Có 3 lựa chọn để thêm slider

Lựa chọn 1: Create a New Project

Lựa chọn này cho phép bạn tạo một slider mới tinh, chưa có nội dung hay layout gì trong đó cả. Bạn nên sử dụng cách này khi mà bạn đã có ý tưởng cho slider của riêng mình, và muốn tự xây dựng slider từ con số không.

Với lựa chọn này, bạn cần sử dụng 1 trong 3 kiểu slider khác nhau ở tab Slider Type (1). Sau đó, bạn nhập tên cùng các thông số khác của slider tại tab Settings (2). Sau khi hoàn thành, click nút Create để chuyển tới bước sau.

Tạo một project mới với plugin Smart Slider 3

Lựa chọn 2: Start with a Template

Nếu bạn chưa có bất kỳ ý tưởng nào về việc tạo slider thì cũng đừng lo lắng! Hãy tận dụng các template có sẵn trong plugin này. Bạn có thể lấy cảm hứng từ những mẫu thiết kế đẹp mắt trong thư viện như hình dưới, rồi sáng tạo cho riêng mình một slider theo ý muốn. Hoặc bạn cũng có thể chỉ sử dụng luôn những template này, rồi chỉnh sửa đôi chút là bạn đã có được một slider ưng ý rồi.

Một template bao gồm 3 slide giống hệt nhau, điều đó có thể mang đến đồng nhất cho slider của bạn, nhưng cũng có thể khiến slider của bạn trở nên đơn điệu và nhàm chán. Để khắc phục điều đó, bạn cũng có thể thêm nhiều slide mới khác và chỉnh sửa theo ý muốn.

Chọn một template cho slider

Lựa chọn 3: Import Your Own Files

Đáng ngạc nhiên là plugin này cho phép sử dụng slider của riêng mình. Ví dụ, bạn đã mất công tạo một slider rất ưng ý ở đâu đó và muốn dùng nó cho trang web luôn thay vì lặp lại quá trình phức tạp kia, bạn nên chọn phương án thứ 3 này nhé.

Để import slider của bạn, hãy click vào nút (+) và chọn tệp mà bạn mong muốn. Lưu ý rằng tệp này phải là tệp có định dạng * .ss3. Cuối cùng, nhấn Import.

Inport file vào plugin

Sau khi hoàn thành một trong 3 tùy chọn trên, bạn sẽ được tự động điều hướng đến dashboard editor của plugin này, nơi bạn có thể tạo mới các slide bên trong slider và thiết lập nội dung của chúng.

Bước 2: Tạo các slide bên trong slider

Ở bước này, chúng mình sẽ hướng dẫn bạn tạo các slide. Nếu bạn đã có các slide rồi nhưng vẫn muốn chỉnh sửa thêm, thì bạn vẫn có thể làm theo các hướng dẫn này nhé.

Đầu tiên, để tạo mới 1 slide, click Add Slide.

Tạo slider trong slider

Sau đó các lựa chọn cho kiểu slide sẽ xuất hiện ở phía trên. Lưu ý là bạn có thể thêm bao nhiêu slide cũng được nhé.

Chọn kiểu slider

Bạn hãy lựa chọn kiểu slide phù hợp với nhu cầu của mình: 

  • Image: Lựa chọn này cho phép bạn hiển thị các hình ảnh nổi bật nhất lên trên slider. Ví dụ như khi bạn muốn trưng bày các sản phẩm trên trang thương mại điện tử của mình, bạn nên chọn kiểu slide này. 
hiển thị các hình ảnh nổi bật nhất lên trên slider
Lựa chọn một hình ảnh để hiển thị lên slider
  • Blank: Kiểu slide này cho bạn một trang trống để bạn tùy ý chỉnh sửa slide ngay từ đầu, nên bạn sẽ phải tự mình quyết định bố cục hay nội dung hiển thị trên các slide. 
Kiểu slide này cho bạn một trang trống để bạn tùy ý chỉnh sửa slide ngay từ đầu
Một slide blank mới tinh
  • Post: Lựa chọn này cực kỳ phù hợp để bạn có thể hiển thị những bài viết nổi bật trên slider, từ đó thu hút sự chú ý của người đọc và kích thích họ đọc các bài viết này. Khi bạn chọn kiểu slide này, hình ảnh nổi bật cùng với trích dẫn của bài viết sẽ được hiển thị lên slider. 

Để chọn một bài viết, click vào tab Post. Khi đó, một danh sách các bài viết sẽ hiện ra và bạn chỉ cần chọn bài viết mà bạn muốn hiển thị lên slider.

chọn bài viết mà bạn muốn hiển thị lên slider

Sau đó, thumbnail của hình ảnh nổi bật trong bài viết đó sẽ hiển thị như hình dưới: 

thumbnail của hình ảnh nổi bật trong bài viết
  • Static overlay: Với lựa chọn này, một slide sẽ được đặt lên tất cả slide khác trong slider. Nên sử dụng kiểu này khi bạn có những nội dung quan trọng cần được làm nổi bật khỏi hình ảnh background phía sau.
một slide sẽ được đặt lên tất cả slide khác

Dưới đây là ví dụ của Static Overlay:

Static Overlay trong plugin Smart Slider 3
  • Dynamic slides: Lựa chọn này sẽ tự động lấy ra chuỗi các nội dung từ một chuyên mục, thẻ hay, taxonomy nào đó. Với những slide này, bạn có thể dễ dàng trưng bày các nội dung nổi bật theo nhóm trên slider. 

Click tab Dynamic slides, bạn sẽ tự động được điều hướng đến dashboard như hình dưới để tùy chọn chuỗi bài viết. Tại đây, bạn có thể dùng filter để chọn category, tag, hay taxonomy mà bạn mong muốn.

dùng filter của plugin để chọn category, tag, hay taxonomy mà bạn mong muốn

Sau đó, bạn nên chỉnh sửa thông số ở tab Order và tab Generator Settings. Lưu ý là bạn có thể thay đổi số lượng nội dung sẽ hiển thị ở tab này đấy.

chỉnh sửa thông số ở tab Order và tab Generator Settings vowisSmart Slider 3 plugin

Và đây là hình ảnh hiển thị kết quả khi chọn kiểu slide này:

hình ảnh hiển thị kết quả khi chọn kiểu slide

Plugin này cho phép bạn chọn một hoặc kết hợp nhiều kiểu slide khác nhau như ví dụ dưới đây:

chọn một hoặc kết hợp nhiều kiểu slide khác nhau

Kết thúc bước này, bạn đã có toàn bộ slide mà bạn muốn hiển thị lên slider. Bây giờ hãy cùng thiết lập nội dung cho từng slide ở bước tiếp theo nhé.

Bước 3: Thiết lập nội dung cho từng slide

Dù bạn chỉnh sửa nội dung cho kiểu slide nào, thì về cơ bản, các thao tác để thực hiện là tương tự nhau. Vì thế ở đây mình sẽ chỉ mô tả cách tiến hành với slide kiểu Image thôi, và bạn có thể tự áp dụng tương tự cho các kiểu slide khác nhé. 

Để thiết lập nội dung cho slide mà bạn mong muốn, di chuột vào slide đó, và click Edit để đi tới trình chỉnh sửa slide. 

thiết lập nội dung cho slide

Thiết lập cho slide kiểu Image

Click vào icon của yếu tố mà bạn muốn thêm vào slide: heading (tiêu đề), text (chữ), image (hình ảnh), button (nút điều hướng), row (tạo bảng). Chúng nằm hết ở sidebar bên phải như hình. Sau đó một bảng chỉnh sửa màu đen sẽ xuất hiện, trong đó có chứa toàn bộ những lựa chọn tùy chỉnh để giúp bạn chỉnh sửa nội dung slide theo ý mình.

 chỉnh sửa nội dung slide

Ví dụ, đây là kết quả sau khi mình thêm heading (1), text (2), row (3), images (4), và buttons (5) vào một slide kiểu hình ảnh, rồi sử dụng bảng chỉnh sửa để tùy biến font chữ, kích thước, vị trí, màu chữ và màu nền.

chỉnh sửa để tùy biến font chữ, kích thước, vị trí, màu chữ và màu nền

Sau đó, click Save ở phía trên cùng của trang, và click Back để quay trở lại dashboard editor của Smart Slider’s.

Đây là một ví dụ khác: bạn có thể thêm logo tự thiết kế bằng cách chọn Image (1), thêm Text để mô tả ngắn gọn (2), và sử dụng Button để thêm nút điều hướng (3) như sau:

thêm logo tự thiết kế cho slide

Thiết lập cho slide kiểu Post

Bây giờ, bạn chỉ việc lặp lại các thao tác trên để thiết lập nội dung cho các kiểu slide khác. Tuy nhiên cũng có một số điều bạn cần lưu ý. 

Khi lựa chọn Post, slide sẽ tự động hiển thị các yếu tố sau: 

  • Heading: tiêu đề bài viết của bạn (1),
  • Text: trích dẫn của bài viết (2),
  • Và Button: nút điều hướng (3).
Thiết lập cho slide kiểu Post

Bạn có thể giữ nguyên các yếu tố mặc định như vậy hoặc chỉnh sửa khác đi tùy theo mong muốn. Và chúng mình xin nhắc lại rằng: các thao tác hoàn toàn giống như khi thiết lập với slide kiểu hình ảnh.

Ví dụ như ở đây, mình vẫn giữ nguyên các yếu tố có sẵn mà slide tự động tạo, và thêm vào đó 2 hình ảnh minh họa: 

giữ nguyên các yếu tố có sẵn mà slide tự động tạo, và thêm vào đó 2 hình ảnh minh họa

Thiết lập với slide kiểu Static Overlay

Với một slide kiểu Static Overlay, bạn cũng có thể chỉnh sửa nó như với các kiểu trên. Slide này sẽ được đặt lên trên tất cả các slide khác, vì vậy nó có thể sẽ che đi những nội dung quan trọng trên một slide nào đó. Tuy nhiên, bạn cũng có thể khắc phục điều đó bằng cách thay đổi vị trí của slide này như minh họa dưới đây: 

Thiết lập với slide kiểu Static Overlay

Bên cạnh đó, plugin này không cho phép bạn thay đổi chiều cao của lớp phủ, và đây cũng sẽ là một điểm hạn chế trong quá trình tùy chỉnh slide kiểu này.

plugin Smart Slider 3 không cho phép bạn thay đổi chiều cao của lớp phủ

Thiết lập với slide kiểu Dynamic Slides

Một điểm rất độc đáo của slide kiểu Dynamic Slides này là bạn có thể dễ dàng đặt những nội dung đã thiết lập cho một slide lên trên các slide khác trong cùng một chuỗi. Điều này sẽ giúp bạn tiết kiệm rất nhiều thời gian khi muốn tạo ra các nội dung giống nhau trên các slide khác nhau. 

Ví dụ, sau khi mình đã thêm tiêu đề bài viết vào một slide trong một Dynamic Slides, rồi click nút Static Save.

Thiết lập với slide kiểu Dynamic Slides

Thì tiêu đề đó cũng sẽ được tự động thêm vào các slide khác trong chuỗi Dynamic Slides đó:

tiêu đề sẽ được tự động thêm vào các slide khác

Nếu bạn không muốn sao chép nội dung lên các slide khác nhau như thế, thì hãy bỏ qua Static Save, và chỉ cần click nút Save.

Vậy thôi! Đến đây thì bạn đã có thể thiết lập nội dung theo ý muốn cho bất kỳ kiểu slide nào rồi.

Mẹo nhỏ: bạn có thể nhanh chóng nhân bản slide bằng việc click vào icon cài đặt (1), chọn Duplicate (2), rồi chỉnh sửa thêm theo ý muốn với các hướng dẫn mà mình vừa trình bày ở trên.

nhân bản slide bằng việc click vào icon cài đặt

Bước 4: Cấu hình slider

Sau khi đã có tất cả slide mà bạn mong muốn, bạn nên cấu hình slider để có được sự hiển thị đẹp mắt nhất trên trang web của mình nhé.

Trong trang chỉnh sửa Project của slider mà bạn muốn cấu hình, kéo chuột xuống dưới, bạn sẽ thấy phần My project. Có rất nhiều tab ở đây để giúp bạn cấu hình slide ở nhiều khía cạnh khác nhau.

Cấu hình slider

Việc cấu hình này khá là thân thiện với người dùng với các thao tác đơn giản và cách đặt tên dễ hiểu. Đặc biệt, trong quá trình tùy chỉnh, bạn có thể xem cách hiển thị của các thay đổi trong front-end bằng cách click vào icon hình con mắt này: 

xem cách hiển thị của các thay đổi trong front-end bằng cách click vào icon hình con mắt

Bạn có thể tùy chỉnh slider một cách rất linh hoạt với các tính năng được đưa ra trong plugin này. Tuy nhiên, nếu là một người mới, bạn có thể sẽ bối rối trước những tính năng đó. Nếu vậy thì, để dễ dàng hơn, bạn chỉ cần quan tâm đến những tính năng mà mình sẽ đề cập ở phần dưới đây thôi.

Thay đổi kích thước

Đầu tiên, bạn có thể thay đổi kích thước của slider sao cho phù hợp với kích thước của hình ảnh để chúng hiển thị đẹp mắt nhất. Đi tới Size > Slider Size và nhập thông số của chiều ngang và chiều cao. 

Thay đổi kích thước slide

Lựa chọn bố cục

Hoặc bạn cũng có thể thay đổi bố cục của slider để khớp với bố cục của trang mà bạn muốn đặt sldier. Đi tới Size > Layout và chọn bố cục Boxed/Full-width.

thay đổi bố cục của slider

Thiết kế thanh điều hướng

Tiếp theo, thật tuyệt vời là bạn có thể thiết kế thanh điều hướng trên slider theo dạng arrows (mũi tên), bullets (biểu tượng), hay thumbnails (ảnh nhỏ). Bạn có thể chọn một trong những loại trên hoặc thậm chí kết hợp nhiều loại với nhau. Chọn tab Control và cuộn xuống phần mà mình mong muốn. Bạn chỉ cần enable/unable (bật/tắt) những tính năng này, rồi thiết kế chúng theo ý tưởng của bạn.

Nếu muốn thanh điều hướng có dạng mũi tên, chọn mục Arrow rồi thay đổi thiết kế của chúng.

thanh điều hướng có dạng mũi tên trong plugin Smart Slider 3

Chỉnh sửa mũi tên theo ý bạn:

Chỉnh sửa mũi tên trong preview cua plugin
Hình ảnh hiển thị mũi tên trong preview

Hoặc bạn có thể đặt các biểu tượng bằng cách bật Bullet và lại thiết kế chúng theo mong muốn.

đặt các biểu tượng bằng cách bật Bullet và lại thiết kế chúng
Tùy chỉnh biểu tượng
Những biểu tượng slide được hiển thị khá đẹp mắt
Những biểu tượng sẽ được hiển thị khá đẹp mắt

Lựa chọn khác là hiển thị ảnh nhỏ làm thanh điều hướng. Bạn chỉ cần tùy chỉnh tại phần Thumbnail tương tự như hai dạng trên.

 hiển thị ảnh nhỏ làm thanh điều hướng
Thiết kế ảnh nhỏ
 ảnh nhỏ trong preview
Đây là hiển thị của ảnh nhỏ trong preview

Thêm animation

Bây giờ, nếu muốn slider trở nên thú vị và sinh động hơn, bạn có thể thêm các hiệu ứng chuyển trang tại phần Animation.

 thêm các hiệu ứng chuyển trang

Đây là kết quả sau khi thêm hiệu ứng chuyển trang:

kết quả sau khi thêm hiệu ứng chuyển trang

Bật autoplay

Ngoài ra, bạn còn có thể để slideshow tự động chuyển trang bằng việc chọn tab Autoplay (tự động chạy) và bật tính năng này lên.

để slideshow tự động chuyển trang bằng việc chọn tab Autoplay của plugin

Các tính năng khác

Trên đây là hầu hết các tính năng mà bạn cần để tạo ra một slider tuyệt vời. Bên cạnh đó, plugin này còn cung cấp các lựa chọn cấu hình khác nữa như: thêm thông tin hình ảnh, thêm shadow, … Vì thế, hãy tự khám phá thêm các lựa chọn tùy chỉnh khác nữa. 

Việc cấu hình này có thể sẽ hơi tốn thời gian để tạo ra được một slider ưng ý nên hãy kiên nhẫn một chút nhé!

Bước 5: Hiển thị slider trên trang web của bạn

Bây giờ, sau khi đã tạo được một slider hoàn chỉnh rồi, việc duy nhất bạn cần làm nữa là hiển thị slider ở đúng vị trí mong muốn. Việc này cực kỳ đơn giản. Bạn chỉ cần chèn đoạn shortcode của slider vào trang/bài viết mà thôi. 

Đầu tiên, sao chép đoạn shortcode ở tab General như hình dưới đây:

Hiển thị slider trên WordPress Website

Tiếp theo, đi đến Admin Dashboard > Pages/Posts và chọn trang hay bài viết mà bạn muốn hiển thị slider. Smart Slider 3 đã được tương thích với cả Gutenberg editor và Classic Editor, nên hãy cứ yên tâm về trình chỉnh sửa mà bạn đang dùng nhé.

Sau đó dán đoạn shortcode vào vị trí mong muốn.

Chèn shortcode của slide sử dụng Gutenberg Editor
Chèn shortcode sử dụng Gutenberg Editor
Chèn shortcode của slide sử dụng Classic Editor
Chèn shortcode sử dụng Classic Editor

Cuối cùng, đừng quên nhấn Save (lưu) hay Update (cập nhật) để hoàn tất nhé. Và đây là thành quả hiển thị slider trên trang của mình:

Lời cuối

Thật tuyệt vời! Vậy là chúng ta đã đi qua các hướng dẫn rất cụ thể để thêm slider vào trang web. Mình hy vọng rằng bạn đã có thể tạo slider theo các hướng dẫn dễ hiểu và cụ thể trên, giúp cho trang hấp dẫn và thú vị hơn rất nhiều so với trước đó.

Ngoài việc thêm slider, bạn cũng có thể tham khảo các cách khác để nâng tầm trang web như là thêm lightbox hay thêm video backgrounds, … Nếu bạn muốn biết thêm các hướng dẫn nào khác, đừng ngần ngại để lại bình luận bên dưới bài viết này cho chúng mình biết nhé! 

Để lại bình luận

Email 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 *