Czy widziałeś obszar tabbera w popularnych witrynach, który pozwala zobaczyć popularne, najnowsze i Polecane posty za pomocą jednego kliknięcia? Nazywa się to widżetem jQuery tabber i pozwala zaoszczędzić miejsce na ekranie użytkownika, łącząc różne widżety w jeden. W tym artykule pokażemy, jak dodać widżet jQuery Tabber w WordPress.
Dlaczego warto dodać widżet jQuery Tabber?
Podczas uruchamiania witryny WordPress możesz łatwo dodawać elementy do pasków bocznych za pomocą widżetów przeciągnij i upuść. W miarę rozwoju witryny możesz czuć, że nie masz wystarczająco dużo miejsca na pasku bocznym, aby wyświetlić wszystkie przydatne treści. Właśnie wtedy przydaje się tabber. Umożliwia wyświetlanie różnych elementów w tym samym obszarze. Użytkownicy mogą kliknąć każdą kartę i zobaczyć zawartość, którą są najbardziej zainteresowani. Wiele dużych witryn z nazwiskami używa go, aby pokazać popularny artykuł dzisiaj, w tym tygodniu i w tym miesiącu. W tym samouczku pokażemy, jak utworzyć widżet tabber. Nie pokazujemy jednak, co dodać w zakładkach. Możesz dodać w zasadzie wszystko, co chcesz.
Uwaga: ten poradnik jest dla użytkowników na poziomie średniozaawansowanym i wymaga znajomości HTML i CSS. Dla użytkowników poziomu początkującego zapoznaj się z tym artykułem.
Tworzenie widżetu jQuery Tabber w WordPress
Zaczynajmy. Pierwszą rzeczą, którą musisz zrobić, to utworzyć folder na pulpicie i nadać mu nazwę wpbeginner-tabber-widget. Następnie musisz utworzyć trzy pliki w tym folderze za pomocą zwykłego edytora tekstu, takiego jak Notatnik.
Pierwszy plik, który stworzymy, to wpb-tabber-widget.php. Będzie zawierał kod HTML i PHP do tworzenia kart i niestandardowego widżetu WordPress. Drugi plik, który utworzymy, to wpb-tabber-style.css i będzie zawierać stylizację CSS dla kontenera tabs. Trzeci i ostatni plik, który stworzymy, to wpb-tabber.js, który będzie zawierał skrypt jQuery do przełączania kart i dodawania animacji.
Zacznijmy od wpb-tabber-widget.php plik. Celem tego pliku jest stworzenie wtyczki, która rejestruje widżet. Jeśli po raz pierwszy tworzysz widżet WordPress, zalecamy zapoznanie się z naszym poradnikiem jak stworzyć niestandardowy przewodnik po widżetach WordPress lub po prostu skopiuj i wklej ten kod wpb-tabber-widget.php plik:
<?php
/ * Nazwa wtyczki: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Opis: prosty widżet jQuery tabber.
Wersja: 1.0
Autor: WPBeginner
Autor URI: https://www.wpbeginner.com
Licencja: GPL2
*/
// tworzenie widżetu
class WPBTabberWidget extends 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) {//widget wyjście paska bocznego
function wpb_tabber () {
// Teraz pytamy o nasz arkusz stylów i skrypt 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');
// Tworząc zakładki dodasz własny kod wewnątrz każdej zakładki
?>
< 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
// Wpisz tutaj kod do zakładki 1.
?>
< / div>
< div id = "tab2" class = "tab_content" style = " display: none;">
<?php
// Wpisz tutaj kod do zakładki 2.
?>
< / div>
< div id = "tab3" class = "tab_content" style = " display: none;">
<?php
// Wpisz tutaj kod do zakładki 3.
?>
< / div>
< / div>
<div class = "tab-clear" > < / div>
<?php
}
extract ($args, EXTR_SKIP) ;
// Pre-widget code from theme
echo $before_widget;
$tabs = wpb_tabber();
// output tabs HTML
echo $tabs;
// post-widget code from theme
echo $after_widget;
}
}
// rejestracja i ładowanie widżetu
add_action(
"widgets_init",
create_function ( " , ' return register_widget ("WPBTabberWidget");')
);
?>
W powyższym kodzie najpierw stworzyliśmy wtyczkę, a następnie wewnątrz tej wtyczki stworzyliśmy widżet. W sekcji wyjście widżetu dodaliśmy skrypty i arkusz stylów, a następnie wygenerowaliśmy wyjście HTML dla naszych kart. Wreszcie zarejestrowaliśmy widget. Pamiętaj, że musisz dodać zawartość, którą chcesz wyświetlić na każdej karcie.
Teraz, gdy stworzyliśmy widżet z kodem PHP i HTML potrzebnym do naszych kart, następnym krokiem jest dodanie jQuery, aby wyświetlić je jako karty w kontenerze kart. Aby to zrobić musisz skopiować i wkleić ten kod w wp-tabber.js plik.
(function ($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass ("aktywny").show();
$(".tab_content: first").show();
$("ul.tabs li").click (function () {
$("ul.tabs li").removeClass ("aktywny");
$(this).addClass ("aktywny");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr ("href");
// $(activeTab).fadeIn ();
if ($.przeglądarka.msie) {$(activeTab).show ();}
else {$(activeTab).fadeIn ();}
return false;
});
}) (jQuery);
Teraz nasz widget jest gotowy z jQuery, ostatnim krokiem jest dodanie stylizacji do kart. Stworzyliśmy przykładowy arkusz stylów, który możesz skopiować i wkleić wpb-tabber-style.css plik:
ul.tabs {
pozycja: względna;
z-index: 1000;
float: left;
border-left: 1px solid #c3d4ea;
}
ul.tabs li {
pozycja: względna;
przepełnienie: Ukryte;
wysokość: 26px;
float: left;
margin: 0;
padding: 0;
/ width = 26px / ;
background-color: #99B2B7;
border: 1px solid #c3d4ea;
border-left: none;
}
ul.tabs li a{
wyświetlacz: blok;
padding: 0 10px;
zarys: brak;
tekst-Dekoracja: Brak;
}
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 {
pozycja: względna;
top: - 1px;
z-index: 999;
Szerokość: 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;
styl listy: brak;
}
.tab_content li {
margin: 3px 0;
}
.tab-clear {
clear: zarówno;
}
To wszystko. Teraz wystarczy przesłać wpbeginner-tabber-widget folder do twojej witryny WordPress / wp-content / wtyczki/ Katalog przez FTP. Alternatywnie możesz również dodać folder do archiwum zip i przejść do Wtyczki ” Dodaj Nowy w obszarze administracyjnym WordPress. Kliknij kartę przesyłania, aby zainstalować wtyczkę. Po aktywacji wtyczki przejdź do Wygląd ” Widgety, przeciągnij i upuść WPBeginner Tabber Widget na pasku bocznym i to wszystko.
Mamy nadzieję, że ten samouczek pomógł Ci stworzyć tabber jQuery dla Twojej witryny WordPress. W przypadku pytań i opinii możesz zostawić komentarz poniżej lub dołączyć do nas na Twitterze lub Google+.
