Dodawanie linków kotwicy w WordPress

Czasami używamy linków kotwicy w naszych dłuższych postach WordPress, aby pomóc użytkownikom szybko przejść do sekcji, którą chcą przeczytać.

Łącza kotwiczne są często używane w sekcjach spis treści, ponieważ pomagają użytkownikom poruszać się w górę iw dół dłuższego artykułu bez przeładowywania strony. Może również pomóc w SEO, ponieważ Google może pokazać je poniżej twoich ofert wyszukiwania dla łatwej nawigacji (więcej na ten temat później).

W tym przewodniku krok po kroku wyjaśnimy, czym są linki kotwiące i pokażemy, jak łatwo dodać linki kotwiące w WordPress.

Adding anchor links in WordPress

Gotowy? Zacznijmy od żywego przykładu linków kotwicznych.

Poniżej znajduje się lista wszystkich tematów, które omówimy w tym przewodniku. Śmiało i kliknij dowolny z tych linków, a zostaniesz przeniesiony do tej konkretnej sekcji.

  • Co to jest anchor link?
  • Jak ręcznie dodać linki kotwicy w WordPress?
  • Jak ręcznie dodać linki kotwicy za pomocą klasycznego edytora w WordPress?
  • Jak ręcznie dodać linki kotwicy w HTML?
  • Jak automatycznie dodawać nagłówki jako linki kotwiczne w WordPress?

Łącze kotwiczne to rodzaj łącza na stronie, który przenosi cię do określonego miejsca na tej samej stronie. Pozwala użytkownikom przejść do sekcji, którą są najbardziej zainteresowani.

Spójrz na animowany zrzut ekranu poniżej:

Anchor link preview

Jak widać, kliknięcie linku kotwicy przenosi użytkownika do określonej sekcji na tej samej stronie.

Linki kotwicy są powszechnie używane w dłuższych artykułach jako spis treści, który pozwala użytkownikom szybko przejść do sekcji, które chcą przeczytać.

Innym zastosowaniem linków kotwicy jest tworzenie linków do zakładek w witrynie WordPress. Pozwala to udostępnić link do zakładek w mediach społecznościowych lub biuletynach e-mail, więc po załadowaniu strony użytkownicy natychmiast przeskakują do sekcji, którą mają zobaczyć.

Dlaczego i kiedy należy używać anchor links?

Przeciętny użytkownik spędza mniej niż kilka sekund przed podjęciem decyzji, czy chce zostać, czy opuścić witrynę. Masz tylko te kilka sekund, aby przekonać użytkowników do pozostania.

Najlepszym sposobem, aby to zrobić, jest pomóc im szybko zobaczyć informacje, których szukają.

Linki kotwiczne ułatwiają to, umożliwiając użytkownikom pominięcie reszty treści i przejście bezpośrednio do części, która ich interesuje. Poprawia to wrażenia użytkownika i pomaga zdobyć nowych klientów / czytelników.

Anchor linki są również Świetne dla WordPress SEO. Google może wyświetlić link kotwicy w wynikach wyszukiwania jako “przejdź do łącza”.

Jump to link in search results

Czasami Google może również wyświetlić kilka linków z tej strony jako przejdź do linków, co udowodniono, że zwiększa współczynnik klikalności w wynikach wyszukiwania. Innymi słowy, uzyskujesz większy ruch na swojej stronie.

Multiple jump to links below a search result

Powiedziawszy to, przyjrzyjmy się, jak łatwo dodać linki kotwicy w WordPress.

Jeśli chcesz tylko dodać kilka linków do zakotwiczenia lub linków do zakładek w swoim artykule, możesz to łatwo zrobić ręcznie.

Zasadniczo musisz dodać dwie rzeczy, aby tekst zakotwiczenia działał zgodnie z przeznaczeniem.

  1. Utwórz łącze zakotwiczenia ze znakiem # przed tekstem zakotwiczenia.
  2. Dodaj id atrybut do tekstu, w którym Użytkownik ma zostać zabrany.

Zacznijmy od części Anchor link.

Punkt 1. Tworzenie łącza kotwicy

Najpierw musisz wybrać tekst, który chcesz połączyć,a następnie kliknąć przycisk Wstaw link w edytorze Gutenberga WordPress.

Add a link in WordPress

Spowoduje to wyświetlenie wyskakującego okienka Wstaw link, w którym zwykle dodajesz adres URL lub szukasz posta lub strony do linkowania.

Jednak w przypadku linku zakotwiczenia wystarczy użyć # jako prefiksu i wprowadzić słowa kluczowe dla sekcji, do której użytkownik ma przejść.

Creating anchor link

Następnie kliknij przycisk enter, aby utworzyć link.

Kilka pomocnych wskazówek na temat wyboru tekstu, którego użyć jako kotwicy # link:

  • Użyj słów kluczowych związanych z sekcją, do której łączysz.
  • Nie rób swojego łącza kotwicznego niepotrzebnie długiego lub złożonego.
  • Użyj myślników, aby oddzielić słowa i uczynić je bardziej czytelnymi.
  • W anchor text Można używać wielkich liter, aby uczynić go bardziej czytelnym. Na przykład: # Najlepsze-Kawiarnie-Manhattan.

Po dodaniu linku będziesz mógł zobaczyć link utworzony w edytorze. Jednak kliknięcie w link nic nie da.

Dzieje się tak dlatego, że przeglądarki nie mogą znaleźć łącza zakotwiczenia jako identyfikatora.

Naprawmy to, wskazując przeglądarkom obszar, sekcję lub tekst, który chcesz pokazać, gdy użytkownicy klikną łącze kotwicy.

Punkt 2. Dodaj atrybut ID do połączonej sekcji

W edytorze treści przewiń w dół do sekcji, do której użytkownik ma przejść po kliknięciu łącza kotwicy. Zazwyczaj jest to nagłówek do nowej sekcji.

Następnie kliknij, aby wybrać Blok, a następnie w Ustawieniach bloku kliknij kartę Zaawansowane, aby go rozwinąć. Możesz po prostu kliknąć zakładkę “Zaawansowane” pod ustawieniami bloku nagłówków.

HTML Anchor

Następnie musisz dodać ten sam tekst, który dodałeś jako łącze kotwicy w polu “Kotwica HTML”. Upewnij się, że dodałeś tekst bez prefiksu#.

Możesz teraz zapisać swój post i zobaczyć swój link kotwicy w akcji, klikając kartę podgląd.

Co zrobić, jeśli sekcja, którą chcesz pokazać, nie jest nagłówkiem, ale zwykłym akapitem lub innym blokiem?

W takim przypadku należy kliknąć menu z trzema kropkami w Ustawieniach bloku i wybrać “Edytuj jako HTML”.

Edit as HTML

Pozwoli to na edycję kodu HTML dla danego bloku. Musisz wybrać Znajdź znacznik HTML dla elementu, na który chcesz wskazać. Na przykład, <p> jeśli jest to ppraph, lub < tabela> jeśli jest to blok tabeli, i tak dalej.

Teraz musisz dodać kotwicę jako atrybut ID do tego tagu, jak w poniższym kodzie:

<P id = "najlepsze-kawiarnie-manhattan">

Zostanie wyświetlone powiadomienie, że ten blok zawiera nieoczekiwaną lub nieprawidłową zawartość. Musisz kliknąć Konwertuj na HTML, aby zachować wprowadzone zmiany.

Convert to HTML

Jak ręcznie dodać link kotwicy w klasycznym edytorze

Jeśli nadal używasz starszego klasycznego edytora dla WordPress, oto jak możesz dodać link kotwicy / link skoku.

Punkt 1. Utwórz link kotwicy

Najpierw wybierz tekst, który chcesz zmienić w łącze kotwicy, a następnie kliknij przycisk “Wstaw łącze”.

Adding an anchor link in Classic Editor

Następnie musisz dodać link zakotwiczenia z prefiksem # sign, po którym następuje ślimak, którego chcesz użyć dla linku.

Punkt 2. Dodaj atrybut ID do połączonej sekcji

Następnym krokiem jest skierowanie przeglądarek na sekcję, którą chcesz wyświetlić, gdy użytkownicy klikną link kotwicy.

W tym celu musisz przełączyć się do trybu “Tekst” w klasycznym edytorze. Następnie przewiń w dół do sekcji, którą chcesz wyświetlić.

Adding anchor ID in Classic Editor

Teraz znajdź znacznik HTML, który chcesz kierować. Na przykład, <H2>, <H3>, <p>, i tak dalej.

Musisz dodać do niego atrybut ID za pomocą linku kotwicy bez prefiksu#, jak to:

<H2 id = "najlepsze-kawiarnie-manhattan">

Możesz teraz zapisać zmiany i kliknąć przycisk Podgląd, aby zobaczyć link kotwicy w akcji.

Jak ręcznie dodać linki kotwicy w HTML

