응용 프로그램 및 도서 

CSS 및 HTML5: 반응형 탐색 메뉴. CMS WordPress를 사용하여 템플릿에 메뉴 추가

지난번 블로그 기사에서 저는 WordPress 최신 버전의 흥미로운 혁신, 즉 를 생성하고 관리하기 위한 특별한 메커니즘에 대해 썼습니다. 이제 일반 사용자가 페이지나 블로그 카테고리뿐만 아니라 모든 URL에 대한 링크도 포함할 수 있는 다양한 복잡성의 메뉴를 만드는 것이 훨씬 더 편리하고 쉬워졌습니다. 템플릿에 메뉴를 표시하려면 wp_nav_menu라는 특수 함수가 사용됩니다. 오늘 이에 대해 설명하겠습니다.

WordPress 관리자에 메뉴 섹션이 없는 경우 function.php 파일에 특수 코드를 추가하여 활성화할 수 있습니다.

먼저 우리가 만든 메뉴의 이름이 있습니다. 이는 위젯이 없는 일반적인 경우의 기능 사용입니다. 위젯을 사용하는 방법은 약간 다릅니다. 그러나 wp_nav_menu 함수는 인수 없이 출력될 수 있으며 그 결과 다양한 상황이 "검토"됩니다. 먼저 메뉴 이름에 의한 일치(최소 하나의 메뉴 항목이 지정된 경우), 그렇지 않으면 비어 있지 않은 메뉴 간단히 표시됩니다. 그러나 다시 한 번 말씀드리지만, 단순히 위의 코드를 사용하고 인수가 없는 함수가 무엇을 출력해야 하는지 파악하지 않는 것이 좋습니다. 구문은 다음과 같습니다.

여기에는 다음 매개변수가 사용됩니다.

$menu - 메뉴에 대해 선택된 식별자 - ID, 슬러그 또는 메뉴 이름.

$container - 기본 UL 메뉴는 이 설정을 사용하여 DIV 컨테이너에 "래핑"됩니다.

$container_class - 컨테이너의 클래스를 나타냅니다. 기본적으로 해당 값은 menu-(menu slug)-container입니다. 즉, 예를 들어 클래스는 menu-first-container입니다.

$container_id - 기본적으로 지정되지 않은 ID를 컨테이너에 추가할 수 있습니다.

$menu_class는 UL 메뉴 요소의 클래스이며 해당 값은 메뉴입니다.

$menu_id — ul 요소의 ID, 기본값은 menu-(slug)

$echo - 메뉴를 표시하지 않고 함수 값을 반환하려면 이 설정에 0을 사용합니다.

$fallback_cb - 메뉴가 없으면 wp_page_menu 함수가 호출됩니다.

$before - 링크 A 앞에 표시되는 텍스트를 설정합니다.

$link_before — 지정되지 않은 링크 텍스트 앞에 문구를 표시합니다.

$link_after — 링크 텍스트 뒤에 표시되며 비어 있습니다.

$length - 메뉴를 표시할 계층 구조 수준 수를 설정합니다. 기본값 0은 전체 메뉴를 표시합니다.

$walker - 일종의 이해하기 어려운 사용자 정의 "워커 개체"로, 아마도 고급 개발자에게 더 필요할 것입니다.

$theme_location - 메뉴가 사용될 테마의 위치는 사용자가 선택할 수 있으려면 Register_nav_menu()를 통해 활성화되어야 합니다. 또한 위젯으로 작업할 때 완전히 명확하지 않은 설정도 있는 것 같습니다.

wp_nav_menu 함수 사용 예

코드에 제공된 가장 간단한 코드는 다음과 같습니다.

메뉴에서 DIV 컨테이너 제거

원칙적으로 워드프레스 3.0 메뉴를 생성하고 관리하는 데 복잡한 것은 없습니다. 개발자는 작업 절차를 크게 단순화하고 이 탐색 요소의 기능을 확장했습니다. 이 솔루션은 모바일 및 데스크톱 버전을 생성할 때와 같이 다양한 템플릿 작업에 자주 사용됩니다. 조금 후에 이 주제에 대해 몇 가지 내용을 더 추가하겠습니다.

추신 경비원. SEO 관련 웹마스터를 위한 흥미롭고 유용한 블로그로, SEO에 관한 질문에 대한 답변을 찾을 수 있습니다.
Aweb 회사는 웹사이트 홍보, 최적화 및 인터넷 검색 엔진 홍보 분야에서 오랫동안 확고한 입지를 구축해 왔습니다.

