Jak dodać przycisk w Twoim menu nagłówka WordPress?

Dodanie przycisku do głównego menu nawigacyjnego pozwala wyróżnić wezwanie do działania w twojej witrynie, co zwiększa ruch na najważniejszych stronach. Jest to również łatwy sposób na dodanie tego samego przycisku do każdej strony i wpisu.

Widzieliśmy, jak WPForms, jedna z naszych marek partnerskich, dodała przycisk „Pobierz WPForms” bezpośrednio w nagłówku WordPress. Ten prosty dodatek pomógł zwiększyć liczbę konwersji i sprzedaż.

Umieszczając przycisk w dobrze widocznym miejscu, WPForms ułatwił odwiedzającym podjęcie działania, co zaowocowało większym zaangażowaniem i większą liczbą potencjalnych klientów.

W tym artykule pokażemy ci, jak łatwo dodać przycisk do twojego menu nagłówka WordPress.

Dlaczego warto dodać przycisk w menu nagłówka WordPress?

Menu nawigacyjne WordPress to zazwyczaj zwykłe odnośniki tekstowe, w których wszystko wygląda tak samo i nic tak naprawdę się nie wyróżnia.

Niektóre odnośniki są jednak ważniejsze od innych. Na przykład, możesz chcieć dodać odnośnik do formularza zamówienia online lub strony rejestracji Twojej witryny członkowskiej WordPress.

Domyślnie te ważne odnośniki wyglądają tak samo jak reszta menu nagłówka.

Możesz sprawić, że odnośniki będą bardziej przyciągać wzrok, zamieniając je w przyciski. Może to zwiększyć liczbę kliknięć i konwersji.

Domyślnie można dodawać przyciski we wpisach i na stronach WordPress za pomocą bloku Przyciski, ale nie można ich dodawać do menu nawigacyjnych.

W związku z tym zobaczmy, jak dodać przycisk do twojego menu nagłówka WordPress.

Dodanie przycisku w menu nagłówka twojego WordPressa

Na początek należy dodać odnośnik, który ma zostać przekształcony w przycisk.

Wystarczy przejść do strony Wygląd ” Menu w twoim kokpicie WordPress i dodać odnośnik do menu nawigacyjnego. Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat dodawania menu nawigacyjnego w WordPress.

Następnie należy kliknąć przycisk Opcje ekranu w górnej części ekranu.

Spowoduje to wyświetlenie panelu z wieloma nowymi opcjami. Po prostu zaznacz pole obok „Klasy CSS”.

Teraz kliknij, aby rozwinąć pozycję menu, którą chcesz przekształcić w przycisk.

Pojawi się powiadomienie o nowej opcji klasy CSS, w której można wpisać nazwę klasy. Klasę CSS można nazwać dowolnie, ale w tym przewodniku użyjemy nazwy menu-button.

Po wpisaniu rodzaju nazwy kliknij przycisk „Zapisz menu”, aby zapisać twoje zmiany.

Teraz dodałeś własną klasę CSS do elementu menu. Możesz zmienić jego wygląd za pomocą własnego kodu CSS. Możesz dodać ten kod za pomocą wbudowanego konfiguratora WordPress lub za pomocą wtyczki fragmentów kodu.

Dodaj przycisk w menu nagłówka twojego WordPressa za pomocą WPCode (zalecane)

Najlepszym sposobem na dodanie własnego kodu do WordPressa jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu, która umożliwia dodawanie własnych CSS, PHP, HTML i innych.

Ponieważ nie edytujesz bezpośrednio plików motywu, możesz uniknąć wielu typowych błędów WordPress. Możesz także zaktualizować swój motyw lub przełączyć się na zupełnie inny motyw bez utraty własnego kodu.

Jeśli chcesz usuwać przycisk w dowolnym momencie, możesz go wyłączyć jednym kliknięciem.

