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?

Jedną z najczęstszych skarg, jakie widzieliśmy na blogach kulinarnych, jest to, że czytelnicy muszą przewijać długie historie i reklamy, zanim dotrą do właściwego przepisu.

Chociaż te historie pomagają w SEO i monetyzacji, a wielu lojalnych czytelników docenia osobisty charakter, nie każdy ma czas, aby przeczytać wszystko.

Pomyśl o tym: ktoś może być w sklepie spożywczym, sprawdzając składniki, lub w swojej kuchni, gotowy do rozpoczęcia gotowania. Chce tylko szybkiego dostępu do instrukcji przepisu.

Właśnie wtedy przycisk „Przejdź do przepisu” okazuje się przydatny. Daje on zapracowanym odwiedzającym szybki sposób na pominięcie przepisu, jednocześnie pozwalając Ci zachować styl opowiadania historii na blogu i strategię monetyzacji.

W ten sposób zadowolisz oba typy czytelników – tych, którzy lubią Twoje treści, i tych, którzy potrzebują przepisu szybko.

Dodanie tego przycisku może poprawić doświadczenie użytkownika na Twojej stronie i potencjalnie utrzymać zaangażowanie odwiedzających na dłużej, zwiększając liczbę wyświetleń stron i zmniejszając współczynniki odrzuceń.

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, aby dodać przycisk „Przejdź do przepisu” (zalecane)
• Metoda 2: Użyj niestandardowego kodu, aby dodać przycisk „Przejdź do przepisu” (bezpłatnie)
• Dodatkowe wskazówki dotyczące poprawy doświadczenia użytkownika Twojego bloga kulinarnego

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.

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”, WP Tasty 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 WP Tasty i o tym, jak może ono przynieść korzyści Twojemu blogowi, koniecznie zapoznaj się z naszą obszerną recenzją wtyczki.

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 skorzystać z WP Tasty, najpierw musisz zakupić płatny plan. Możesz wybrać pakiet WP Tasty All Access Bundle lub samodzielny plugin WP Tasty 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 WP Tasty do dodania linku „przejdź” jest płynny efekt przewijania. W ten sposób czytelnicy mogą przejść bezpośrednio do instrukcji przepisu bez żadnych gwałtownych przeskoków na stronie. Użycie niestandardowego kodu do osiągnięcia tego efektu jest nieco bardziej skomplikowane, zwłaszcza dla początkujących.

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 do automatycznego wstawiania przycisku „Przejdź do przepisu” we wszystkich postach z przepisami

Pierwszy fragment kodu automatycznie doda przycisk „Przejdź do przepisu” we wszystkich postach na blogu zawierających sekcję z przepisem. Możesz nazwać swój fragment kodu „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, funkcja o nazwie has_recipe_anchor, sprawdza, czy w Twoim poście na blogu znajduje się tag nagłówka (H1 do H6) z kotwicą ustawioną na „recipe”. 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 faktycznego przycisku do Twojego posta.

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

Ostatnia linia kodu, add_filter('the_content', 'add_jump_to_recipe_button');, zasadniczo mówi WordPressowi, aby uruchomił funkcję add_jump_to_recipe_button za każdym razem, gdy pobiera zawartość 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 kod, 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ć różnych kolorów, możesz po prostu zastąpić kody szesnastkowe w background-color (dla koloru przycisku), color (dla tekstu) i background-color w sekcji .jump-to-recipe-button:hover (dla koloru przycisku po najechaniu kursorem).

Po wstawieniu kodu przewiń w dół do sekcji Wstawianie i wybierz „Automatyczne wstawianie” jako Metodę wstawiania. Następnie wybierz „Stopka 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łówka sekcji z przepisem. Następnie w bocznym panelu ustawień bloku otwórz menu „Zaawansowane” i wpisz „przepis” w polu Kotwica HTML.

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

Oprócz przycisku „Przejdź do przepisu”, istnieją inne elementy projektowe WordPress, których możesz użyć, aby poprawić doświadczenie użytkownika na swoim blogu kulinarnym.

Na przykład, podświetlanie tekstu we 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, czasy gotowania lub alternatywne zamienniki.

Przypisy to kolejne przydatne narzędzie. Pozwalają one na rozwinięcie konkretnego kroku przepisu lub składnika bez przerywania głównego toku 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 Twoje treści są poprawnie sformatowane i łatwe do odczytania na różnych rozmiarach ekranu.

Na koniec linki nawigacyjne typu „breadcrumb” mogą poprawić nawigację po stronie internetowej. Te małe linki na górze strony pokazują użytkownikom ich aktualną lokalizację w hierarchii Twojej witryny. Ułatwia im to znalezienie drogi powrotnej do poprzednich sekcji lub przeglądanie powiązanych przepisów.

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.