워드 프레스 탐색 메뉴의 스타일을 지정하는 방법

색상이나 모양을 변경하기 위해 WordPress 탐색 메뉴의 스타일을 지정 하시겠습니까? WordPress 테마는 탐색 메뉴의 모양을 처리하지만 CSS를 사용하여 요구 사항에 맞게 쉽게 사용자 정의 할 수 있습니다. 이 기사에서는 사이트에서 WordPress 탐색 메뉴의 스타일을 지정하는 방법을 보여줍니다..


WordPress의 스타일 탐색 메뉴

우리는 두 가지 다른 방법을 보여줄 것입니다. 첫 번째 방법은 플러그인을 사용하고 코드 지식이 필요하지 않기 때문에 초보자를위한 것입니다. 두 번째 방법은 플러그인 대신 CSS 코드를 사용하는 것을 선호하는 중급 DIY 사용자를위한 것입니다.

방법 1 : 플러그인을 사용하여 WordPress 탐색 메뉴 스타일링

WordPress 테마는 CSS를 사용하여 탐색 메뉴 스타일을 지정합니다. 많은 초보자가 테마 파일을 편집하거나 CSS 코드를 작성하는 데 익숙하지 않습니다..

그때 워드 프레스 스타일링 플러그인이 유용하게 사용됩니다. 테마 파일을 편집하거나 코드를 작성하지 않아도됩니다..

먼저 CSS Hero 플러그인을 설치하고 활성화해야합니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

CSS Hero는 한 줄의 코드를 작성하지 않고도 고유 한 WordPress 테마를 디자인 할 수있는 프리미엄 WordPress 플러그인입니다 (HTML 또는 CSS 필요 없음). 자세한 내용은 CSS Hero 리뷰를 참조하십시오.

WPBeginner 사용자는이 CSS Hero Coupon을 사용하여 구매시 34 % 할인을받을 수 있습니다.

활성화되면 CSS Hero 라이센스 키를 얻도록 리디렉션됩니다. 화면의 지시를 따르기 만하면 몇 번의 클릭만으로 사이트로 다시 리디렉션됩니다..

다음으로 WordPress 관리 도구 모음에서 CSS Hero 버튼을 클릭해야합니다..

CSS Hero 시작

CSS Hero는 WYSIWYG (보이는 것) 에디터를 제공합니다. 버튼을 클릭하면 떠 다니는 CSS Hero 툴바가 화면에 보이는 웹 사이트로 이동합니다.

CSS Hero 툴바

편집을 시작하려면 상단의 파란색 아이콘을 클릭해야합니다.

파란색 아이콘을 클릭 한 후 마우스를 탐색 메뉴로 가져 가면 CSS Hero가 주변의 테두리를 표시하여 강조 표시합니다. 강조 표시된 탐색 메뉴를 클릭하면 편집 할 수있는 항목이 표시됩니다.

메뉴를 가리키고 클릭하여 사용자 정의

위의 스크린 샷에서 상단 네비게이션 메뉴 컨테이너를 보여줍니다. 탐색 메뉴의 배경색을 변경한다고 가정 해 봅시다. 이 경우 전체 메뉴에 영향을주는 상단 탐색 메뉴를 선택합니다.

CSS Hero는 이제 텍스트, 배경, 테두리, 여백, 패딩 등과 같이 편집 할 수있는 다양한 속성을 보여줍니다..

CSS 속성

변경할 속성을 클릭 할 수 있습니다. CSS Hero는 변경을 할 수있는 간단한 인터페이스를 보여줍니다..

요소의 모양 변경

위의 스크린 샷에서 배경을 선택했으며 배경색, 그라디언트, 이미지 등을 선택할 수있는 멋진 인터페이스를 보여주었습니다..

변경하면 테마 미리보기에서 실시간으로 볼 수 있습니다.

CSS 변경 사항의 실시간 미리보기

변경 사항에 만족하면 CSS Hero 도구 모음에서 저장 단추를 클릭하여 변경 사항을 저장하십시오..

이 방법을 사용하는 가장 좋은 점은 변경 한 내용을 쉽게 취소 할 수 있다는 것입니다. CSS Hero는 모든 변경 사항의 전체 기록을 유지하며 해당 변경 사항 사이를왔다 갔다 할 수 있습니다.

방법 2 : WordPress 탐색 메뉴 수동 스타일

이 방법은 사용자 정의 CSS를 수동으로 추가해야하며 중간 사용자를위한 것입니다..

WordPress 탐색 메뉴가 순서가없는 목록 (글 머리 기호 목록)으로 표시됩니다.

일반적으로 기본 WordPress 메뉴 태그를 사용하면 CSS 클래스가없는 목록이 표시됩니다..

<?PHP wp_nav_menu (); ?>

순서가없는 목록은 클래스 이름이‘menu’이며 각 목록 항목에는 자체 CSS 클래스가 있습니다..

메뉴 위치가 하나만있는 경우 작동 할 수 있습니다. 그러나 대부분의 테마에는 탐색 메뉴를 표시 할 수있는 여러 위치가 있습니다..

