Jak stworzyć spis treści pozwalający na nawigację po długim tekście?
- Poziom trudności:
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
To nieprawda, że tylko krótkie teksty są czytane w sieci. Długi wpis, wyczerpujący temat może mieć podobne wzięcie, o ile będzie napisany w sposób przejrzysty oraz opakowany w sprytne sposoby nawigacji po najważniejszych jego częściach. Spis treści na początku wpisu będzie ukłonem w kierunku Twoich czytelników i może sprawić, że w szybki sposób znajdą oni to, czego w tekście poszukują. W poniższym wpisie dowiesz się w jaki sposób dodać taki spis treści i jak dodatkowo uatrakcyjnić nawigację poprzez płynne przewijanie treści.
Przez spis treści mam na myśli taki element:
Czego dowiesz się z tego wpisu?
– poznasz sposób w jaki możesz dodawać kotwice przenoszące Cię do innej części wpisu
– dowiesz się z jakiej wtyczki skorzystać aby łatwiej dodawać kotwice?
– poznasz sposób na płynne przesuwanie ekranu po kliknięciu na kotwicę
Śmiało, kliknij na pierwszy link w ramce i sprawdź co się stanie.
Krok 1: Dodaj spis treści i pierwszą kotwicę
Dodawanie spisu treści
Spis treści jest w rzeczywistości listą odnośników, która zamiast kierować do innych zakładek w serwisie lub zewnętrznych stron, kieruje do tej samej strony na której się znajduje. Adres URL takiego odnośnika ma postać:
twojastronainternetowa.pl/tytul-dlugiego-wpisu/#moja-pierwsza-kotwica
Aby przekierowanie zadziałało strona ze spisem treści musi być opublikowana. Link możesz dodać dokładnie tak samo jak dodajesz odnośniki w tekście wewnątrz edytora wizualnego. Jedyne o czym musisz pamiętać to umieszczenie po adresie URL nazwy kotwicy, którą użyjesz w innym miejscu Twojej podstrony. Pamiętaj, że kotwica powinna mieć nazwę bez spacji i polskich znaków. Nazwą kotwicy według powyższego przykładu jest „moja-pierwsza-kotwica”. Poniżej znajdziesz przykład pokazujący jak dokładnie taką nazwę wprowadzić:
W razie wątpliwości zobacz wpis „Jak dodać odnośnik w treści w edytorze wizualnym WordPress?”
Umieszczanie kotwicy
Skoro przygotowałeś już listę będącą Twoim spisem treści i nazwałeś wszystkie kotwice, możesz teraz przejść do umieszczenia ich w tekście, w miejscach do których chcesz się odwoływać. Aby to zrobić przejdź stosownego fragmentu tekstu, gdzie chcesz dodać pierwszą kotwicę, a następnie zmień edytor z wizualnego na tekstowy i wpisz we właściwym miejscu:
<a name="moja-pierwsza-kotwica"></a>
W razie wątpliwości sprawdź poniższy przykład:
Nazwa kotwicy musi być taka sama jak nazwa użyta w odnośniku ale bez hashtaga na początku. Jeśli nie zrobisz żadnej literówki, odnośnik po kliknięciu przeniesie Cię we wskazane miejsce. Dzięki temu osiągniesz zamierzony efekt.
Krok 2: Dodawanie kotwic na skróty
W repozytorium wtyczek WordPressa są dostępne dwa interesujące pluginy, które pozwalają na usprawnienie dodawania kotwic.
Jeśli zamierzasz dodawać kotwice zawsze przy okazji nowego paragrafu zaczynającego się od nagłówka H1-H6, wtedy możesz skorzystać z wtyczki usprawniającej ich dodawanie. Wtyczka nazywająca się WP Anchor Header tworzy samodzielnie kotwice dla każdego nagłówka w tekście. Dzięki temu rozwiązaniu wystarczy, że stworzysz spis treści, dodasz w spisie linki nazywające się tak samo jak nagłówki w dalszej części tekstu i … gotowe. W razie gdybyś zdecydował się na użycie tej wtyczki, pamiętaj aby nazwy kotwic na podstawie nagłówków pisać bez spacji (każda spacja zamieniana jest na myślnik) i bez polskich znaków. Dla przykładu nagłówek „Zażółć gęślą jaźń” będzie miał kotwicę „zazolc-gesla-jazn”.
Oto praktyczny przykład zastosowania tej wtyczki:
Druga wtyczka pozwala na większą kontrolę nad kotwicami, a zarazem nie wymusza na przełączania między trybem wizualnym, a tekstowym edytora wpisu/strony. Nie daje jednak tego co na start oferuje poprzednia czyli automatycznych kotwic przy nagłówkach.
Mowa tu o Scroll to Anchor. Wtyczka ta dodaje do Twojego edytora wizualnego nowy przycisk:
Po jego wyborze pojawia się dodatkowe okno, gdzie ręcznie w trybie wizualnym możesz wpisać nazwę kotwicy. Gdy już ją wpiszesz, wtedy pojawi się shortcode widoczny także w trybie wizualnym. W ten sposób dodajesz wszystkie kotwice, zapisujesz wpis i wszystko działa tak, jak działać powinno.
A działa to w następujący sposób:
Dodatkową zaletą tej wtyczki jest płynne przewijanie po kliknięciu na odnośnik do wskazanej kotwicy. Domyślnie kliknięcie powoduje przeskok, który z płynnością nie ma nic wspólnego, jednak płynne przesunięcie jest bardziej przyjazne dla użytkowników. Wtyczka załatwia to za Ciebie. Jeśli jednak nie musisz z niej korzystać, to zachęcam Cię do ręcznego ustawienia kotwic i uruchomienia płynnego przewijania nie za pośrednictwem wtyczki ale ręcznie wklejonego kodu.
Krok 3: Płynne przesuwanie ekranu
Oczywiście płynne przesuwanie do kotwicy po kliknięciu na odnośnik można zorganizować w poprzez jedną z wielu wtyczek takich jak chociażby Easy Smooth Scroll Links. Skoro jednak czytasz ten poradnik to mam nadzieję, że wiesz jak bardzo obciążające dla WordPressa może być używanie wtyczki do każdego drobiazgu. Płynne przesuwanie można uruchomić na naszej witrynie przy pomocy krótkiego kodu wykorzystującego bibliotekę jQuery.
Aby to zrobić należy przejść do sekcji Wygląd -> Edytor do edycji pliku header.php, a następnie wkleić przed zamknięciem </head> fragment kodu:
<script type="text/javascript"> jQuery(document).ready(function($) { // Zaznacz wszystkie linki z hashem $('a[href*="#"]') // Usuń wszystkie linki, które aktualnie kierują donikąd .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // Linki na stronie if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Sprawdź do którego elementu ma być przewijanie var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Czy cel przewijania istnieje? if (target.length) { // Usuń zdarzenie jeśli zostało ono zablokowane - wtedy animacja nie będzie uruchomiona event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top - 80 }, 1000, function() { // Wywołanie zwrotne po animacji // Zmiana focusowania na elemencie var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Sprawdzanie, czy cel został sfocusowany return false; } else { $target.attr('tabindex','-1'); // Dodanie tabindex dla elementów, których nie można sfocusować $target.focus(); // Ustawienie na nowo focusa }; }); } } }); }); </script>
Dzięki temu rozwiązaniu zamiast kilkuset linijek kodu i wtyczki, którą musielibyśmy często aktualizować mamy skrawek kodu, który odpowiada za to samo i nie spowalnia naszej witryny.
Mam nadzieję, że dzięki temu poradnikowi stworzysz na swojej stronie własny spis treści i tym samym usprawnisz nawigację po dłuższych artykułach swoim czytelnikom. Gdyby w trakcie czytania pojawiły się jakieś pytania, zadaj je w komentarzu pod tym kursem.
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Dla długich tekstów takie rozwiązanie jest bardzo wygodnym. 😉
Idealny opis, bo gdzie nie zajrzałem to wszędzie były tylko gotowe wtyczki do WordPressa, a ja ja szukałem jak zrobić to ręcznie. Dzięki, bardzo pomocne!