Jak korzystać z Dashicons w WordPress

Dashicons to wbudowany podstawowy zestaw ikon czcionek w WordPress, które zostały wprowadzone z powrotem w WordPress 3.8, gdy zrobili masową przeprojektowanie interfejsu użytkownika i domyślnie są używane do różnych linków na pasku administracyjnym po lewej stronie. Te ikony, gdy zostały zbudowane dla rdzenia, mogą być używane we własnych niestandardowych wtyczkach i motywach, nie tylko podczas definiowania niestandardowych typów postów lub tworzenia niestandardowych paneli administracyjnych, ale także w projekcie motywu front-end, jeśli chcesz. Co najlepsze, jest to bardzo proste!

Używanie Dashicons Dla Niestandardowych Typów Postów

Po zarejestrowaniu nowego niestandardowego typu postu w WordPress wszystko, co musisz zrobić, to ustawić menu_icon argument równy nazwie klasy CSS Dashiconu, którego chcesz użyć, a ta ikona zostanie zdefiniowana jako ikona wyświetlana po lewej stronie niestandardowej nazwy typu postu w panelu administracyjnym WordPress. Po prostu odwiedź stronę docelową Dashicons i kliknij dowolną ikonę, której chcesz użyć, a zobaczysz nazwę klasy u góry obok ikony, dzięki czemu możesz ją skopiować i wkleić.

Przykład:

// Zarejestruj nowy niestandardowy typ postu o nazwie Portfolio
register_post_type ('portfolio', array(
	'public' = > true,
	'menu_icon' = > 'dashicons-portfolio',
	'label' = > _ _ ('Portfolio',' local'),
);

Zrzut ekranu:

Poniżej znajduje się zrzut ekranu pokazujący, jak wyglądałaby ikona Dashicon dla typu wiadomości portfolio. Nie wiem, czy pamiętasz, ale przed Dashicons trzeba by było ustawić niestandardowy adres URL obrazu dla ikony typu post i kiedy używałeś wielu wtyczek na stronie często ikony razy nie pasowały, a administrator wyglądał dość źle. Teraz twoje ikony typu post będą pasowały do domyślnego interfejsu WP i będą dobrze wyglądać.

Używanie Dashicons w projekcie motywu Front-End

Wiele motywów w dzisiejszych czasach korzysta z ikon dla front-end dla rzeczy takich jak Meta postu (Data, Kategoria, tag, autor), a także ikony nagłówka, takie jak ikony użytkownika, wyszukiwania i sklepu. Chociaż najczęściej używaną i popularną ikoną czcionki jest FontAwesome i działa świetnie dla większości projektów, jest to również bardzo duży zestaw ikon, w tym wiele ikon, których prawdopodobnie nigdy nie użyjesz; możesz użyć strony internetowej generatora czcionek, takiej jak Fontello, aby utworzyć arkusz stylów tylko z ikon, których potrzebujesz, ale inną alternatywą jest useDashicons, który jest już zawarty w instalacji WordPress, wystarczy załadować Skrypty na front-end.

Proste dodaj następujące elementy do funkcji motywu.php, aby załadować Dashicons na front-end (Wstaw za pomocą motywu potomnego, jeśli dostosowujesz istniejący motyw i nie tworzysz własnego).

add_action ('wp_enqueue_scripts', function () {
    wp_enqueue_style ('dashicons' );
} );

Teraz możesz wstawić ikonę przez HTML jako taką:

< span class = "dashicons dashicons-menu" > < / span>

Prosta zmiana, gdzie jest napisane „menu” do ikony, której chcesz użyć. Ten kod HTML można wkleić w dowolnym miejscu motywu, w którym ma być wyświetlana ikona. Możesz nawet wstawić kod HTML do pozycji menu, wklejając go bezpośrednio do pola „Etykieta” elementu menu.

Jak utworzyć skrót Dashicons

Innym rozwiązaniem dla korzystania z Dashicons w interfejsie byłoby utworzenie shortcode, który można użyć w dowolnym miejscu na stronie. Jest to dobra opcja, jeśli tworzysz stronę dla klienta i chcesz ułatwić mu wstawianie ikon na stronie, aby nie musieli bawić się w HTML. Poniżej znajduje się przykład tego, jak ten kod może wyglądać, po prostu dodaj kod do swoich funkcji.plik php (lub inny plik nie będący szablonem ładowany przez funkcje.php)

add_shortcode ('dashicon', function ($atts ) {
	$atts = shortcode_atts( array(
		'icon' = > 'menu',
	), $atts,' bartag');
	jeśli ( ! empty ($atts[ 'icon'])) {
		return '< span class = " dashicons dashicons -". esc_attr ($atts[ 'icon' ] ) . '"></span>';
	}
} );

Użycie Shortcode:

[dashicon icon= "chart-pie"]

Uwaga: Powyższy Skrót zakłada, że wykonałeś już poprzedni krok i załadowałeś arkusz stylów Dashicons na swój front-end. Jeśli tego nie zrobiłeś, możesz po prostu dodać funkcję „wp_enqueue_style” z powyższego fragmentu bezpośrednio do krótkiego kodu, a arkusz stylów zostanie załadowany tylko wtedy, gdy używana jest ikona. Zaleca się jednak, aby załadować skrypt globalnie, w przeciwnym razie arkusz stylów dashicons załaduje się w stopce witryny, więc ikony będą renderowane po wyrenderowaniu witryny i spowodują lekki „flash”.