Jeśli jesteś przyzwyczajony do pisania w trybie tekstowym starego klasycznego edytora w WordPress, oto jak ręcznie utworzyć link kotwicy w HTML.

Najpierw musisz utworzyć link zakotwiczenia z prefiksem#, używając zwykłego <a href=""> tag, jak to:

<a href="#najlepsze-kawiarnie-manhattan">najlepsze kawiarnie na Manhattanie</a>

Następnie przewiń w dół do sekcji, którą chcesz wyświetlić, gdy użytkownicy klikną link.

Zwykle Ta sekcja jest nagłówkiem (h2, h3, h4 itp.), ale może to być dowolny inny element HTML lub nawet prosty znacznik akapitowy <P>.

Musisz dodać atrybut ID do znacznika HTML, a następnie dodać ślimak kotwicy bez prefiksu#.

<H2 id = "najlepsze-kawiarnie-manhattan" > najlepsze kawiarnie na Manhattanie < / H4>

Możesz teraz zapisać zmiany i wyświetlić podgląd swojej witryny, aby przetestować link kotwicy.

Ta metoda jest odpowiednia dla użytkowników, którzy regularnie publikują długie artykuły i muszą tworzyć spis treści z linkami kotwicy.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Easy Table Of Contents. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Wtyczka ta pozwala na automatyczne generowanie spisu treści z linkami kotwicy. Używa nagłówków do odgadnięcia sekcji treści i możesz je w pełni dostosować do swoich potrzeb.

Po aktywacji wystarczy przejść do Ustawienia ” spis treści strona do konfiguracji ustawień wtyczki.

Easy Table of Contents plugin settings

Najpierw musisz włączyć go dla typów postów, w których chcesz dodać spis treści. Domyślnie wtyczka jest włączona dla stron, ale możesz ją również włączyć dla swoich postów.

Możesz także włączyć opcję automatycznego wstawiania. Pozwala to wtyczce na automatyczne generowanie spisu treści dla wszystkich artykułów, w tym starszych artykułów, które spełniają kryteria.

Jeśli chcesz automatycznie generować spis treści tylko dla określonych artykułów, możesz pozostawić tę opcję niezaznaczoną.

Następnie przewiń trochę w dół, aby wybrać, gdzie chcesz wyświetlić spis treści i kiedy ma zostać uruchomiony.

Select where and when to display table of contents

Możesz przejrzeć inne ustawienia zaawansowane na stronie i zmienić je w razie potrzeby.

Nie zapomnij kliknąć przycisku “Zapisz zmiany”, aby zapisać swoje ustawienia.

Jeśli włączyłeś opcję automatycznego wstawiania, możesz teraz wyświetlić istniejący artykuł z określoną liczbą nagłówków.

Zauważysz, że wtyczka automatycznie wyświetli spis treści przed pierwszym nagłówkiem w artykule.

Jeśli chcesz ręcznie wygenerować spis treści dla określonych artykułów, musisz edytować artykuł, w którym chcesz wyświetlić spis treści z linkami kotwicy.

Na ekranie edycji postów przewiń w dół do zakładki “spis treści” pod edytorem.

Manually add table of contents with anchor links

W tym miejscu możesz zaznaczyć opcję “Wstaw Spis treści” i wybrać nagłówki, które chcesz dołączyć jako łącza kotwiczne.

Możesz teraz zapisać zmiany i wyświetlić podgląd artykułu. Wtyczka automatycznie wyświetli listę linków kotwicznych jako spis treści.

Table of contents preview

Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz artykuł na temat dodawania spisu treści w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać linki kotwicy w WordPress. Możesz również zobaczyć nasze wskazówki, jak prawidłowo zoptymalizować swoje posty na blogu pod kątem SEO i nasz wybór najlepszych wtyczek do tworzenia stron WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

6 Najlepszych bramek płatności WooCommerce dla WordPress

W artykule: Jak wybrać najlepszą bramkę płatności WooCommerceTop WooCommerce bramek płatności dla…

14 Najlepsze wtyczki WordPress SEO i narzędzia, których powinieneś używać

W artykule: Rzeczy, które musisz wiedzieć o wtyczkach i narzędziach WordPress SEO1.…

Czeka nas rozwój sportów motorowych

W artykule: Jaki jest związek między popularyzacją sportów motorowych a poprawą kultury…

Jak dodać nagłówki bezpieczeństwa HTTP w WordPress (Przewodnik dla początkujących)

W artykule: Czym są nagłówki bezpieczeństwa HTTP?Dodawanie nagłówków bezpieczeństwa HTTP w WordPress1.…