Cách tạo nguồn cấp dữ liệu thanh trượt màu trong WordPress. Chúng tôi đang chuẩn bị cấu trúc cho thanh trượt. Plugin trình chiếu nội dung WordPress

Thanh trượt dành cho WordPress mà tôi sắp kể cho bạn nghe là thanh trượt thú vị nhất trong số tất cả các thanh trượt mà tôi từng thấy. Nó có rất nhiều cài đặt và rất nhiều khả năng mà bạn có thể đạt được hầu hết mọi mục tiêu bạn đặt ra. Điều quan trọng nhất là nó miễn phí. Anh ta chỉ có một nhược điểm - anh ta tiếng anh. Và điều đó không có vấn đề gì.

Plugin Smart Slider 3 cho phép bạn tạo một thanh trượt cho một trang web có bất kỳ độ phức tạp nào và với bất kỳ thành phần nào. Bạn có thể tải xuống plugin này từ liên kết bên dưới.

Thanh trượt là thành phần trang web trong đó hình ảnh thay thế tự động hoặc dựa trên hành động của người dùng. Những hình ảnh này có thể chỉ là hình ảnh, hình ảnh liên kết hoặc bản xem trước video. Thanh trượt giúp thể hiện nhiều thông tin trong một khu vực nhỏ của trang web. Thêm vào đó, nó trông hiện đại và hấp dẫn.

Sau khi cài đặt plugin trượt trên trang web và kích hoạt nó, bảng điều khiển của bạn sẽ hiển thị vật phẩm mới"Thanh trượt thông minh". Hãy đến đó.

Ở đây chúng tôi có ba tab:

• Thanh trượt. Danh sách tất cả các thanh trượt được tạo. Hiện đã có một thanh trượt mẫu được tạo bởi nhà phát triển plugin.
• Cài đặt. Cài đặt plugin. Có rất nhiều cài đặt và điều tốt nhất là tất cả chúng đều có thể được để mặc định. Những ai quan tâm có thể leo lên đó, nhưng tôi sẽ không xem xét chi tiết điểm này.
• Đi pro! Bạn có thể mua nó ở đây Phiên bản trả tiền cắm vào. Nhưng ai cần nó khi họ cho chúng ta rất nhiều cơ hội miễn phí! Bạn sẽ tìm hiểu về chúng dưới đây.

Hãy tạo một thanh trượt cho WordPress và xem khả năng của plugin này. Chuyển đến tab "Thanh trượt" và nhấp vào Nút màu xanh lá cây"Tạo thanh trượt".

Trong cửa sổ mở ra, hãy đặt tên cho thanh trượt của bạn trong trường “Tên thanh trượt”. Tôi sẽ viết “Những bức ảnh của tôi” ở đó. Chọn kích thước trong các trường “Chiều rộng” và “Chiều cao”, xác định một trong các ba lựa chọn hiển thị trong "Đặt trước". Về nguyên tắc, bạn có thể để mọi thứ ở chế độ mặc định nếu không muốn làm phiền. Cuối cùng, nhấp vào nút “Tạo”.

Vì vậy, một thanh trượt cho WordPress được tạo và sau đó chúng ta thấy một trang có cài đặt.

Khối cài đặt đầu tiên là “Xuất bản thanh trượt”. Đây là thông tin về cách xuất bản thanh trượt đã hoàn thành. Trong cột “Shortcode”, bạn có thể nhận được một shortcode có thể được đặt trong một bài đăng hoặc trên một trang. Trong cột “Trình chỉnh sửa trang hoặc bài đăng”, chúng tôi thấy rằng trong trình phản ứng bài đăng và trang nút mới, cho phép bạn xuất bản một thanh trượt. Và trong cột “Mã PHP”, bạn có thể nhận được mã phpđể cài đặt thanh trượt trong tệp mẫu.

Hai phương pháp xuất bản đầu tiên là thuận tiện nhất.

Trong tab “Chung”, các tùy chọn chính được cấu hình: tên (Tên), vị trí trên trang web (Căn chỉnh), điều khiển (Điều khiển), hoạt ảnh (Hoạt hình), v.v.

Tab "Kích thước" được sử dụng để điều chỉnh kích thước. Bạn có thể xác định chiều rộng và chiều cao (Slider size), lề (Margin), vị trí của thanh trượt trên màn hình (Chế độ điền nền slide mặc định), khả năng thích ứng (Chế độ đáp ứng) và hơn thế nữa.

Trong tab “Tự động phát”, bạn có thể định cấu hình tính năng tự động chuyển đổi thanh trượt.

Tab "Khác" để biết thêm điều chỉnh tốt, bạn không cần phải chạm vào nó.

Hãy đi xuống thấp hơn một chút và xem một khối cài đặt khác có sáu tab. Tab “Mũi tên” cung cấp cơ hội to lớn để tùy chỉnh mũi tên điều khiển thanh trượt cho WordPress.

