WordPress 테마에 사용자 정의 탐색 메뉴를 추가하는 방법

WordPress 테마에 사용자 정의 탐색 메뉴를 추가 하시겠습니까? 탐색 메뉴는 대부분의 웹 사이트 위에 표시되는 가로 링크 목록입니다..


기본적으로 WordPress 테마에는 사전 정의 된 메뉴 위치 및 레이아웃이 제공되지만 사용자 정의 내비게이션 메뉴를 추가하려면 어떻게해야합니까?

이 기사에서는 WordPress에서 사용자 정의 탐색 메뉴를 쉽게 만들고 추가하는 방법을 보여 주므로 테마의 어느 곳에 나 표시 할 수 있습니다.

WordPress 테마에서 사용자 정의 탐색 메뉴 추가

이 WordPress Navigation Menu 자습서가 필요한 경우?

대부분의 WordPress 테마에는 메뉴에 사이트의 탐색 링크를 표시 할 수있는 지점이 하나 이상 있습니다..

WordPress 관리 영역 내에서 사용하기 쉬운 인터페이스에서 메뉴 항목을 관리 할 수 ​​있습니다.

웹 사이트에 탐색 메뉴를 추가하려는 경우 초보자 용 가이드를 따라 WordPress에 탐색 메뉴를 추가하는 방법을 따르십시오..

이 학습서의 목표는 DIY / 중급 사용자가 WordPress 테마에 사용자 정의 탐색 메뉴를 추가하도록 돕는 것입니다..

