WordPress テーマのナビゲーションを強化する: 静的 HTML を変換する

このシリーズを読んだことがある方は、WordPress にアップロードされたテンプレート ファイルを含む作業用のテーマを手に入れたことになります。このチュートリアルでは、パート 2 で作成した header.php ファイルの操作を続けます。 WordPress メニュー管理画面から編集可能なナビゲーション メニューを追加する方法を学びます。これを行うには、テーマ用の新しいファイル (関数ファイル) を作成する必要もあります。

このチュートリアルを完了するには、次のものが必要です:

• 作業をテストするためのブラウザ
• ローカルまたはリモートの WordPress インストール
• ローカルで作業している場合、WordPress を実行するには MAMP、WAMP、または LAMP が必要です。
• リモートで作業する場合は、FTP 経由で Web サイトにアクセスし、WordPress インストールの管理者アカウントが必要になります。

登録ナビゲーション メニュー ナビゲーション メニューを登録するには、

関数を使用します。この関数は、テーマの functions.php ファイルに追加する必要があります。 テーマにはこのファイルがまだないため、最初にファイルを作成する必要があります。

テーマ フォルダーに、

という名前の新しい空のファイルを作成します。 新しいファイルを開いて、次の内容を追加します:

テーマの最初の機能を作成したところなので、自分を褒めてあげてください。

作成した関数の名前は

です。名前が一意であり、どの関数にも一致しないように、名前の先頭に wptutsplus プレフィックスを追加しました。登録済み サイトで実行している可能性のあるプラグインを通じて他の機能が競合します。 この関数には、メニューの作成に使用される

WordPress 関数が含まれています。関数は init アクション フックを介してアクティブ化されます。これは、WordPress が初期化時に関数を実行することを意味します。

注: このような関数は正しいフックを介してアクティブ化する必要があります。そうしないと機能しません。

関数には 2 つのパラメータがあります:

'primary'
• と呼びます。後でこれを header.php ファイルに追加して、WordPress に正しいメニューが表示されるようにします。 2 番目のパラメータはメニューの説明です。この場合、
'メイン ナビゲーション メニュー'
• 。これはメニュー管理画面に表示されます。

ナビゲーション メニューの設定 これで、テーマにメニューが登録されていなかったため、以前は利用できなかったメニュー ダッシュボード画面にアクセスできるようになりました。現時点では完璧ではありませんが、すぐに変更する予定です:

ページ、投稿、その他のコンテンツを作成するときに、この画面からナビゲーション メニューに追加できます。 「ブログ」と「概要」という 2 つの新しいページを追加します。 [設定] 画面で、投稿が表示されるページとしてブログ ページを指定します。好きなページを作成できます。

この操作が完了したら、「メニュー」画面に戻り、メニューを編集し、新しいページを追加します。新しいページをメニューにドラッグした後、「メニューの作成」をクリックして新しいメニューを作成します。

最後に、「テーマの場所」の「メインナビゲーションメニュー」にチェックを入れて、登録したばかりのメインメニューとしてメニューが表示されることを確認し、メニューを保存します。

注: メニューに変更を加えた後は、必ずメニューを保存してください。ウィジェットとは異なり、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() 函数注册多个菜单，并将它们添加到主题中的相关位置，如上所述

为什么不尝试一下呢？

---

资源

• 导航菜单指南
• register_nav_menu() 函数
• wp_nav_menu() 函数