Jak dodać przycisk do menu nagłówka WordPress

Dodanie przycisku do głównego menu nawigacyjnego pozwala wyróżnić wezwanie do działania na Twojej stronie, kierując więcej ruchu na Twoje najważniejsze strony. 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 partnerskich marek, dodała przycisk „Get WPForms” bezpośrednio w nagłówku WordPress. To proste dodanie pomogło zwiększyć konwersje i sprzedaż.

Umieszczając przycisk w dobrze widocznym miejscu, WPForms ułatwił odwiedzającym podjęcie działania, co przełożyło się na lepsze zaangażowanie i więcej leadów.

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

Dlaczego dodać przycisk do menu nagłówka WordPress?

Menu nawigacyjne WordPressa zazwyczaj składa się ze zwykłych linków tekstowych, gdzie wszystko wygląda tak samo i nic nie wyróżnia się.

Jednak niektóre linki są ważniejsze od innych. Na przykład, możesz chcieć dodać link do formularza zamówienia online lub strony rejestracji Twojej witryny członkowskiej WordPress.

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

Możesz sprawić, że te linki będą bardziej przyciągające wzrok, zamieniając je w przyciski. Może to przynieść więcej kliknięć i konwersji.

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

Mając to na uwadze, zobaczmy, jak możesz dodać przycisk do menu nagłówka WordPress.

Dodawanie przycisku do menu nagłówka WordPress

Aby rozpocząć, musisz dodać link, który chcesz zamienić w przycisk.

Po prostu przejdź do strony Wygląd » Menu w swoim panelu WordPress i dodaj link do swojego menu nawigacyjnego. Szczegółowe instrukcje znajdziesz w naszym przewodniku jak dodać menu nawigacyjne w WordPress.

Następnie musisz kliknąć przycisk Opcje ekranu na górze ekranu.

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

Teraz kliknij, aby rozwinąć element menu, który chcesz zamienić w przycisk.

Zauważysz nową opcję klasy CSS, w której możesz wpisać nazwę klasy. Klasę CSS możesz nazwać dowolnie, ale w tym przewodniku użyjemy menu-button.

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

Teraz dodałeś niestandardową klasę CSS do elementu menu. Możesz zmienić jego wygląd za pomocą niestandardowego kodu CSS. Możesz dodać ten kod za pomocą wbudowanego narzędzia dostosowywania WordPress lub używając wtyczki fragmentów kodu.

Dodaj przycisk do menu nagłówka WordPress za pomocą WPCode (zalecane)

Najlepszym sposobem na dodanie niestandardowego kodu do WordPressa jest użycie WPCode. Jest to najlepsza wtyczka fragmentów kodu, która pozwala dodawać niestandardowy CSS, PHP, HTML i inne.

Ponieważ nie edytujesz bezpośrednio plików motywu, możesz uniknąć wielu częstych błędów WordPressa. Możesz również aktualizować swój motyw lub przełączyć się na zupełnie inny motyw bez utraty niestandardowego kodu.

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

Najpierw musisz zainstalować i aktywować bezpłatną wtyczkę WPCode. Więcej informacji znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do strony Fragmenty kodu » + Dodaj fragment z panelu administracyjnego WordPress.

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

Teraz po prostu najedź kursorem myszy na opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment”, gdy się pojawi.

Następnie musisz wybrać „Fragment kodu CSS” jako typ kodu z listy opcji, które pojawią się na ekranie.

Na następnym ekranie musisz wpisać tytuł dla fragmentu kodu.

Nazwa służy tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Po wykonaniu tego jesteś gotowy, aby wkleić fragment kodu CSS do pola „Podgląd kodu”:

.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ąpisz menu-button nazwą swojej klasy CSS.

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

Śmiało eksperymentuj z fragmentem CSS, aby zobaczyć, jakie różne efekty możesz stworzyć. Na przykład, możesz zmienić kolor tła, kolor tekstu linku, dodać obramowanie i wiele więcej.

Jeśli chcesz użyć innego koloru, musisz znać jego kod szesnastkowy. Jeśli nie jesteś pewien, jakich kodów użyć, możesz skorzystać z zasobu takiego 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”.

Teraz, jeśli odwiedzisz swoją witrynę WordPress, zobaczysz nowy przycisk w menu nagłówka w akcji.

Dodaj przycisk do menu nagłówka WordPress za pomocą narzędzia Dostosowywanie

Jeśli nie chcesz używać wtyczki, możesz dodać kod za pomocą wbudowanego narzędzia do dostosowywania.

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

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

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

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

Gdy będziesz zadowolony z wyglądu przycisku, kliknij „Opublikuj”, aby wprowadzić zmiany na żywo.

Samouczek wideo

Jeśli jesteś bardziej wzrokowcem, zapoznaj się z naszym samouczkiem wideo na temat dodawania przycisku do menu nagłówka WordPress:

Bonus: Dodaj przycisk „Zadzwoń” w nagłówku WordPress

Jeśli masz witrynę małej firmy, możesz również dodać przycisk kliknij, aby zadzwonić do swojego menu nawigacyjnego. Ułatwi to odwiedzającym kontakt z Tobą, a nawet może poprawić Twoje pozycje w wyszukiwarkach, czyniąc Twoją witrynę bardziej przyjazną dla SEO.

Aby dodać ten przycisk, przejdź do strony Wygląd » Menu z panelu administracyjnego WordPress i rozwiń zakładkę „Niestandardowe linki” po prawej stronie.

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

Po dodaniu przycisku „kliknij, aby zadzwonić” do listy linków nawigacyjnych, nie zapomnij kliknąć przycisku „Zapisz menu”, aby zachować swoje ustawienia.

Szczegółowe instrukcje znajdziesz w naszym poradniku jak dodać przycisk kliknij, aby zadzwonić w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać przycisk do menu nagłówka WordPress. Możesz również zapoznać się z naszym przewodnikiem jak stworzyć lewitujące menu nawigacyjne w WordPress oraz naszym poradnikiem jak dodać logikę warunkową do menu 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.