이 기사에서는 다음과 같은 주제를 다룰 것입니다.

    테마에 맞춤 WordPress 탐색 메뉴를 추가하는 방법을 살펴 보겠습니다..

    WordPress 테마에서 사용자 정의 탐색 메뉴 만들기

    탐색 메뉴는 WordPress 테마의 기능입니다. 각 테마는 자체 메뉴 위치 및 메뉴 지원을 정의 할 수 있습니다.

    커스텀 내비게이션 메뉴를 추가하려면 먼저이 코드를 테마의 functions.php 파일에 추가하여 새 내비게이션 메뉴를 등록해야합니다..

    기능 wpb_custom_new_menu () {
    register_nav_menu ( ‘my-custom-menu’, __ ( ‘내 사용자 정의 메뉴’));
    }
    add_action ( ‘init’, ‘wpb_custom_new_menu’);

    이제 갈 수 있습니다 모양»메뉴 WordPress 관리자에서 페이지를 열고 새 메뉴를 만들거나 편집 해보십시오. 테마 위치 옵션으로 ‘내 맞춤 메뉴’가 표시됩니다.

    테마에 추가 된 사용자 정의 탐색 메뉴

    둘 이상의 새로운 탐색 메뉴 위치를 추가하려면 다음과 같은 코드를 사용해야합니다.

    기능 wpb_custom_new_menu () {
    register_nav_menus (
    정렬(
    ‘my-custom-menu’=> __ ( ‘내 사용자 정의 메뉴’),
    ‘추가 메뉴’=> __ ( ‘추가 메뉴’)
    )
    );
    }
    add_action ( ‘init’, ‘wpb_custom_new_menu’);

    메뉴 위치를 추가 한 후에는 초보자를위한 탐색 메뉴를 추가하는 방법에 대한 학습서에 따라 WordPress 관리자에서 일부 메뉴 항목을 추가하십시오..

    그러면 테마에 메뉴를 표시하는 다음 단계로 넘어갈 수 있습니다..

    WordPress 테마에 사용자 정의 탐색 메뉴 표시

    다음으로 WordPress 테마에 새 탐색 메뉴를 표시해야합니다. 탐색 메뉴가 일반적으로 배치되는 가장 일반적인 장소는 사이트 제목 또는 로고 바로 다음에 웹 사이트의 헤더 섹션에 있습니다..

    그러나 원하는 위치에 탐색 메뉴를 추가 할 수 있습니다.

    메뉴를 표시하려는 테마의 템플릿 파일에이 코드를 추가해야합니다..

    <?PHP
    wp_nav_menu (배열 (
    ‘theme_location’=> ‘내 맞춤 메뉴’,
    ‘container_class’=> ‘custom-menu-class’));
    ?>

    테마 위치는 이전 단계에서 선택한 이름입니다..

    컨테이너 클래스는 탐색 메뉴에 추가 될 CSS 클래스입니다. 메뉴는 웹 사이트에 일반 글 머리표로 표시됩니다..

    일반 목록으로 표시되는 사용자 정의

    CSS 클래스 .custom_menu_class를 사용하여 메뉴 스타일을 지정할 수 있습니다. 시작하는 데 도움이되는 샘플 CSS는 다음과 같습니다.

    div.custom-menu-class ul {
    여백 : 20px 0px 20px 0px;
    리스트 스타일 유형 : 없음;
    리스트 스타일 : 없음;
    리스트 스타일 이미지 : 없음;
    텍스트 정렬 : 오른쪽;
    }
    div.custom-menu-class li {
    패딩 : 0px 20px 0px 0px;
    디스플레이 : 인라인;
    }
    div.custom-menu-class {
    색상 : #FFFFFF;
    }

    사용자 정의 메뉴 스타일

    탐색 메뉴 스타일 지정에 대한 자세한 내용은 WordPress 탐색 메뉴 스타일 지정 방법에 대한 자세한 자습서를 참조하십시오.

    페이지 빌더를 사용하여 WordPress에서 사용자 정의 탐색 메뉴 추가

    맞춤 방문 페이지 또는 홈페이지 레이아웃을 만드는 경우 WordPress 페이지 빌더 플러그인을 사용하면 모든 것이 훨씬 쉬워집니다..

    시장에서 가장 우수한 WordPress 페이지 빌더 인 Beaver Builder를 사용하는 것이 좋습니다. 간단한 드래그 앤 드롭 도구를 사용하여 모든 유형의 페이지 레이아웃을 만들 수 있습니다 (코딩 필요 없음).

    여기에는 페이지 레이아웃에 사용자 정의 탐색 메뉴 추가도 포함됩니다.

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

    활성화되면 탐색 메뉴를 추가 할 새 페이지를 작성하거나 기존 페이지를 편집해야합니다. 포스트 에디터 화면에서‘Launch Beaver Builder’버튼을 클릭하십시오.

    비버 빌더 출시

    새 페이지 인 경우 Beaver Builder와 함께 제공되는 기성품 템플릿 중 하나를 사용할 수 있습니다. 기존 페이지를 바로 편집 할 수도 있습니다.

    템플릿을 선택하십시오

    다음으로 메뉴 모듈을 추가하고 메뉴를 표시하려는 위치로 페이지에서 끌어다 놓아야합니다..

    페이지에 메뉴 모듈 추가

    팝업에 메뉴 모듈 설정이 나타납니다. 먼저 사용하려는 탐색 메뉴를 선택해야합니다. 언제든지 새 메뉴를 만들거나 기존 메뉴를 편집 할 수 있습니다 모양»메뉴 워드 프레스 관리 영역의 페이지.

    메뉴 모듈 설정

    다른 설정도 검토 할 수 있습니다. Beaver Builder를 사용하면 메뉴의 사용자 정의 색상, 배경 및 기타 스타일 속성을 선택할 수 있습니다.

    완료되면 저장 버튼을 클릭하고 메뉴를 미리 볼 수 있습니다.

    Beaver Builder로 추가 된 사용자 정의 탐색 메뉴 미리보기

    WordPress에서 모바일 친화적 인 응답 메뉴 만들기

    모바일 장치 사용이 증가함에 따라 많은 인기있는 효과 중 하나를 추가하여 메뉴를 모바일 용으로 만들 수 있습니다.

    반응 형 메뉴 예

    모바일 메뉴에 슬라이드 아웃 효과 (위), 드롭 다운 효과 및 토글 효과를 추가 할 수 있습니다.

    모바일 지원 반응 형 WordPress 메뉴를 만드는 방법에 대한 자세한 단계별 가이드가 있습니다..

    워드 프레스 탐색 메뉴로 더 많은 일을

    탐색 메뉴는 강력한 웹 디자인 도구입니다. 웹 사이트에서 가장 중요한 섹션을 사용자에게 알려줍니다..

    WordPress를 사용하면 메뉴에 링크를 표시하는 것 이상을 할 수 있습니다. 이 유용한 자습서를 사용하여 WordPress 사이트에서 탐색 메뉴의 기능을 확장하십시오.

    • WordPress에서 탐색 메뉴가있는 이미지 아이콘을 추가하는 방법
    • WordPress의 메뉴에 조건부 논리를 추가하는 방법
    • WordPress 테마에 메뉴 설명을 추가하는 방법
    • WordPress에서 전체 화면 반응 형 메뉴를 추가하는 방법
    • WordPress 사이트에 메가 메뉴를 추가하는 방법

    이 궁극적 인 가이드가 WordPress에 탐색 메뉴를 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 가장 유용한 25 개의 워드 프레스 위젯 목록과 워드 프레스 플러그인 목록이 필요합니다..

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me