Każdemu się to zdarza.

Znajdujesz motyw, który Ci się podoba, instalujesz go i spędzasz kilka miesięcy ciesząc się wyglądem swojej strony. Ale potem, po kilku miesiącach, motyw zaczyna czuć się nieświeży, trochę nudny.

Jedynym problemem jest to, że nie chcesz spędzić kilku godzin na szukaniu czegoś nowego. Gdyby tylko istniał sposób na dodanie odrobiny pikanterii do swojego motywu, odrobiny polotu, aby go wyróżnić.

Zanim rzucisz ręce w górę w rozpaczy, pozwól mi pokazać łatwy sposób na doprawienie motywu bez zbytniego wysiłku i bez dodawania niepotrzebnych obrazów, które mogą spowolnić twoją stronę.

Enter Dashicons. Dashicons to ikony czcionek, które zostały wprowadzone w WordPress 3.8. Są to te niesamowite i fajne ikony, które widzisz, gdy logujesz się do swojego pulpitu nawigacyjnego. Czy nie byłoby fajnie, gdybyś mógł dodać je również do swojego motywu?

Otóż można i pokażę Ci jak.

Jak wykorzystać Dashicons w menu nawigacyjnym?

Zacznijmy od prostego przykładu. Dashicony są już zawarte w WordPressie od wersji 3.8, ale nadal musisz je dołączyć, aby były poprawnie wyświetlane na front-endzie Twojej witryny; czyli w Twoim motywie.

Krok 1: Przygotuj swój motyw Dashicons

Aby przygotować motyw Dashicons, najpierw otwórz plik functions.php (znajdujący się w Appearance>Editor - domyślnie otworzy on plik CSS twojego aktualnego motywu. Idź dalej i poszukaj pliku functions.php i kliknij na niego, aby załadować go w edytorze).

Krok 2: Wywołanie skryptu

Przewiń całą drogę do dołu i wklej te linie kodu na końcu:

 //Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

W porządku, teraz Twój motyw jest gotowy do użycia Dashicons.

Krok 3: Dodawanie Dashiconów do pozycji menu

Dodajmy Dashicon dla linku Home. Wejdź na stronę Dashicons i wybierz ikonę, która Ci się podoba.

Aktualizacja: Dashicons były pierwotnie dostępne na GitHub.io, ale od tego czasu zostały udostępnione na WordPress.org.

Krok 4:

Kliknij na wybraną ikonę (w tym przypadku wybrałem ikonę domu), a następnie kliknij na Kopiuj HTML. Da Ci to wyskakujące okienko z kodem, którego potrzebujesz.

Krok 5:

Wróć do swojego pulpitu nawigacyjnego WordPress, kliknij na Appearance> Menus i wklej kod w prawo, gdzie mówi Navigation Label.

Jeśli nadal chcesz, aby słowo pojawiło się, wpisz je po zamykającym nawiasie div.

Kliknij na Zapisz i załaduj swoją stronę główną. Twój link domowy powinien teraz wyświetlać ładny, wyraźny Dashicon.

Możesz to zrobić dla wszystkich pozycji menu nawigacyjnego lub tylko dla domu. Po prostu powtórz powyższe kroki z odpowiednimi ikonami. To było proste, prawda?

Jak używać Dashicons w meta postu?

Możesz pójść o krok dalej i dodać Dashicons do meta postu, lub innymi słowy dodać Dashicons przed nazwą autora, datą, kategorią lub tagiem; w zależności od motywu i informacji, które wyświetla.

Ponieważ już umieściłeś Dashicons w swoim motywie, wszystko co musisz teraz zrobić to otworzyć plik style.css (lub użyć edytora Custom CSS, który jest zawsze lepszą opcją, aby nie stracić zmian po aktualizacji motywu!), znaleźć pasujący selektor i dodać kod CSS.

Powiedzmy, że chcesz dodać ikonę przed swoim nazwiskiem lub nazwiskiem autora.

Krok 1:

Najpierw wybieramy ikonę, którą chcielibyśmy mieć.

Krok 2:

Następnie kliknij na nią i tym razem wybierz opcję Copy CSS. Ponownie pojawi się okienko z kodem, który musisz wkleić.

Krok 3:

Teraz otwórz swój style.css i znajdź odpowiedni selektor, w tym przypadku - .entry-author. Dodając :before, a następnie wklejając kod CSS skopiowany ze strony Dashicons, nazwisko autora będzie miało przed sobą ładną ikonkę. Musisz również określić, że używasz czcionki Dashicons. Zmodyfikowany kod wygląda tak:

 .entry-author:before { font-family: "dashicons"; content: "\"; } 

Dodajmy też trochę stylizacji i teraz gotowy kod wygląda tak:

 .entry-author:before { font-family: "dashicons"; content: "\"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Wynik końcowy

Jak więc będzie to wyglądało w ostatecznym rozrachunku?

Coś w tym stylu:

Jest tak wiele sposobów na wykorzystanie Dashicons - pozwól sobie na kreatywność i zobacz, co możesz zrobić.

Składanie wszystkiego w całość

Oprócz powyższych przykładów, możesz użyć Dashicons w swoim backendzie, aby określić różne ikony dla różnych typów postów lub możesz użyć ich w tytułach postów, tytułach widżetów lub jeśli tworzysz niestandardową stronę docelową, możesz odróżnić różne strony swojej witryny.

Oto podstawowy przykład tego, co możesz wykorzystać do ich stworzenia: