WordPress에서 모바일 메뉴를 숨기는 방법(단계별)
게시 됨: 2021-12-22
WordPress에서 모바일 메뉴를 숨기려면 이 블로그를 계속 읽으십시오.
대부분의 WordPress 테마는 내장 스타일로 구동되므로 탐색 메뉴를 모바일 메뉴로 자동 변환하는 데 도움이 됩니다.
휴대폰에서는 휴대폰에 표시하기 위해 몇 가지 다른 메뉴 스타일을 관리할 수 있기 때문에 유사한 메뉴를 사용하고 싶지 않을 수 있습니다.
다음은 WordPress에서 모바일 메뉴를 숨기는 두 가지 다른 방법입니다.
방법 1: WordPress 플러그인으로 모바일 메뉴 숨기기
초보자의 경우 코딩을 망칠 필요가 없기 때문에 권장되는 방법 1입니다. 플러그인을 사용하여 WordPress 테마에서 기본적으로 제공하는 모바일 메뉴를 숨기기만 하면 됩니다.
이를 숨긴 후 다양한 메뉴를 사용하거나 모바일 장치에서 메뉴를 표시하지 않도록 선택할 수 있습니다.
WordPress 플러그인을 사용하려면 초보자가 먼저 WordPress 대시보드에 로그인한 다음 모양을 클릭한 다음 메뉴 페이지에서 클릭해야 합니다. 여기에서 새로운 탐색 메뉴를 만들어 휴대용 장치에 표시할 수 있습니다.
이제 필요할 때 인식할 수 있도록 새 메뉴 이름이 있는 다른 화면이 표시됩니다. 이름을 '전화 메뉴'로 추가했다고 생각해 보세요. 이제 항목을 선택할 수 있습니다.
메뉴에 항목을 추가했으면 이제 메뉴 저장 버튼을 클릭할 차례입니다.
이제 WordPress 플러그인 저장소에서 WP 모바일 메뉴를 선택하고 다운로드할 수 있습니다. 또는 WordPress 대시보드에서 직접 이 플러그인을 설치할 수 있습니다. 
플러그인 설정을 구성하려면 활성화 시 모바일 메뉴 페이지로 이동해야 합니다.
이제 여기에서 왼쪽 또는 오른쪽에 전화 메뉴를 만드는 옵션이 있습니다. 옵션 b 토글을 켜거나 끌 수 있습니다. 
이제 드롭다운 메뉴에서 이전에 만든 전화 메뉴를 선택합니다.
이제 '원래 테마 메뉴 숨기기' 옵션이 표시될 때까지 페이지를 아래쪽으로 스크롤합니다. 이제 이 옵션을 사용하면 WordPress 테마의 모바일 메뉴를 숨겨야 한다고 플러그인에 알릴 수 있습니다. 
기본적으로 가장 많이 사용되는 요소는 모바일 친화적 인 WordPress 테마에서 사용되는 요소가 플러그인에서 사용된다는 것을 식별합니다. 대부분의 웹 사이트 사용자는 여기에서 아무 것도 할 필요가 없습니다.
사용 중인 플러그인이 테마의 모바일 메뉴를 숨길 수 없다고 가정하고 같은 페이지를 다시 방문하여 '요소 찾기'를 마우스로 클릭하여 테마의 탐색 메뉴를 가리킬 수 있습니다.
모든 설정을 저장하려면 변경 사항을 저장하는 것을 잊지 마십시오.
이제 플러그인을 사용하여 구성했으므로 플러그인에 의해 새 메뉴 위치에 추가된 전화 메뉴를 표시해야 한다고 웹사이트에 알려야 합니다.
이것을하기 위해:
외모로 이동하여 메뉴 페이지를 클릭하십시오. 
드롭다운 메뉴에서 생성한 전화 메뉴가 올바르게 선택되었는지 확인합니다. 이제 메뉴 항목 아래 위치, 즉 오른쪽 모바일 메뉴 또는 왼쪽 모바일 메뉴를 선택합니다.
이제 웹 사이트에 새 메뉴가 표시되는지 확인하십시오. 그러나 우리가 사용했던 플러그인은 테마의 모바일 메뉴를 표시하지 않지만 전화 메뉴와 같이 우리가 만든 것을 표시합니다.
우리가 제안한 플러그인, 즉 WP 모바일 메뉴 플러그인은 메뉴 표시줄의 색상을 변경하고, 더 많은 아이콘을 추가하고, 불투명도를 변경하는 등 설정에서 훨씬 더 많은 작업을 수행하는 데 도움이 됩니다. 이러한 설정 옵션을 쉽고 자유롭게 사용할 수 있습니다.
방법 2: 코드를 사용하여 모바일 메뉴 숨기기
모바일 메뉴를 숨기기 위해 이 방법을 선택하는 동안 코딩 경험이 있거나 최소한 사용자 정의 CSS를 알고 있는지 확인하십시오.
이 방법에는 두 가지 다양한 접근 방식이 있습니다. CSS를 사용하여 전체 모바일 메뉴를 보이지 않게 만들거나 모바일 장치에서 개별 항목을 보이지 않게 할 수 있습니다.
CSS를 사용하여 작은 장치에서 전체 메뉴를 보이지 않게 하세요.
사용자 정의 CSS 코드를 사용하여 변경하려는 요소를 파악해야 합니다. 이를 수행하려면 먼저 웹사이트를 방문한 다음 탐색 메뉴를 클릭해야 합니다. 이제 그것을 마우스 오른쪽 버튼으로 클릭하고 검사 도구를 선택하십시오.
이제 두 개의 다른 화면을 찾을 수 있습니다. 한 화면에는 웹사이트가 표시되고 다른 화면에는 소스 코드가 표시됩니다. 단, 바탕화면의 탐색 메뉴가 모바일 메뉴로 바뀌지 않는 한 브라우저 화면을 작게 조정해야 합니다.
이제 WordPress 웹 사이트의 탐색 메뉴에서 사용하는 CSS와 식별자를 파악해야 합니다. 웹사이트의 소스 코드에서 마우스를 움직이면 메뉴 영역을 강조 표시할 수 있습니다.
- 이제 WordPress 대시보드로 이동합니다.
- 외모를 클릭
- 테마 사용자 정의 프로그램을 시작하려면 페이지 사용자 정의 옵션으로 이동하십시오.
- 이제 '추가 CSS' 탭으로 돌아가서 관리자 패널의 오른쪽 모서리에서 모바일 아이콘을 클릭할 수 있습니다.
귀하의 웹 사이트가 휴대 전화에서 어떻게 보이는지 사용자 정의 프로그램이 미리보기를 표시합니다. 아래에 언급된 CSS 코드를 추가해야 하며 미리보기 패널에서 모바일 메뉴가 사라집니다.
.navbar-toggle-wrapper {
디스플레이:없음;
}
.nav-toggle-wrapper를 WordPress 테마가 사용하는 식별자로 교체했는지 확인합니다.
상단에서 '게시 버튼'을 클릭하여 모든 변경 사항을 저장하십시오.
CSS를 사용하여 모바일에서 특정 메뉴를 보이지 않게 만들기
모바일 메뉴를 숨기는 두 번째 방법입니다. 이 접근 방식에서는 탐색 메뉴를 만든 다음 데스크톱 또는 모바일 장치에서 모바일 메뉴를 표시하거나 표시하지 않도록 설정하라는 메시지가 표시됩니다.
이러한 방법을 사용하면 유사한 탐색 메뉴를 사용하여 데스크톱이나 휴대폰에서 메뉴를 숨길 수 있다는 이점이 있습니다.
- 워드프레스 대시보드에서
- 외모로 이동
- 메뉴 페이지를 클릭하십시오
- 화면 옵션 버튼을 누르십시오
- 'CSS 클래스' 옵션 옆에 있는 확인란을 선택합니다.
숨기려는 메뉴 항목을 찾을 때까지 페이지를 아래로 스크롤합니다. 메뉴 항목 설정에서 CSS 클래스를 추가하는 옵션을 찾을 수 있습니다. 그것을 클릭하고 .hide-mobile CSS 클래스를 추가하십시오.
모바일 메뉴를 숨기려면 이 과정을 반복하십시오.
그러나 데스크탑 컴퓨터에서 보이지 않게 하려는 메뉴 항목을 마우스로 클릭할 수도 있습니다. 여기에 .hide-desktop CSS 클래스를 추가해야 합니다.
이제 '메뉴 저장 버튼'을 클릭하여 변경 사항을 저장합니다.
모바일 메뉴를 숨기려면 사용자 정의 CSS 코드를 추가해야 합니다. 이를 위해
- 외모로 이동
- 사용자 정의 페이지를 클릭하십시오.
- 테마 커스터마이저가 시작됩니다
- 이제 추가 CSS 탭을 클릭하십시오.
- CSS 상자에 아래에 주어진 코드를 추가하십시오
@미디어(최소 너비: 980px){
.hide-데스크톱{
표시: 없음 !중요;
}
}
@미디어(최대 너비: 980px){
.hide-모바일{
표시: 없음 !중요;
}
}
이제 숨겼던 모바일 메뉴가 표시되는지 여부를 웹사이트에서 확인할 수 있습니다. 모바일 메뉴를 숨기는 단계를 따르기 때문에 아마도 모바일 메뉴가 보이지 않을 것입니다.
결론:
이 블로그에서 언급한 두 가지 방법이 모바일 메뉴를 쉽고 효율적으로 숨기는 데 도움이 되기를 바랍니다.