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

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

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 コードを出力します。

 'mymenu', 'depth' => 1) ); ?>

上記のコードの形式出力 HTML コードは次のとおりです。

 
 
首页
 
分类A
 ... 
 

ここにリストされている項目は、Backstage-Appearance-Menuに追加した列です (まだ行っていない場合)。背景はまだ メニューを追加すると、ナビゲーション バーにすべてのページがリストされます。さらに、wp_nav_menu は各 li にクラスを追加します。さまざまなクラスがこのメニュー項目の属性をマークします。たとえば、記事ページが現在開かれている場合、カテゴリ Aがこの記事が属するカテゴリです。カテゴリ Aが存在する li は次のコードのようになります:

分类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 の形式を使用してメニュー リストを作成します。例:

 
...
 
...
 

テーマのフロントエンド コードが自分で書かれていない場合、ナビゲーション 列のコードは非常にわかりにくいです。これは、次のコードのような、上記の WordPress 標準の UL ナビゲーション バー フォームではありません:

 
标题
 
菜单A
 
菜单B
 

フロントエンド コードを書き直しますか?これをやりたい人はいないと思いますが、どうすればよいでしょうか？また、ナビゲーション バーでカテゴリやページが使用されず、カスタム メニューの使用が許可されていない場合はどうすればよいでしょうか?実際のアプリケーションでは、さまざまな奇妙な要件に遭遇することもありますが、この問題については次回も引き続き検討していきます。

推奨学習: 「WordPress チュートリアル」

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