Jak dodać przycisk „Przejdź do przepisu” w WordPress (2 proste sposoby)

Blogerzy kulinarni często pytają nas o funkcje, które mają największe znaczenie dla ich czytelników.

Po latach obserwacji wielu blogów kulinarnych stwierdziliśmy, że dodanie przycisku „przejdź do przepisu” jest jednym z najskuteczniejszych ulepszeń, jakie możesz wprowadzić.

To niewielka zmiana, która ma ogromne znaczenie w pomaganiu odwiedzającym w szybkim znalezieniu tego, czego szukają. Ponadto, jest prosty w konfiguracji na każdej stronie WordPress.

Przetestowaliśmy różne rozwiązania i znaleźliśmy dwie niezawodne metody, które działają konsekwentnie dobrze. Obie metody są przyjazne dla początkujących i sprawią, że Twój przycisk „Przejdź do przepisu” będzie działał w ciągu zaledwie kilku minut.

Dlaczego warto dodać przycisk „Przejdź do przepisu” w postach na blogu kulinarnym?

Przycisk „Przejdź do przepisu” to link nawigacyjny umieszczony na górze wpisu na blogu. Technicznie działa jako kotwica HTML, która natychmiast przewija przeglądarkę w dół do karty z przepisem, pomijając treść wprowadzającą.

Czytelnicy często narzekają na przewijanie długich historii i reklam, aby znaleźć składniki. Chociaż treści w długiej formie pomagają w monetyzacji, wielu odwiedzających potrzebuje natychmiastowego dostępu do instrukcji podczas gotowania lub zakupów.

Dodanie tego przycisku pozwala obsłużyć oba typy czytelników. Możesz zachować swoje osobiste historie dla lojalnych fanów, jednocześnie zapewniając szybki skrót dla użytkowników, którzy potrzebują szybkich odpowiedzi.

Poprawia to ogólne doświadczenie użytkownika (UX) na Twojej stronie. Kiedy użytkownicy mogą łatwo znaleźć to, czego potrzebują, rzadziej wracają do wyników wyszukiwania.

Mając to na uwadze, pokażemy Ci 2 proste sposoby na dodanie przycisku „Przejdź do przepisu” do Twojego bloga kulinarnego: za pomocą wtyczki do tworzenia przepisów WordPress i niestandardowego kodu. Możesz użyć poniższych szybkich linków, aby przejść do preferowanej metody:

Metoda 1: Użyj WP Tasty Recipes, aby dodać przycisk „Przejdź do przepisu” (zalecane)

Najprostszym sposobem na dodanie przycisku „Przejdź do przepisu” w WordPress jest użycie WP Tasty Recipes.

Ten plugin do tworzenia kart przepisów został przez nas dokładnie przetestowany i odkryliśmy wiele funkcji, które sprawiają, że jest on ulubieńcem blogerów kulinarnych.

Oprócz przycisku „Przejdź do przepisu”, Tasty Recipes pozwala na drukowanie przepisów i bezproblemowe konwertowanie ich na preferowane przez czytelnika jednostki miary.

Dodatkowo możesz jasno wyświetlać dane o wartościach odżywczych, czas gotowania, wielkość porcji i oceny użytkowników, wszystko w schludny i zorganizowany sposób.

Jeśli chcesz dowiedzieć się więcej o możliwościach wtyczki i o tym, jak może ona przynieść korzyści Twojemu blogowi, koniecznie zapoznaj się z naszą obszerną recenzją WP Tasty.

Jedną z wad tej wtyczki do przepisów jest to, że nie ma ona darmowej wersji, ale jest to świetna inwestycja dla poważnych blogerów kulinarnych, którzy chcą zarabiać online.

Aby korzystać z wtyczki, musisz najpierw zakupić płatny plan. Możesz wybrać pakiet WP Tasty All Access Bundle lub samodzielną wtyczkę Tasty Recipes.

