드롭다운 메가 메뉴- 훌륭한 디자인 발견. 사이트 탐색많은 수의 페이지를 포함하는 것은 항상 문제였습니다. 사이트맵의 클래식 정적 메뉴는 페이지 수가 늘어나고 많은 공간을 차지함에 따라 빠르게 성장합니다. 동적 드롭다운 메뉴는 페이지 공간을 크게 절약할 수 있지만 유용성은 희생됩니다. 탐색에는 능동적이고 상당히 정확한 마우스 작업이 필요합니다. 약간 놓치고 잘못된 메뉴가 드러났습니다.
메가 메뉴 개념 개발의 원동력은 아마도 리본 인터페이스였을 것입니다. 마이크로 소프트 오피스 2007. 이 개념은 단순한 정적 메뉴와 동적 드롭다운의 중간에 있습니다. 한편으로 이러한 메뉴는 매우 유익하고 직관적이지만 필요한 마우스 조작을 크게 줄입니다. 확장하면 사용 가능한 모든 화면 공간을 사용할 수 있으므로 사용자가 이 컨텍스트에서 제공되는 모든 항목을 가져오고 필요한 경우 숨길 수 있습니다.
뭐니뭐니해도 메가 메뉴는 지금 유행하는 추세이고 아직 사용하지 않았다면 자세히 살펴봐야 합니다.
UberMenu: WordPress 메가 메뉴 플러그인
이 다기능 플러그인은 이 리뷰에서 안전하게 첫 번째 위치에 놓을 수 있습니다. 풀 메가 메뉴, 배경 및 글꼴 색상 제어, 글꼴 크기 등을 포함한 다양한 옵션이 있습니다. 이 모든 작업은 강력하고 편리한 설정 패널에서 수행됩니다.또한 메뉴에는 다음과 같은 여러 가지 훌륭한 기능이 있습니다.
- 내장형 반응형 그리드
- 각 열의 너비 개별 조정 및 기본 너비 설정
- 메뉴 항목을 그룹으로 결합
- 메뉴 항목을 가로 행 가운데 맞춤
- 사용자 정의 배경 이미지
- 많은 수의 항목을 포함하는 스크롤 가능한 하위 메뉴.
비용: $19
메가 메인 메뉴
매우 인기 있고 널리 사용되는 플러그인 메가 메인 메뉴기능과 단순성 사이의 균형을 유지하는 방법을 알고 있습니다. 다음을 포함할 수 있는 드롭다운 메뉴를 만드는 데 사용할 수 있는 10개 이상의 다른 도구가 있습니다. 텍스트, 이미지, 링크 및 위젯. 또한 무제한 색상 설정과 600개 이상의 Google 글꼴이 있습니다.비용: $15
리퀴다 메가 메뉴
리퀴다 메가 메뉴- 두 가지 모두에 적합한 현대적이고 다기능적인 플러그인 일반 사용자, 개발자 - 자신이 개발한 테마에 쉽게 포함할 수 있습니다.플러그인은 다양한 옵션을 제공합니다. 메뉴 생성모던하고 세련된 디자인: 수직 또는 수평 방향, 메뉴 항목에 포함하는 기능 링크, 이미지 및 심지어 WooCommerce 제품 카드또는 온라인 상점을 개발할 때 유용할 수 있는 Easy Digital Downloads.
비용: $19
스카이 메가 메뉴
세 가지 디자인 옵션 모바일 기기, 9가지 색 구성표, 사용자 정의 그리드, 모양 및 360도 벡터 아이콘. 이 세트를 사용하면 Sky Mega Menu가 고유한 종류 중에서 정당한 위치를 차지할 수 있습니다.비용: $6
WP 메가 메뉴
필수 카테고리의 플러그인입니다. 많은 설정 및 옵션, 범주, 하위 범주 및 메시지 작업, SEO 최적화두 가지 사전 설정 색 구성표(어두운 색과 밝은 색)는 원하는 대로 쉽게 변경할 수 있습니다.비용: $29
NOO 메뉴
설정 패널을 이해하려면 NOO 메뉴설명서를 읽을 필요도 없습니다. 모든 것이 매우 직관적입니다. 손에 들고 시사실시간으로 효과를 보면서 간단히 값을 변경하고 슬라이더를 이동할 수 있습니다. 색 구성표는 완전히 임의로 변경할 수 있으며 각 옵션은 고유한 이름으로 저장할 수 있으며 이러한 옵션의 수에는 제한이 없습니다.메뉴 항목의 내용은 다음과 같습니다. 텍스트, 링크, 이미지, 비디오, 양식 및 다양한 위젯. 자체 12열 그리드를 사용하여 모든 것을 수용합니다.
비용: $15
영웅 메뉴 – 반응형 워드프레스 메가 메뉴 플러그인
영웅 메뉴를 사용하면 게시물, 카테고리, 외부 URL에 대한 링크를 메뉴 항목에 바인딩하고 블로그 게시물을 추천 이미지와 함께 표시할 수 있습니다. 최신 버전은 WooCommerce 플랫폼에 대한 완전한 지원을 발표했습니다. 을 위한 편리한 조작드래그 앤 드롭 편집기가 내장되어 있습니다.디자인은 현대적이고 세련되며 물론 완벽합니다.
비용: $19
Superfly - 반응형 WordPress 메뉴 플러그인
소위 플라이 메뉴- 웹 디자인 세계의 최신 트렌드. 이러한 메뉴는 페이지 모서리에서 아이콘 형태로 조용히 "잠들고" 공간을 거의 차지하지 않으며, 위로 마우스를 가져가면 열리고 페이지 요소가 겹치지 않고 대체됩니다.이 메가 메뉴 유형의 대표자 중 하나는 Superfly - 반응형 WordPress 메뉴 플러그인입니다. 디자인과 기능 면에서 모두 인상적인 기기입니다.
비용: $22
토글 메뉴
모바일 기기의 인기가 높아짐에 따라 팝업(또는 컨텍스트) 메뉴는 화면 공간을 많이 절약할 수 있어 중요해지고 있습니다.토글 메뉴는 매우 간단합니다. 미니멀리스트 메뉴그럼에도 불구하고 주요 기능에 완벽하게 대처합니다.
비용: $5
WP 플로팅 메뉴 프로
WP 플로팅 메뉴 프로 2 in 1 플러그인입니다. 한 페이지 사이트의 메뉴 탐색기그리고 메뉴 스티커. 또한 이 플러그인을 사용하면 최소한 시각적으로 기존 사이트를 현대적인 한 페이지 사이트로 변환할 수 있습니다. WP 플로팅 메뉴 프로는 부드러운 스크롤페이지의 한 부분에서 다른 부분으로.개발자의 처분에 따라 WP Floating Menu Pro는 페이지의 위치, 사용자 정의 옵션, 색상, 내용 및 항목 수에 대해 13 및 7가지 다른 옵션을 제공합니다.
480px보다 작은 화면의 경우 자동 종료메뉴.
비용: $17
Flexi 메뉴 WordPress 플러그인
Flexi 메뉴는 5가지 완전히 사용자 지정할 수 있는 메뉴 유형입니다. 플라이 메뉴, 와이드(페이지 너비), 와이드+설명, 와이드+이미지 및 세로.비용: $14
최대 메가 메뉴(무료)
매우 좋은 드래그 앤 드롭 메뉴 편집기가 있는 플러그인연락처 양식에서 Google 지도에 이르기까지 메뉴 항목에 거의 모든 위젯을 포함하는 기능.변환 프로세스를 완전히 제어하고 적절한 작업을 저장하거나 재할당하여 기존 일반 메뉴를 하나의 메가 메뉴로 자동 변환할 수 있습니다.
최근에는 메가 메뉴와 같은 기능이 프리미엄 플러그인과 테마만 많이 제공되었습니다. 그러나 오늘 저는 독자 여러분에게 빠르고 쉽게, 물론 완전히 무료로 유료 사용자보다 열등하지 않은 강력한 탐색 메뉴를 사이트에 구축할 수 있는 두 개의 완전 무료 플러그인을 제공할 것입니다. .
메가 메뉴란 무엇입니까? 예, 동일한 것입니다. 아마도 한 번 이상 발견하고 구성한 일반적인 탐색 메뉴입니다. 표준 기능과 달리 다음도 있습니다. 추가 기능개별 요소를 사용자 정의하고 표시합니다. 예를 들어 세로뿐만 아니라 가로 하위 메뉴 추가, 메뉴에 아이콘 및 개별 이미지 추가, 모든 메뉴 항목의 모양 미세 조정 등이 있습니다. 이 모든 것이 오늘날 고려되는 플러그인에 있습니다.
플러그인을 사용하여 사이트에 멋진 탐색 메뉴를 추가할 수 있는 또 다른 좋은 기회는 WooRockets.com의 Mega Menu입니다. 플러그인 설치 및 활성화는 표준입니다.
이 플러그인은 마스터하기가 다소 어렵지만 위에서 설명한 경쟁자보다 더 많은 기회를 제공합니다. 여기에서 메뉴 구성은 표준 Visual Composer의 페이지 구성과 매우 유사합니다.
섹션으로 이동 WR 메가 메뉴관리자 패널에서 새로운 걸 더하다. 우리는 넘어진다 새 페이지새로운 메뉴를 만들기 위해 드래그 앤 드롭 작곡가를 이미 다루었던 사람들은 즉시 집처럼 느낄 것입니다. 메뉴를 만드는 과정은 페이지를 만드는 과정과 크게 다르지 않습니다.
처음에는 메뉴 상단에서 다음을 확인하십시오. 위치딱 필요한 메뉴입니다. 또는 관리 위치메뉴를 선택합니다.
클릭 - 요소 추가메뉴에 추가할 콘텐츠 유형을 팝업 창에서 선택합니다. 왼쪽 상단에서 표준 옵션 중 하나를 선택하거나 WordPress 위젯을 추가할 수 있습니다.
필요한 경우 필요한 수의 열로 나누어 행을 추가합니다. 왼쪽에는 메뉴 항목을 위 또는 아래로 끌기 위한 탭이 있고 오른쪽에는 편집 또는 삭제를 활성화할 수 있는 탭이 있습니다. 오른쪽의 일반 버튼을 누르는 것을 잊지 마십시오- 게시또는 - 새로 고치다그들의 노력의 결과를 보존하기 위해.
일반적으로 모든 텍스트, 그림 및 원하는 경우 위젯을 새 메뉴에 쉽게 배치할 수 있습니다. 메뉴의 모양은 버튼을 클릭하여 변경할 수 있습니다. 스타일링또는 버튼을 클릭하여 표를 삽입하려면 옆에 맞춤 CSS.
한마디로 매우 기능적인 것입니다. 이 플러그인 외에도 작성자가 연락처 양식과 물론 메가 메뉴 플러그인의 기초 역할을 한 작곡가도 있습니다. 여기에서 모든 영광으로 작동하는 데모를 볼 수 있습니다.
꿈의 메뉴를 실제로 만들 수 있는 화려하고 강력한 플러그인. 사용자의 기쁨을 약간 가리는 유일한 것은 다른 테마와의 호환성 문제입니다. 불행히도 내가 기억하는 한 프리미엄 플러그인에는 때때로 이 문제가 있었습니다. 기본 테마에서 두 플러그인을 모두 테스트했지만 문제나 버그를 발견하지 못했습니다. 무엇을 원하십니까, 친구들!
안녕하세요! 제 삶에는 언제나 그렇듯이 이벤트가 많아서 블로그에 시간을 내기가 매우 어렵습니다. 어제 우리는 스리랑카로 가는 표를 샀고 우리는 곧 4개월 동안 날아갈 것입니다. 우리를 방문하십시오! 그리고 지금 가장 아름다운 웨딩드레스를 찾고 있어요 :))
오늘 우리는 WordPress에서 메뉴를 만드는 방법과 템플릿의 임의의 영역에 이러한 블록을 추가하는 방법에 대해 이야기할 것입니다.
메뉴를 사용자 정의하고 적절하게 편집하는 방법을 배웁니다.
WordPress에서 메뉴 편집 및 사용자 정의
먼저 블로그 관리자 패널에서 사용할 수 있는 기능을 분석해 보겠습니다. 다음과 호환되는 새 템플릿에서 최신 버전워드프레스는 메뉴 표시가 아주 간단하고 설정도 어렵지 않습니다.
메인 테마에 영향을 주지 않고 수정할 수 있는 자식 테마를 만든 후 function.php 파일에 다음 함수를 추가해 보겠습니다.
| 1 2 3 | register_nav_menus( array ( "추가 메뉴" => __( "추가 메뉴" , "주제 이름" ) ) ) ; |
register_nav_menus(array("additionalmenu" => __("추가 메뉴", "테마 이름")));
자식 테마를 만들지 않는 경우 테마의 주요 기능 파일에 추가합니다.
이 기능을 사용하면 템플릿에 추가 WordPress 메뉴를 추가하고 다른 영역을 만들 수 있습니다.
추가한 후 "영역 관리"의 관리자 패널로 이동합니다.
함수에서 제공한 제목과 함께 추가 주제 영역이 나타나야 합니다.
추가 영역에 대한 섹션을 변경하려면 "새 메뉴 사용"을 클릭하거나 "홈"을 선택합니다. 그러면 기본 메뉴와 동일한 섹션이 새 영역에 표시됩니다.
우리의 경우 추가라는 새 메뉴를 만듭니다.
그것에 대한 "추가 메뉴"테마 영역을 선택하십시오.
그러나 이제 이 영역을 템플릿 블록에 연결해야 합니다. 예를 들어 WordPress 사이트의 헤더 아래에 추가 메뉴를 만들어야 합니다. header.php 파일로 이동하거나 하위 테마에 복사합니다. body 태그 뒤에 다음을 추가합니다.
| 1 2 3 | <div id = "추가 메뉴" > ( 배열( "테마_위치" =>"추가 메뉴")); ?></div> |
결과를 보자:
헤더 위에 추가 메뉴가 있습니다. 이제 스타일을 설정하고 항목을 한 줄에 정렬하고 헤더 아래 블록을 낮춰야 합니다.
style.css 파일을 다음과 같이 변경합니다.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #additionalmenu nav ( 너비 : 940px ; /* 컨테이너 너비 */여백: 0 자동 ; ) #additionalmenu li ( display : 인라인 ; padding : 10px ; /* padding */ margin : 20px 0 ; ) #additionalmenu ( width : 100% ; top : 420px ; /* 위쪽 가장자리부터 들여쓰기 */배경색 : #000 ; /* 배경색 */ position : relative ; ) |
#additionalmenu nav ( 너비: 940px; /*컨테이너 너비 */ margin: 0 auto; ) #additionalmenu li ( 표시: 인라인; 패딩: 10px; /* 패딩 */ margin: 20px 0; ) #additionalmenu ( 너비: 100% ; 상단: 420px; /* 상단 여백 */ background-color: #000; /* 배경색 */ 위치: 상대; )
무슨 일이 있었는지 보자:
우리가 만든 메뉴의 표시는 여전히 이상적이지 않지만 주의를 기울이면 블로그에 적합한 모양으로 가져올 수 있습니다.
WordPress에 메뉴를 추가하기 위한 위젯 및 플러그인
WordPress에서 메뉴를 만드는 방법에 대한 비디오를 시청하는 것이 좋습니다.
위젯에 대한 기사에서 "사용자 정의 메뉴"가 언급되었습니다. 좀 더 자세히 분석해 보겠습니다.
"모양" - "위젯"으로 이동하여 "사용자 정의 메뉴" 위젯을 찾아 테마에 사용할 수 있고 블로그에 적합한 영역으로 끕니다.
우리의 경우 메뉴 블록이 사이드바에 추가됩니다. 이를 위해 생성한 추가 블록의 섹션을 선택했습니다.
따라서 오른쪽 사이드바에 다음 블록이 표시됩니다.
테마에 내장된 표준 위젯 외에도 다양한 종류메뉴: 세로, 가로, 드롭다운 등
예를 들어 다음은 WordPress에서 수직 다단계 메뉴를 만들기 위한 플러그인입니다. Navgoco Vertical Multilevel Slide Menu.
또는 더 사용자 정의 가능한 드롭다운 메뉴 위젯.
메뉴에 대한 JQwery 효과가 있는 위젯도 인기가 있습니다. 예: JQuery Slick 메뉴 위젯.
작동 방식의 예를 들어 보겠습니다.
jQuery Slick 메뉴 위젯을 설치한 후 "모양" - "위젯"으로 이동합니다.
사용 가능한 위젯 목록 중 우리가 설치한 새 위젯이 나타납니다. 우리의 경우 사이드바인 접근 가능한 영역으로 이동합니다.
설정을 열어 보겠습니다.
메뉴 이름(우리가 만든 섹션), 탭 텍스트 - 사이트에 표시될 블록 이름, 위치(왼쪽에서 선택), 오프셋 - 위에서 들여쓰기를 선택합니다. 픽셀 단위의 가장자리, 애니메이션 속도 - 애니메이션 속도(빠름). 자동 닫기 메뉴를 선택하여 블록이 자동으로 사라지게 할 수 있습니다. 그리고 블록의 색상을 선택합니다. 저장을 클릭하고 결과를 확인합니다.
헤더 왼쪽에 풀아웃 메뉴가 나타납니다. 혀를 클릭하면 섹션이 나타납니다.
다시 클릭하면 블록이 다시 사라집니다.
이것은 WordPress에서 메뉴를 설치, 편집 및 표시하는 방법 중 하나일 뿐입니다.
WordPress 블로그에 대한 메뉴를 만드는 가장 적절하고 편리한 방법을 선택하십시오. 행운을 빕니다!
이것은 스타일로 수행할 수 있습니다.
그러나 메뉴가 있다는 것을 이해해야 하며, 그런 다음 상단에서 아직 없는 사이드바로 이동해야 합니다.
즉, 이 테마가 허용하는 경우 오른쪽에 있는 사이드바를 연결하고 메뉴를 거기에 전송합니다.
그리고 수직으로 만들려면 CSS를 추가/변경하십시오.
Main-navigation ul li, .secondary-navigation ul li ( display: block !important; )
글쎄, 그 후에 들여 쓰기 및 기타 속성을 약간 변경해야합니다.
제가 잘못 이해했을 수도 있지만 이미 왼쪽 열 영역에 Max 메가 메뉴가 있습니다(검정색, 제한된 영역으로 인해 2줄로 정렬되고 플러그인에서는 기본적으로 가로). 위젯을 통해 추가했습니다. , 상단에 표준 테마 메뉴가 있고 둘 다 필요합니다. 이제 CSS를 사용해 보겠습니다. 감사합니다.
아마 나도 당신을 오해했을 것입니다.
옅은 녹색 색상의 가로 상단 블록 "티 커피 스위트 ..."에서 화면에있는 메뉴에 대해 이야기하고있었습니다.
그러나 귀하의 답변을 다시 읽은 후 다른 메뉴에 대해 이야기하고 있음을 이해합니다.
왼쪽에 보이는 화면에서 이것은 Max 메가 메뉴이지만 귀하의 링크에 있는 사이트에는 보이지 않습니다.
때문에 어제도 그를 보지 못해서 화면을 보지 않았다.
이제 저도 안 봅니다.
나는 항상 뭔가를 하려고 노력하고, 다른 것들을 넣고 떼고, 이 메뉴를 세로로 만드는 방법을 알아낼 때까지 다른 적합한 메뉴를 찾고 있습니다. 이 메뉴에 대해 작성한 것과 동일한 CSS 솔루션을 적용할 수 있습니까? 플러그인 자체의 코드에서 이 줄을 삽입할 코드 부분을 알려주시겠습니까? 위치가 중요합니까?
Plugins-edit-selected Max 메가 메뉴로 이동하면 다음 섹션이 있습니다.
CSS
megamenu.scss
재설정.scss
토글 블록.scss
관리자
mixin.scss
수정해야 할 비슷한 라인을 찾지 못했습니다.
나는 완전한 멍청이이고 코드를보고 제안하기 위해 왜 나를 표시해야하는지 이해하지 못했습니다. Max Mega Menu 지원 포럼에서 관리자의 답변을 보니 수직형은 Pro(유료) 버전에서만 사용할 수 있으므로 지금은 포기해야 합니다. 유사한 플러그인을 조언해 주시겠습니까? 기준은 다음과 같습니다.
- 사이드바에 설치하는 기능
- 메뉴는 드롭다운이어야 합니다.
- 카테고리로 전환할 때 이 단계에서 열린 상태로 유지되고 페이지 새로 고침으로 완전히 닫히지 않습니다.
정확히.
바로 이 메뉴를 보지 않고는 조언과 추천을 할 수 없습니다. CSS에서 몇 줄이면 충분할 수 있습니다. 그러나 사실은 아닙니다.
모든 기능을 보여주는 이 Max Mega Menu를 정말로 사용할 계획이라면 그러한 제품에 대해 $23는 그다지 많지 않습니다. 그것은 가치.
WordPress 탐색 메뉴를 사용자 정의하여 색상을 변경하거나 모습? WordPress 테마는 사이트의 탐색 메뉴 모양을 처리합니다. 로 쉽게 설정할 수 있습니다. CSS 사용귀하의 요구 사항에 맞게. 이 기사에서는 WordPress 탐색 메뉴의 스타일을 사용자 정의하는 방법을 보여줍니다.
방법 1: WordPress 탐색 메뉴의 수동 변경 스타일 사용
이 방법을 사용하려면 WordPress 테마 파일을 편집해야 합니다. 코드 편집에 익숙하고 .
가장 좋은 방법 WordPress 테마에서 사용자 정의 설정은 . CSS만 수정하는 경우 테마 파일을 수정하지 않고 이 작업을 수행하는 방법에 대한 가이드를 볼 수 있습니다.
WordPress의 탐색 메뉴는 순서가 지정되지 않은 목록(글머리 기호 목록)으로 표시됩니다.
다음 태그를 방금 사용한 경우 연결된 CSS 클래스 없이 목록이 표시됩니다.
순서가 지정되지 않은 목록에는 'menu'라는 클래스 이름이 있으며 각 목록 항목에는 고유한 클래스가 있습니다.
메뉴 위치가 하나뿐인 경우 작동할 수 있습니다. 그러나 대부분의 테마에는 탐색 메뉴를 표시할 수 있는 여러 위치가 있습니다.
기본 CSS 클래스만 사용하면 다른 곳의 메뉴와 충돌할 수 있습니다.
그렇기 때문에 CSS 클래스와 메뉴 위치를 정의해야 합니다. WordPress 테마는 이미 다음과 같은 코드가 포함된 탐색 메뉴를 추가하여 이 작업을 수행할 가능성이 있습니다.
"기본", "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 () // 각 드롭다운 탐색 항목 앵커
#header를 WordPress 테마에서 사용하는 컨테이너 클래스 또는 ID로 바꿉니다.
이 구조는 탐색 메뉴의 모양을 완전히 바꾸는 데 도움이 됩니다.
그러나 자동으로 추가되는 다른 클래스가 있습니다. 워드프레스 사용각 메뉴 항목 및 메뉴에 대해 이러한 클래스를 사용하면 탐색 메뉴를 추가로 사용자 지정할 수 있습니다.
Current_page_item() // 현재 페이지에 대한 클래스 .current-cat() // 현재 카테고리에 대한 클래스 .current-menu-item() // 다른 현재 메뉴 항목에 대한 클래스 .menu-item-type-taxonomy() // 범주에 대한 클래스 .menu-item-type-post_type() // 페이지에 대한 클래스 .menu-item-type-custom() // 추가한 사용자 정의 항목에 대한 클래스 .menu-item-home() // 클래스 홈 링크용
WordPress를 사용하면 관리 영역 내에서 개별 메뉴 항목에 CSS 클래스를 추가할 수도 있습니다.
이 기능을 사용하여 메뉴를 사용하여 이미지에 아이콘을 추가하거나 단순히 색상을 변경하여 메뉴 항목을 눈에 띄게 만드는 것과 같이 메뉴 항목의 스타일을 지정할 수 있습니다.
페이지로 이동합시다 외관 » 메뉴버튼을 누릅니다.
이러한 설정을 확인한 후에는 각 개별 메뉴 항목을 편집할 때 추가 필드가 추가되는 것을 볼 수 있습니다.
이제 스타일시트에서 이 CSS 클래스를 사용하여 사용자 정의 CSS를 추가할 수 있습니다. 이것은 추가한 CSS 클래스가 있는 메뉴 항목에만 영향을 미칩니다.
방법 2: 플러그인을 사용하여 WordPress의 메뉴 스타일 사용자 지정
WordPress 테마는 탐색 메뉴에 스타일을 사용합니다. 많은 초보자는 테마 파일을 편집하거나 스스로 CSS를 작성하는 데 익숙하지 않습니다.
그럴 때 유용하다. 워드프레스 플러그인메뉴 스타일링. 이렇게 하면 테마 파일을 편집하거나 코드를 작성하지 않아도 됩니다.
먼저 CSS Hero 플러그인을 설치하고 활성화해야 합니다. 이상 자세한 정보방법에 대한 단계별 가이드를 참조하십시오.
CSS Hero는 나만의 디자인을 할 수 있는 프리미엄 WordPress 플러그인입니다. 워드프레스 테마단 한 줄의 코드도 작성하지 않고(HTML 또는 CSS 없음).
활성화하면 CSS Hero 키를 수신하도록 리디렉션됩니다. 화면의 지침을 따르기만 하면 몇 번의 클릭만으로 귀하의 사이트로 다시 리디렉션됩니다.
이제 WordPress 관리자 패널에서 CSS Hero 버튼을 클릭해야 합니다.
CSS Hero는 WYSIWYG 편집기를 제공합니다. 버튼을 클릭하면 CSS Hero 플로팅 툴바가 화면에 표시되는 사이트로 이동합니다.
편집을 시작하려면 상단의 파란색 아이콘을 클릭해야 합니다.
탐색 메뉴를 마우스로 가리키면 CSS Hero가 해당 메뉴를 강조 표시하여 주변의 테두리를 표시합니다. 강조 표시된 탐색 메뉴를 클릭하면 편집할 수 있는 항목이 표시됩니다.
위의 스크린샷에서는 메뉴 항목, 메뉴 탐색, 메뉴 탐색 컨테이너 등을 보여줍니다.
탐색 메뉴에 있는 모든 항목의 텍스트 색상을 변경하고 싶다고 가정해 보겠습니다. 이 경우 모든 메뉴에 영향을 주는 탐색 메뉴를 선택합니다.
이제 CSS Hero가 당신을 보여줄 것입니다 다양한 속성, 텍스트, 배경, 테두리, 여백, 패딩 등과 같이 편집할 수 있습니다.
변경하려는 속성을 클릭할 수 있습니다. CSS Hero는 변경할 수 있는 간단한 인터페이스를 보여줍니다.
위의 스크린샷에서 우리는 텍스트를 선택했고 글꼴 선택, 텍스트 색상, 크기 및 기타 속성 변경을 위한 멋진 인터페이스를 보여주었습니다.
변경 사항이 적용되면 테마 미리보기에서 실시간으로 확인할 수 있습니다.
변경 사항에 만족하면 CSS Hero 도구 모음에서 저장 버튼을 클릭하여 변경 사항을 저장합니다.
이 방법을 사용할 때 가장 좋은 점은 변경 사항을 쉽게 취소할 수 있다는 것입니다. CSS Hero는 모든 변경 사항에 대한 완전한 기록을 유지하며 이러한 변경 사항 간에 앞뒤로 이동할 수 있습니다.
이 기사가 WordPress에서 탐색 메뉴의 스타일을 지정하는 방법을 배우는 데 도움이 되었기를 바랍니다.