Niedawno jeden z naszych czytelników poprosił nas o samouczek, Jak dodać przyciski duchów CSS w swoich motywach WordPress. Przyciski Ghost to przezroczyste przyciski wezwania do działania, które są obecnie bardzo popularne. W tym artykule pokażemy Ci, jak łatwo dodać przyciski duchów CSS do motywu WordPress, używając bardzo mało CSS i HTML.
Co To Jest Ghost Button?
Ghost button to terminologia projektowania stron internetowych używana do przezroczystych przycisków, które wtapiają się w ich tło i są zauważalne tylko przez obramowanie wokół nich.
Tworzenie normalnych przycisków wezwania do działania w WordPress jest dość łatwe. Możesz nawet dodawać do nich swoje posty i strony bez pisania CSS lub HTML. Ponieważ przyciski ghost są nowym trendem, nie ma konkretnych wtyczek do tworzenia tylko przycisków w stylu ghost.
Dodawanie przycisków Ghost w WordPress
Jak wspomniano wcześniej, będziesz musiał użyć odrobiny CSS i HTML, aby dodać przyciski ducha do motywu WordPress.
Najpierw musisz dodać następujący kod CSS do arkusza stylów motywu lub motywu podrzędnego.
Do połączenia z serwerem WWW potrzebny jest klient FTP. Po podłączeniu przejdź do / wp-content / themes / Your-Theme / folder i znajdź styl.plik css. Otwórz ten plik, aby edytować go w edytorze tekstowym, a następnie wklej ten fragment kodu u dołu pliku. (Dowiedz się więcej o wklejaniu fragmentów kodu z sieci w WordPress).
.ghost-button {
wyświetlacz: inline-block;
width: 200px;
padding: 8px;
color: # fff;
border: 2px solid #fff;
text-align: center;
zarys: brak;
tekst-Dekoracja: Brak;
Przejście: kolor tła 0,2 s,
kolor 0.2 s ease-out;
}
.ghost-button: hover,
.ghost-button: active {
background-color: # ffff;
kolor: #000;
Przejście: kolor tła 0,3 s,
kolor 0.3 s ease-in;
}
Zapisz zmiany i prześlij plik z powrotem na serwer.
Teraz, gdy chcesz wyświetlić przycisk, wszystko, co musisz zrobić, to dodać class= „ghost-button”.
Na przykład, jeśli chcesz dodać łącze pobierania, Utwórz łącze pobierania, tak jak zwykle. Następnie przejdź do edytora tekstu, aby zobaczyć formatowanie HTML.
Znajdź kod HTML linku do pobrania i Dodaj klasę CSS w ten sposób:
<a href="http://example.com/downloads / "class="ghost-button" >Pobierz teraz< / a>
Zapisz lub zaktualizuj swój post, a następnie przejrzyj go. Zobaczysz piękny przycisk ducha zamiast zwykłego starego linku.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać przycisk ducha do motywu WordPress. Możesz również zobaczyć nasz przewodnik, jak dodawać przyciski w WordPress bez użycia skrótów
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