WordPress에서 메뉴를 생성하고 페이지와 카테고리를 정렬하는 것은 종종 초보 웹마스터에게 다소 어려운 문제가 됩니다. 이 때문에 저는 WordPress에서 사용자 정의 메뉴를 만드는 방법을 자세히 살펴보는 짧은 튜토리얼을 작성하기로 결정했습니다. 도움을 받으면 사용자 정의 메뉴를 독립적으로 생성하고, 메뉴 항목을 추가 또는 제거하고, 이름, 위치 및 중첩을 변경할 수 있습니다.

이전 기사 중 하나에서 우리는 이미 방법을 살펴보았습니다. 다행스럽게도 이제 WordPress에는 플러그인을 사용하지 않고도 사용자 정의 메뉴를 만들 수 있는 기능이 내장되어 있습니다. 이 기능은 버전 3.0부터 모든 버전의 WordPress에서 사용할 수 있습니다.

모든 템플릿에서 사용자 정의 메뉴 지원이 활성화되지 않았다는 사실에 즉시 주목하고 싶습니다. 이와 관련하여 기사는 두 부분으로 구성됩니다. 기사의 첫 번째 부분에서는 사용자 정의 메뉴가 이미 템플릿에 포함된 경우 관리자 패널을 통해 WordPress에서 메뉴 항목을 만드는 방법을 살펴보겠습니다.

기사의 두 번째 부분에서는 WordPress에서 사용자 정의 메뉴에 대한 지원을 독립적으로 활성화하고 wp_nav_menu를 통해 메뉴 표시를 사용자 정의하는 방법을 알아봅니다. 이 지식은 템플릿이 사용자 정의 메뉴 사용을 제공하지 않거나 직접 작성하거나 사용자 정의 메뉴를 생성하는 기능을 추가하려는 경우에 유용할 것입니다.

WordPress 관리자 패널을 통해 메뉴 및 사용자 정의 메뉴 항목 만들기

메뉴를 생성하려면 관리 패널 - 모양 - 메뉴로 이동하여 템플릿에서 사용자 정의 메뉴 지원이 활성화되어 있는지 확인하세요. 그렇지 않은 경우 지금은 이 단계를 건너뛰고 기사의 두 번째 부분으로 바로 이동할 수 있습니다. 메뉴가 이미 지원되는 경우 대략 다음 내용이 포함된 페이지가 표시됩니다.

새 메뉴를 생성하려면 “메뉴 제목 입력” 필드에 메뉴 이름을 입력하고 “메뉴 생성”을 클릭하세요.

개인적으로 저는 앞으로 문제가 발생하지 않도록 모든 이름을 라틴 문자로 쓰는 것을 선호합니다. 키릴 문자 이름도 지원되지만 사용하지 않는 것이 좋습니다. 이것은 내 개인적인 의견입니다.

메뉴를 생성한 후 왼쪽 열에 있는 "주제 영역" 블록에서 해당 메뉴를 선택한 다음 "저장" 버튼을 클릭하여 결과를 저장해야 합니다.

이 경우 테마는 사용자 정의 메뉴를 하나만 지원하므로 많이 선택할 필요가 없습니다. 드롭다운 목록에서 우리가 만든 메뉴를 선택하고 결과를 저장하기만 하면 됩니다. 테마가 두 개 이상의 메뉴를 지원하는 경우 템플릿의 위치에 따라 메뉴를 선택해야 합니다.

결과를 저장한 후 메뉴에 새 항목을 추가하려면 원하는 카테고리나 페이지를 표시하고 "메뉴에 추가" 버튼을 클릭하세요.

그런 다음 원하는 대로 서로를 기준으로 이동할 수 있으며 중첩을 변경할 수 있습니다.

그래서 WordPress 관리자 패널을 통해 사용자 정의 메뉴를 만드는 방법, 새 항목을 추가하고 구성하는 방법을 살펴보았습니다. 이제 기사의 두 번째 부분으로 이동하여 WordPress에서 사용자 정의 메뉴 지원을 활성화하고 wp_nav_menu 함수를 사용하여 템플릿에 표시하는 방법을 알아 보겠습니다.

WordPress에서 사용자 정의 메뉴 지원 활성화

우선, 사용자 정의 메뉴와 메뉴 자체의 사용을 등록해야 합니다. 이렇게 하려면 편집할 테마의 function.php 파일을 열고 다음 코드를 추가하세요.

