Jeśli prowadzisz bloga, stronę firmową albo rozbudowany serwis contentowy na WordPressie, prędzej czy później trafisz na temat kotwic (anchor links). I bardzo dobrze – bo kotwice to jedno z ciekawszych narzędzi poprawiających użyteczność strony i komfort czytania. Najczęściej spotykanym przykładem użycia kotwicy, jest funkcja, która pozwala przewinąć jednym kliknięciem w górę strony, gdy jesteś na jej samym dole. Dzięki temu nie trzeba tracić czasu na przewijanie rolką myszy lub przesuwaniem suwakiem, gdy strona ma dużo treści.
W tym poradniku pokażę Ci krok po kroku, jak zrobić kotwicę w WordPressie – w samym edytorze tego CMSa, bez potrzeby kodowanie tego w źródle strony (choć przykład jak to zrobić w HTML, też Ci zademonstruje).
Co to jest kotwica na stronie?
Kotwica (anchor link) to link, który nie przenosi użytkownika na inną stronę, tylko do konkretnego miejsca na tej samej stronie (albo do konkretnej sekcji na innej stronie).
Przykład:
W górze strony tworzysz kategorie lub działy. Po kliknięciu w konkretną kategorię (ma ona postać zwykłego linku), przenosi Cię w dół tej samej strony, ale tam gdzie dana kategoria się zaczyna.
Dzięki temu nie ma potrzeby przewijania ręcznie strony, tylko można zrobić to jednym kliknięciem.
↓↓ Przykładowa kotwica, która przeniesie Cię na sam dół tej strony ↓↓
A tu wróciłeś z dołu strony.
Jak to zrobić w edytorze WordPress?
Jeśli korzystasz z WordPressa w wersji 5.0+, prawdopodobnie używasz edytora blokowego Gutenberg. Dobra wiadomość: kotwice robi się tu banalnie prosto.
Krok 1
Wybierz element docelowy (tekst) na stronie. W naszym przykładzie będzie to tekst „Dół strony” (dla wyrazistości przykładu dałem ten tekst na czerwono), który jak sama nazwa wskazuje jest na samym dole strony. Zaznaczasz ten tekst i z prawej strony klikasz Zaawansowane i w okienku KOTWICA HTML wpisujesz DolStrony (ważne żeby było bez spacji i najlepiej bez polskich czcionek).
Krok 2
Teraz jak już zakotwiczyłeś dany fragment tekstu, możesz dać linka (kotwice) do tego elementu i tym samym do tego miejsca na stronie internetowej. Robisz to jakbyś po prostu dodawał zwykły link. Zaznaczasz tekst i klikasz dodaj odnośnik. Tylko w okienku odnośnik (tam gdzie się zawsze wkleja adres URL jakieś strony) wpisujesz nazwę kotwicy, którą ustawiłeś w pierwszym kroku. Z tym że przed nazwą dodajesz znak # (hash).
#DolStrony
Gotowe. Teraz klikając w tekst na górze zostaniesz przeniesiony w dół strony. Co pokazałem na przykładzie w tym artykule.
Jeszcze warto wspomnieć, jak to można zrobić w HTMLu, gdy Twoja strona nie jest oparta na WordPressie.
Dodaj ID do nagłówka lub innego elementu:
<h2 id="oferta">Nasza oferta</h2>
A następnie utwórz link do kotwicy w linku:
<a href="#oferta">Przejdź do oferty</a>
Tylko oczywiście ta metoda wymaga minimalnej znajomości HTML, natomiast ta w WordPress jest na pewno prostsza.
Dół strony
↑↑ A teraz wróć do czytania na górę ↑↑