Ikony potrafią zachwycać!
Posiadają niezwykłą zdolność błyskawicznego komunikowania się z odbiorcami, tworząc silne, wizualne powiązania.
Z tego właśnie powodu ikony są tak powszechnie stosowane, również na platformach WordPress.
Ponadto, korzystanie z tego samego motywu strony przez długie miesiące może stać się monotonne. To naturalne.
W rezultacie, poszukujemy czegoś nowego, aby po pewnym czasie ponownie odczuć znużenie,
I tak ten cykl się powtarza…
Jak więc przełamać tę rutynę?
Doskonałym rozwiązaniem są Dashicons!
Mogą one odświeżyć wygląd Twojej witryny i pomóc Ci się wyróżnić. Dodatkowo, pozwalają uniknąć niepotrzebnych obciążeń i spowolnienia strony przez nadmiar grafik.
Przyjrzyjmy się zatem bliżej Dashicons i sposobom na ich efektywne wykorzystanie na stronie WordPress.
Czym są Dashicons w WordPressie?
Dashicons to oficjalny zbiór ikon w postaci fontów, udostępniony przez WordPress w wersji 3.8. Te czcionki są atrakcyjne i niezwykle użyteczne. Są to wysokiej jakości pliki SVG, które można bez problemu skalować do dowolnego rozmiaru, bez utraty jakości.
Dzięki natywnej integracji z WordPressem, ponieważ zostały stworzone przez twórców platformy, można z nich korzystać bezpośrednio, bez konieczności ładowania dodatkowych skryptów. Zbiór zawiera około 350 ikon, które można znaleźć w oficjalnych Materiałach dla programistów WordPress.
Ikony zostały podzielone tematycznie, a dodatkowo dostępna jest dynamiczna wyszukiwarka, która umożliwia filtrowanie dostępnych symboli.
Możesz używać tych ikon w:
- Panelu administracyjnym WordPressa
- Menu nawigacyjnym
- Wpisach i stronach
- Metadanych
- Elementach edytora
- Niestandardowych wtyczkach i motywach
- Panelach administracyjnych
- Warstwie front-end
Czy zauważyłeś, że często używam słowa „ikony”?
W tym przypadku mam na myśli tylko ikony w formie czcionek.
Nie grafiki w postaci ikon.
Tak, istnieje między nimi różnica.
Wyjaśnijmy to sobie.
Jaka jest różnica między ikonami graficznymi a ikonami w postaci czcionek?
Czcionki ikon i ikony w formie grafik mają pewne podobieństwa, ale zamiast liter w czcionkach ikon występują symbole wektorowe.
Czy nie zrobiło się zbyt technicznie?
Spróbuję to wyjaśnić w prostszy sposób.
Czcionki ikon przypominają grafiki, które możesz wykorzystać do dodawania symboli na swojej stronie, ale nie są rzeczywistymi obrazami.
Daje to szereg korzyści.
Jakich?
Dowiesz się z kolejnej sekcji.
Dlaczego warto z nich korzystać?
- Są skalowalne jak teksty, ponieważ są czcionkami.
- Są lekkie, co nie wpływa negatywnie na prędkość ładowania strony, w przeciwieństwie do grafik.
- Można zmieniać kolory ikon za pomocą CSS i dodawać im dodatkowe efekty, takie jak gradienty, cienie itp.
- Pomagają w oszczędzaniu zapytań HTTP, umożliwiając jednoczesne ładowanie wszystkich czcionek używanych na stronie. W przypadku wielu grafik strona musi wysyłać osobne zapytania o pobranie każdego z nich, co wydłuża czas ładowania.
- Są łatwiejsze w użyciu i modyfikacji niż obrazy. Możesz dodawać unikalne i rozpoznawalne symbole bez konieczności tworzenia ich od nowa za każdym razem, gdy potrzebujesz ikony odtwarzacza wideo, maila, muzyki czy innych symboli.
- Są bardziej dostępne, ponieważ są wbudowane bezpośrednio w WordPress.
Jak z nich korzystać?
Używanie Dashicons nie jest skomplikowane.
Zaufaj mi, wiem co mówię :0
Wystarczy wykonać kilka kroków opisanych poniżej, aby zacząć korzystać z Dashicons na swojej stronie WordPress.
Krok 1: Aktywacja Dashicons na stronie WordPress
Zanim zaczniesz, musisz aktywować Dashicons w miejscu, w którym chcesz ich używać, na przykład w motywie. W tym celu trzeba dodać krótki kod do pliku functions.php.
Jak to zrobić?
- Przejdź do edytora motywów z panelu WordPress.
- Otwórz plik functions.php.
- Na końcu pliku wklej poniższy kod, aby dołączyć skrypty:
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Powyższy przykład dotyczy aktywacji Dashicons w warstwie front-end.
Upewnij się, że korzystasz z motywu potomnego przed edycją pliku functions.php. Bezpieczeństwo przede wszystkim, bo jeśli wprowadzisz zmiany bezpośrednio w pliku motywu i pojawi się jego aktualizacja, Twoje modyfikacje zostaną nadpisane.
Krok 2: Wyszukanie kodów HTML i CSS dla Dashicon
WordPress.org udostępnia bibliotekę Dashicons, w której można znaleźć kody HTML i CSS każdej ikony. Wystarczy przejść do sekcji Materiałów dla programistów, aby odnaleźć potrzebne ikony, a następnie:
- Kliknij na wybraną ikonę.
- Wybierz „Kopiuj CSS” lub „Kopiuj HTML”, klikając odpowiedni przycisk.
- Pojawi się okienko, z którego skopiuj kod do schowka.
- Zdecyduj, gdzie chcesz użyć ikony, np. w motywie, metadanych, menu nawigacyjnym itp.
- Wklej skopiowany kod do widżetu tekstowego lub edytora w wybranym miejscu.
- Dostosuj wygląd ikony za pomocą niestandardowego CSS.
I gotowe!
Domyślnie wszystkie ikony mają rozmiar 20 pikseli. Możesz to zmienić za pomocą CSS, używając np. opcji Zbadaj Element w Google Chrome lub FireBug w Firefoxie.
Jak w pełni wykorzystać potencjał Dashicons?
Omówiliśmy już sposób wstawiania Dashicons na stronie. Teraz przejdziemy do konkretnych zastosowań.
1. Ikony w menu nawigacyjnym
Aby dodać ikony do menu, wykonaj następujące kroki:
- Przejdź do sekcji Menu w panelu administracyjnym.
- Skopiuj kody HTML ikony menu z WordPress.org.
- Wklej kod w pole „Etykieta nawigacji” w panelu.
- Zapisz zmiany i odśwież stronę. W menu powinna pojawić się czytelna ikona.
2. Ikony w metadanych postu
Możesz dodawać ikony Dashicons przed datą, nazwiskiem autora, tagami lub kategorią wpisu. W zależności od motywu i wyświetlanych danych.
Po dodaniu Dashicons, otwórz plik style.css. Możesz też skorzystać z niestandardowego edytora CSS, który pozwoli Ci uniknąć utraty zmian po aktualizacji motywu. Następnie, wklej kod CSS, po znalezieniu pasującego selektora.
3. Ikony w panelu WordPressa
Możesz łatwo dodać ikony do tytułów, typów wpisów lub widżetów w panelu administracyjnym.
Wskazówka: Stwórz krótki kod
Aby łatwiej korzystać z Dashicons, warto stworzyć dla nich krótki kod. Będzie to szczególnie pomocne, gdy tworzysz strony dla klientów, którzy będą mogli dodawać Dashicons bez konieczności zagłębiania się w kod.
Podsumowanie
Mam nadzieję, że wszystko stało się jasne w kwestii Dashicons. Nie tylko podnoszą one walory estetyczne strony, ale są również łatwe w użyciu i przyspieszają jej ładowanie.
Jak wiadomo, połączenie „piękna i rozumu” to rzadkość.
Nie zwlekaj więc i zacznij korzystać z tych atrakcyjnych ikon na swojej stronie WordPress!