WordPressでテーマナビゲーションメニューを作成する方法(1)

WordPress でテーマ ナビゲーション メニューを作成するにはどうすればよいですか?次の記事では、WordPress テーマのナビゲーション メニューを作成するいくつかの方法を紹介します。

WordPressテーマ制作において、ナビゲーションメニューの制作は重要なポイントになります ナビゲーションメニューのHTMLコードが記述されています ナビゲーションメニュー内で動的に呼び出す方法ワードプレスのテーマ？この記事では、ナビゲーションを動的に実装するための PHP コードを記述するいくつかの方法を紹介します。この記事では動的コードの開発のみに焦点を当て、豪華なナビゲーション メニューを実装するための HTML、CSS、JavaScript の記述方法については説明しません。

WP 3.0 カスタム メニューの作成

WordPress 3.0 以降のバージョンでは、カスタム ダイナミック メニューのサポートが開始され、いわゆるダイナミック メニューを使用すると、ユーザーはどの項目を使用するかを決定できます。ナビゲーション メニューに項目を追加し、WordPress の 管理背景 - 外観 - メニュー 列を入力し、対応する列をドラッグして独自のメニューを作成します。これは、WordPress テーマの開発者とユーザーの両方にとって嬉しいことです。カスタムメニューを実装するには、wp_nav_menu()という関数を使用します。この関数にパラメータを渡すと、カスタムメニューを出力できます。この関数の使い方について簡単に説明します。

まず、テーマ ディレクトリの function.php の b399ff61f037ca21c110ee9375daf4f1 の間に次のメニュー登録コードを追加して、テーマ ファイルの 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>

ここにリストされている項目は、Backstage-Appearance-Menu に追加した列です (まだ行っていない場合)。背景はまだ メニューを追加すると、ナビゲーション バーにすべてのページがリストされます。さらに、wp_nav_menu は各 li にクラスを追加します。さまざまなクラスがこのメニュー項目の属性をマークします。たとえば、記事ページが現在開かれている場合、カテゴリ A がこの記事が属するカテゴリです。 カテゴリ 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 およびクラス パラメータなど、多くのパラメータもあります。

カテゴリとページをナビゲーション バーとして使用する

WordPress 3.0 より前は、ほとんどの WordPress テーマはページをナビゲーション バーとして使用しており、ナビゲーションにページを追加することしかできませんでした。十分に自由ではないようです。 WordPress 2.7 を使い始めたとき、この問題が気になりましたが、ドキュメントを読み、いくつかの情報を確認し、ナビゲーションにカテゴリを追加することに気付きました。詳細については、以前に書いた記事を参照してください: WordPress

型破りなナビゲーションバーの制作

上記 2 つの方法はすべて WordPress 独自の機能を使用して実装されています。入力も制限されており、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 チュートリアル 」

以上がWordPressでテーマナビゲーションメニューを作成する方法(1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。