Po dokonaniu zakupu możesz pobrać wtyczkę i zainstalować ją na swojej stronie WordPress. Więcej informacji znajdziesz w naszym przewodniku na temat jak zainstalować wtyczkę WordPress.

Następnie przejdź do WP Tasty » Dashboard z panelu administracyjnego WordPress i kliknij „Enter License”.

Następnie wprowadź klucz licencyjny swojego wtyczki, który WP Tasty powinien wysłać Ci na e-mail po dokonaniu zakupu.

Następnie wybierz „Wszystkie wtyczki” lub „Tasty Recipes” w menu rozwijanym „Wtyczka(i) do aktywacji”. Kliknij „Zapisz licencję”.

Po wykonaniu tej czynności przejdź do strony WP Tasty » Tasty Recipes z poziomu panelu WordPress i przejdź do zakładki „Ustawienia”.

Domyślnie opcje przycisków „Przejdź do przepisu” i „Drukuj przepis” będą zaznaczone, więc możesz je tak pozostawić.

Jedną z rzeczy, które możesz zmienić w przyciskach, jest Styl Szybkich Linków.

WP Tasty może również wyświetlać opcję „Przejdź do przepisu” jako zwykły link tekstowy zamiast przycisków. Jeśli wolisz, możesz wybrać „Linki”.

Ale oczywiście możesz też wybrać opcję Przyciski, jeśli tak wolisz.

Opcja Przyciski wygląda również bardziej przyciągająco, dzięki czemu czytelnicy łatwo ją zauważą.

Jest tu faktycznie znacznie więcej ustawień do wypróbowania, takich jak włączanie pól wyboru dla listy składników i skalowania przepisu. Pamiętaj, aby zaznaczyć opcje, które najlepiej pasują do Twojego bloga.

Po zakończeniu po prostu przewiń stronę w dół i kliknij „Zapisz zmiany”.

Teraz, za każdym razem, gdy użyjesz karty przepisu WP Tasty, przyciski „Przejdź do przepisu” i „Drukuj przepis” na górze będą widoczne.

Aby użyć karty przepisu, możesz utworzyć nowy wpis z przepisem lub edytować istniejący za pomocą edytora bloków Gutenberga. Następnie możesz postępować zgodnie z tym przewodnikiem krok po kroku na jak dodać blok karty przepisu w WordPress, aby uzyskać więcej informacji.

Jedną z zalet korzystania z Tasty Recipes do dodania linku „przejdź” jest płynny efekt przewijania. W ten sposób czytelnicy mogą przejść bezpośrednio do instrukcji przepisu bez żadnych irytujących skoków na stronie.

Używanie niestandardowego kodu do osiągnięcia tego efektu jest skomplikowane, ponieważ zazwyczaj wymaga JavaScript lub edycji plików motywu. Dlatego właśnie dla większości użytkowników zalecamy metodę z wtyczką.

Niemniej jednak, jeśli chcesz dodać przycisk „Przejdź do przepisu” za darmo, możesz wypróbować następną metodę.

Metoda 2: Użyj niestandardowego kodu, aby dodać przycisk „Przejdź do przepisu” (bezpłatnie)

Ręczne dodanie przycisku „Przejdź do przepisu” może wydawać się zniechęcające dla początkujących, ale nie martw się, przeprowadzimy Cię przez każdy krok.

Jeśli jest to Twój pierwszy raz, kiedy dodajesz niestandardowy kod do WordPress, sugerujemy użycie wtyczki do fragmentów kodu, takiej jak WPCode.

Obszernie przetestowaliśmy wtyczkę i oferuje ona bezpieczny i prosty sposób na wstawianie fragmentów kodu bez edycji plików motywu. Minimalizuje to ryzyko przypadkowego uszkodzenia układu lub funkcjonalności Twojej witryny.

Chcesz wiedzieć, co jeszcze potrafi WPCode? Sprawdź naszą łatwą do zrozumienia recenzję, w której szczegółowo omawiamy jego funkcje i wyjaśniamy, dlaczego jest to świetne narzędzie dla użytkowników WordPressa.

