Chcesz dodać przycisk do twojego menu nagłówka WordPress?
Dodając przycisk do głównego menu nawigacyjnego, możesz wyróżnić wezwanie do działania na twojej witrynie i przyciągnąć więcej ruchu do najważniejszych stron. Jest to również łatwy sposób na dodanie tego samego przycisku do każdej strony i wpisu.
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.
Film instruktażowy
Jeśli wolisz pisemne instrukcje, czytaj dalej.
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.
Po dodaniu niestandardowej klasy CSS do elementu menu można 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.
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 strony docelowej za pomocą WordPressa i najlepszych usług e-mail marketingu dla małych firm.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Nicole Hassell says
This was helpful and created a button but it overwrites the link in my custom link….any idea how to stop that?
WPBeginner Support says
None of the CSS should touch the link in your menu item, we would recommend ensuring that the link was not changed in your meu settings and that you don’t have a plugin that could be changing your link.
Administrator
Sergio says
Thaks for this useful guide!
when I customize the button with CSS, the background occupies the entire height of the header. How can i modify this to fit more closely to the text? (remove excess background)
Thanks a lot
WPBeginner Support says
That would require editing your theme and what to edit would depend on the specific theme you are using.
Administrator
Bonny C. says
What a timesaver! Thanks a bunch!!
WPBeginner Support says
You’re welcome, glad our guide was helpful!
Administrator
Sawyer Smith says
Hi, Implemented the css into my menu and it turned out great after some time troubleshooting. However, when my cursor hovers over the button, a wide white rectangle covers the text when cursor is hovering. How can I fix this so that nothing like this occurs during hover? Thanks.
WPBeginner Support says
It likely is due to your theme’s default hover colors. If you are using the CSS from our article then you would want to add CSS code like the following:
.menu-button:hover {
background-color:#eb5e28;
}
Administrator
Nicole says
This is very helpful, thank you! I’m wondering if you can tell me how to change the color of the text on the sub-menu (dropdown from the button) only?
Thank you!
WPBeginner Support says
As each theme is different you would want to check with your theme’s support and they may have a recommendation, otherwise, you could use our guide on inspect element below for how to select the sub-menu for changing the text color.
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrator
Megan says
When I follow all of these steps the button doesn’t appear at all.. it just does nothing. Any idea why this might be? I copied and pasted the exact code from here!
WPBeginner Support says
Your specific theme may have CSS that would overwrite this code, if you check with your theme’s support they should be able to assist.
Administrator
Gabriela says
how do you resize the button? I see it stays inline with the text
jj says
Great help thanks!
Is it possible to make the button something that links to another external site using the CSS?
Dorothy says
I really appreciate this! For the longest time, I wasn’t sure how to go about this. I was able to create a button in the nav with no problems following this. Thanks!!
Stephanie says
Thank you so much for this tutorial! I’m not a techie kind of person, and at first it didn’t work, because I was in my primary navigation menu, went to secondary and did the steps and voila! Added a little bling to my site!
WPBeginner Support says
Glad our guide was able to help
Administrator