Wtyczka nie została przetestowana z trzema ostatnimi głównymi wydaniami WordPressa. Może nie być już utrzymywana lub obsługiwana, co może skutkować problemem ze zgodnością z nowszymi wersjami WordPressa.

Simple Tabs Shortcodes

Opis

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.

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. Włącz wtyczkę z menu „Wtyczki” w WordPressie.

Najczęściej zadawane pytania

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 4 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 2 języki. Podziękuj tłumaczom za ich wkład.

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

Interesuje cię rozwój wtyczki?

Przeglądaj kod, sprawdź repozytorium SVN lub czytaj dziennik rozwoju przez RSS.

Rejestr zmian

1.3 (2020-04-08)

  • Czysty JavaScript zamiast jQuery.

1.2. (2018-08-12)

  • Obsługa niełacińskich adresów URL.

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.