집 > 기사 > CMS 튜토리얼 > WordPress에서 테마 탐색 메뉴를 만드는 방법 (1)

WordPress에서 테마 탐색 메뉴를 만드는 방법 (1)

青灯夜游앞으로: 2023-02-22 19:49:151913검색

WordPress에서 테마 탐색 메뉴를 만드는 방법은 무엇입니까? 다음 기사에서는 WordPress 테마 탐색 메뉴를 만드는 여러 가지 방법을 공유하겠습니다. 이것이 도움이 되기를 바랍니다.

워드프레스 테마 제작에서는 네비게이션 메뉴 생성이 핵심입니다. 워드프레스 테마에서 네비게이션 메뉴의 HTML 코드를 동적으로 호출하는 방법은? 이 기사에서는 탐색을 동적으로 구현하기 위해 PHP 코드를 작성하는 여러 가지 방법을 소개할 것입니다. 이 기사에서는 동적 코드 개발에만 초점을 맞추고 멋진 탐색 메뉴를 구현하기 위해 HTML, CSS 및 Javascript를 작성하는 방법을 가르치지 않습니다.

WP 3.0 사용자 정의 메뉴 제작

WordPress 3.0 이후 버전에서는 사용자 정의 동적 메뉴를 지원하기 시작합니다. 소위 동적 메뉴를 사용하면 사용자가 탐색 메뉴에 추가할 항목을 결정하고 WordPress 관리 Backstage - Appearance -로 들어갈 수 있습니다. 메뉴 열에서 해당 열을 드래그하여 나만의 메뉴를 만들 수 있습니다. 이는 WordPress 테마 개발자와 사용자 모두에게 행복한 일입니다. 사용자 정의 메뉴를 구현하기 위해 사용해야 하는 함수는 wp_nav_menu()입니다. 이 함수에 일부 매개변수를 전달하면 사용자 정의 메뉴를 출력할 수 있습니다. 이 함수를 사용하는 방법에 대해 간략하게 설명하겠습니다.

먼저 테마 디렉토리의 function.php에 있는 9e4f0ffdc5bf9557cd0449294fd95916 사이에 다음 메뉴 등록 코드를 추가하면 테마 파일에서 wp_nav_menu 함수를 사용할 수 있습니다.

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

그런 다음 테마 탐색 모음에서 wp_nav_menu()를 호출하여 탐색 메뉴 HTML 코드를 출력합니다.

<?php 
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( &#39;menu&#39; => &#39;mymenu&#39;, &#39;depth&#39; => 1) );
?>

위 코드에 의해 출력된 HTML 코드는 다음 형식입니다.

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

여기에 나열된 li 항목은 다음과 같습니다. Backstage - Appearance - Menu에 열이 추가되었습니다. 배경에 메뉴를 추가하지 않은 경우 탐색 모음에 모든 페이지가 나열됩니다. 또한 wp_nav_menu는 각 li에 클래스를 추가합니다. 다른 클래스는 이 메뉴 항목의 속성을 표시합니다. 예를 들어 기사 페이지가 현재 열려 있으면 Category A가 이 기사가 속한 카테고리입니다. 위치 li는 다음 코드와 같습니다.

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

홈페이지에 있는 경우 홈페이지 메뉴 항목의 li는 다음과 같습니다.

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

해당 기능은 다음에서 알 수 있습니다. 이러한 클래스의 이름을 지정하면 클래스에 CSS 속성을 추가하면 현재 메뉴 링크를 빨간색으로 정의하는 등 현재 탐색 메뉴를 강조하는 목적을 달성할 수 있습니다.

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

글쎄요, WordPress 3.0의 사용자 정의 메뉴를 호출하는 것은 그렇습니다. 단순한. wp_nav_menu에는 사용자 정의 ul 노드, ul 상위 노드의 id 및 클래스 매개변수 등과 같은 많은 매개변수도 있습니다.

카테고리와 페이지를 탐색 바로 사용

워드프레스 3.0 이전에는 대부분의 워드프레스 테마가 페이지를 탐색 바로 사용했고, 탐색에 페이지만 추가할 수 있었는데, 이는 충분히 무료가 아닌 것 같았습니다. 처음 WordPress 2.7을 사용하기 시작했을 때 이 문제에 대해 걱정이 많았습니다. 마침내 문서를 살펴보고 몇 가지 정보를 확인한 후 탐색에 카테고리가 추가되었다는 사실을 깨달았습니다. 자세한 내용은 이전에 작성한 기사를 참조하세요.

WordPress 카테고리 만들기 네비게이션 바 및 하이 하이라이트 표시

색다른 네비게이션 바 제작

위에서 언급한 두 가지 방법은 모두 WordPress에 제공되는 기능을 사용하여 구현되었으며 입력하는 HTML 코드도 제한적입니다. 즉, ul li를 사용합니다. 다음과 같은 형식으로 메뉴 목록을 작성하려면:

<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

테마의 프런트 엔드 코드를 직접 작성하지 않았고 탐색 바코드가 매우 잘못 작성되어 있는 경우 이는 위의 WordPress 표준 ul이 아닙니다. 아래와 같이 네비게이션 바 형태를 전혀 나타내지 않습니다. 코드:

<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

프런트 엔드 코드를 다시 작성하시겠습니까? 이렇게 하려는 사람은 아무도 없을 것 같은데 어떻게 해야 할까요? 또한, 내비게이션 바에서 카테고리와 페이지를 사용하지 않고, 사용자 정의 메뉴 사용을 허용하지 않는다면 어떻게 될까요? 실제 적용에서도 다양하고 이상한 요구 사항에 직면하게 될 것입니다. 우리는 다음 호에서 이 문제를 계속해서 탐구할 것입니다!

WordPress에서 테마 탐색 메뉴를 만드는 방법 (1)

WP 3.0 사용자 정의 메뉴 제작

카테고리와 페이지를 탐색 바로 사용

색다른 네비게이션 바 제작

관련 기사