記事ディレクトリ
たくさんのウェブサイト人は選ぶWordPress来てウェブサイトを構築する, ただし、一部のテーマのナビゲーション バーは、セカンダリ/マルチレベル メニューをサポートしていません. 満足できない場合は、テーマのメニュー スタイルを手動で追加および変更してみてください.
変更は header.php から始まります このテンプレート ファイルで重要な機能は、メニューの表示です。
コードを使用してカテゴリをメニューとして呼び出すこともできますが、メニュー項目を並べ替えるのは便利ではありません。
サブカテゴリのあるディレクトリは扱いにくいので、他のテーマと同じように自分のテーマにもカスタムメニュー機能を追加したいと思っています。
新しく作ったテーマにメニューカスタマイズ機能を追加するのは難しくなく、主に2つのステップがあります。
最初のステップ、WordPress メニュー登録
メニューを使用するには、最初に登録し、テーマの下の関数ファイルを開き、次のコードを追加する必要があります ▼
<?php //自定义菜单 if (function_exists('register_nav_menus')) { register_nav_menus( array( 'top_navi' => __('顶部菜单') ) ); register_nav_menus( array( 'menu_navi' => __('站点导航') ) ); register_nav_menus( array( 'foot_navi' => __('底部菜单') ) ); } ?>
- テーマの下に functions.php ファイルがない場合は、新しいファイルを作成し、上記のコードをコピーして保存します。
ログインWordPress バックエンド、次に外観→メニューに移動します。
▼以下の画面が表示されれば登録完了です
上記は 2 つのメニューを登録します。
- トップメニュー Top Menubar。
- メインメニュー Main メニューバー。
XNUMX 番目のステップ、WordPress メニュー呼び出し
メニューを登録したら、テーマテンプレートファイルで呼び出すことができます. 以下のコードを header.php ファイルに入れると、メニューを表示したい場所で呼び出すことができます.
header.php ファイル内の「トップメニュー」を呼び出す▼
//顶部菜单调用 <?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>
header.phpファイルで、「メインメニュー」を呼び出します▼
//主菜单调用 <div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul')); } ?> </div>
'menu_navi')); ?>
footer.phpファイルの「ボトムメニュー」を呼び出す▼
//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>
ステップ XNUMX: 設定メニュー
メニューを登録し、メニューの表示位置をテーマファイルに定義したら、WordPress のバックグラウンドで新しいメニュー項目を作成できます。
そして、新しく作成したメニュー項目を登録したメニューに割り当て、対応関係を提案▼
WordPress のマルチレベル メニュー ナビゲーション バーを作成する
それでは、WordPress のマルチレベル メニューを作成する方法について説明しましょう。
まず、独自の WordPress テーマの関数ファイルにある元のメニュー コードを削除します。
またはこのコードを直接追加▼
<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>
- 注: にある必要があります外に追加しました。
次に、テーマがメニューを呼び出すための PHP コードを見つけます。生の場合、通常は次のようになります ▼
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
それを削除して▼に置き換えます
<div id="menu"><?php if(function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul')); } ?> </div>
- 注: このコードに他の div が含まれていないことを確認してください。含まれていない場合、外側の div によって制限されます。
次のステップは、ドロップダウン JS 関数コードを追加し、次のコードをテーマの JS ファイルに追加することです ▼
jQuery(document).ready(function($) { $('#nav li').hover(function() { $('ul', this).slideDown(200)}, function() {$('ul', this).slideUp(300)});});
WordPress メニューの CSS スタイル
最後に、CSS スタイルの美化。
どんな効果があればいいのか、想像力を働かせて、CSSでできます▼
#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");} #menu li{border-right:0px #ace solid;} #nav{margin-left:30px;width:900px;height:36px;} #nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid} #nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;} #nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;} .sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;} .sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}
- 上記の CSS コードをテーマの style.css ファイルに追加して保存します。
保存した後、あなたのウェブサイトのフロントページを更新すると、その効果を確認できます。それはとても簡単ですか?
Hope Chen Weiliang ブログ ( https://www.chenweiliang.com/ ) 共有 "WordPress はどのようにセカンダリ/マルチレベル ナビゲーション バーのカスタム メニューを呼び出しますか? 、 あなたを助けること。
この記事のリンクを共有することを歓迎します。https://www.chenweiliang.com/cwl-1521.html
Chen WeiliangのブログのTelegramチャンネルへようこそ。最新のアップデートを入手できます!
📚 このガイドには非常に価値のある内容が含まれています。🌟これはめったにない機会です、お見逃しなく! ⏰⌛💨
気に入ったらシェア&いいね!
あなたの共有といいねは、私たちの継続的な動機です!