"Đạn" điều khiển đạn. Dấu đầu dòng là những vòng tròn nhỏ trên thanh trượt mà bạn có thể sử dụng để chuyển đổi nó.

Tab “Tự động phát” kiểm soát tính năng tự động phát của thanh trượt.

Trong “Thanh”, bạn có thể bật thanh bên cạnh thanh trượt. Rất thuận tiện nếu bạn cần hiển thị một mô tả chẳng hạn.

Tab “Hình thu nhỏ” quản lý hình ảnh thu nhỏ của thanh trượt WordPress.

Vì vậy, nếu bạn đã thử cài đặt rồi, hãy thêm hình ảnh vào thanh trượt dành cho WordPress của chúng tôi. Để thực hiện việc này, nhấp vào mũi tên bên cạnh Nút màu xanh lá cây"Thêm thanh trượt hình ảnh". Một menu sẽ mở ra.

Để thêm hình ảnh vào thanh trượt, bạn cần nhấp vào mục “Thêm hình ảnh” trong menu này. Một thư viện phương tiện tiêu chuẩn sẽ mở ra, nơi bạn cần chọn ảnh. Sau khi chọn ảnh, hình thu nhỏ của ảnh sẽ ngay lập tức hiển thị trên thanh trượt. Nếu bạn nhấp vào nó, bạn có thể thực hiện một số cài đặt nhất định.

Tôi sẽ không cho bạn biết chi tiết các cài đặt. Nói tóm lại, ở đó bạn có thể đặt tên, mô tả và gán liên kết cho hình ảnh đó. Nhưng điều tuyệt vời nhất là bạn có thể tạo các lớp có văn bản, hình ảnh, nút và phủ chúng lên hình ảnh đã tải, giống như trong Photoshop.

Để tạo các lớp, hãy sử dụng khối mà tôi đã hiển thị trong ảnh chụp màn hình bên dưới.

Sau khi hoàn tất cài đặt hình ảnh, đừng quên nhấp vào “Lưu”.

Nếu bây giờ bạn nhấp vào “Thêm video” trên nút thêm trang trình bày, bạn có thể đính kèm video từ YouTube hoặc Vimeo vào thanh trượt. Để thực hiện việc này, bạn chỉ cần dán liên kết video vào trường này và nhấp vào “Thêm video”.

Video ngay lập tức xuất hiện trong danh sách slide và khi bạn click vào nó sẽ mở ra cài đặt riêng lẻ, tương tự như trong trường hợp của hình ảnh.

Theo yêu cầu của người lao động, tôi đã viết một bài về việc thêm thanh trượt vào chủ đề WordPress. Bài viết sẽ được phổ quát, tức là. dựa vào đó, bạn có thể thêm thanh trượt vào bất kỳ chủ đề WP nào. Chúng tôi sẽ xem xét vấn đề này bằng cách sử dụng chủ đề Pinbin làm ví dụ. Một liên kết đến chủ đề và tất cả các tập tin từ bài học sẽ ở sau bài viết.
Cái này Hình thức mới bài viết có video. Điều đặc biệt quan trọng là tìm ra điều bạn thích và điều bạn không thích ở video. Hãy chia sẻ ý kiến ​​của bạn ở phần bình luận bên dưới bài viết này.
Chú ý! Nếu bạn coi trọng thần kinh và thời gian của mình, thì hãy đặt mua một trang web từ các chuyên gia. Bạn có thể đặt hàng ở đây. Xô!
Thích xem!

Nếu bạn không biết Khái niệm cơ bản về JavaScript và không quen với thư viện jQuery, thì tôi thực sự khuyên bạn nên đọc thông tin trong các liên kết bên dưới:

Trước khi bắt đầu bất kỳ công việc kinh doanh nào, trước tiên bạn phải làm quen với các nguồn nguyên liệu. Chúng tôi có sẵn chủ đề Pinbin. Và cô ấy thích nghi. Điều này có nghĩa là nó thích ứng với các độ phân giải màn hình khác nhau. Bao gồm thiêt bị di động. Theo đó chúng ta cần thanh trượt thích ứng.
Tất nhiên chúng tôi sẽ sử dụng giải pháp làm sẵn trong JQuery.
Tôi đã sử dụng ResponsiveSlides làm thanh trượt. Nó có khả năng thích ứng và khá dễ cài đặt. Bạn sẽ tìm thấy liên kết đến mô tả và tài liệu sau bài viết. Đó là tất cả những gì chúng ta cần. Đi.

Chúng tôi sẽ chỉ hiển thị thanh trượt trên trang chính. Do đó, chúng tôi mở tệp index.php và trước khi bắt đầu hiển thị các bài đăng, tức là. Trước dòng chúng ta viết mã HTML: