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

Wielu odwiedzających blogi kulinarne szybko szuka instrukcji dotyczących przepisów, a przycisk Przejdź do przepisu może pomóc im dotrzeć do nich jednym kliknięciem.

Może to być świetny sposób na poprawę komfortu użytkowania twojej witryny internetowej WordPress.

W WPBeginner znaleźliśmy 2 proste sposoby na osiągnięcie tego celu i cieszymy się, że możemy się nimi z wami podzielić.

W tym artykule pokażemy, jak łatwo dodać przycisk Przejdź do przepisu w WordPress.

Dlaczego warto dodać przycisk „Przejdź do przepisu” we wpisach na blogu kulinarnym?

Przycisk „Przejdź do przepisu” nie jest konieczny w każdym wpisie z przepisem. Może on jednak stanowić ogromną zaletę w przypadku blogów z dużą ilością treści przed faktycznymi instrukcjami dotyczącymi przepisu.

Wiele witryn z przepisami zawiera relację o pochodzeniu przepisu, osobiste anegdoty lub pomocne wskazówki dotyczące gotowania przed przejściem do kolejnych kroków. Może to być świetny sposób na zbudowanie więzi z twoimi czytelnikami.

To powiedziawszy, ważne jest, aby wziąć pod uwagę, że wielu importerów może być jednorazowymi gośćmi, którzy po prostu szukają samego przepisu. Mogą nie być zainteresowani historią i po prostu chcą zacząć gotować.

Dodanie przycisku Przejdź do przepisu daje tym odwiedzającym szybki i łatwy sposób na przejście bezpośrednio do tego, czego szukają. Może to poprawić komfort korzystania z twojej witryny i potencjalnie utrzymać zaangażowanie odwiedzających na dłużej, zwiększając liczbę odsłon i zmniejszając współczynnik odrzuceń.

Mając to na uwadze, pokażemy ci 2 proste sposoby na dodanie przycisku Przejdź do przepisu: za pomocą wtyczki i własnego kodu. Możesz skorzystać z poniższych odnośników, aby przejść do preferowanej przez ciebie metody:

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

Najprostszym sposobem na dodanie przycisku Przejdź do przepisu w WordPress jest użycie WP Tasty. Ta wtyczka do kart z przepisami jest wybierana przez wielu blogerów kulinarnych, ponieważ oferuje mnóstwo funkcji, które mogą ulepszyć twój blog kulinarny.

Oprócz dodania przycisku „Przejdź do przepisu”, ma on również funkcje umożliwiające drukowanie twoich przepisów i łatwe przeliczanie ich na preferowane przez czytelnika jednostki miary. Ponadto można dodawać informacje, takie jak dane żywieniowe, czas gotowania, wielkość porcji i oceny użytkowników w przejrzysty i zorganizowany sposób.

Jedną z wad WP Tasty jest to, że nie ma darmowej wersji, ale jest to świetna inwestycja dla poważnych blogerów kulinarnych, którzy chcą zarabiać w Internecie.

Teraz, aby korzystać z WP Tasty, musisz najpierw kupić płatny plan. Możesz wybrać pakiet WP Tasty z pełnym dostępem lub samodzielną wtyczkę WP Tasty Tasty Recipes.

Po dokonaniu zakupu możesz pobrać wtyczkę i zainstalować ją na twojej witrynie internetowej WordPress. Możesz przeczytać nasz przewodnik na temat instalacji wtyczki WordPress, aby uzyskać więcej informacji.

Następnie przejdź do WP Tasty ” Kokpit z twojego panelu administracyjnego WordPress i kliknij „Wpisz licencję”.

Następnie należy wstawić klucz licencyjny wtyczki, który WP Tasty powinno wysłać na twój e-mail po dokonaniu zakupu.

Następnie wybierz „Wszystkie wtyczki” lub „Smaczne przepisy” we wtyczce (wtyczkach), aby włączyć menu rozwijane. Kliknij „Zapisz licencję”.

Po wykonaniu tej czynności przejdź do strony WP Tasty ” Tasty Recipes z kokpitu WordPress i przejdź do karty „Ustawienia”.

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

Jedną rzeczą, którą można zmienić w przyciskach, jest styl szybkich odnośników.

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

Ale oczywiście możesz też wybrać opcję Przyciski, jeśli takie są twoje preferencje.

