Wtyczka dodaje kody skrótowe do umieszczania zawartości strony w zakładkach. Używa lekki skrypt JS, brak dodatkowych plików CSS, więc trzeba dodać własny styl CSS do arkusza stylów motywu, aby zapewnić prawidłowe wyświetlanie zakładek.
Dostępne są dwa kody skrótowe, poniżej znajduje się ich prosty przykład użycia:
[tabs]
[tab title="Pierwsza zakładka"]Zawartość pierwszej zakładki.[/tab]
[tab title="Druga zakładka"]Zawartość drugiej zakładki.[/tab]
[tab title="Trzecia zakładka"]Zawartość trzeciej zakładki.[/tab]
[/tabs]Wyświetli to następujący kod HTML:
<div class="tabs-container">
<div class="tabs-nav">
<ul>
<li><a href="#pierwsza-zakładka" class="active">Pierwsza zakładka</a></li>
<li><a href="#druga-zakładka">Druga zakładka</a></li>
<li><a href="#trzecia-zakładka">Trzecia zakładka</a></li>
</ul>
</div>
<div class="tabs-content">
<section id="pierwsza-zakładka" class="tab active">Zawartość pierwszej zakładki.</section>
<section id="druga-zakładka" class="tab">Zawartość drugiej zakładki.</section>
<section id="trzecia-zakładka" class="tab">Zawartość trzeciej zakładki.</section>
</div>
</div>Opcjonalnie można ustawić niestandardowy identyfikator poprzez dodanie id="my-id" w kodzie skrótowym.
Simple Tabs Shortcodes
Oto przykładowy CSS, dokonaj niezbędnych zmian jeżeli chcesz dostosować wygląd i działanie zakładek.
.tabs-nav {
margin: 0;
border-bottom: 1px solid #ccc;
}
.tabs-nav ul {
list-style: none;
}
.tabs-nav li {display: inline-block;}
.tabs-nav a {
display: block;
padding: 5px 10px;
border: 1px solid transparent;
text-decoration: none;
}
.tabs-nav a.active {
border-color: #ccc;
border-bottom-color: #fff;
}
section.tab {
display: none;
margin-bottom: 15px;
padding: 15px 0;
}
section.tab.active {display: block;}Można wybrać domyślną zakładkę za pomocą hasha w adresie URL – wystarczy dodać #nazwa-zakładki na końcu adresu URL strony, aby wybrać konkretną zakładkę. Ten przykładowy adres URL wybierze zakładkę z tytułem / identyfikatorem „cośtam”: http://domain.tld/your-page/#cośtam.
Zakładki mogą być przełączane za pomocą zwykłego łącza, wystarczy dodać klasę tab-url do łącza. Przykład:
<a class="tab-url" href="#coś-tam">Coś tam</a>