Simple Tabs Shortcodes

Opis

Wtyczka dodaje kody skrótowe do umieszczania zawartości strony w zakładkach. Używa lekki skrypt jQuery, 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.

Instalacja

W większości przypadków można zainstalować automatycznie ze strony wtyczek w panelu administracyjnym.

Jeśli jednak chcesz zainstalować ją ręcznie, wykonaj następujące czynności:

  1. Pobierz wtyczkę i rozpakuj archiwum.
  2. Prześlij cały folder simple-tabs-shortcodes do katalogu /wp-content/plugins/.
  3. Aktywuj wtyczkę poprzez menu Wtyczki w WordPress.

FAQ

Przykładowe użycie

Dostępne są dwa kody skrótowe, poniżej znajduje się ich prosty przykład użycia:

[tabs]
[tab title="First tab"]The content of the first tab.[/tab]
[tab title="Second tab"]The content of the second  tab.[/tab]
[tab title="Third tab"]The content of the third tab.[/tab]
[/tabs]

Wyświetli to następujący kod HTML:

<div class="tabs-container">
    <div class="tabs-nav">
        <ul>
            <li><a href="#first-tab" class="active">First tab</a></li>
            <li><a href="#second-tab">Second tab</a></li>
            <li><a href="#third-tab">Third tab</a></li>
        </ul>
    </div>
    <div class="tabs-content">
        <section id="first-tab" class="tab active">The content of the first tab.</section>
        <section id="second-tab" class="tab">The content of the second tab.</section>
        <section id="third-tab" class="tab">The content of the third tab.</section>
    </div>
</div>

Opcjonalnie można ustawić niestandardowy identyfikator poprzez dodanie id="my-id" w kodzie skrótowym.

Przykładowy CSS

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;}
Wybieranie zakładki przez URL

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

Przełączanie do zakładki poprzez link

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="#something">Something</a>

Recenzje

Przeczytaj 3 recenzje

Kontrybutorzy i deweloperzy

„Simple Tabs Shortcodes” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki.

Zaangażowani

Wtyczka “Simple Tabs Shortcodes” została przetłumaczona na 1 język. Podziękuj tłumaczom za ich wkład.

Przetłumacz wtyczkę “Simple Tabs Shortcodes” na swój język.

Interesuje cię rozwój wtyczki?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Log zmian

1.1.2 (2018-12-13)

  • Drobne poprawki.

1.1 (2017-12-07)

  • Zmieniono nazwę klasy tab-content na tabs-content.

1.0.2 (2017-02-10)

  • Zmiany w strukturze nawigacji zakładek.

1.0 (2017-02-09)

  • Pierwsza publiczna wersja.