기본 CSS 클래스 만 사용하면 다른 위치의 메뉴와 충돌 할 수 있습니다.

따라서 CSS 클래스와 메뉴 위치도 정의해야합니다. 다음과 같은 코드를 사용하여 탐색 메뉴를 추가하여 WordPress 테마가 이미 수행 중일 수 있습니다.

<?PHP
wp_nav_menu (배열 (
‘theme_location’=> ‘일 순위’,
‘menu_class’=> ‘기본 메뉴’,
));
?>

이 코드는 WordPress에 테마가 기본 메뉴를 표시하는 위치임을 알려줍니다. 또한 탐색 메뉴에 CSS 클래스 기본 메뉴를 추가합니다..

이제이 CSS 구조를 사용하여 탐색 메뉴의 스타일을 지정할 수 있습니다.

// 컨테이너 클래스
#header .primary-menu {}

// 컨테이너 클래스 우선 순서가없는 목록
#header .primary-menu ul {}

// 비 순차 목록 내의 비 순차 목록
#header .primary-menu ul ul {}

// 각 탐색 항목
#header .primary-menu li {}

// 각 탐색 항목 앵커
#header .primary-menu li a {}

// 드롭 다운 항목이 있으면 순서가없는 목록
#header .primary-menu li ul {}

// 각 드롭 다운 탐색 항목
#header .primary-menu li li {}

// 각 하향식 탐색 항목 앵커
#header .primary-menu li li a {}

탐색 메뉴에서 사용하는 컨테이너 CSS 클래스로 #header를 바꿔야합니다..

이 구조는 탐색 메뉴의 모양을 완전히 변경하는 데 도움이됩니다..

그러나 각 메뉴 및 메뉴 항목에 자동으로 추가되는 다른 WordPress 생성 CSS 클래스가 있습니다. 이 클래스를 사용하면 탐색 메뉴를 더욱 사용자 지정할 수 있습니다.

// 현재 페이지 클래스
.current_page_item {}

// 현재 카테고리의 클래스
.현재 고양이 {}

// 다른 현재 메뉴 항목에 대한 클래스
.현재 메뉴 항목 {}

// 카테고리 클래스
.메뉴-항목-타입-택 소노 미 {}

// 게시물 유형에 대한 클래스
.menu-item-type-post_type {}

// 모든 사용자 정의 링크 클래스
.menu-item-type-custom {}

// 홈 링크 클래스
.menu-item-home {}

WordPress를 사용하면 개별 메뉴 항목에 사용자 정의 CSS 클래스를 추가 할 수도 있습니다.

이 기능을 사용하면 메뉴에 이미지 아이콘을 추가하거나 색상을 변경하여 메뉴 항목을 강조 표시하는 등 메뉴 항목의 스타일을 지정할 수 있습니다.

향하다 모양»메뉴 WordPress 관리자 페이지에서 화면 옵션 버튼을 클릭하십시오.

개별 메뉴 항목에 CSS 클래스 옵션 사용

해당 상자를 선택하면 각 개별 메뉴 항목을 편집 할 때 추가 필드가 추가 된 것을 볼 수 있습니다.

WordPress의 메뉴 항목에 사용자 정의 CSS 클래스 추가

이제 스타일 시트에서이 CSS 클래스를 사용하여 사용자 정의 CSS를 추가 할 수 있습니다. 추가 한 CSS 클래스가있는 메뉴 항목에만 영향을줍니다..

워드 프레스 스타일링 탐색 메뉴의 예

다른 WordPress 테마는 다른 스타일 옵션, CSS 클래스 및 JavaScript를 사용하여 탐색 메뉴를 만들 수 있습니다. 이를 통해 해당 스타일을 변경하고 고유 한 요구 사항에 맞게 탐색 메뉴를 사용자 정의 할 수있는 많은 옵션이 제공됩니다..

변경할 CSS 클래스를 파악할 때 웹 브라우저의 검사 도구가 가장 친한 친구가 될 것입니다. 이전에 사용해 본 적이 없다면 inspectPress 도구를 사용하여 WordPress 테마를 사용자 정의하는 방법에 대한 가이드를 살펴보십시오..

기본적으로 커서를 수정하려는 요소를 가리키고 마우스 오른쪽 버튼을 클릭 한 다음 브라우저 메뉴에서 도구 검사를 선택하면됩니다..

inspect 도구를 사용하여 수정할 CSS 클래스 찾기

즉, WordPress의 스타일 탐색 메뉴의 실제 예를 살펴 보겠습니다..

1. WordPress 탐색 메뉴에서 글꼴 색을 변경하는 방법

탐색 메뉴의 글꼴 색상을 변경하기 위해 테마에 추가 할 수있는 샘플 사용자 정의 CSS는 다음과 같습니다..

# top-menu li.menu-item a {
색상 : # ff0000;
}

이 예에서 # top-menu는 탐색 메뉴를 표시하는 순서가없는 목록에 할당 된 ID입니다. 테마에서 사용하는 ID를 찾으려면 검사 도구를 사용해야합니다..

