WordPress에서 동적 메뉴를 만드는 방법

워드프레스는 웹사이트나 블로그를 처음부터 만들거나 기존 웹사이트를 개선할 수 있는 콘텐츠 관리 시스템(CMS)입니다. 이 기사에서는 WordPress에서 동적 메뉴 를 만드는 방법을 보여줍니다. 동적 메뉴는 보고 있는 페이지에 따라 변경되는 메뉴입니다. 예를 들어, "WordPress 테마"에 대한 페이지를 보고 있는 경우 메뉴에 WordPress 테마에 대한 다른 페이지에 대한 링크가 표시됩니다. "WordPress 플러그인"에 대한 페이지를 보고 있는 경우 메뉴에 WordPress 플러그인에 대한 다른 페이지에 대한 링크가 표시됩니다. WordPress에서 동적 메뉴를 만드는 것은 쉽습니다. 먼저 메뉴를 만들어야 합니다. 둘째, 메뉴에 항목을 추가해야 합니다. 셋째, 메뉴를 위치에 할당해야 합니다. 넷째, WordPress 테마에 코드를 추가해야 합니다. 첫 번째 단계인 메뉴 만들기부터 시작하겠습니다.

이 시리즈의 2부에서는 동적 탐색 메뉴를 만들어 한 단계 더 나아갑니다. Pro 추가 기능을 사용하여 Block Visibility에서 위치를 기반으로 조건부 메뉴를 구축하는 방법을 배우게 됩니다. 블록 테마는 블록 원칙을 기반으로 하는 템플릿 부품을 만드는 데 사용됩니다. 이 자습서는 "하이킹 소풍" 페이지에서 보조 탐색 메뉴 를 만드는 데 필요한 단계를 안내합니다. 사이트 편집기를 클릭하여 웹사이트 헤더를 편집하는 것만큼 간단합니다. Block Visibility 플러그인의 위치 제어를 사용하여 보조 메뉴의 위치를 ​​제한할 수도 있습니다. 기술 자료에서 위치 옵션을 선택한 다음 줄임표 아이콘을 클릭하여 활성화합니다.

이제 위치 제어를 사용하여 Hiking Excursions 페이지에 대한 블록의 가시성을 제한할 수 있으므로 가시성을 더 많이 제어할 수 있습니다. 게시물 규칙은 페이지 게시물 유형과 '하이킹' 페이지 유형을 선택하도록 지시합니다. 결과 규칙 설정에서 다음을 따라야 합니다. 데모 사이트의 홈페이지에서 새로운 조건부 메뉴에 액세스할 수 있습니다. 이 문서의 나머지 부분을 완료해야 합니다. 다양한 규칙과 규칙 집합을 사용하여 이를 달성할 수 있습니다. 이 데모에서는 간단한 예를 선택했습니다.

새 메뉴를 만들려면 모양으로 이동하십시오. 보조 메뉴를 만들려면 "메뉴 만들기", 특정 위치에 대한 사용자 지정 메뉴를 만들려면 "내 사용자 정의 메뉴", 다른 위치에 대한 보조 메뉴를 만들려면 "보조 메뉴"를 클릭합니다. 메뉴에 일부 항목을 추가한 후 저장합니다(예: 메뉴 항목 1, 메뉴 항목 2, 메뉴 항목 3).

WordPress 사용자 정의 테마에서 동적 메뉴를 어떻게 만듭니 까?

WordPress에서 동적 메뉴를 만드는 한 가지 방법은 wp_nav_menu 기능을 사용하는 것입니다. 이 기능을 사용하면 웹사이트 구조에 따라 자동으로 생성되는 메뉴를 만들 수 있습니다. 이 기능을 사용하여 테마에 특정한 사용자 정의 메뉴를 만들 수도 있습니다.

다음 단계를 따르면 WordPress에서 간단하고 동적인 탐색 메뉴를 만들 수 있습니다. 기본 단계는 register_nav_menus() 함수를 사용하여 탐색 메뉴를 등록하는 것입니다. 이를 실행하려면 먼저 하위 테마의 functions.php 파일에 등록한 다음 'init' 후크를 사용해야 합니다. 이 예에서는 기본 헤더 메뉴를 활용합니다. Nav 메뉴 플러그인은 WordPress.org에서 사용할 수 있으며 사용자의 역할에 따라 다른 메뉴를 할당할 수 있습니다. 이 플러그인을 사용하여 동시에 여러 메뉴 를 등록할 수도 있습니다. 이전 단계에서 WP_nav_menu 함수 호출에서 사용자 정의 CSS 클래스를 참조하여 사이트 디자인을 기반으로 탐색 메뉴의 스타일을 지정할 수 있습니다.

WordPress에서 동적 헤더 메뉴를 만드는 방법

WordPress에서 동적 헤더 메뉴를 만들려면 먼저 사용자 정의 메뉴를 만들어야 합니다. 이렇게 하려면 WordPress 관리자 패널의 메뉴 섹션으로 이동하여 새 메뉴 만들기 링크를 클릭합니다. 메뉴 이름을 입력하고 메뉴 만들기 버튼을 클릭합니다. 다음으로 메뉴에 항목을 추가해야 합니다. 이렇게 하려면 항목 추가 링크를 클릭하고 메뉴에 추가할 페이지나 게시물을 선택합니다. 원하는 항목을 모두 추가했으면 메뉴 저장 버튼을 클릭합니다. 이제 동적 헤더 메뉴를 사용할 준비가 되었습니다.