Najpierw należy zainstalować i włączać darmową wtyczkę WPCode. Więcej informacji na ten temat można znaleźć w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączeniu wtyczki przejdź na stronę Code Snippets ” + Add Snippet z kokpitu WordPress.

Tutaj zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny. Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączać strony załączników i wiele więcej.

Teraz wystarczy najechać kursorem myszy na opcję „Add Your Custom Code (New Snippet)” i kliknąć przycisk „Use Snippet”, gdy się pojawi.

Na następnym ekranie należy wpisać tytuł fragmentu kodu. To jest tylko dla twojego odniesienia, więc możesz użyć czegokolwiek chcesz.

Następnie otwórz menu rozwijane „Rodzaj kodu” i wybierz „Fragment kodu CSS”.

Po wykonaniu tej czynności możesz wkleić fragment kodu CSS do edytora WPCode:

.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}

Dodając powyższy fragment kodu, upewnij się, że zastąpiłeś menu-button nazwą twojej klasy CSS.

Powyższy fragment kodu tworzy pomarańczowy przycisk z efektem cienia, jak widać na poniższym obrazku.

Zachęcamy do zabawy z fragmentem kodu CSS, aby zobaczyć, jakie różne efekty można stworzyć. Możesz na przykład zmienić kolor tła, kolor tekstu odnośnika, dodać obramowanie i wiele więcej.

Jeśli chcesz użyć innego koloru, musisz znać jego kod szesnastkowy. Jeśli nie masz pewności, jakich kodów użyć, możesz skorzystać z zasób takich jak Color Hex.

Gdy będziesz zadowolony z kodu, kliknij przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”, a następnie kliknij przycisk „Zapisz fragment kodu”.

Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz nowy przycisk menu nagłówka w działaniu.

Dodaj przycisk w menu nagłówka WordPress za pomocą własnego konfiguratora

Jeśli nie chcesz używać wtyczki, możesz dodać kod za pomocą wbudowanego konfiguratora.

Po prostu przejdź do Wygląd ” Dostosuj, a po prawej stronie zobaczysz podgląd twojej witryny, a także kilka ustawień motywu w lewej kolumnie.

Aby rozpocząć, kliknij opcję „Dodatkowe CSS”.

Zobaczysz teraz pole, w którym możesz dodać własny kod CSS.

Ponownie, możesz użyć powyższego fragmentu kodu jako punktu wyjścia.

Kiedy będziesz zadowolony z wyglądu przycisku, kliknij „Opublikuj”, aby wprowadzić twoje zmiany.

Film instruktażowy

Jeśli jesteś bardziej wzrokowcem, zapoznaj się z naszym filmem instruktażowym, jak dodać przycisk w menu nagłówka twojego WordPressa:

Bonus: Dodaj przycisk Click to Call w nagłówku WordPressa

Jeśli masz witrynę małej firmy, możesz również dodać przycisk „kliknij, aby zadzwonić” w menu nawigacyjnym. Ułatwi to odwiedzającym skontaktowanie się z Tobą, a nawet może poprawić rankingi wyszukiwarek, czyniąc Twoją witrynę bardziej przyjazną dla SEO.

Aby dodać ten przycisk, przejdź na stronę Wygląd ” Menu z kokpitu WordPress i rozwiń kartę „Własne odnośniki” po prawej stronie.

Tutaj dodaj swój numer telefonu VOIP w adresie URL i dodaj dla niego etykietę. Następnie kliknij przycisk „Dodaj do menu”.

Po dodaniu przycisku „Kliknij, aby zadzwonić” do twojej listy odnośników nawigacyjnych, nie zapomnij kliknąć przycisku „Zapisz menu”, aby zapisać ustawienia.

Aby uzyskać szczegółowe instrukcje, możesz zapoznać się z naszym poradnikiem na temat dodawania przycisku „kliknij, aby połączyć” w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać przycisk do twojego menu nagłówka WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia przypiętego pływającego menu nawigacyjnego w WordPress i naszym poradnikiem na temat dodawania logiki warunkowej do menu 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.