Bạn đã thấy khu vực tabber trên các trang web phổ biến cho phép bạn xem các bài đăng phổ biến, gần đây và nổi bật chỉ với một cú nhấp chuột chưa? Đây được gọi là tiện ích tab tab jQuery và nó cho phép bạn tiết kiệm không gian trên màn hình người dùng bằng cách kết hợp các tiện ích khác nhau thành một. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm một Widget Tabber jQuery trong WordPress.
Tại sao bạn nên thêm một tiện ích jQuery Tabber?
Khi chạy một trang web WordPress, bạn có thể dễ dàng thêm các mục vào thanh bên của mình bằng cách sử dụng các tiện ích kéo và thả. Khi trang web của bạn phát triển, bạn có thể cảm thấy rằng bạn không có đủ không gian trong thanh bên để hiển thị tất cả nội dung hữu ích. Đó chính xác là khi một chiếc tabber có ích. Nó cho phép bạn hiển thị các mục khác nhau trong cùng một khu vực. Người dùng có thể nhấp vào từng tab và xem nội dung mà họ quan tâm nhất. Rất nhiều trang web tên tuổi sử dụng tab này để hiển thị bài viết phổ biến hôm nay, tuần này và tháng này. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một tiện ích tabber. Tuy nhiên, chúng tôi không hiển thị cho bạn những gì cần thêm vào các tab của bạn. Về cơ bản, bạn có thể thêm bất cứ thứ gì bạn thích.
Lưu ý: hướng dẫn này dành cho người dùng trình độ trung cấp và sẽ yêu cầu kiến thức về HTML và CSS. Đối với người mới bắt đầu, vui lòng tham khảo bài viết này .
Tạo tiện ích jQuery Tabber trong WordPress
Bắt đầu nào. Điều đầu tiên bạn cần làm là tạo một thư mục trên màn hình và đặt tên là wpbeginner-tabber-widget . Sau đó, bạn cần tạo ba tệp bên trong thư mục này bằng trình soạn thảo văn bản thuần túy như Notepad.
Tệp đầu tiên chúng ta sẽ tạo là wpb-tabber-widget.php . Nó sẽ chứa mã HTML và PHP để tạo các tab và một tiện ích WordPress tùy chỉnh. Tệp thứ hai chúng ta sẽ tạo là wpb-tabber-style.css và nó sẽ chứa kiểu CSS cho vùng chứa tab. Tệp thứ ba và tệp cuối cùng chúng ta sẽ tạo là wpb-tabber.js , sẽ chứa tập lệnh jQuery để chuyển đổi các tab và thêm hoạt ảnh.
Hãy bắt đầu với tệp wpb-tabber-widget.php . Mục đích của tệp này là tạo một plugin đăng ký một widget. Nếu đây là lần đầu tiên bạn tạo một tiện ích WordPress, thì chúng tôi khuyên bạn nên xem cách tạo hướng dẫn tiện ích WordPress tùy chỉnh của chúng tôi hoặc chỉ cần sao chép và dán mã này vào tệp wpb-tabber-widget.php :