WordPress 탐색 메뉴의 글꼴 색 변경

2. 네비게이션 메뉴 바의 배경색 변경 방법

먼저 내비게이션 메뉴를 둘러싼 컨테이너에 테마에서 사용하는 CSS ID 또는 클래스를 찾아야합니다..

탐색 메뉴 컨테이너에 대한 CSS 클래스 찾기

그런 다음 다음 사용자 정의 CSS를 사용하여 탐색 메뉴 막대의 배경색을 변경할 수 있습니다.

.탐색 상단 {
배경색 : # 000;
}

데모 웹 사이트에서 어떻게 보였습니까?.

탐색 메뉴 막대의 배경색 변경

3. 단일 메뉴 항목의 배경색을 변경하는 방법

많은 웹 사이트에서 탐색 메뉴의 가장 중요한 링크에 다른 배경색을 사용하는 것을 알 수 있습니다. 이 링크는 로그인, 가입, 연락 또는 구매 버튼 일 수 있습니다. 다른 색을 주면 링크가 더 눈에 띄게됩니다..

이를 위해 다른 배경색으로 강조 표시하려는 메뉴 항목에 사용자 정의 CSS 클래스를 추가합니다..

향하다 모양»메뉴 화면 오른쪽 상단의 화면 옵션 버튼을 클릭하십시오. ‘CSS 클래스’옵션 옆에있는 확인란을 선택해야하는 메뉴가 나타납니다..

개별 메뉴 항목에 CSS 클래스 옵션 사용

그런 다음 수정하려는 메뉴 항목으로 아래로 스크롤하여 클릭하여 확장해야합니다. 사용자 정의 CSS 클래스를 추가 할 수있는 새로운 옵션이 있습니다..

메뉴 항목에 사용자 정의 CSS 클래스 추가

이제이 CSS 클래스를 사용하여 특정 메뉴 항목의 스타일을 다르게 지정할 수 있습니다.

.문의하기 {
배경색 : # ff0099;
국경 반경 : 5px;
}

테스트 사이트에서 어떻게 보였습니까?.

WordPress 탐색 메뉴에서 단일 메뉴 항목의 배경색 변경

4. WordPress 탐색 메뉴에 호버 효과 추가

마우스 오버시 메뉴 항목이 색상을 변경하도록 하시겠습니까? 이 특정 CSS 트릭을 사용하면 탐색 메뉴가 더욱 대화식으로 보입니다.

테마에 다음 맞춤 CSS를 추가하기 만하면됩니다..

# top-menu li.menu-item a : 호버 {
배경색 : #fff;
색상 : # 666;
국경 반경 : 5px;
}

이 예에서 # top-menu는 정렬되지 않은 탐색 메뉴 목록에 테마에서 사용하는 CSS ID입니다..

이것이 테스트 사이트에서 어떻게 보였는가.

WordPress 탐색 메뉴의 마우스 오버 효과

5. WordPress에서 고정 플로팅 탐색 메뉴 만들기

일반적으로 탐색 메뉴가 맨 위에 나타나고 사용자가 아래로 스크롤하면 사라집니다. 사용자가 아래로 스크롤 할 때 고정 부동 탐색 메뉴가 맨 위에 유지됩니다..

다음 CSS 코드를 테마에 추가하여 탐색 메뉴를 고정시킬 수 있습니다..

# top-menu {
배경 : # 2194af;
높이 : 60px;
z- 색인 : 170;
여백 : 0 자동;
border-bottom : 1px solid #dadada;
폭 : 100 %;
위치 : 고정;
상단 : 0;
왼쪽 : 0;
오른쪽 : 0;
텍스트 정렬 : 오른쪽;
오른쪽 여백 : 30px
}

# top-menu를 탐색 메뉴의 CSS ID로 바꾸십시오..

데모에서 그 모습을 보았습니다.

스티커 탐색 메뉴

자세한 지침 및 대체 방법은 WordPress에서 고정 부동 탐색 메뉴를 만드는 방법에 대한 안내서를 참조하십시오..

6. WordPress에서 투명한 탐색 메뉴 만들기

많은 웹 사이트에서 클릭 유도 문안 버튼과 함께 대형 또는 전체 화면 배경 이미지를 사용합니다. 투명 메뉴를 사용하면 내비게이션이 이미지와 혼합됩니다. 이를 통해 사용자는 클릭 유도 문안에 집중할 수 있습니다.

탐색 메뉴를 투명하게 만들려면 테마에 다음 샘플 CSS를 추가하기 만하면됩니다..

# site-navigation {
배경색 : 투명;
}

이것이 데모 사이트에서 어떻게 보이는지입니다..

WordPress의 투명한 탐색 메뉴

테마에 따라 투명 메뉴 뒤의 영역을 덮도록 헤더 이미지의 위치를 ​​조정해야 할 수도 있습니다.

이 기사가 WordPress 탐색 메뉴의 스타일을 지정하는 방법을 배우는 데 도움이되기를 바랍니다. 모바일 지원 반응 형 WordPress 메뉴를 추가하는 방법에 대한 가이드를 참조 할 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map