Jak korzystać z Dashiconów w WordPress

Dashicons to wbudowany podstawowy zestaw ikon czcionek w WordPress, który został wprowadzony w WordPress 3.8, kiedy dokonano ogromnego przeprojektowania interfejsu użytkownika zaplecza i domyślnie są używane dla różnych linków na lewym pasku administracyjnym. Ikony te, choć 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-endu, jeśli chcesz. A co najważniejsze, jest to bardzo proste!

Używanie myślników dla niestandardowych typów postów

Kiedy rejestrujesz nowy niestandardowy typ postu w WordPressie, wystarczy ustawić argument menu_icon równy nazwie klasy CSS Dashicona, 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 nazwa klasy pojawi się u góry obok ikony, abyś mógł ją skopiować i wkleić.

Przykład:

// Register a new custom post type named 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 postu portfolio. Nie wiem, czy pamiętasz, ale przed Dashicons musiałeś ustawić niestandardowy adres URL obrazu dla ikony typu postu, a gdy korzystałeś z wielu wtyczek na stronie, często ikony nie pasowały, a administrator wyglądał całkiem źle. Teraz ikony typu postu będą pasować do domyślnego interfejsu użytkownika WP i będą dobrze wyglądać.

Używanie Dashiconów w projekcie motywu front-endu

Obecnie wiele motywów wykorzystuje ikony interfejsu użytkownika, takie jak meta wpisu (data, kategoria, tag, autor), a także ikony nagłówka, takie jak ikony użytkownika, wyszukiwania i sklepu. Chociaż najczęściej używaną i najpopularniejszą ikoną czcionki jest FontAwesome i świetnie sprawdza się w większości projektów, jest to również bardzo duży zestaw ikon, zawierający wiele ikon, których prawdopodobnie nigdy byś nie użył; możesz użyć witryny z generatorem czcionek, takiej jak Fontello, aby utworzyć arkusz stylów zawierający tylko potrzebne ikony, ale inną alternatywą jest użycie Dashicons, który jest już zawarty w instalacji WordPress. Wszystko, co musisz zrobić, to załadować skrypty z interfejsu.

Po prostu dodaj następujące elementy do plikufunctions.php motywu, aby załadować Dashicons na interfejsie użytkownika (wstaw poprzez motyw potomny, 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ę poprzez HTML jako taki:

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

Prosta zmiana w miejscu, w którym jest napisane „menu” przy ikonie, 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 w polu „etykieta” pozycji menu.

Jak utworzyć krótki kod Dashicons

Innym rozwiązaniem wykorzystania Dashiconów w interfejsie użytkownika byłoby utworzenie krótkiego kodu, którego można używać w dowolnym miejscu witryny. Jest to dobra opcja, jeśli tworzysz witrynę dla klienta i chcesz ułatwić mu wstawianie ikon na stronie, aby nie musiał bawić się w HTML. Poniżej znajduje się przykład tego, jak może wyglądać ten kod. Po prostu dodaj kod do pliku Functions.php (lub innego pliku innego niż szablon, ładowanego przez Functions.php).

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

Użycie krótkiego kodu:

[dashicon icon="chart-pie"]

Uwaga: w powyższym krótkim kodzie założono, że wykonałeś już poprzedni krok i załadowałeś arkusz stylów Dashicons na swój interfejs. Jeśli jeszcze 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 zostanie użyta ikona. Zaleca się jednak załadowanie skryptu globalnie, w przeciwnym razie arkusz stylów dashicons zostanie załadowany w stopce Twojej witryny, dzięki czemu ikony będą renderowane po wyrenderowaniu witryny i spowoduje lekki „błysk”.