WordPress의 탐색 메뉴로 이미지 아이콘을 추가하는 방법

워드프레스 탐색 메뉴에 이미지 아이콘을 추가 하시겠습니까? 최근에 사용자 중 한 명이 메뉴 아이콘을 추가하는 쉬운 방법을 요청했습니다. 이 기사에서는 WordPress의 탐색 메뉴가있는 이미지 아이콘을 추가하는 방법을 설명합니다.

WordPress에 탐색 메뉴 아이콘 추가

탐색 메뉴가있는 이미지 아이콘을 추가해야하는 이유는 무엇입니까?

일반적으로 워드프레스 탐색 메뉴는 일반 텍스트 링크입니다. 이 링크는 대부분의 웹 사이트에서 작동하지만 이미지 아이콘을 추가하여 탐색 메뉴의 상호 작용을보다 멋지게 만들 수 있습니다.

이미지 아이콘을 사용하여 메뉴를 더 눈에 잘 띄게 만들 수 있습니다. 예를 들어 연락처 페이지 옆에있는 멋진 이미지 아이콘을 사용하면 메뉴의 다른 링크에서 더 눈에 띄는 이미지를 만들 수 있습니다.

WordPress의 탐색 메뉴로 이미지 아이콘을 쉽게 추가하는 방법을 살펴 보겠습니다.

방법 1 : 플러그인을 사용하여 메뉴 아이콘 추가

이 방법은 더 쉽고 코드를 포함하지 않으므로 초보자에게 권장됩니다.

당신이해야 할 첫 번째 일은 메뉴 이미지 플러그인을 설치하고 활성화하는 것입니다. 자세한 내용은 워드프레스 플러그인을 설치하는 방법에 대한 단계별 가이드를 참조하십시오.

활성화가되면 방문해야합니다. 외관»메뉴 페이지.

여기에서 오른쪽 열의 메뉴 항목을 클릭하여 펼칠 수 있습니다. 각 항목의 설정에서 '메뉴 이미지'및 '마우스 오버시 이미지'버튼이 표시됩니다.

메뉴 이미지 버튼

이 버튼을 사용하여 사용하려는 메뉴 이미지 아이콘을 선택하거나 업로드 할 수 있습니다. 원하는 경우 메뉴 이미지를 업로드하고 호버 이미지를 무시하면됩니다.

'이미지 크기'드롭 다운에서 이미지 아이콘의 크기를 선택할 수 있습니다. 이 크기는 메뉴 아이콘 이미지와 마우스 오버시 이미지 모두에 적용됩니다.

플러그인에는 선택할 수있는 여러 옵션이 있습니다. 그러나 24×24 또는 36×36 크기를 사용하여 메뉴 아이콘을 작게 유지하는 것이 좋습니다.

메뉴 아이콘 크기

메뉴 이미지에 대한 사용자 정의 크기를 추가하려면 테마의 functions.php 파일이나 사이트 별 플러그인에이 코드를 추가하여이 작업을 수행 할 수 있습니다.



add_filter ( 'menu_image_default_sizes', 함수 ($ 크기) {
 
  // 기본 36x36 크기를 제거합니다.
  설정을 해제 ($ 크기['menu-36x36']);
 
  // 새 크기를 추가하십시오.
  $ 크기['menu-50x50'] = 배열 (50,50);
 
  // $ sizes를 반환합니다 (필수).
  return $ sizes;
 
});

이미지 아이콘 위, 아래, 앞 또는 뒤에 제목 위치를 설정할 수도 있습니다. 또한 제목을 숨기고 각 탐색 메뉴의 이미지 아이콘 만 표시 할 수도 있습니다.

직위

설정을 구성한 후에는 모든 탐색 메뉴 항목에 이미지 아이콘을 별도로 추가하십시오. 다음으로 메뉴 아이콘을 보려면 '메뉴 저장'버튼을 클릭해야합니다.

탐색 메뉴의 이미지 아이콘

방법 2 : 코드 조각을 사용하여 메뉴 아이콘 추가

이 방법은 CSS를 중심으로하는 숙련 된 사용자를위한 방법입니다.

첫째, 방문해야합니다. 미디어»새로 추가 WordPress에있는 모든 이미지 아이콘을 업로드하는 방법. 업로드되면 URL을 복사하여 메모장과 같은 텍스트 편집기에 붙여 넣어야합니다.

다음으로 가야합니다. 외관»메뉴 화면의 오른쪽 상단 모서리에있는 '화면 옵션'버튼을 클릭하십시오. 화면 옵션에서 'CSS 클래스'옵션을 선택해야합니다.

CSS 클래스 추가

그런 다음 아래로 스크롤하여 메뉴 항목을 클릭하여 설정을 확장하십시오. 메뉴 항목에 CSS 클래스 이름을 추가해야하는 'CSS 클래스 (선택 사항)'필드가 표시됩니다.

클래스 이름 추가

이제이 사용자 정의 CSS를 테마에 추가해야합니다.



.homeicon {
background-image : url ( 'http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat : no-repeat;
배경 위치 : 왼쪽;
패딩 왼쪽 : 5px;
}

이 CSS 스 니펫에서 .homeicon은 위의 CSS 클래스 필드에 추가 한 클래스 이름입니다.

테마에 따라 메뉴 아이콘을 배치 할 때 CSS를 약간 조정해야 할 수도 있습니다. 결과에 만족하면 모든 메뉴 항목에 대해 프로세스를 반복하십시오.

그게 다야. 이 기사가 WordPress의 탐색 메뉴가 포함 된 이미지 아이콘을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 또한 워드프레스 탐색 메뉴의 스타일을 지정하는 방법에 대한 가이드를 확인할 수도 있습니다.

이 기사가 마음에 들면 YouTube 채널 용 워드프레스 비디오 자습서에 가입하십시오. 우리를 찾을 수도 있습니다. 지저귀다 그리고 페이스 북.

게시물 WordPress의 탐색 메뉴로 이미지 아이콘을 추가하는 방법은 WPBeginner에서 처음 나타났습니다.



당신이 좋아할만한 글 작성자의 다른글

댓글을 남겨주세요