누구에게나 일어나는 일입니다.

마음에 드는 테마를 찾아 설치하고 사이트의 모습을 즐기며 몇 달을 보냅니다. 그러나 몇 달이 지나면 주제가 진부하게 느껴지기 시작합니다. 약간 지루합니다.

유일한 문제는 새로운 것을 찾는 데 몇 시간을 보내고 싶지 않다는 것입니다. 테마에 약간의 멋을 더할 수 있는 방법이 있다면 약간의 플레어로 테마를 돋보이게 만드세요.

절망에 빠져 손을 내밀기 전에 테마를 멋지게 꾸밀 수 있는 쉬운 방법을 알려드리겠습니다. 너무 많은 노력을 기울이지 않고 사이트 속도를 저하시킬 수 있는 불필요한 이미지를 추가하지 않습니다.

Dashicons를 입력하세요. Dashicons는 WordPress 3.8에서 도입된 글꼴 아이콘입니다. 대시보드에 로그인하면 볼 수 있는 멋지고 멋진 아이콘입니다. 테마에도 대시콘을 추가할 수 있다면 멋지지 않을까요?

그렇다면 어떻게 할 수 있는지 보여드리겠습니다.

대시콘을 어떻게 사용할 수 있습니까? 탐색 메뉴?

간단한 예부터 시작하겠습니다. Dashicons는 버전 3.8부터 WordPress에 이미 포함되어 있지만 사이트의 프런트 엔드에 올바르게 표시하려면 대시콘을 포함해야 합니다. 즉, 테마입니다.

1단계: 테마 Dashicons 준비

테마 Dashicons를 준비하려면 먼저 functions.php 파일을 엽니다(Appearance> ;Editor – 기본적으로 현재 테마의 CSS 파일을 엽니다.functions.php 파일을 클릭하여 Editor에 로드합니다.)

2단계: 스크립트를 대기열에 넣습니다.

맨 아래까지 스크롤하여 다음 줄을 붙여넣습니다. 끝에 있는 코드:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

좋아요! 이제 테마에서 Dashicons를 사용할 준비가 되었습니다.

3단계: 메뉴 항목에 Dashicons 추가

홈 링크에 Dashicon을 추가해 보겠습니다. Dashicons 웹사이트로 이동하여 원하는 아이콘을 선택하세요.

업데이트: Dashicons는 원래 GitHub.io에서 사용할 수 있었지만 이후 WordPress.org에서 사용할 수 있게 되었습니다.

4단계:

원하는 아이콘을 클릭한 다음(여기서는 홈 아이콘을 선택했습니다) HTML 복사를 클릭합니다. 필요한 코드가 포함된 팝업 창이 표시됩니다.

5단계:

WordPress 대시보드로 돌아가서 Appearance >를 클릭합니다. ; 메뉴로 이동하여 Navigation Label이라고 적힌 곳에 코드를 붙여넣습니다.

단어를 계속 표시하려면 닫는 div 괄호 다음에 입력합니다.

을 클릭합니다. 홈 페이지를 저장하고 로드합니다. 이제 홈 링크에 멋지고 선명한 Dashicon이 표시됩니다.

모든 탐색 메뉴 항목 또는 홈에만 이 작업을 수행할 수 있습니다. 일치하는 아이콘으로 위의 단계를 반복하십시오. 쉬웠죠?

포스트 메타에서 대시콘을 어떻게 사용하나요?

한 단계 더 나아가 포스트 메타에 대시콘을 추가하거나 다른 말로 작가의 대시콘 앞에 대시콘을 추가할 수 있습니다. 이름, 날짜, 카테고리 또는 태그; 에 따라테마 및 표시되는 정보입니다.

이미 테마에 Dashicons를 추가했으므로 이제 해야 할 일은 style.css 파일을 여는 것입니다(또는 항상 더 나은 옵션인 사용자 정의 CSS 편집기를 사용하여 테마가 업데이트되면 변경 사항을 잃지 마세요!) 일치하는 선택기를 찾아 CSS 코드를 추가하세요.

자신의 이름이나 작성자 이름 앞에 아이콘을 추가하고 싶다고 가정해 보겠습니다.

1단계:

먼저 원하는 아이콘을 선택합니다.

2단계:

그런 다음 클릭하고 이번에는 CSS 복사를 선택합니다. 다시 붙여넣어야 하는 코드가 있는 팝업 창이 나타납니다.

3단계:

이제 style.css를 엽니다. 해당 선택자를 찾으십시오(이 경우 .entry-author). :before를 추가하고 Dashicons 웹사이트에서 복사한 CSS 코드를 붙여넣으면 작성자 이름 앞에 멋진 아이콘이 표시됩니다. 또한 Dashicons 글꼴을 사용하고 있음을 지정해야 합니다. 수정된 코드는 다음과 같습니다.

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

스타일도 약간 추가하면 완성된 코드는 다음과 같습니다.

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

최종 결과

그래서 결국에는 이렇게 될까요?

다음과 같습니다.

Dashicons를 사용할 수 있는 방법은 매우 많습니다. 창의력을 발휘하여 무엇을 할 수 있는지 확인하세요.

전체 구성

위의 예 외에도 백엔드에서 Dashicons를 사용하여 다른 항목을 지정할 수 있습니다.다른 게시물 유형에 대한 아이콘을 사용하거나 게시물 제목, 위젯 제목에 사용할 수 있습니다. 또는 사용자 정의 랜딩 페이지를 만드는 경우 사이트의 다른 페이지를 구분할 수 있습니다.

다음은 기본 예입니다. 이를 사용하여 다음을 만들 수 있습니다.