WordPressでテーマナビゲーションメニューを作成する方法(1)-＆＃＆プレス-php.cn

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

青灯夜游

リリース： 2023-02-22 21:10:34

転載

1988 人が閲覧しました

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

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

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

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

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

まず、テーマディレクトリの function.php のの間に次のメニュー登録コードを追加して、テーマファイルの 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 サイトの他の関連記事を参照してください。