Aby używać WPCode, zainstaluj wtyczkę w swoim panelu administracyjnym WordPress. Możesz przeczytać nasz przewodnik krok po kroku na temat jak zainstalować wtyczkę WordPress, aby uzyskać więcej szczegółów.

Następnie przejdź do Fragmenty kodu » + Dodaj fragment. Tutaj wybierz „Dodaj własny kod (nowy fragment)” i kliknij „Użyj fragmentu”.

Istnieją dwa fragmenty kodu, które musisz dodać osobno do WPCode. Przejdźmy przez nie po kolei:

Dodaj kod, aby automatycznie wstawić przycisk „Przejdź do przepisu”

Pierwszy fragment kodu automatycznie doda przycisk „Przejdź do przepisu” we wszystkich postach na blogu zawierających sekcję z przepisem. W tym celu możesz nazwać swój fragment „Automatycznie dodaj przycisk Przejdź do przepisu”.

Następnie wybierz „Fragment PHP” z menu rozwijanego Typ kodu.

W oknie Podgląd kodu wstaw następujące linie kodu:

/**
 * Check if the post content contains a heading with the #recipe anchor
 */
function has_recipe_anchor($content) {
  $pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
  return preg_match($pattern, $content) === 1;
}

/**
 * Add "Jump to Recipe" button to posts
 */
function add_jump_to_recipe_button($content) {
  if (has_recipe_anchor($content)) {
    $jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
    $content = $jump_button . $content;
  }
  return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');

Przeanalizujmy, jak działa ten kod.

Pierwsza część kodu sprawdza zawartość Twojego posta na blogu. Szuka konkretnie znacznika nagłówka (H1 do H6), który ma ustawiony identyfikator zakotwiczenia na „recipe”.

Druga część, funkcja o nazwie add_jump_to_recipe_button, jest odpowiedzialna za dodanie faktycznego przycisku do Twojego posta.

Jeśli kod znajdzie identyfikator zakotwiczenia „recipe”, tworzy kod HTML dla przycisku przejścia. Następnie wstawia ten kod tuż przed zawartością Twojego posta na blogu.

W ten sposób kod może automatycznie sprawdzić nagłówek przepisu i dodać przycisk, jeśli jest potrzebny.

Mając to na uwadze, będziesz musiał dodać kotwicę #recipe do sekcji przepisu w swoim poście na blogu. Nie martw się, pokażemy Ci, jak to zrobić później.

Teraz przewiń w dół do sekcji „Wstawianie” i upewnij się, że wybrano metodę „Automatyczne wstawianie”. Jeśli chodzi o Lokalizację, możesz wybrać „Tylko frontend”, aby kod działał tylko w części widocznej dla użytkownika Twojej strony WordPress.

Następnie przełącz przycisk w prawym górnym rogu, aby kod był „Aktywny” i kliknij „Zapisz fragment”.

Dodaj fragment kodu, aby stylizować przycisk „Przejdź do przepisu”

Teraz dodamy niestandardowy kod CSS, aby nadać styl naszemu przyciskowi wezwania do działania. Wykonaj te same kroki, aby utworzyć nowy fragment niestandardowego kodu w WPCode i nadaj mu prostą nazwę, na przykład „Styl przycisku Przejdź do przepisu”.

W przypadku typu kodu wybierz opcję „Fragment kodu CSS”.

Teraz stworzyliśmy kod CSS, który sprawi, że nasz przycisk będzie zielony, a tekst w nim biały. Oto jak:

.jump-to-recipe-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
}

.jump-to-recipe-button:hover {
    background-color: #45a049;
}

Jeśli chcesz użyć innych kolorów, możesz po prostu zastąpić kody szesnastkowe w powyższym kodzie.

Po wstawieniu kodu przewiń w dół do sekcji Wstawianie i wybierz „Automatyczne wstawianie” jako Metodę wstawiania. Następnie wybierz „Nagłówek całej witryny” jako Lokalizację.

