Niedawno jeden z naszych czytelników poprosił nas o poradnik, jak dodać przyciski CSS Ghost w swoich motywach WordPress. Przyciski duchy to przezroczyste przyciski wezwania do działania, które są obecnie bardzo popularne. W tym artykule pokażemy, jak można łatwo dodać przyciski-duchy CSS w twoim motywie WordPress przy użyciu bardzo małej ilości CSS i HTML.
Co to jest Ghost Button?
Ghost Button to terminologia używana w projektowaniu stron internetowych w odniesieniu do przezroczystych przycisków, które wtapiają się w tło i są powiadomienie tylko przez obramowanie wokół nich.
Tworzenie zwykłych przycisków wezwania do działania w WordPressie jest dość proste. Możesz nawet dodać je do twoich wpisów i stron bez pisania CSS lub HTML. Ponieważ przyciski duchy są nowym trendem, nie ma specjalnych wtyczek do tworzenia tylko przycisków w stylu duchów.
Dodawanie przycisków duchów w WordPress
Jak wspomniano wcześniej, będziesz musiał użyć odrobiny CSS i HTML, aby dodać przyciski-widma do twojego motywu WordPress.
Najpierw musisz dodać następujący kod CSS do arkusza stylów twojego motywu lub motywu potomnego.
Będziesz potrzebował klienta FTP, aby połączyć się z twoim serwerem WWW. Po połączeniu przejdź do katalogu /wp-content/themes/Your-Theme/ i znajdź plik style.css. Otwórz ten plik do edycji w edytorze tekstu, a następnie wklej ten fragment kodu na dole pliku. (Dowiedz się więcej o wklejaniu fragmentów kodu z sieci w WordPress).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .ghost-button { display : inline-block ; width : 200px ; padding : 8px ; color : #fff ; border : 2px solid #fff ; text-align : center ; outline : none ; text-decoration : none ; transition : background-color 0.2 s ease-out, color 0.2 s ease-out; } .ghost-button:hover, .ghost-button:active { background-color : #fff ; color : #000 ; transition : background-color 0.3 s ease-in, color 0.3 s ease-in; } |
.
Zapisz twoje zmiany i prześlij plik z powrotem na serwer.
Teraz, gdy chcesz wyświetlić przycisk, wystarczy dodać class=”ghost-button”.
Na przykład, jeśli chcesz dodać odnośnik do pobierania, utwórz go w normalny sposób. Następnie przełącz się do edytora tekstu, aby zobaczyć formatowanie HTML.
Znajdź kod HTML dla twojego odnośnika pobierania i dodaj klasę CSS w następujący sposób:
<a href="http://example.com/downloads/" class="ghost-button">Pobierz teraz</a>.
Zapisz lub zaktualizuj swój wpis, a następnie wyświetl jego podgląd. Zobaczysz 111111 piękny przycisk-duch zamiast zwykłego odnośnika.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać przycisk-widmo w twoim motywie WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania przycisków w WordPress bez użycia krótkich kodów
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
mahmut tanık
Hi , thanks for great sharings. I’ve researching for a long time.
How can i add customization button on my wp website ? Customization button i mean see on theme demo sites right or left side there is a button when click you can change theme style or color .
WPBeginner Support
Hi Mahmut,
In most WordPress themes you can do that by visiting theme’s options page or by visiting Appearance » Customize page in WordPress admin area.
Admin
Dinesh Fernando
Thanks, useful code – worked nicely on a live project.
shravan upadhayay
Great post . thanx for sharing.