Opcja Przyciski wygląda również bardziej atrakcyjnie, dzięki czemu czytelnicy mogą ją łatwo zauważyć.

W rzeczywistości jest tu o wiele więcej ustawień do zabawy, takich jak włączanie pól wyboru dla listy składników i skalowania przepisów. Pamiętaj, aby zaznaczyć opcje, które najlepiej pasują do twojego bloga.

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

Teraz za każdym razem, gdy korzystasz z karty przepisów WP Tasty, przyciski Przejdź do przepisu i Wydrukuj przepis u góry będą widoczne.

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

Jedną z zalet korzystania z WP Tasty do dodawania odnośników jest efekt płynnego przewijania. W ten sposób czytelnicy mogą przejść bezpośrednio do instrukcji przepisu bez żadnych przeskoków na stronie. Użycie własnego kodu do osiągnięcia tego efektu jest nieco bardziej skomplikowane, szczególnie dla początkujących.

W związku z tym, jeśli chcesz dodać przycisk Przejdź do przepisu za darmo, możesz wypróbować następną metodę.

Metoda 2: Użyj własnego konfiguratora, aby dodać przycisk Przejdź do przepisu (za darmo)

Ręczne dodanie przycisku Przejdź do przepisu może wydawać się onieśmielające dla zupełnie początkujących, ale nie martw się, ponieważ przeprowadzimy Cię dokładnie przez każdy krok.

Jeśli po raz pierwszy dodajesz własny kod do WordPressa, sugerujemy użycie wtyczki fragmentu kodu, takiej jak WPCode. Wtyczka ta umożliwia bezpieczne i łatwe wstawienie fragmentów kodu do WordPressa bez bezpośredniej edycji plików twojego motywu.

W ten sposób minimalizuje się ryzyko przypadkowego zepsucia układu lub funkcjonalności twojej witryny internetowej.

WPCode ma również darmową wersję, która jest świetna, jeśli masz ograniczony budżet. Zalecamy jednak uaktualnienie do wersji płatnej, jeśli chcesz korzystać z zaawansowanych funkcji, takich jak testowanie twojego kodu przed jego uruchomieniem.

Aby korzystać z WPCode, zainstaluj wtyczkę w twoim kokpicie administracyjnym WordPress. Możesz przeczytać nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress, aby uzyskać więcej szczegółów.

Następnie przejdź do Fragmenty kodu ” + Dodaj fragment. Tutaj wybierz „Add Your Custom Code (New Snippet)” i kliknij „Use snippet”.

Istnieją dwa fragmenty kodu, które należy dodać osobno do WPCode. Przejdźmy przez nie jeden po drugim:

Dodaj kod, aby automatycznie wstawić przycisk Przejdź do przepisu we wszystkich wpisach z przepisami.

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

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

W oknie podglądu 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');

Przyjrzyjmy się, jak działa ten kod.

Pierwsza część kodu, funkcja o nazwie has_recipe_anchor, sprawdza, czy w twoim wpisie na blogu znajduje się tag nagłówka (od H1 do H6), który ma kotwicę ustawioną na „przepis”. Funkcja preg_match przeszukuje twój tekst w poszukiwaniu tego konkretnego wzorca.

Druga część, funkcja o nazwie add_jump_to_recipe_button, jest odpowiedzialna za dodanie rzeczywistego przycisku do twojego wpisu.

Jeśli funkcja has_recipe_anchor z poprzedniego kroku znalazła nagłówek z kotwicą przepisu, tworzy kod HTML dla przycisku przeskoku. Następnie wstawi ten kod tuż przed treścią twojego wpisu na blogu.

Ostatni wiersz kodu, add_filter('the_content', 'add_jump_to_recipe_button');, zasadniczo mówi WordPressowi, aby uruchamiał funkcję add_jump_to_recipe_button za każdym razem, gdy pobiera treść wpisu na blogu.

W ten sposób kod może automatycznie sprawdzić nagłówek przepisu i w razie potrzeby dodać przycisk.

Mając to na uwadze, będziesz musiał dodać kotwicę #recipe do sekcji z przepisami w twoim wpisie na blogu. Nie martw się, pokażemy ci później, jak to zrobić.

Teraz przewiń w dół do sekcji „Wstaw” i upewnij się, że wybrana jest metoda „Auto Insert”. Jeśli chodzi o Lokalizację, możesz wybrać „Tylko frontend”, aby kod działał tylko w przedniej części twojej witryny internetowej WordPress.

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

