Czy widziałeś obszar zakładek na popularnych stronach, który pozwala zobaczyć popularne, najnowsze i polecane posty jednym kliknięciem? 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 zakładek jQuery?
Prowadząc stronę WordPress, możesz łatwo dodawać elementy do swoich pasków bocznych za pomocą widżetów typu przeciągnij i upuść. W miarę rozwoju Twojej strony możesz poczuć, że nie masz wystarczająco dużo miejsca w pasku bocznym, aby wyświetlić wszystkie przydatne treści. Właśnie wtedy przydaje się zakładka. Pozwala ona na wyświetlanie różnych elementów w tym samym obszarze. Użytkownicy mogą klikać na każdą zakładkę i widzieć treści, które ich najbardziej interesują. Wiele znanych stron używa jej do wyświetlania popularnych artykułów dnia, tygodnia i miesiąca. W tym samouczku pokażemy Ci, jak stworzyć widżet zakładkowy. Nie pokażemy jednak, co dodać do zakładek. Możesz dodać praktycznie wszystko, co chcesz.
Uwaga: ten samouczek jest przeznaczony dla użytkowników na poziomie średnio zaawansowanym i wymaga znajomości HTML i CSS. Użytkownikom początkującym zalecamy zamiast tego zapoznanie się z tym artykułem.
Tworzenie widżetu zakładkowego jQuery w WordPress
Zacznijmy. Pierwszą rzeczą, którą musisz zrobić, jest utworzenie folderu na pulpicie i nazwanie go wpbeginner-tabber-widget. Następnie musisz utworzyć trzy pliki w tym folderze, używając prostego edytora tekstu, takiego jak Notatnik.
Pierwszym plikiem, który utworzymy, jest wpb-tabber-widget.php. Będzie on zawierał kod HTML i PHP do tworzenia zakładek i niestandardowego widżetu WordPress. Drugim plikiem, który utworzymy, jest wpb-tabber-style.css, a będzie on zawierał style CSS dla kontenera zakładek. Trzecim i ostatnim plikiem, który utworzymy, jest wpb-tabber.js, który będzie zawierał skrypt jQuery do przełączania zakładek i dodawania animacji.
Zacznijmy od pliku wpb-tabber-widget.php. Celem tego pliku jest utworzenie wtyczki, która rejestruje widżet. Jeśli tworzysz widżet WordPress po raz pierwszy, zalecamy zapoznanie się z naszym przewodnikiem, jak utworzyć niestandardowy widżet WordPress lub po prostu skopiuj i wklej ten kod do pliku wpb-tabber-widget.php:
<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/
// creating a widget
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 sidebar output
function wpb_tabber() {
// Now we enqueue our stylesheet and jQuery script
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');
// Creating tabs you will be adding you own code inside each 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
// Enter code for tab 1 here.
?>
</div>
<div id="tab2" class="tab_content" style="display:none;">
<?php
// Enter code for tab 2 here.
?>
</div>
<div id="tab3" class="tab_content" style="display:none;">
<?php
// Enter code for tab 3 here.
?>
</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;
}
}
// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>
W powyższym kodzie najpierw utworzyliśmy wtyczkę, a następnie wewnątrz tej wtyczki utworzyliśmy widżet. W sekcji wyjściowej widżetu dodaliśmy skrypty i arkusz stylów, a następnie wygenerowaliśmy wyjście HTML dla naszych zakładek. Na koniec zarejestrowaliśmy widżet. Pamiętaj, że musisz dodać zawartość, którą chcesz wyświetlić w każdej zakładce.
Teraz, gdy stworzyliśmy widżet z kodem PHP i HTML potrzebnym do naszych zakładek, następnym krokiem jest dodanie jQuery, aby wyświetlić je jako zakładki w kontenerze zakładek. Aby to zrobić, musisz skopiować i wkleić ten kod do pliku 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);
Teraz nasz widget jest gotowy z jQuery, ostatnim krokiem jest dodanie stylów do zakładek. Przygotowaliśmy przykładowy arkusz stylów, który możesz skopiować i wkleić do pliku 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;
}
To wszystko. Teraz wystarczy przesłać folder wpbeginner-tabber-widget do katalogu /wp-content/plugins/ Twojej witryny WordPress za pomocą FTP. Alternatywnie, możesz również dodać folder do archiwum zip i przejść do sekcji Wtyczki » Dodaj nową w obszarze administracyjnym WordPress. Kliknij zakładkę przesyłania, aby zainstalować wtyczkę. Po aktywacji wtyczki przejdź do sekcji Wygląd » Widżety, przeciągnij i upuść widżet zakładek WPBeginner na swój pasek boczny i to wszystko.
Mamy nadzieję, że ten samouczek pomógł Ci stworzyć zakładki 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+.
Nitish Chauhan
Cześć,
Mój plugin jest aktywowany, ale w sekcji widżetów wyświetla się komunikat „Nie ma opcji dla tego widżetu”. Proszę, powiedz mi, jak aktywować wszystkie funkcje i chcę stworzyć plugin taki jak
„jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); //Fields wrapper
var add_button = jQuery(“.add_field_button”); //Add button ID
//początkowa liczba pól tekstowych
jQuery(add_button).click(function(e){ //po kliknięciu przycisku dodaj pole
e.preventDefault();
//maksymalna liczba pól tekstowych dozwolona
//inkrementacja pola tekstowego
jQuery(wrapper).prepend(‘×’); //dodaj pole tekstowe
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ //użytkownik klika usuń pole tekstowe
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});”
Mój kod w języku Java Script. Proszę o sugestie, jeśli macie jakieś rozwiązanie.
Dzięki
Nabam Rikam
Wstawiłem wtyczki na pasek boczny, ale gdy próbuję kliknąć, pojawia się komunikat, że nie ma opcji dla tej wtyczki. A po wyświetleniu jej na stronie internetowej widzimy trzy puste zakładki. Poprowadź mnie trochę, bracie.
goutham
Nie otrzymuję zakładek ani widżetów na mojej stronie. Skopiowałem i wkleiłem ten sam kod. To nie działa.
Kunle
Chcę umieścić właśnie utworzony plugin w konkretnym miejscu na mojej stronie, a nie w paskach bocznych ani w stopce.
Jak to zrobić, aby umieścić go w dowolnym miejscu mojej strony internetowej?
Zadius
To jest drugi tutorial, który próbowałem i z jakiegoś powodu plik wtyczki nie pojawia się w katalogu wtyczek na mojej stronie. Przesyłam plik bezpośrednio przez FTP, ale kiedy loguję się do mojego obszaru administracyjnego WordPress, nic nie pojawia się w zakładce wtyczek. Proszę o poradę. Dziękuję.
Aktualizacja: Spakowałem plik do ZIP i przesłałem go za pomocą interfejsu wtyczki WordPress. Plik nie pojawia się w moim folderze wtyczki w moim interfejsie FTP, więc nie mam pojęcia, gdzie się pojawia. Ale udało mi się go zainstalować, więc dzięki!
Jan
Dziękuję za samouczek. Zauważyłem jednak, że tytuł brakuje po dodaniu widgetu do obszaru widgetów. Jak mogę dodać pole tytułu, aby wpisać tytuł?
Drazen
Hej
Dzięki za to. Zastanawiałem się tylko, jak dodać opcję, aby podczas przeglądania widżetu móc po prostu wklejać linki w każdym zakładce?
Na przykład:
Zakładka 1 (opcja zmiany nazwy w opcjach widżetu)
– Pole tekstowe poniżej w opcjach widżetu (aby można było dodawać tekst, linki itp.)
Zakładka 2 (opcja zmiany nazwy w opcjach widżetu)
– Pole tekstowe poniżej w opcjach widżetu (aby można było dodawać tekst, linki itp.)
Zakładka 3 (opcja zmiany nazwy w opcjach widżetu)
– Pole tekstowe poniżej w opcjach widżetu (aby można było dodawać tekst, linki itp.)
Dzięki
Gavin Wilshen
Świetny samouczek. Dzięki chłopaki!
Grant
Ciągle pojawia się ten błąd:
Nie można aktywować wtyczki, ponieważ spowodowała ona krytyczny błąd.
Parse error: syntax error, unexpected T_NS_SEPARATOR, expecting T_STRING in /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php on line 16
Wsparcie WPBeginner
Grant, właśnie ponownie sprawdziliśmy kod. Wtyczka aktywowała się u nas bez problemu.
Admin
Rahul
Dzięki, jesteś geniuszem. Właśnie miałem kupić płatny plugin z CodeCanyon, a potem znalazłem ten poradnik.
Jonathan
Dlaczego po zainstalowaniu tej wtyczki pojawia się komunikat o potrzebie aktualizacji, a aktualizacja pochodzi od innego dewelopera i ma ponad 3 lata?
Wsparcie WPBeginner
Nie powinno tak być. Jeśli zmieniłeś nazwę wtyczki i pasuje ona do innej wtyczki, WordPress pomyli ją z tą inną wtyczką.
Admin
Jonathan
Nic nie zmieniałem; zrobiłem dokładnie to, co pokazałeś powyżej.
Jonathan
To jest wtyczka, którą WordPress uważa, że jest & próbuje ją zaktualizować. http://wordpress.org/plugins/tabber-widget/
Właśnie zaktualizowałem wtyczkę do wersji 2.0 & to (z jakiegoś powodu) sprawiło, że przestała prosić o aktualizację do innej wtyczki. Próbowałem zmienić nazwę & zmienić informacje o innej wtyczce, ale to było jedyne, co wydawało się działać.
Wsparcie WPBeginner
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+
so its bed to clear the confusion.
Wsparcie WPBeginner
Nie udało nam się tego odtworzyć. Czy masz dostęp do innej witryny WordPress, na której możesz to przetestować, aby sprawdzić, czy po Twojej stronie nie ma żadnych problemów?
Doris
Czy to nie zaprzecza idei dynamicznego działania WordPressa? Kodowanie tekstu na stałe w widżecie? Czy istnieje sposób na pobieranie dynamicznych treści z bazy danych? My, nowicjusze, nie mamy zbyt dużego doświadczenia w kodowaniu... Można by pomyśleć, że istnieje wtyczka, która to robi...
Wsparcie WPBeginner
Ten samouczek jest przeznaczony dla użytkowników średniozaawansowanych, a jego celem jest pokazanie im, jak stworzyć widżet zakładek. Dla początkujących istnieje kilka wbudowanych tagów szablonów, które mogą dynamicznie generować zawartość w każdej zakładce. Na przykład:
Wyświetl listę swoich stron WordPress:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Pokaż losowe posty:
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul>1-click Use in WordPress
Pokaż ostatnie komentarze:
1-click Use in WordPress
I wiele więcej.
Admin
manoj sakhwar
Świetny artykuł. dzięki...
Grant
Nie rozumiem, gdzie wkleić kod. W jakim typie dokumentu umieścić kod? (Mam Maca).
Wsparcie WPBeginner
Użyj TextEdit do utworzenia tych plików.
Admin
Keith Davis
Uwielbiam ten, chłopaki.
Zawsze szukam sposobów na lepsze wykorzystanie ograniczonej przestrzeni.
Jim Davis
Zainstalowałem pliki i aktywowałem widżet. Wyświetla się zgodnie z oczekiwaniami, jednak kliknięcie zakładek Tab 2 i Tab 3 nie zmienia zawartości. Zawartość pozostaje taka sama jak pod zakładką Tab 1. Czy coś przeoczyłem? Zobacz moją stronę testową pod adresem http://jimdavis.org/blog/
Jim
Wsparcie WPBeginner
Jim, niczego nie przegapiłeś. To jest przykładowy widżet i możesz go edytować. Wprowadź własny kod i zawartość w każdej karcie, edytując plik wtyczki wpb-tabber-widget.php
Admin