Cách thêm tiện ích jQuery Tabber trong WordPress

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.

Other :

A jQuery powered tabber widget in 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 con 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 họ quan tâm nhất. Rất nhiều trang web tên tuổi sử dụng nó để 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 dùng mới bắt đầu, vui lòng tham khảo bài viết này để thay thế.

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 mà 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

<? php / * Tên plugin: WPBeginner jQuery Tabber Widget URI: https://www.wpbeginner.com Mô tả: Một tiện ích tabber jquery đơn giản. Phiên bản: 1.0 Tác giả: WPBeginner Tác giả URI: https://www.wpbeginner.com Giấy phép: GPL2 * / // tạo một lớp tiện ích WPBTabberWidget mở rộng WP_Widget {function WPBTabberWidget () {$ widget_ops = array ('classname' => 'WPBTabberWidget ',' description '=>' Simple jQuery Tabber Widget '); $ this-> WP_Widget ('WPBTabberWidget', 'WPBeginner Tabber Widget', $ widget_ops); } function widget ($ args, $ instance) {// chức năng đầu ra của widget sidebar wpb_tabber () {// Bây giờ chúng ta sắp xếp biểu định kiểu và tập lệnh 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__), array ('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 vào bên trong mỗi tab?> <Ul class = "tabs"> <li class = "active"> <a href="#tab1"> Tab 1 </a> </ li > <li> <a href="#tab2"> Tab 2 </a> </li> <li> <a href="#tab3"> Tab 3 </a> </li> </ul> < div class = "tab_container"> <div id = "tab1" class = "tab_content"> <? php // Nhập mã cho tab 1 tại đây. ?> </div> <div id = "tab2" class = "tab_content" style = "display: none;"> <? php // Nhập mã cho tab 2 tại đây. ?> </div> <div id = "tab3" class = "tab_content" style = "display: none;"> <? php // Nhập mã cho tab 3 tại đây. ?> </div> </div> <div class = "tab-clear"> </div> <? php} trích xuất ($ args, EXTR_SKIP);// mã tiện ích trước từ theme echo $ before_widget; $ tabs = wpb_tabber (); // xuất các tab HTML echo $ tab; // mã post-widget từ theme echo $ after_widget; }} // đăng ký và tải widget add_action ('widgets_init', create_ functions ('', 'return register_widget ("WPBTabberWidget");')); ?>

Trong đoạn mã trên, đầu tiên chúng ta tạo một plugin và sau đó bên trong plugin đó, chúng ta tạo một widget. Trong phần đầu ra tiện ích con, chúng tôi đã thêm tập lệnh và biểu định kiểu, sau đó chúng tôi tạo đầu ra HTML cho các tab của mình. Cuối cùng chúng tôi đã đăng ký 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 tiện ích con với mã PHP và HTML cần thiết cho các tab của mình, bước tiếp theo là thêm jQuery để hiển thị chúng dưới dạng 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 tệp wp-tabber.js

(function($)  {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Bây giờ widget của chúng ta đã sẵn sàng với jQuery, bước cuối cùng là thêm kiểu cho các tab. Chúng tôi đã tạo một biểu định kiểu mẫu mà bạn có thể sao chép và dán vào tệp wpb-tabber-style.css


ul.tabs { 
position: relative; 
z-index: 1000; 
float: left; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: left; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
html ul.tabs li.active, 
html ul.tabs li.active a:hover { 
background-color: #D5DED9; 
border-bottom: 1px solid #D5DED9; 
}
.widget-area .widget .tabs a  { 
color: #FFFFFF; 
}
.tab_container {
position: relative; 
top: -1px; 
z-index: 999; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

Đó là tất cả. Bây giờ chỉ cần tải wpbeginner-tabber-widget /wp-content/plugins/ của trang web WordPress của bạn thông qua FTP. Ngoài ra, bạn cũng có thể thêm thư mục vào một kho lưu trữ zip và đi tới Plugin »Add New trong khu vực quản trị WordPress của bạn. Nhấp vào tab tải lên để cài đặt plugin. Khi plugin được kích hoạt, hãy chuyển đến Appearance »Widgets , kéo và thả WPBeginner Tabber Widget vào thanh bên của bạn và thế là xong.

Drag and drop WPBeginner Tabber Widget into your Sidebar

Chúng tôi hy vọng rằng hướng dẫn này đã giúp bạn tạo tabber jQuery cho trang web WordPress của mình. Đối với các câu hỏi và phản hồi, bạn có thể để lại bình luận bên dưới hoặc tham gia với chúng tôi trên Twitter hoặc Google+.

Free Download Cách thêm tiện ích jQuery Tabber trong WordPress :


Nếu bạn muốn phiên bản mới nhất hoặc bản sạch, vui lòng liên hệ qua messenger tại đây : m.me/101324895411988

If you want the lastest version or original,please contact via messenger

Ủng hộ tôi qua MOMO

Ủng Hộ TÔi

Decryption key :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Download Instructions

Join our official telegram group and channel for latest updates.

Để lại một bình luận

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

© 2021 All Rights Reserved | Shared by Tainguyenwordpress