Uwaga: Poniższy artykuł pomoże Ci w: Jak utworzyć menu spisu treści WordPress (bez wtyczki) Samouczek krok po kroku, jak utworzyć menu, które można kliknąć w WordPress (edytory Gutenberg i Classic)
Niezależnie od tego, czy chcesz, aby Twoje treści były łatwe w nawigacji dla czytelników, czy też masz nadzieję poprawić swoje rankingi SEO, ucz się jak utworzyć menu spisu treści WordPress (nazywane również menu, które można kliknąć) u góry postów na blogu, może w dużym stopniu pomóc obu przyczynom.
Przez większą część dekady tworzyłem własne, niestandardowe klikalne menu spisu treści WordPress u góry prawie każdego posta na moim blogu. W tym poradniku pokażę Ci dokładnie, jak je zrobić.
Najlepsza część? Nie musisz pobierać żadnych wtyczek, dostosowywać motywu WordPress ani uczyć się pisania skomplikowanego kodu.
Pokażę ci, jak stworzyć piękne menu spisu treści WordPress (zarówno za pomocą Gutenberga, jak i edytora Classic), używając prostego znacznika łącza kotwicy HTML. Bez dalszej zwłoki, zanurzmy się.
Jak utworzyć spis treści WordPress Menu, które można kliknąć (bez wtyczki): samouczki dotyczące Gutenberga i klasycznego edytora
- Tworzenie spisu treści w klasycznym edytorze WordPress
- Tworzenie klikalnego spisu treści w Gutenbergu
Ujawnienie: Pamiętaj, że niektóre z poniższych linków są linkami partnerskimi i bez dodatkowych kosztów, ja zarobię prowizję. Wiedz, że polecam tylko produkty i usługi, z których osobiście korzystałem i za którymi stoję. Kiedy korzystasz z jednego z moich linków afiliacyjnych, firma wynagradza mnie, co pomaga mi prowadzić tego bloga i udostępniać bezpłatnie moje dogłębne treści czytelnikom (takim jak Ty).
Gotowy do założenia bloga?
Sprawdź mój najlepszy przewodnik: Jak założyć blog (z boku) już dziś.
Teraz, jeśli jesteś podobny do mnie i wolisz obejrzeć krótki samouczek wideo na temat tworzenia spisu treści WordPress (bez użycia wtyczki), twoje życzenie jest dla mnie rozkazem.
Samouczek wideo: Jak utworzyć spis treści WordPress (menu, które można kliknąć) — bez wtyczki
Możesz obejrzeć tutaj:
Najpierw zacznijmy od przejścia przez proces tworzenia menu spisu treści WordPress w edytorze klasycznym.
1. Tworzenie spisu treści w klasycznym edytorze WordPress (bez wtyczki)
Nazwij mnie starą szkołą, ale nadal jestem fanem używania klasycznego edytora WordPress na niektórych moich blogach.
Podczas gdy Gutenberg zdecydowanie stał się znacznie bardziej przyjazny dla użytkownika w ostatnich latach wbudowałem w tego bloga wiele dostosowań (za pomocą edytora Classic), które będą wymagały pewnych poprawek, gdy w końcu przejdę na Gutenberga. I wiem, że nie jestem jedyną osobą, która wciąż się trzyma!
Na razie zacznijmy od przejścia przez tworzenie menu spisu treści WordPress w edytorze Classic.
Krok pierwszy: Utwórz uporządkowaną (lub nieuporządkowaną) listę
Najpierw warto zacząć od utworzenia listy (uporządkowanej lub nieuporządkowanej), którą chcesz utworzyć jako spis treści. jak tak:
Zanim przejdziemy do hiperłączy pozycji menu w funkcjonalny spis treści, zacznij od wpisania głównych sekcji artykułu. Idealnie byłoby, gdyby te pozycje menu odpowiadały tytułom nagłówków całej zawartości (jak widać w tym przewodniku).
Krok drugi: dodaj tag kotwicy HTML (hiperłącze)
Po zakończeniu części tekstowej menu spisu treści nadszedł czas na utworzenie hiperłącza do każdego elementu.
Zrobimy to, dodając tak zwany tag zakotwiczenia HTML — bardzo prosty format hiperłącza, który jest szczególnie przyjazny dla SEO. Oto jak wygląda ten tag:
Zacznij od przełączenia na tryb, jeśli czujesz się komfortowo i chcesz zobaczyć pełny obraz tego, co dodajesz.
Po przejściu do programu znajdź pierwszy element listy w spisie treści, do którego chcesz utworzyć hiperłącze (umożliwić kliknięcie).
Jak pokazano na powyższym zrzucie ekranu, dodaj zaraz po tagu otwierającym dla pierwszego elementu listy (
Następnie musisz zamknąć hiperłącze, dodając tag zamykający () na końcu części tekstowej pierwszego elementu menu.
Oto przykład kopiuj/wklej, jak powinien wyglądać pełny kod HTML:
Tutaj znajduje się opisowy wyświetlany tekst
Musisz dodać znacznik hiperłącza HTML do każdego elementu menu w spisie treści.
Jeśli chcesz pominąć ten fragment i masz pewność co do funkcjonalności motywu WordPress, możesz po prostu kliknąć przycisk i dodać tekst tagu kotwicy w następującym formacie:
Zdecydowanie najlepszą praktyką jest używanie dokładnie tego samego (opisowego) tekstu w klikalnym elemencie menu, ponieważ w odpowiedniej sekcji czytelnicy przeskoczą po kliknięciu.
Bez względu na to, jakiej metody użyjesz do dodania tagu kotwicy HTML, utworzyłeś teraz pierwszą połowę linku do spisu treści WordPress. W naszym następnym kroku dodasz odpowiedni tag w swoim poście w miejscu, w którym chcesz, aby klikalny link przekierowywał czytelnika.
Krok trzeci: Dodaj odpowiednie tagi linków w poście
Po dodaniu tagów zakotwiczenia do spisu treści — dzięki czemu elementy menu będą klikalne — nadszedł czas, aby dodać odpowiedni tag dla każdego z tych elementów menu, aby czytelnicy wylądowali gdzieś po kliknięciu elementu menu.
Jak pokazano na poniższym zrzucie ekranu, dodaj zaraz po tagu nagłówka (i przed tekstem nagłówka) — tam, gdzie zaczyna się sekcja pierwszego elementu listy Twój post. Ponieważ ten tag nazwy działa po prostu jako punkt kontrolny dla powyższego elementu menu z hiperłączem, możesz od razu zamknąć tag, jak pokazuje powyższy fragment kodu.
Tekst użyty wewnątrz znacznika () musi dokładnie odpowiadać zawartości znacznika () używanego w odpowiednim elemencie spisu treści, w przeciwnym razie klikalny link nie będzie działał.
Część zaznaczona na niebiesko na tym zrzucie ekranu jest tym, co powinna wyglądać pełna nazwa tagu:
W tym kroku uzupełniłeś menu spisu treści z hiperłączami przy użyciu prostego kodu HTML.
Oto przykład kopiowania i wklejania, jak może wyglądać kod plakietki z pełną nazwą:
Tutaj znajduje się opisowy wyświetlany tekst
Teraz dla tych z was, którzy używają edytora Gutenberga, przejdźmy przez proces tworzenia spisu treści WordPress.
2. Tworzenie klikalnego spisu treści w Gutenbergu (bez wtyczki)
Jeśli używasz Gutenberga, masz szczęście! Proces tworzenia klikalnego spisu treści WordPress jest nieco prostszy. A jeśli wolisz postępować zgodnie z powyższym samouczkiem wideo, możesz tam obejrzeć.
Pierwszy krok, niezależnie od używanego edytora WordPress, jest wciąż taki sam.
Krok pierwszy: Utwórz uporządkowaną (lub nieuporządkowaną) listę
Zacznij od dodania bloku listy (uporządkowanej lub nieuporządkowanej), który chcesz utworzyć jako spis treści. jak tak:
Pamiętaj, aby dodać wszystkie elementy, które chcesz uwzględnić w spisie treści. Następnie dodamy hiperłącza, które zmienią je w funkcjonalny, klikalny spis treści.
Krok drugi: dodaj wewnętrzne hiperłącza do każdego elementu menu
Po zakończeniu części tekstowej menu spisu treści nadszedł czas, aby dodać wewnętrzne hiperłącza do każdego z nich.
Zrobimy to w taki sam sposób, jak w przypadku klasycznego edytora, dodając tak zwany znacznik zakotwiczenia HTML — bardzo prosty format hiperłącza, który jest przyjazny dla SEO — proces wygląda trochę inaczej w Gutenbergu. Oto jak wygląda dodawanie tagu:
Aby dodać hiperłącza w spisie treści, po prostu kliknij przycisk i dodaj tekst tagu kotwicy w formacie podobnym do tego. Nie zapomnij o symbolu na początku, który czyni go linkiem wewnętrznym.
Następnie dodamy odpowiednią plakietkę do elementu nagłówka w dalszej części posta, aby czytelnicy, którzy klikną elementy spisu treści, mieli gdzie wylądować.
Krok trzeci: Dodaj odpowiednie miejsca docelowe łącza tagów nazw
Po dodaniu hiperłączy do spisu treści — dzięki czemu każdy element menu będzie klikalny — nadszedł czas, aby dodać odpowiednią etykietę dla każdego z tych elementów menu, tak aby czytelnicy wylądowali gdzieś po kliknięciu. A dzięki skoncentrowaniu się Gutenberga na budowaniu bloków jest to DUŻO łatwiejsze i szybsze niż w przypadku klasycznego edytora.
Aby dodać odpowiedni tag zakotwiczenia, po prostu…
- Wybierz blok nagłówka (lub dowolny blok tekstu, którego będziesz używać jako miejsca docelowego łącza)
- Kliknij poszczególne ustawienia (powyżej na prawym pasku bocznym)
- Kliknij, aby otworzyć menu rozwijane z ustawieniami
- Dodaj pasujący tag zakotwiczenia, który odpowiada klikalnemu elementowi menu z powyższego spisu treści
Oto jak to wygląda:
Jak pokazano na powyższym zrzucie ekranu, jest to bardzo proste i łatwe — nie jest wymagana rzeczywista edycja HTML.
Chociaż oczywiście nadal możesz zastosować bardziej ręczne podejście, tak jak w klasycznym edytorze, miło jest nie mieć do czynienia z przełączaniem się między trybem wizualnym a tekstowym.
I voila! Zamknąłeś teraz pętlę i utworzyłeś klikalne menu spisu treści WordPress w Gutenbergu. 😊
Chociaż z pewnością istnieje kilka wtyczek WordPress (takich jak wersja Yoast SEO), które pomogą stworzyć spis treści w twoich postach na blogu, zawsze jestem fanem robienia rzeczy tak prostych, jak to tylko możliwe – i unikania używania wtyczki, gdy tylko jest to możliwe, ponieważ często mogą one spowolnić szybkość ładowania strony.
Wkrótce stworzę samouczek, jak zrobić przewijany spis treści (pokazany na moim prawym pasku bocznym na pulpicie).
Masz pytania dotyczące tworzenia menu spisu treści WordPress?
Kliknij odpowiedź w sekcji komentarzy poniżej i zapytaj!
Chętnie pomogę rozwiązać wszelkie problemy.
