Ikony są fascynujące!
Mają moc szybkiego komunikowania się z publicznością poprzez nawiązanie silnego połączenia wizualnego.
Właśnie dlatego ikony są szeroko stosowane wszędzie, w tym na stronach WordPress.
Ponadto używanie tego samego motywu w witrynie przez kilka miesięcy może być nudne. To jest powszechne.
A potem będziesz szukał czegoś ciekawszego, używając tego i znowu się nudzisz,
A cykl trwa i trwa…
Jak więc ominąć ten cykl nudy?
Dashicons to doskonały sposób!
Może urozmaicić estetykę Twojej witryny i pomóc Ci się wyróżnić. Oszczędzi to również dodatkowych wysiłków i zatłoczenia witryny niepotrzebnymi obrazami, które spowalniają szybkość strony.
Przyjrzyjmy się więc Dashiconom i sposobom ich efektywnego wykorzystania w witrynie WordPress.
Spis treści:
Co to jest WordPress Dashicons?
Dashicons to oficjalne czcionki ikon WordPressa wprowadzone lata temu wraz z wersją 3.8. Te czcionki są fajne i niesamowite, jeśli używasz ich w swojej witrynie. Są to najwyższej jakości pliki SVG, które można łatwo skalować do dowolnego rozmiaru bez pikselizacji.
Ponieważ posiadają natywną obsługę WordPressa, ponieważ zostały stworzone przez ich zespół, możesz z nich korzystać bezpośrednio, bez ładowania dodatkowych skryptów. Zawiera około 350 czcionek ikon, które można znaleźć w oficjalnej wersji Zasoby dla programistów WordPress.
Skategoryzowali te ikony na podstawie tematu, a ponadto możesz zobaczyć dynamiczne pole wyszukiwania, które pozwala filtrować dostępne ikony.
Możesz używać tych ikon na:
- Pulpit nawigacyjny WordPressa
- Menu nawigacji
- Strony i posty
- Metadane
- Elementy edytora
- Niestandardowe wtyczki i motywy
- Panele administracyjne
- Projekt front-endu
Czy zauważyłeś, że wielokrotnie mówię „ikony”?
Tutaj mam na myśli tylko czcionki ikon.
Nie obrazy w formie ikon.
Tak, jest między nimi różnica.
Rozwiążmy to.
Różnica między ikonami obrazów a czcionkami ikon?
Czcionki ikon i ikony obrazów są nieco podobne, ale zamiast alfabetów w czcionkach ikon występują symbole wektorowe.
Czy to nie stało się zbyt techniczne?
Pozwól mi to wyjaśnić.
Zasadniczo te czcionki ikon przypominają obrazy, których można użyć do dodawania symboli na swojej stronie internetowej, ale nie rzeczywisty obraz.
Dają ci wiele korzyści.
Jak?
Dowiedz się w następnej sekcji.
Dlaczego warto ich używać?
- Skalowalne jak teksty używane w Twojej witrynie, ponieważ są czcionkami
- Lekki, który nie wpływa na szybkość ładowania strony w porównaniu do obrazów
- Możliwość ustawienia koloru ikony za pomocą CSS i dodania dodatkowych właściwości, takich jak kolor gradientu, cień itp.
- Świetnie radzi sobie z zapisywaniem zbyt wielu żądań HTTP, umożliwiając jednoczesne ładowanie wszystkich czcionek, których można używać na wszystkich stronach. Jeśli używasz wielu obrazów w witrynie, będziesz musiał wysyłać wiele próśb o ich pobranie, co wydłuża czas ładowania strony.
- Łatwy w użyciu i regulacji niż obrazy. Możesz dodawać rozpoznawalne i kreatywne symbole bez potrzeby ponownego tworzenia ich za każdym razem, gdy potrzebujesz ikony odtwarzacza wideo, wiadomości e-mail, muzyki lub jakiejkolwiek innej rzeczy.
- Większa dostępność, ponieważ są wbudowane bezpośrednio w WordPress
Jak z nich korzystać?
Korzystanie z Dashicons nie jest inżynierią rakietową.
Zaufaj mi; Znam oba :0
Wystarczy wykonać kilka kroków wymienionych poniżej, aby rozpocząć korzystanie z WordPress Dashicons.
Krok 1: Włącz Dashicons na swojej stronie WordPress
Zanim zaczniesz, włącz Dashicons tam, gdzie potrzebujesz, na przykład motywu. W tym celu należy dodać kilka kodów do pliku function.php.
Aby to zrobić:
- Najpierw przejdź do edytora motywów/wyglądów z pulpitu nawigacyjnego WordPress.
- Otwórz plik function.php.
- Przewiń do końca pliku i dodaj kilka linii kodu, aby dodać skrypty do kolejki
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Powyższy przykład dotyczy włączenia Dashicons na interfejsie użytkownika.
Upewnij się, że utworzyłeś motyw potomny przed edycją pliku functions.php. Dzieje się tak, ponieważ jeśli bezpośrednio edytujesz plik motywu, a następnie pojawi się aktualizacja dla tego motywu, zastąpi to wszystkie zmiany wprowadzone w pliku.
Krok 2: Znajdź kody HTML i CSS Dashicon
WordPress.org oferuje bibliotekę Dashicons, która pomaga znaleźć kody CSS i HTML należące do każdej ikony. Tutaj przejdź do Zasobów dla programistów, aby znaleźć Dashicony, których chcesz użyć, a następnie:
- Kliknij ikonę swojego życzenia.
- Wybierz pomiędzy „Kopiuj CSS” lub „Kopiuj HTML”, klikając na nią.
- Teraz zobaczysz wyskakujące okienko. Po prostu skopiuj kod do schowka.
- Zdecyduj, gdzie chcesz używać ikony, na przykład motywy, metadane, menu nawigacyjne itp.
- Wklej skopiowany kod do widżetu tekstowego lub edytora tekstu wybranego miejsca.
- Modyfikuj wygląd ikon za pomocą niestandardowego CSS
Otóż to.
Poza tym domyślnie wszystkie ikony mają rozmiar 20 pikseli. Możesz to zmienić za pomocą elementów CSS z opcji, takich jak Inspect Element w Google Chrome lub FireBug w Firefoksie.
Jak w pełni wykorzystać WordPress Dashicons?
Widziałeś, jak możesz wykorzystać Dashicons na swojej stronie, a teraz zobaczymy jego wykorzystanie do konkretnych celów.
1. Korzystanie z menu nawigacji
Aby dodać ikony do menu, wykonaj poniższe czynności:
- Przejdź do Menu/Wygląd z pulpitu nawigacyjnego
- Skopiuj kody HTML zaprojektowane dla ikony menu z WordPress.org
- Wklej go na „Etykiecie nawigacji” na desce rozdzielczej
- Kliknij przycisk „zapisz”, a następnie załaduj stronę główną. Powinien wyświetlać chłodną i wyraźną ikonę.
2. Korzystanie z meta postu
Będziesz mógł używać Dashicons tuż przed datą, nazwiskiem autora, tagiem lub kategorią na podstawie motywu i wyświetlanych danych.
Ponieważ już umieściłeś w kolejce Dashicons, otwórz plik style.css. W przeciwnym razie możesz także skorzystać z niestandardowego edytora CSS, który nie pozwala utracić zmian po aktualizacji motywu. Następnie dodaj swój kod CSS po znalezieniu pasującego selektora.
3. Na zapleczu WordPressa
Jeśli chcesz dołączyć różne ikony dla różnych niestandardowych tytułów postów, typów postów lub widżetów, jest to łatwe.
Szybka wskazówka: utwórz krótki kod
Aby łatwo korzystać z Dashicons, możesz utworzyć dla niego krótki kod. Jest to przydatne, zwłaszcza gdy tworzysz stronę internetową dla swoich klientów, którym łatwo byłoby wstawić Dashicony bez grzebania w kodach.
Wniosek
Mam nadzieję, że wszystko jest jasne po twojej stronie dotyczące WordPress Dashicons. Nie tylko dbają o estetykę Twojej witryny, ale są również łatwe w użyciu i poprawiają szybkość ładowania strony.
I wiesz, „piękno i rozum” to rzadka kombinacja.
Więc pospiesz się, użyj tych przyciągających wzrok Dashiconów na swojej stronie WordPress!