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:

Ś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.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej: