WordPress 테마 탐색 기능 향상: 정적 HTML 변환-Word누르다-php.cn

WordPress 테마 탐색 기능 향상: 정적 HTML 변환

WBOY

풀어 주다： 2023-08-30 17:29:01

원래의

801명이 탐색했습니다.

이 시리즈를 따라오셨다면 이제 WordPress에 업로드된 템플릿 파일이 포함된 작업 테마가 완성되었습니다. 이 튜토리얼에서는 2부에서 생성한 header.php 파일을 계속 사용합니다. 워드프레스 메뉴 관리 화면을 통해 편집할 수 있는 탐색 메뉴를 추가하는 방법을 알아봅니다. 이렇게 하려면 테마에 대한 새 파일인 함수 파일도 만들어야 합니다.

무엇이 필요하세요?

이 튜토리얼을 완료하려면 다음이 필요합니다:

원하는 코드 편집기
작업 테스트를 위한 브라우저
로컬 또는 원격 WordPress 설치
로컬로 작업하는 경우 WordPress를 실행하려면 MAMP, WAMP 또는 LAMP가 필요합니다.
원격으로 작업하는 경우 FTP를 통해 웹사이트에 액세스하고 WordPress 설치에 관리자 계정이 있어야 합니다.

1.내비게이션 메뉴 등록

내비게이션 메뉴를 등록하려면 파일에서 register_nav_menu() 函数，您需要将其添加到主题的 functions.php를 사용하세요.

테마에 아직 이 파일이 없으므로 먼저 파일을 생성하는 것이 좋습니다.

테마 폴더에 functions.php라는 빈 파일을 새로 만듭니다.

새 파일을 열고 다음 콘텐츠를 추가하세요.

으아악

방금 테마의 첫 번째 기능을 만들었으니 격려해 주세요!

생성한 기능의 이름은 wptutsplus_register_theme_menu()，我在其名称开头添加了 wptutsplus 접두사로 지정되어 이름이 고유하고 사이트에서 실행 중인 플러그인에 의해 등록된 다른 기능과 충돌하지 않도록 합니다.

이 함수에는 register_nav_menu() WordPress 函数，用于创建菜单。然后，您的函数将通过 init액션 후크 활성화가 포함되어 있습니다. 이는 WordPress가 초기화 시 함수를 실행함을 의미합니다.

참고: 올바른 후크를 통해 이러한 기능을 활성화해야 합니다. 그렇지 않으면 작동하지 않습니다.

register_nav_menu() 함수에는 두 개의 매개변수가 있습니다:

이 매개변수 중 하나에는 메뉴 위치가 포함됩니다. 이 예에서는 해당 위치를 '기본'이라고 부릅니다. 나중에 이를 'primary'。稍后您会将其添加到您的 header.php 파일에 추가하면 WordPress에서 올바른 메뉴가 표시됩니다.
두 번째 매개변수는 메뉴에 대한 설명입니다. 이 경우에는 '主导航菜单'. 이는 메뉴 관리 화면에 표시됩니다.

2. 탐색 메뉴 설정

이전에는 테마에 등록된 메뉴가 없어 사용할 수 없었던 메뉴 대시보드 화면을 이제 이용할 수 있습니다. 지금은 완벽하지 않지만 곧 변경할 예정입니다:

페이지, 게시물, 기타 콘텐츠를 만들 때 이 화면에서 탐색 메뉴에 추가할 수 있습니다. "Blog"와 "About"이라는 두 개의 새 페이지를 추가하겠습니다. 설정 화면을 통해 내 게시물이 표시될 페이지로 블로그 페이지를 지정하겠습니다. 원하는 페이지를 만들 수 있습니다.

이 작업을 완료한 후 메뉴 화면으로 돌아가서 메뉴를 편집하고 새 페이지를 추가하세요. 새 페이지를 메뉴로 드래그한 후 메뉴 생성을 클릭하면 새 메뉴가 생성됩니다.

마지막으로 "테마 위치" 아래의 "메인 탐색 메뉴"를 확인하여 해당 메뉴가 방금 등록한 메인 메뉴로 나타나는지 확인하고 메뉴를 저장하세요.

참고: 메뉴를 변경한 후에는 항상 저장해야 합니다. 위젯과 달리 WordPress는 메뉴를 자동으로 저장하지 않습니다.

3. 将菜单添加到您的主题

目前，此菜单在您的网站上仍然不可见；您需要将菜单添加到头文件中才能实现此目的。

打开主题的 header.php 文件并找到以下代码：

<nav class="menu main">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Skip to content" href="#content">Skip to content</a>
    </div>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Latest news</a>
        </li>
        <li>
            <a href="#">Featured articles</a>
        </li>
    </ul>
</nav><!-- .main -->

로그인 후 복사

并将其替换为：

<nav class="menu main">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Skip to content" href="#content">Skip to content</a>
    </div>
    <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</nav><!-- .main -->

로그인 후 복사

这将添加您在主题中的此位置注册的导航菜单，使用 wp_nav_menu() 函数并指定 'primary' （您在注册时为菜单指定的位置）为'主题位置'。

这现在反映在我网站的导航菜单中：

摘要：菜单不仅仅用于网站标题！

在本教程中，您学习了如何注册导航菜单、向其中添加项目以及将其添加到网站标题。

需要注意的是，菜单不仅仅必须位于网站标题中。您可以在多个位置添加菜单，包括：

侧边栏 - 可能是网站某个部分的部分菜单或当前页面的子页面列表
页脚 - “小字体”页面或最常访问的页面的菜单。
在主导航下方 - 也许是主导航下方的部分菜单。

您可以通过三种方式之一在主题中的更多位置添加菜单。

我按照难度升序列出了它们：

通过“菜单”管理屏幕创建额外的菜单，然后使用“自定义菜单”小部件将它们显示在主题中具有小部件区域的任何位置
通过“菜单”管理屏幕创建额外的菜单，然后将它们添加到主题的代码中，如上面所做的那样。在本例中，您向 wp_nav_menu() 函数调用的数组添加一个附加参数，指定 'menu' 参数作为您为创建的每个菜单指定的名称。
使用 register_nav_menus() 函数注册多个菜单，并将它们添加到主题中的相关位置，如上所述

为什么不尝试一下呢？