Register_nav_menus(array("top" => "상위 메뉴"));

여기서 "top"은 메뉴 식별자이고 "Top menu"는 위치의 이름입니다.

여러 메뉴를 추가해야 하는 경우 쉼표로 구분하여 나열하세요.

Register_nav_menus(array("top" => "상단 메뉴", "left" => "왼쪽 메뉴"));

이 코드를 추가하면 사용자 정의 메뉴에 대한 지원이 자동으로 활성화됩니다. 관리 패널 - 모양 - 메뉴로 이동하여 이를 확인할 수 있습니다. 하지만 메뉴 등록 자체만으로는 부족합니다. 메뉴는 여전히 템플릿에 표시되어야 합니다. 이를 위해 특별한 wp_nav_menu 기능을 사용합니다.

사용자 정의 메뉴를 표시합니다. wp_nav_menu 함수

위에서 언급한 대로, 다음 매개변수를 허용할 수 있는 wp_nav_menu 함수를 사용하여 사용자 정의 메뉴를 표시합니다.

$args = array("menu" => "", // 메뉴 이름(문자열). "container" => "div", // 메뉴 컨테이너(문자열). 그 안에 ul 목록이 배치됩니다. "container_class" = > " ", // 컨테이너 클래스(문자열). "container_id" => "", // 컨테이너 ID(문자열). "menu_class" => "menu", // ul 태그 클래스(string). > " ", // ul 태그의 ID(string). "echo" => true, // 처리를 위한 표시 또는 반환(boolean) "fallback_cb" => "wp_page_menu", // 임의의 경우 백업 기능 메뉴가 존재하지 않습니다(문자열). "before" => "", // 텍스트 이전 각 링크(문자열). "after" => "", // 이후 텍스트각 링크(문자열). "link_before" => "", // 링크 앵커 앞의 텍스트(문자열). "link_after" => "", // 링크 앵커 뒤의 텍스트(문자열). "깊이" => 0, // 중첩 깊이(정수). 0 - 무제한, 2 - 2단계 사용자 정의 메뉴. "walker" => , // 메뉴를 수집하는 클래스입니다. 기본값: 새로운 Walker_Nav_Menu. (물체). "테마_위치" => ""); // 템플릿의 메뉴 위치입니다. 메뉴 ID를 지정하세요. (끈).

이 경우 매개변수는 배열과 문자열을 통해 전달될 수 있습니다. 어쨌든 메뉴가 작동합니다. 명확성을 위해 두 가지 옵션을 모두 고려해 보겠습니다.

배열을 통해 매개변수 전달하기

문자열을 통해 매개변수 전달

Wp_nav_menu("menu_id=topmenu&theme_location=top&container=");

개인적으로 저는 두 번째 옵션이 더 컴팩트하다고 생각합니다. 어쨌든 함수의 결과는 다음 코드가 됩니다.

  • 제1항
  • 포인트 2
  • 포인트 3

여기서 이 글을 마치겠습니다. 우리는 주요 사항을 검토했으며 99%의 경우 이 정보만으로도 WordPress에서 직접 사용자 정의 메뉴를 만드는 데 충분할 것입니다. 궁금한 점이 있으시면 언제든지 댓글로 질문하실 수 있습니다.

그게 다야. WordPress에서 웹사이트를 만드는 데 행운과 성공이 있기를 바랍니다.

내비게이션은 한 페이지짜리 웹사이트라도 좋은 웹사이트라면 어디든 존재합니다. 상황에 따라 탐색 링크는 사이트의 다양한 섹션으로 연결되거나 현재 페이지에 있는 북마크(앵커)로 보낼 수 있습니다. 사용자가 혼동하지 않는 내비게이션을 능숙하게 디자인하려면 일정한 지식과 경험이 필요합니다. 내비게이션 바 디자인도 현명하게 이루어져야 하며, 이 튜토리얼에서는 사용자 친화적인 내비게이션 메뉴를 만드는 방법을 보여 드리겠습니다.

탐색 만들기

내비게이션이란 무엇입니까? 이것은 종종 의미에 따라 정렬되고 그룹화되는 링크 모음입니다. 탐색 메뉴는 HTML 목록 태그를 사용하여 생성되는 경우가 많습니다.

질문이 있으신가요?

오타 신고

편집자에게 전송될 텍스트:

보내다