Bạn đã nhìn thấy một vùng 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ỉ bằng một cú nhấp chuột không? Đây được gọi là phụ tùng tabber 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 vật dụng khác nhau vào một. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm một Widget Taber jQuery trong WordPress.
Tại sao Bạn nên Thêm một Widget Taber jQuery?
Khi chạy một trang web WordPress, bạn có thể dễ dàng thêm các mục vào các thanh bên của mình bằng 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. Đó là chính xác khi một tabber có ích. Nó cho phép bạn hiển thị các mặt hàng 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. Nhiều trang web lớn sử dụng nó để hiển thị bài báo phổ biến ngày 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 tiện ích tabber. Tuy nhiên, chúng tôi không cho bạn thấy những gì để thêm vào các tab của bạn. Bạn có thể thêm về cơ bản bất cứ điều gì bạn muốn.
Lưu ý: hướng dẫn này dành cho người dùng cấp trung gian và sẽ yêu cầu kiến thức về HTML và CSS. Đối với người dùng mức độ mới bắt đầu, hãy tham khảo bài viết này.
Tạo tiện ích Tabber jQuery trong WordPress
Băt đâu nao. Điều đầu tiên bạn cần làm là tạo một thư mục trên máy tính của bạn và đặt tên nó công cụ tab-trang web . Sau đó, bạn cần tạo ba tệp bên trong thư mục này bằng cách sử dụng một trình soạn thảo văn bản thuần như Notepad.
Tệp đầu tiên chúng tôi sẽ tạo ra là wpb-tabber-widget.php . Nó sẽ chứa HTML và mã PHP để tạo các tab và tiện ích WordPress tuỳ chỉnh. Tập tin thứ hai chúng tôi sẽ tạo ra là wpb-tabber-style.css , và nó sẽ chứa kiểu dáng CSS cho các vùng chứa tab. Tập tin thứ ba và cuối cùng chúng tôi sẽ tạo ra là wpb-tabber.js , sẽ chứa tập lệnh jQuery để chuyển đổi tab và thêm hình động.
Hãy bắt đầu với wpb-tabber-widget.php tập tin. Mục đích của tệp này là tạo ra 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, chúng tôi khuyên bạn nên xem cách tạo một hướng dẫn tiện ích WordPress tuỳ chỉnh hoặc chỉ cần sao chép và dán mã này vào wpb-tabber-widget.php tập tin:
địa điểm
Plugin URI: http://www.site.com
Mô tả: Tiện ích tabber jquery đơn giản
Phiên bản: 1.0
Tác giả: trang web
URI tác giả: http://www.site.com
Giấy phép: GPL2
* /
/ / Tạo một widget
lớp WPBTabberWidget kéo dài WP_Widget {
chức năng WPBTabberWidget () {
$ widget_ops = mảng (
'classname' => 'WPBTabberWidget',
'description' => 'Đơn giản jQuery Tabber Widget'
);
$ this-> WP_Widget (
'WPBTabberWidget',
'trang Tabber Widget',
$ widget_ops
);
}
Widget chức năng ($ args, $ instance) {// đầu ra của thanh công cụ
hàm wpb_tabber () {
/ / Bây giờ chúng ta enqueue stylesheet của chúng tôi và kịch bản jQuery
wp_register_style ('wpb-tabber-style', plugins_url ('wpb-tabber-style.css', __FILE__));
wp_register_script ('wpb-tabber-widget-js', plugins_url ('wpb-tabber.js', __FILE__), mảng ('jquery'));
wp_enqueue_style ('wpb-tabber-style');
wp_enqueue_script ('wpb-tabber-widget-js');
// Tạo các tab bạn sẽ thêm mã của riêng mình trong mỗi tab
?>
- Tab 1
- Tab 2
- Tab 3
Trong đoạn mã ở trên, chúng tôi đã tạo một plugin và sau đó bên trong plugin đó, chúng tôi đã tạo một widget. Trong phần đầu ra của widget, chúng ta thêm các script và stylesheet và sau đó chúng ta tạo ra đầu ra HTML cho các tab của chúng ta. Cuối cùng chúng tôi đã đăng ký các widget. Hãy nhớ rằng, bạn cần thêm nội dung mà bạn muốn hiển thị trên mỗi tab.
Bây giờ chúng ta đã tạo widget với mã PHP và HTML cần thiết cho các tab của chúng ta, bước tiếp theo là thêm jQuery để hiển thị chúng như các tab trong vùng chứa tab. Để làm điều đó bạn cần sao chép và dán mã này vào wp-tabber.js tập tin.
(hàm số ($) {
$ (". tab_content"). hide ();
$ ("ul.tabs li: first") addClass ("active") hiển thị ();
$ ("tab_content: first") hiển thị ();
$ ("ul.tabs li"). Nhấp chuột (function () {
$ ("ul.tabs li"). removeClass ("hoạt động");
$ (this) .addClass ("active");
$ (". tab_content"). hide ();
var activeTab = $ (this) .find ("a"). attr ("href");
// $ (activeTab) .fadeIn ();
if ($ .browser.msie) {$ (activeTab) .show ();}
else {$ (activeTab) .fadeIn ();}
trả lại giả;
});
}) (jQuery);
Bây giờ widget của chúng tôi đã sẵn sàng với jQuery, bước cuối cùng là thêm kiểu dáng vào các tab. Chúng tôi đã tạo một bảng định kiểu mẫu mà bạn có thể sao chép và dán vào wpb-tabber-style.css tập tin:
ul.tabs {
vị trí: tương đối;
z-index: 1000;
phao: trái;
border-left: 1px solid # C3D4EA;
}
ul.tabs li {
vị trí: tương đối;
tràn: ẩn;
chiều cao: 26px;
phao: trái;
lề: 0;
đệm: 0;
chiều cao dòng: 26px;
màu nền: # 99B2B7;
biên giới: 1px rắn # C3D4EA;
border-left: không có;
}
ul.tabs li a {
hiển thị: khối;
đệm: 0 10px;
phác thảo: không có;
văn bản-trang trí: không có;
}
html ul.tabs li.active,
html ul.tabs li.active a: hover {
màu nền: # D5DED9;
đường viền dưới cùng: 1px solid # D5DED9;
}
.widget-area .widget .tabs a {
màu sắc: #FFFFFF;
}
.tab_container {
vị trí: tương đối;
trên cùng: -1px;
z-index: 999;
Chiều rộng: 100%;
phao: trái;
kích cỡ phông chữ: 11px;
màu nền: # D5DED9;
biên giới: 1px rắn # C3D4EA;
}
.tab_content {
padding: 7px 11px 11px 11px;
chiều cao đường dây: 1,5;
}
.tab_content ul {
lề: 0;
đệm: 0;
danh sách-phong cách: không có;
}
.tab_content li {
lề: 3px 0;
}
.tab-rõ ràng {
rõ ràng: cả hai;
}
địa điểm
địa điểm
Chúng tôi hy vọng rằng hướng dẫn này đã giúp bạn tạo một tabber jQuery cho trang WordPress của bạn. Đối với các câu hỏi và phản hồi, bạn có thể để lại nhận xét dưới đây hoặc tham gia với chúng tôi trên Twitter hoặc Google+.