Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Tạo Fullscreen background slideshow [supersized]

Tạo Fullscreen background slideshow [supersized]

Thứ Tư, 16/07/2014 by Hoàng Quách

Nội dung

  • 1 Cài supersized cho wordpress
    • 1.1 Chỉnh sửa thành phần controls
    • 1.2 Kích thước và vị trí ảnh
    • 1.3 Chọn nguồn ảnh cho slideshow
    • 1.4 Tùy chọn Hiển thị slide ảnh cho từng bài viết
  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Ta đã bắt gặp rất nhiều slideshow ảnh với khổ nhỏ trên website, một slideshow trình chiếu ảnh dạng background thì sao nhỉ? mình có tìm hiểu trên mạng thì đã chọn được thư viện jquery Supersized. Slider này được gọi là background slideshow.
supersized jquery
Xem demo tại đây:
Demo

Cài supersized cho wordpress

Các bạn Tải plugin supersized tại đây nhé:
Tải supersized
Sau đó kích hoạt và tiến hành cài đặt:
Truy cập: settings->WP Supersized.

Chỉnh sửa thành phần controls

Mặc định sẽ có thanh controls chứa nút định hướng pagination ở bottom, để điều chỉnh phần này vào tab components.

  • Slideshow controls: ẩn/hiển controls.
  • Navigation arrows: mũi tên next/back ảnh.

Nhớ nhấn Update Options để lưu lại.

Kích thước và vị trí ảnh

Nhấn vào tab Size and position. Điều chỉnh thông số như:

  • Fit image: vị trí và khổ ảnh
  • Center the background horizontally: căn background ở vị trí chính giữa theo chiều ngang.
  • Center the background vertically: căn background ở vị trí chính giữa theo chiều dọc.

Chọn nguồn ảnh cho slideshow

Nhấn vào tab slides source. Mặc định supersized sẽ lấy nguồn ảnh nằm trong folder “wp-content/supersized-slides”.
Giải thích: plugin sẽ liệt kê tất cả các folder không phải hệ thống wordpress có tồn tại trong thư mục wp-content. Chọn vào một folder, plugin sẽ lấy ảnh có trong folder đó nếu có. Trường hợp không ảnh nào được tìm thấy thì sẽ sử dụng ảnh mặc định của plugin.

Nếu không muốn động trạm vào ftp hay cpanel để upload ảnh lên host, còn có cách nào khác không nhỉ?
Supersized có kết hợp với plugin NextGEN Gallery để làm dữ liệu cho nó. Bạn cần cài đặt plugin này mới có thể sử dụng được.
wp-supersized-1

Tùy chọn Hiển thị slide ảnh cho từng bài viết

Bạn có thể chọn những ảnh làm slide riêng cho bài viết cụ thể, để thiết lập cho một bài viết bạn edit bài viết đó, kéo thanh cuộn xuống phía dưới bạn sẽ thấy mục “WP Supersized source of images”. Plugins cung cấp nhiều lựa chọn nguồn ảnh bạn có thể trỏ đến.

Mặc định là None, tất cả những page/post..bạn đã thiết lập cho sử dụng background slideshow đều sử được sử dụng chung. Sau đây là cách thiết lập slideshow cho từng trang riêng biệt.

  • WP Media Gallery: để sử dụng tính năng này bạn phải cài thêm plugin WP Media Gallery. Chọn nguồn ảnh bằng cách chọn gallery tạo ra từ plugin này.
  • NextGen Gallery: chọn một NextGen gallery đã tạo trước đó.
  • Flickr: import ảnh từ dịch vụ Flickr.
  • Picasa: import ảnh từ dịch vụ Picasa
  • Smugmug:
  • Custom dir: chọn ành ở thư mục khác có tại /wp-content/
  • XML file: nhập địa chỉ file XML chứa ở wp-content/. Xem file mẫu có trong plugin example.xml

Có nhiều bạn gặp phải lỗi không hiển thị ảnh/hiển thị ảnh not found, là do nguyên nhân chọn nguồn ảnh không đúng.

Ngoài ra Xem thêm tài liệu chính thức tại đây:
http://buildinternet.com/project/supersized/docs.html

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Tổng hợp các plugins làm slideshow images đẹp cho wordpress
  2. Phóng ảnh cloud zoom với plugin gallery metabox trong wordpress
  3. WordPress Meta slider API
  4. Tạo Contact form trong wordpress với fast secure contact form
  5. Thay đổi tiêu đề nút add to cart trong woocommerce
  6. Hiển thị thanh menu định hướng breadcrumbs cho website wordpress
  7. Cách xóa sản phẩm liên quan trong woocommerce
  8. Hướng dẫn cài đặt và sử dụng GD Star Rating cho WordPress
  9. Đăng nhập wordpress bằng tài khoản facebook, yahoo..[Social Sign In for wordpress]
  10. Quản lý download attachments trong wordpress

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: Slideshow

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.