Jak dodawać w WordPressie ładne przyciski z ikonami?
- Poziom trudności:
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Na podstronach zawierający plik do pobrania albo we wpisach, które mają na celu zachęcanie czytelników do przejścia na inną stronę kluczową rolę odrywają ładne przyciski. Pisząc ładne mam na myśli takie, które będą się wyróżniały kolorem, krojem oraz ikoną, która będzie sugerowała zawartość kryjącą się za przyciskiem. WordPress domyślnie nie posiada opcji dodawania przykuwających uwagę przycisków, ale są sposoby aby taką funkcjonalność dodać.
Zanim napiszę kilka słów więcej na temat wygody korzystania z tego rozwiązania zobacz jak prezentuje się kilka przycisków, które zrobiłem w 2 minuty przy pomocy nowej funkcjonalności:
Od pewnego czasu korzystam z tego rozwiązania i muszę przyznać, że bardzo przypadło mi ono do gustu. Przyciski, które mogę dodawać z poziomu edytora wizualnego w łatwy sposób można edytować, nie sprawia większego problemu zmiana rozmiaru, ikony, koloru czy zaokrąglenie rogów. W dodatku link do przycisku mogę zmieniać zarówno przy pomocy dodatkowego przycisku w edytorze lub przy pomocy znanego każdemu przycisku wstaw/edytuj odnośnik.
Aby dodawać ikony podobne do tych z powyższej animacji musisz zainstalować wtyczkę Mango Buttons. Po instalacji i uruchomieniu będziesz mógł przejść do sekcji Mango Buttons -> Settings aby dokonać pierwszych ustawień.
Ustawienia
Tak wyglądają moje ustawienia. Pierwsza opcja dotyczy wyglądu ikony w edytorze wizualnym. Mamy możliwość wyboru pomiędzy kolorową ikoną, a ikoną w odcieniach szarości. Wyglądają one tak:
a ponieważ większość ikon ma spójną szarą kolorystykę, dlatego postanowiłem wybrać opcję „grayscale” aby i ta ikona się szczególnie nie wyróżniała.
Druga opcja powinna dotyczyć kroju pisma z wykorzystaniem rozszerzonego alfabetu łacińskiego (o ogonki jak przypuszczam) jednak po pierwszych testach okazało się, że nie ma problemu z pisaniem polskich znaków w przyciskach.
Dlatego właśnie opcję Extended Language Support pozostawiam bez zmian.
Przygotowanie przycisku
Dodawanie przycisku nie jest niczym trudnym. Zamiast opisywać jak to zrobić przygotowałem dla Ciebie animację:
Jak widzisz na poniższej prezentacji do wyboru jest cała paleta barw. Przyciski mogą być płaskie, przestrzenne, z zaokrąglonymi rogami albo proste. Można zmieniać także rozmiar tekstu albo wielkość samego przycisku. Baza ikon jest również pokaźnej wielkości. Do wyboru są dziesiątki ikon. Z większością z nich możesz się zapoznać na stronie Font Awesome Icons. Symbol tekstowy ikony może być dodawany w dowolnym miejscu: zarówno przed jak i po tekście wewnątrz przycisku.
Umieszczenie przycisku z lewej lub prawej strony oraz po środku nie powinno sprawić większego problemu. Wystarczy skorzystać ze standardowej opcji wyrównywania.
Umieszczanie przycisku w widgetach
Po przygotowaniu przycisku w edytorze wizualnym nic nie stoi na przeszkodzie aby skorzystać z niego również w Widgetach lub w dowolnym miejscu motywu edytując pliki dostępne w sekcji Wygląd -> Edytor. Wystarczy po skończeniu przygotowywania przejść do trybu tekstowego, skopiować kod wyświetlania przycisku, a następnie umieścić go w widgecie tekstowym lub bezpośrednio w pliku .php w wybranym wcześniej miejscu w motywie. Po zapisaniu przycisk powinien wyświetlać się poprawnie w nowej lokalizacji.
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Każdy, kto zapisze się na newsletter otrzyma ebooka pt. 
Komentarze — Napisz pierwszy komentarz
Czy powyższe wskazówki były skuteczne? Jeśli tak, podziel się swoimi spostrzeżeniami w komentarzu. Gdybyś chciał się podzielić ze mną skrawkiem kodu aby uzupełnić minikurs to skorzystaj z portalu pastebin.com i wyślij linka do kodu. Instrukcje jak to zrobić znajdziesz tutaj.