Dodaj kod, aby nadać styl przyciskowi Przejdź do przepisu

Teraz dodamy własny kod CSS, aby nadać styl twojemu przyciskowi wezwania do działania. Powtórz kroki, aby utworzyć nowy własny fragment kodu w WPCode i nadaj mu prostą nazwę, na przykład „Style Jump to Recipe Button”.

Jeśli chodzi o rodzaj kodu, wybierz „Fragment kodu CSS”.

Teraz utworzyliśmy kod CSS, który sprawi, że nasz przycisk będzie zielony, a tekst w nim biały. Na przykład:

.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 background-color (dla koloru przycisku), color (dla tekstu) i background-color w .jump-to-recipe-button:hover (dla koloru przycisku, gdy kursor najedzie na przycisk).

Po wstawieniu kodu przewiń w dół do sekcji Wstawianie i wybierz opcję „Automatyczne wstawianie” jako metodę wstawiania. Następnie wybierz „Stopka w witrynie” jako lokalizację.

Następnie wystarczy włączyć fragment kodu i kliknąć „Zapisz fragment kodu”.

Dodaj kotwicę #recipe do twoich wpisów na blogu z przepisami.

Mimo włączania tych dwóch fragmentów kodu, przycisk przeskocz nie pojawi się, jeśli nie dodasz kotwicy #recipe do sekcji z przepisami w twoich wpisach na blogu WordPress. To właśnie zamierzamy teraz zrobić.

Najpierw utwórz nowy wpis na blogu z przepisami lub otwórz istniejący w edytorze bloków.

W naszym przykładzie używamy tagu nagłówka (H2), aby zasygnalizować sekcję z przepisami w naszym wpisie na blogu. Sugerujemy, abyś zrobił to samo, aby ułatwić użytkownikom znalezienie go podczas czytania twojego wpisu. Wyszukiwarki również doceniają, gdy treść twojego bloga ma uporządkowaną strukturę.

Kliknij blok Nagłówek twojej sekcji z przepisami. Następnie w panelu bocznym ustawień bloku otwórz menu „Zaawansowane” i wpisz „przepis” w polu Kotwica HTML.

Będzie on służył jako odnośnik kotwicy dla przycisku przeskoku.

Po zakończeniu kliknij „Opublikuj” lub „Aktualizuj”.

Jeśli podejrzysz swoją witrynę internetową na urządzeniu mobilnym lub komputerze, powinieneś teraz zobaczyć przycisk Przejdź do przepisu u góry treści twojego bloga po tytule wpisu.

Dodatkowe wskazówki, które poprawią komfort korzystania z twojego bloga kulinarnego

Poza przyciskiem Przejdź do przepisu, istnieją inne elementy projektu, których możesz użyć, aby poprawić wrażenia użytkownika na twoim blogu kulinarnym.

Na przykład, wyróżnianie tekstu w twoich wpisach może być świetnym sposobem na zwrócenie uwagi na ważne informacje lub wskazówki dotyczące gotowania. Mogą to być konkretne składniki, czas gotowania lub alternatywne zamienniki.

Przypisy to kolejne przydatne narzędzie. Pozwalają one na rozwinięcie danego kroku przepisu lub składnika bez przerywania przepływu twoich głównych instrukcji.

Wielu użytkowników będzie przeglądać twoje przepisy z telefonów lub tabletów. Projekt przyjazny dla urządzeń mobilnych zapewnia, że twoja treść jest poprawnie sformatowana i łatwa do odczytania na ekranach o różnych rozmiarach.

Wreszcie, odnośniki nawigacyjne typu „okruszki” mogą poprawić nawigację w witrynie internetowej. Te małe odnośniki u góry strony pokazują użytkownikom ich obecną, aktualną lokalizację w hierarchii twojej witryny internetowej. Ułatwia im to znalezienie drogi powrotnej do poprzednich sekcji lub przeglądanie powiązanych przepisów.

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak dodać przycisk Przejdź do przepisu w WordPress. Warto również zapoznać się z naszym wyborem najlepszych kreatorów stron WordPress typu „przeciągnij i upuść „, aby zaprojektować twoją witrynę internetową z jedzeniem oraz jak skonfigurować zamawianie jedzenia online w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.