Wszystko, co musisz zrobić dalej, to aktywować fragment kodu i kliknąć „Zapisz fragment”.

Dodaj kotwicę #recipe do swoich postów z przepisami na blogu

Nawet jeśli aktywowałeś oba fragmenty kodu, przycisk przejścia nie pojawi się, dopóki nie dodasz kotwicy #recipe do sekcji przepisu w postach na swoim blogu WordPress. Tak więc, właśnie to teraz zrobimy.

Najpierw utwórz nowy post na blogu z przepisem lub otwórz istniejący w edytorze blokowym.

W naszym przykładzie używamy tagu nagłówka (H2), aby zaznaczyć sekcję przepisu w naszym poście na blogu. Sugerujemy, abyś zrobił to samo, aby użytkownicy łatwiej mogli go znaleźć podczas czytania Twojego posta. Wyszukiwarki również doceniają, gdy treść Twojego bloga ma uporządkowaną strukturę.

Kliknij blok Nagłówek swojej sekcji z przepisem. Następnie w bocznym panelu ustawień bloku otwórz menu „Zaawansowane”. Następnie wpisz „recipe” w pole Kotwica HTML. Upewnij się, że używasz samych małych liter.

Będzie to służyć jako link kotwicy dla przycisku przejścia.

Po wykonaniu tej czynności kliknij „Opublikuj” lub „Zaktualizuj”.

Jeśli podglądasz swoją witrynę na urządzeniach mobilnych lub komputerze, powinieneś teraz zobaczyć przycisk „Przejdź do przepisu” na górze treści Twojego bloga, po tytule posta.

Dodatkowe wskazówki, jak poprawić doświadczenie użytkownika na Twoim blogu kulinarnym

Poza przyciskiem Przejdź do przepisu, istnieją inne elementy projektowe, które możesz wykorzystać, aby Twój blog kulinarny był bardziej przyjazny dla użytkownika. Oto kilka ulepszeń o dużym wpływie:

Często zadawane pytania dotyczące przycisków WordPress

Oto kilka pytań, które nasi czytelnicy często zadawali na temat dodawania przycisków w WordPressie:

Jak dodać linki do przycisków w WordPressie?

Aby dodać link, zaznacz blok Przyciski w edytorze WordPressa. Kliknij ikonę linku na pasku narzędzi, która pojawia się nad przyciskiem, a następnie wklej adres URL docelowy w pole.

Jak dodać przycisk „Przejdź na górę” w WordPressie?

Najłatwiejszą metodą jest zainstalowanie wtyczki takiej jak WPFront Scroll Top. Po aktywacji automatycznie dodaje ona przycisk, który pojawia się, gdy użytkownik przewija w dół, umożliwiając mu szybkie powrócenie na górę strony.

Aby rozpocząć, zapoznaj się z naszym samouczkiem na temat dodawania efektu przewijania do góry w WordPressie.

Jak dodać przycisk obserwowania na blogu WordPress?

Możesz dodać przyciski obserwowania za pomocą wbudowanego bloku Ikony Społecznościowe w edytorze blokowym. Po prostu wyszukaj „Ikony Społecznościowe”, dodaj blok i kliknij ikonę „plus”, aby wybrać platformy mediów społecznościowych, do których chcesz się połączyć.

Więcej informacji znajdziesz w naszym przewodniku na temat dodawania przycisku obserwowania na Facebooku dla autorów w WordPressie.

Jak dodać wyskakujące okienko na WordPressie?

Zalecamy użycie OptinMonster do dodawania wyskakujących okienek. Pozwala ono na projektowanie niestandardowych okienek za pomocą kreatora przeciągnij i upuść oraz precyzyjne kontrolowanie ich wyświetlania, na przykład gdy użytkownik ma zamiar opuścić Twoją witrynę.

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak dodać przycisk „Przejdź do przepisu” w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat kluczowych elementów projektowania skutecznej witryny WordPress oraz jak skonfigurować zamawianie jedzenia online w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.