이 자습서의 뒷부분에서 설명하는 WordPress 동적 메뉴 페이지 방법으로 동적 메뉴 페이지 를 만들면 변경할 수 있습니다. 기본 탐색에서 배경 이미지는 ID를 기반으로 메뉴 항목의 위치를 ​​변경하는 데 사용됩니다. "span" 태그를 사용하면 배경 이미지를 보이는 그대로 보기 위해 텍스트를 숨길 수 있습니다. 우리가 사용할 코드는 current_page_ancestor라는 특수 클래스를 사용하여 WordPress에 의해 동적으로 생성되므로 다음과 같아야 합니다. 아무 말도 하지 않았습니다. 하위 페이지 수를 늘리려면 깊이=2 설정을 늘리거나 줄여 페이지 수에 제한이 없도록 하면 됩니다. CSS를 사용하면 아래 이미지와 같이 현재 페이지 링크가 매우 간단하게 굵게 표시됩니다. 강조 표시된 섹션이 있는 상위 페이지로 이동합니다. 부모의 자식 페이지를 강조 표시합니다.

WordPress 메뉴 항목을 동적으로 추가

WordPress 메뉴에 메뉴 항목 을 추가하는 것은 WordPress 관리 대시보드를 통해 또는 테마에 코드를 추가하여 수행할 수 있습니다. 기존 메뉴에 메뉴 항목을 추가하려면 WordPress 사이트에 로그인하고 "모양 > 메뉴" 페이지로 이동하면 됩니다. 거기에서 왼쪽에서 새 메뉴 항목을 선택하고 "메뉴에 추가" 버튼을 클릭하여 새 메뉴 항목을 추가할 수 있습니다. 코드를 통해 메뉴 항목을 추가하려면 테마의 functions.php 파일에 몇 줄의 코드를 추가해야 합니다. 가장 먼저 해야 할 일은 메뉴 항목을 추가할 새 함수를 만드는 것입니다. 이 함수의 이름은 원하는 대로 지정할 수 있지만 "my_custom_menu_items()"라고 합니다. 이 함수 내에서 WordPress "wp_nav_menu_items" 필터 후크를 사용해야 합니다. 이 후크를 사용하면 기존 메뉴에 새 항목을 추가할 수 있습니다. 함수 내부의 코드는 다음과 같을 것입니다. function my_custom_menu_items( $items, $args ) { // $items로 무엇인가 하기 return $items; } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); 위의 코드는 기존 메뉴에 항목을 추가하는 데 사용할 수 있는 새 기능을 추가합니다. 함수 자체는 아직 아무 작업도 수행하지 않지만 사용자 정의 메뉴 항목을 추가하는 데 사용할 수 있는 프레임워크를 제공합니다. 실제로 메뉴 항목을 추가하려면 필요에 맞게 함수 내부의 코드를 수정해야 합니다. 예를 들어, "정보" 페이지에 대한 링크를 추가하려면 다음 코드를 사용합니다. function my_custom_menu_items( $items, $args ) { $items .= '정보'; $items 반환; } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); 위의 코드는 "정보"라는 텍스트가 있는 메뉴에 새 링크를 추가합니다. 함수 내부에 추가 코드 줄을 추가하여 원하는 만큼 메뉴 항목을 추가할 수 있습니다.

WordPress 동적 메뉴 플러그인

WordPress 동적 메뉴 플러그인 은 웹사이트 탐색에 약간의 향신료를 추가하는 좋은 방법입니다. 방문자가 무엇을 보고 있는지에 따라 메뉴가 변경되도록 하면 계속 참여하고 더 많이 방문할 수 있습니다.

WordPress에서 사용자 정의 메뉴를 만드는 방법

WordPress에서 사용자 정의 메뉴를 만들려면 대시보드의 "모양" 섹션으로 이동하여 "메뉴" 옵션을 선택해야 합니다. 거기에서 새 메뉴를 만들고 원하는 페이지, 카테고리 또는 사용자 정의 링크를 추가할 수 있습니다. 변경 사항을 저장하고 나면 "위치 관리" 탭을 통해 새로 만든 메뉴를 웹사이트의 한 위치에 할당할 수 있습니다.

Vegibit은 WordPress 테마를 만드는 방법에 대한 이해를 제공합니다. 메뉴는 사이트 이름과 태그라인 영역 아래에 있지만 사이트 콘텐츠 위쪽에는 표시됩니다. 메뉴가 나타나게 하려면 먼저 테마의 functions.php 파일에 위치를 등록해야 합니다. WordPress 대시보드에서 맞춤형 메뉴를 만드십시오. 이제 WordPress 코어에 새 메뉴를 등록해야 합니다. 이 기능을 통해 이제 대시보드의 위치를 ​​관리할 수 있습니다. WordPress_nav_menu() 함수에서 직접 가져온 것처럼 보이길 원합니다.

다음 단계에서는 전체 카테고리 목록에 연결합니다. 각 링크 위로 마우스를 이동하면 호버 효과를 얻을 수 있습니다. 이것이 어떻게 작동하는지 이해하기 위해 style.css 파일을 만들었습니다. 목록의 각 요소에서 링크의 밑줄과 글머리 기호를 제거하고 각 요소에서 패딩과 여백을 제거하려고 합니다. WordPress 요약에서 사용자 정의 메뉴를 만드는 단계별 절차를 찾을 수 있습니다. 이것은 WordPress 테마에서 사용자 정의 메뉴를 사용하는 방법에 대한 훌륭한 설명입니다. 몇 가지 WordPress 기능 덕분에 작업이 더 쉬워졌습니다. 새 메뉴가 WordPress에 연결되면 해당 메뉴에서 원하는 모든 유형의 콘텐츠를 간단하게 추가하거나 제거할 수 있습니다.

WordPress에서 사용자 정의 메뉴 만들기

메뉴를 만든 후 모양으로 이동합니다. 메뉴 페이지에서 새로운 메뉴를 볼 수 있습니다. 선택하자마자 원하는 대로 사용자 정의할 수 있습니다.