WordPress에서 대시콘을 사용하는 방법

Dashicon은 WordPress 3.8에서 대규모 백엔드 UI 재설계를 수행할 때 도입된 WordPress의 내장 핵심 글꼴 아이콘 세트이며 기본적으로 왼쪽 관리 표시줄의 다양한 링크에 사용됩니다. 이 아이콘은 핵심용으로 제작되었지만 사용자 정의 게시물 유형을 정의하거나 사용자 정의 관리 패널을 생성할 때뿐만 아니라 원하는 경우 프런트 엔드 테마 디자인에서도 사용자 정의 플러그인 및 테마에 사용할 수 있습니다. 무엇보다도 매우 쉽습니다!

사용자 정의 게시물 유형에 대시콘 사용

WordPress에 새로운 사용자 정의 게시물 유형을 등록할 때 menu_icon 인수를 사용하려는 Dashicon의 CSS 클래스 이름과 동일하게 설정하기만 하면 이 아이콘이 WordPress에 표시되는 아이콘으로 정의됩니다. WordPress 관리 패널에 있는 사용자 정의 게시물 유형 이름의 왼쪽. Dashicons 방문 페이지를 방문하여 사용하려는 아이콘을 클릭하면 아이콘 옆 상단에 클래스 이름이 표시되므로 복사하여 붙여넣을 수 있습니다.

예:

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
	'public' => true,
	'menu_icon' => 'dashicons-portfolio',
	'label' => __( 'Portfolio', 'local' ),
);

스크린샷:

아래는 포트폴리오 게시물 유형에 대한 Dashicon 아이콘의 모양을 보여주는 스크린샷입니다. 기억하실지 모르겠지만 Dashicons 이전에는 게시물 유형 아이콘에 대한 사용자 정의 이미지 URL을 설정해야 했으며 사이트에서 많은 플러그인을 사용할 때 아이콘이 일치하지 않는 경우가 많았고 관리자가 꽤 안 좋아 보였습니다. 이제 게시물 유형 아이콘이 기본 WP UI와 일치하고 보기 좋게 보입니다.

프런트엔드 테마 디자인에 대시콘 사용하기

요즘 많은 테마는 게시물 메타(날짜, 카테고리, 태그, 작성자)와 같은 프런트엔드 아이콘과 사용자, 검색, 상점 아이콘과 같은 헤더 아이콘을 사용합니다. 가장 많이 사용되고 인기 있는 글꼴 아이콘은 FontAwesome이며 대부분의 프로젝트에서 훌륭하게 작동하지만 아마도 절대 사용하지 않을 많은 아이콘을 포함하는 매우 큰 아이콘 세트이기도 합니다. Fontello와 같은 글꼴 생성기 웹사이트를 사용하여 필요한 아이콘으로만 스타일시트를 만들 수 있지만 또 다른 대안은 WordPress 설치에 이미 포함되어 있는 Dashicons를 사용하는 것입니다. 프런트 엔드에 스크립트를 로드하기만 하면 됩니다.

간단하게 다음을 테마의 function.php에 추가하여 프런트 엔드에 Dashicon을 로드하세요(기존 테마를 사용자 정의하고 직접 만들지 않는 경우 하위 테마를 통해 삽입).

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

이제 다음과 같이 HTML을 통해 아이콘을 삽입할 수 있습니다.

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

사용하려는 아이콘에 "메뉴"라고 표시된 부분을 간단히 변경하세요. 이 HTML은 아이콘을 표시하려는 테마의 어느 위치에나 붙여넣을 수 있습니다. 메뉴 항목의 "레이블" 필드에 HTML을 직접 붙여넣어 메뉴 항목에 HTML을 삽입할 수도 있습니다.

Dashicons 단축 코드를 만드는 방법

프런트 엔드에서 Dashicon을 사용하는 또 다른 솔루션은 사이트 어디에서나 사용할 수 있는 단축 코드를 만드는 것입니다. 이는 클라이언트를 위한 사이트를 만들고 클라이언트가 사이트에 아이콘을 더 쉽게 삽입할 수 있도록 하여 HTML을 조작할 필요가 없도록 하려는 경우 좋은 옵션입니다. 다음은 해당 코드의 예입니다. 간단히 function.php 파일(또는 function.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>';
	}
} );

단축 코드 사용법:

[dashicon icon="chart-pie"]

참고: 위의 단축 코드는 이전 단계를 이미 수행하고 프런트 엔드에 Dashicons 스타일시트를 로드했다고 가정합니다. 아직 수행하지 않은 경우 위 스니펫의 "wp_enqueue_style" 기능을 바로 단축 코드에 추가하면 아이콘이 사용될 때만 스타일시트가 로드됩니다. 그러나 스크립트를 전체적으로 로드하는 것이 좋습니다. 그렇지 않으면 대시콘 스타일시트가 사이트 바닥글에 로드되어 사이트가 렌더링된 후 아이콘이 렌더링되고 약간의 "플래시"가 발생하게 됩니다.