ワードプレス メニューは一連のリンク(メニューアイテム)を整理するための強力なツールであり、テーマはナビゲーション機能を作成するためにこれらのメニューを使用することがよくあります。このガイドでは、WordPressのメニュー項目にカスタムフィールドを追加し、メニュー項目のHTML出力を変更する方法を詳しく説明します。使用するプラグインはACF(高度なカスタムフィールド).
ACFこのプラグインは現在SCFという名前に変更され、プラグインマーケットプレイスにインストールされています:
![画像[1] - WordPressのメニュー項目にカスタムフィールドを追加し、そのHTMLを修正する方法](https://www.361sale.com/wp-content/uploads/2024/11/20241121113500520-image.png)
![画像[2] - WordPressのメニュー項目にカスタムフィールドを追加し、そのHTMLを修正する方法](https://www.361sale.com/wp-content/uploads/2024/11/20241121104643193-image.png)
フィールドの追加
Advanced Custom Fieldsプラグインを使用すると、メニュー項目にカスタムフィールドを簡単に追加できます。
- 自己啓発フィールドの定義管理画面で新規追加ボタンをクリックして、新しいフィールドグループを作成します。
- メニュー項目の編集時に表示したいフィールドを追加します。
- インポジション小文字の場合はメニュー項目ルールを作成し、"All"(すべてのメニュー項目にこのフィールドグループを表示する)または "Specific Menu/Location"(特定のメニュー項目のみにこのフィールドグループを表示する)を選択します。
![画像[3] - WordPressのメニュー項目にカスタムフィールドを追加し、そのHTMLを修正する方法](https://www.361sale.com/wp-content/uploads/2024/11/20241121104042558-image.png)
フィールドの編集
フィールド・グループが作成され、メニュー項目編集画面に表示されるように指定されると、メニュー項目編集画面に移動して編集することができます。外観 > メニューフィールド値を編集するための管理ページ。
WPは各メニュー項目をポストオブジェクトとしてwp_postsACFはすべてのカスタムフィールド値をwp_postmeta表
![画像[4] - WordPressのメニュー項目にカスタムフィールドを追加し、そのHTMLを修正する方法](https://www.361sale.com/wp-content/uploads/2024/11/20241121104151658-image.png)
表示フィールド
WordPress のメニュー項目の HTML は、wp_nav_menu_objects フィルタで簡単にカスタマイズできます。このフィルタは(wp_nav_menu()関数によって)メニューがレンダリングされるたびに実行され、メニューアイテムオブジェクトを修正することができます。それぞれのオブジェクトはタイトル各メニューリンク要素の出力値<a>.
この例では、すべてのメニュー項目オブジェクトを新しい "アイコン"フィールドに値が存在する場合、アイコンを添付します。
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
// ループ
foreach( $items as &$item ) { // ループします。
// 引数
$icon = get_field('icon', $item);
// アイコンを追加
if( $icon ) { // アイコンを追加
$item->title .= ' ';
}
}
// リターン
return $items;
}
はんけつをくだす
これがブラウザでの表示です。新しいアイコンエレメント!
![画像[5] - WordPressのメニュー項目にカスタムフィールドを追加し、そのHTMLを修正する方法](https://www.361sale.com/wp-content/uploads/2024/11/20241121104320582-image.png)
| お問い合わせ | |
|---|---|
| チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
カスタマーサービス WeChat
|
| ① 電話:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| 三 Eメール:info@361sale.com | |
| ④ 勤務時間: 月~金、9:30~18:30、祝日休み | |
この記事へのリンクhttps://www.361sale.com/ja/27348この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。






















![絵文字[wozuimei]-Photonflux.com|プロのWordPress修理サービス、ワールドワイド、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 専門WordPress修復サービス、全世界対応、迅速対応](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

コメントなし