zdarza się każdemu.

znajdujesz motyw, który Ci się podoba, instalujesz go i spędzasz kilka miesięcy ciesząc się wyglądem swojej witryny. Ale potem, po kilku miesiącach, temat zaczyna być nieświeży. Trochę nudne.

jedynym problemem jest to, że nie chcesz spędzić kilku godzin na szukaniu czegoś nowego. Gdyby tylko istniał sposób, aby dodać trochę pikanterii do motywu, trochę flary, aby się wyróżnić.

zanim rzucisz ręce w rozpacz, pozwól, że pokażę Ci łatwy sposób na urozmaicenie motywu bez zbytniego wysiłku i bez dodawania niepotrzebnych obrazów, które mogłyby spowolnić Twoją witrynę.

wpisz Dashicons. Dashicony to ikony czcionek, które zostały wprowadzone w WordPress 3.8. Są to te niesamowite i fajne ikony, które widzisz po zalogowaniu się do Pulpitu nawigacyjnego. Czy nie byłoby fajnie, gdybyś mógł dodać je do swojego motywu?

cóż, możesz I pokażę Ci jak.

jak używać Dashiconów w menu nawigacyjnym?

zacznijmy od prostego przykładu. Dashicony są już zawarte w WordPress od wersji 3.8, ale nadal musisz je uwzględnić, aby prawidłowo wyświetlały się na froncie witryny; to jest Twój motyw.

Krok 1: Przygotuj swój motyw Dashicons

aby przygotować motyw dashicons najpierw otwórz swoje funkcje.plik php (znaleziony w wyglądzie>– – domyślnie otworzy plik CSS bieżącego motywu. SZUKAJ funkcji.plik php i kliknij na niego, aby załadować go w edytorze.)

Krok 2: Przeszukaj skrypt

przewiń do dołu i wklej te linie kodu na końcu:

wszystko w porządku! Teraz Twój motyw jest gotowy do użycia Dashicons.

Krok 3: Dodawanie Dashiconów do elementów menu

dodajmy Dashicon do Twojego linku startowego. Przejdź do strony Dashicons i wybierz odpowiednią ikonę.

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

Krok 4:

kliknij na żądaną ikonę (w tym przypadku wybrałem ikonę home), A następnie kliknij Kopiuj HTML. To daje wyskakujące okno z kodem, którego potrzebujesz.

Krok 5:

wróć do pulpitu WordPress, kliknij wygląd> menu i wklej kod dokładnie tam, gdzie jest napisane Etykieta nawigacyjna.

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

kliknij Zapisz i załaduj swoją stronę główną. Twój link domowy powinien teraz wyświetlać ładny, ostry Dashicon.

Możesz to zrobić dla wszystkich elementów menu nawigacyjnego lub po prostu dla domu. Wystarczy powtórzyć powyższe kroki z pasującymi ikonami. To było łatwe, prawda?

jak używać Dashiconów w post meta?

możesz pójść o krok dalej i dodać Dashicony do meta postu, lub innymi słowy dodać Dashicony przed nazwiskiem autora, datą, kategorią lub tagiem; w zależności od motywu i wyświetlanych informacji.

skoro już zapytałeś o Dashicony w swoim temacie, wszystko co musisz teraz zrobić to otworzyć swój styl.plik css (lub użyj niestandardowego edytora CSS, który jest zawsze lepszą opcją, aby nie stracić zmian po aktualizacji motywu!), znajdź pasujący Selektor i dodaj kod CSS.

Załóżmy, że chcesz dodać ikonę przed nazwiskiem lub nazwiskiem autora.

Krok 1:

najpierw wybieramy ikonkę, którą chcemy.

Krok 2:

następnie kliknij na niego i tym razem wybierz Kopiuj CSS. Ponownie pojawi się wyskakujące okno z kodem, który musisz wkleić.

Krok 3:

teraz otwórz swój styl.css i znaleźć odpowiedni selektor, w tym przypadku -.wpis-autor. Dodając: przed, a następnie wklejając kod CSS skopiowany ze strony Dashicons, nazwisko autora będzie miało ładną ikonę przed nim. Musisz również określić, że używasz czcionki Dashicons. Zmodyfikowany kod wygląda tak:

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

dodajmy również trochę stylizacji, a teraz ukończony kod wygląda tak:

efekt końcowy

więc jak to będzie wyglądało na końcu?

coś w tym stylu:

jest tak wiele sposobów na wykorzystanie Dashicons – pozwól swojej kreatywności i zobacz, co możesz zrobić.

składając to wszystko razem

oprócz powyższych przykładów, możesz użyć Dashicons w swoim zapleczu, 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 rozróżnić różne strony witryny.

świetnym tego przykładem jest stara strona główna WP Superstars. Tutaj możesz zobaczyć Dashicony używane dla różnych obszarów witryny:

myślnik nie jest jedynym typem czcionek ikon, które można dodać. Sprawdź nasz samouczek ikon FontAwesome, aby uzyskać więcej informacji.

Zawiera aktualizacje przez e-mail. Anuluj subskrypcję w dowolnym momencie.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.