検索

WordPress 3 で新しいメニュー機能が提供されたとき、ナビゲーション メニューの見方は永遠に変わりました。通常のページ リスト機能を使用したり、カテゴリ メニューやページ メニュー、外部またはハード リンク項目をナビゲーション メニューに統合するために独自のカスタム メニュー機能を構築したりする必要はなくなりました。しかし、この新機能をカスタマイズにどのように活用できるのでしょうか?このチュートリアルでは、wp_nav_menu 関数でできるすべてのことを詳しく説明し、Walker クラスを使用してサブ記述を追加し、その関連関数のいくつかに触れます。


パラメータ

この関数には複数のパラメータが使用可能です。以下は、WordPress.org Codex にリストされているデフォルト値です:

リーリー

トピックの場所

このパラメータを使用すると、テーマの位置を設定し、メニュー ページでその位置を使用して、ここに表示するメニューを手動で定義することなく、テーマのその部分で動作するメニューを設定できます。ユーザーがその場所のメニューを定義している場合にのみ、条件を使用してメニューを表示できるため、これはテーマのディストリビュータにとって非常に役立ちます。他の唯一の要件は、関数 register_nav_menu() を使用してこれらの場所を登録することです。メニュー サポートをセットアップするとき、これは通常、関数ファイルを通じて行われます。

primary」という名前のテーマの場所を登録したと仮定して、カスタム メニュー関数パラメーターの構築を開始しましょう。

リーリー ###メニュー###

このパラメータは、どのメニューを使用するかを手動で定義するために使用されます。この例では、使用する正確なメニューの場所を定義するのではなく、共通のメニューの場所を設定しているだけですが、「メイン ナビゲーション」というメニューを使用するように関数に指示したい場合、パラメーターは次のようになります。 リーリー ###容器###

デフォルトでは、メニューは

div

内に含まれますが、あなたが私と同じであれば、通常はこれを必要とせず、

div

の数を減らした方がよいかもしれません。 s およびその他のタグ ボリュームを使用して、コードをできるだけクリーンに保ちます。このパラメータを使用して、html5

などのさまざまなタグを定義することもできます。この例では、21 のテーマ スタイルはコンテナの存在に依存しているため、コンテナがデフォルトのコンテナ値を変更することは望ましくありません。 <section> </section>コンテナクラスとコンテナID <nav>ほぼ推測のとおり、これらのパラメーターはコンテナーのクラスと ID を設定するために使用されます。これを完全に無視しているため、値を定義する必要はありません。 </nav>

メニュークラスとメニューID

これらは前のパラメータと同様に機能しますが、今回は必ず「

nav

」という ID を設定します。これは、スタイルシートでナビゲーションバーのスタイルを設定するために使用する ID であるためです。

リーリー ###エコー###

このパラメータを使用して、結果を表示 (エコー) するか、PHP で使用するために返すかを決定できます。項目はブール値であるため、それを返すには、このパラメーターを 0 に設定するだけです。

バックアップCB

これはコールバック関数です。メニューが見つからない場合は、この関数にフォールバックできます。デフォルトでは、古いサポート

wp_page_menu()

が使用され、すべて同じ引数が関数に渡されます。

###前後###

これらの項目は、アンカー タグ (

) の前後に配置できるものを定義するために使用されます。これらを使用して、各項目の前に垂直バーを追加したり、ナビゲーション項目をスパン タグで囲んだりできます。

リンク前とリンク後

これらは、定義したものはすべてアンカー タグ内にあることを除いて、前に説明した項目と同じように機能します。この例ではこれらを使用する必要がないため、これらを無視し、デフォルトの空のプロジェクトのままにします。

アイテムパッケージ<a> </a> デフォルトでは、項目はメニュー ID とメニュー クラスを持つ順序なしリストに含まれます。必要に応じて、このパラメータを使用してこれを変更できます。 ###深さ###

このパラメータは、同じメニューを 2 回使用したいが、 関数を使用して設定した場所にサブ項目を表示したくない場合に便利です。たとえば、メイン ナビゲーションに 2 番目のドロップダウン メニューを含める場合は、それをデフォルトのままにすることができます。次に、同じ親を使用し、フッター ナビゲーションで子を省略する場合は、このパラメーターを深さ 1 に設定できます。デフォルトの「0」は、すべてのレベルが出力されることを意味します。例を簡単にするために、メイン ナビゲーションにはサブアイテムが含まれていないと仮定します。

ウォーカー

このパラメータは、関数全体の動作方法を操作し、その情報を出力するために使用できるウォーカー オブジェクトを定義するために使用されます。次のセクションで良い例について説明します。

ナビゲーション メニュー項目に説明を追加する

この例では、各メイン メニュー項目にサブ説明を追加します。説明を追加する機能自体は、WordPress メニュー システムですでに利用可能です。この機能をオンにするには、メニューに移動し、右上隅にある「画面オプション」タブを押します。クリックしたオプションが「説明」であることを確認する必要があります。このオプションを選択すると、メニュー項目は次のようになります:

填写完描述后,我们需要创建 walker 类并将其添加到 wp_nav_menu() 参数中。我们将调用该类 description_navigation 因此我们完整的参数代码应如下所示:

$params = array(
	'theme_location' => 'primary',
	'menu_id' => 'nav',
	'walker' => new description_walker()
);
wp_nav_menu($params);

沃克级

现在我们准备使用 Walker 类添加这些描述:

class description_walker extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="'. esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
		$description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

		if($depth != 0) {
			$description = $append = $prepend = "";
		}

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
		$item_output .= $description.$args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

这里发生了很多事情。有关 Walker 类的更多信息,请参阅另一个教程:了解 Walker 类。您在这里应该理解的最重要的部分是我们正在重建每个链接项的输出并添加描述。在上面代码片段的第 19 行,您可以看到我们在哪里获取项目描述(如果存在),并将其设置为包含在 span 标记中的 $description 的值,以便我们可以单独设置描述的样式。然后,在第 24-29 行中,我们将链接项重新组合在一起,在锚标记结束之前添加描述,以便它成为链接本身的一部分。

使用“二十一十一”主题,您现在应该拥有如下所示的内容:

解析機能:wp_nav_menuの検査

风格化

让我们添加一些样式以使其更清晰:

#nav a {
	line-height: 20px;
	padding: 10px 15px;
}

#nav a span {
	display: block;
	font-size: 11px;
	color: #ccc;
}

#nav a:hover span {
	color: #999;
}

这将更改每个链接的高度和填充,导致 span 标记内的描述下降到自己的行,并稍微调整字体大小和颜色以获得如下所示的最终结果:

解析機能:wp_nav_menuの検査


关系函数

您不仅可以使用 wp_nav_menu() 输出包含所有自定义内容的菜单,您还可以进一步使用其一些相关功能。

has_nav_menu()

此功能非常适合仅显示特定菜单(如果该菜单已分配给您的主题位置)。例如,您可能希望在主题上为用户可能不希望出现在主导航中的较少导航项创建顶部导航。这可能是主页链接、“与我们一起做广告”或其他较低级别的号召性用语。但作为主题分发者,如果您不知道这是否是用户想要使用的内容,只需使用如下条件:

if (has_nav_menu('top-menu')) {
	wp_nav_menu('theme_location='top-menu');
}

wp_get_nav_menu_items()

此函数将从特定菜单返回项目数组。如果您想在不使用 Walker 类的情况下构建自定义菜单列表,这可能特别有用。您会失去很多功能,例如菜单项的当前类,但这是循环遍历菜单项数组以获得简单解决方案的好方法。


结论

当您更多地了解内置参数提供的灵活性并能够通过 Walker Class 进行更好的控制时,您可以做很多事情来自定义导航菜单。需要为每个项目添加另一个带有“icon”类的span标签来自定义图标吗?没问题。

能够完全控制菜单的放置和输出,可以扩展您作为主题开发人员的能力,带来不可估量的可能性。您可以使用 Walker 类来做哪些事情?

以上が解析機能:wp_nav_menuの検査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
PHP:サーバー側のスクリプト言語の紹介PHP:サーバー側のスクリプト言語の紹介Apr 16, 2025 am 12:18 AM

PHPは、動的なWeb開発およびサーバー側のアプリケーションに使用されるサーバー側のスクリプト言語です。 1.PHPは、編集を必要とせず、迅速な発展に適した解釈言語です。 2。PHPコードはHTMLに組み込まれているため、Webページの開発が簡単になりました。 3。PHPプロセスサーバー側のロジック、HTML出力を生成し、ユーザーの相互作用とデータ処理をサポートします。 4。PHPは、データベースと対話し、プロセスフォームの送信、サーバー側のタスクを実行できます。

PHPとWeb:その長期的な影響を調査しますPHPとWeb:その長期的な影響を調査しますApr 16, 2025 am 12:17 AM

PHPは過去数十年にわたってネットワークを形成しており、Web開発において重要な役割を果たし続けます。 1)PHPは1994年に発信され、MySQLとのシームレスな統合により、開発者にとって最初の選択肢となっています。 2)コア関数には、動的なコンテンツの生成とデータベースとの統合が含まれ、ウェブサイトをリアルタイムで更新し、パーソナライズされた方法で表示できるようにします。 3)PHPの幅広いアプリケーションとエコシステムは、長期的な影響を促進していますが、バージョンの更新とセキュリティの課題にも直面しています。 4)PHP7のリリースなど、近年のパフォーマンスの改善により、現代の言語と競合できるようになりました。 5)将来的には、PHPはコンテナ化やマイクロサービスなどの新しい課題に対処する必要がありますが、その柔軟性とアクティブなコミュニティにより適応性があります。

なぜPHPを使用するのですか?利点と利点が説明されましたなぜPHPを使用するのですか?利点と利点が説明されましたApr 16, 2025 am 12:16 AM

PHPの中心的な利点には、学習の容易さ、強力なWeb開発サポート、豊富なライブラリとフレームワーク、高性能とスケーラビリティ、クロスプラットフォームの互換性、費用対効果が含まれます。 1)初心者に適した学習と使用が簡単。 2)Webサーバーとの適切な統合および複数のデータベースをサポートします。 3)Laravelなどの強力なフレームワークを持っています。 4)最適化を通じて高性能を達成できます。 5)複数のオペレーティングシステムをサポートします。 6)開発コストを削減するためのオープンソース。

神話を暴く:PHPは本当に死んだ言語ですか?神話を暴く:PHPは本当に死んだ言語ですか?Apr 16, 2025 am 12:15 AM

PHPは死んでいません。 1)PHPコミュニティは、パフォーマンスとセキュリティの問題を積極的に解決し、PHP7.xはパフォーマンスを向上させます。 2)PHPは最新のWeb開発に適しており、大規模なWebサイトで広く使用されています。 3)PHPは学習しやすく、サーバーはうまく機能しますが、タイプシステムは静的言語ほど厳格ではありません。 4)PHPは、コンテンツ管理とeコマースの分野で依然として重要であり、エコシステムは進化し続けています。 5)OpcacheとAPCを介してパフォーマンスを最適化し、OOPと設計パターンを使用してコードの品質を向上させます。

PHP対Pythonの議論:どちらが良いですか?PHP対Pythonの議論:どちらが良いですか?Apr 16, 2025 am 12:03 AM

PHPとPythonには独自の利点と短所があり、選択はプロジェクトの要件に依存します。 1)PHPは、Web開発に適しており、学習しやすく、豊富なコミュニティリソースですが、構文は十分に近代的ではなく、パフォーマンスとセキュリティに注意を払う必要があります。 2)Pythonは、簡潔な構文と学習が簡単なデータサイエンスと機械学習に適していますが、実行速度とメモリ管理にはボトルネックがあります。

PHPの目的:動的なWebサイトの構築PHPの目的:動的なWebサイトの構築Apr 15, 2025 am 12:18 AM

PHPは動的なWebサイトを構築するために使用され、そのコア関数には次のものが含まれます。1。データベースに接続することにより、動的コンテンツを生成し、リアルタイムでWebページを生成します。 2。ユーザーのインタラクションを処理し、提出をフォームし、入力を確認し、操作に応答します。 3.セッションとユーザー認証を管理して、パーソナライズされたエクスペリエンスを提供します。 4.パフォーマンスを最適化し、ベストプラクティスに従って、ウェブサイトの効率とセキュリティを改善します。

PHP:データベースとサーバー側のロジックの処理PHP:データベースとサーバー側のロジックの処理Apr 15, 2025 am 12:15 AM

PHPはMySQLIおよびPDO拡張機能を使用して、データベース操作とサーバー側のロジック処理で対話し、セッション管理などの関数を介してサーバー側のロジックを処理します。 1)MySQLIまたはPDOを使用してデータベースに接続し、SQLクエリを実行します。 2)セッション管理およびその他の機能を通じて、HTTPリクエストとユーザーステータスを処理します。 3)トランザクションを使用して、データベース操作の原子性を確保します。 4)SQLインジェクションを防ぎ、例外処理とデバッグの閉鎖接続を使用します。 5)インデックスとキャッシュを通じてパフォーマンスを最適化し、読みやすいコードを書き、エラー処理を実行します。

PHPでのSQL注入をどのように防止しますか? (準備された声明、PDO)PHPでのSQL注入をどのように防止しますか? (準備された声明、PDO)Apr 15, 2025 am 12:15 AM

PHPで前処理ステートメントとPDOを使用すると、SQL注入攻撃を効果的に防ぐことができます。 1)PDOを使用してデータベースに接続し、エラーモードを設定します。 2)準備方法を使用して前処理ステートメントを作成し、プレースホルダーを使用してデータを渡し、メソッドを実行します。 3)結果のクエリを処理し、コードのセキュリティとパフォーマンスを確保します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境