[WordPress] 外掛分享: Dropdown Menus

首頁外掛目錄 › Dropdown Menus
300+
安裝啟用
★★★★
4.4/5 分(5 則評價)
4805 天前
最後更新
問題解決
WordPress 3.0+ v1.0 上架:2011-07-15

內容簡介

對於行動版或一般小螢幕設計,使用下拉式導覽可以節省空間。這個外掛程式提供了一種顯示自訂選單作為下拉式選單的方式,可以使用小工具或函數呼叫,並且可以作為任何主題的 include。

使用方法

如果您正在使用此外掛程式與主題,您可以使用 dropdown_menu() 函數來取代 wp_nav_menu() 的呼叫。

dropdown_menu() 函數帶有與 wp_nav_menu() 相同的引數,並增加了三個額外選項:

<?php
dropdown_menu( array(

// 您可以使用以下方式更改空白文字,例如 "- 選單名稱 -"
'dropdown_title' => '-- 主選單 --',

// indent_string 是在子選單項目標題之前輸出的字符串。子子菜單項目重複兩次,以此類推
'indent_string' => '- ',

// 如果項目是子選單項目,indent_after 是可選的字符串,在 indent_string 之後輸出
'indent_after' => ''

) );
?>

您可以使用程式碼中提供的輸出過濾器來擴展和更改下拉式選單的輸出。

此外掛程式還提供了許多樣式鉤子,例如在標準列表類型選單中,增加了用於針對菜單中某個深度的項目的類別 (例如 .menu-item-depth-1) 以及通常的 .current-menu-item 和 .current-menu-ancestor 類別。

過濾器 / 鉤子

dropdown_blank_item_text

<?php
add_filter( 'dropdown_blank_item_text', 10, 2 );
function my_dropdown_blank_text( $title, $args ) {
return __( '- 瀏覽 -' );
}
?>

如果要在空白項目中顯示菜單標題,請使用以下代碼:

<?php
add_filter( 'dropdown_blank_item_text', 'dropdown_menu_use_menu_title', 10, 2 );
function dropdown_menu_use_menu_title( $title, $args ) {
return '- ' . $args->menu->name . ' -';
}
?>

dropdown_menus_indent_string

<?php
add_filter( 'dropdown_menus_indent_string', 10, 4 );
function my_dropdown_indent_string( $indent_string, $item, $depth, $args ) {
return str_repeat( '&nbsp;&nbsp;', $depth );
}
?>

dropdown_menus_indent_after

<?php
add_filter( 'dropdown_menus_indent_after', 10, 4 );
function my_dropdown_indent_after( $indent_after, $item, $depth, $args ) {
return '-';
}
?>

dropdown_menus_class

如果您發現類名稱或 CSS 衝突,例如 Twitter Bootstrap,請使用此類過濾器。

<?php
add_filter( 'dropdown_menus_class', create_function( '$c', 'return "my-dropdown-menu-class";' ) );
?>

dropdown_menus_select_current

如果您喜歡在每個頁面中顯示空白選項,請使用此過濾器停止輸出 selected="selected" 屬性。

<?php
add_filter( 'dropdown_menus_select_current', create_function( '$bool', 'return false;' ) );
?>

我可以確認此外掛程式可以使用我的主題嗎?

如果您的主題需要此外掛程式可用,請將其作為簡單的 include 使用。只需將外掛程式放入您的主題目錄中,並從您的 functions.php 檔案中包含 dropdown-menus.php。

如果您將外掛程式資料夾放入主題目錄中,您可以使用以下程式碼在 functions.php 檔案中引用:

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Dropdown Menus」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Sometimes for mobile design or more generally small-screen design it can be beneficial to save space by using a dropdown for your navigation.
This plugin provides a way to display your custom menus as dropdowns either using a widget or a function call and can be used as an include in any theme.
Usage
If you are using the plugin with a theme you can use the function dropdown_menu() in place of calls to wp_nav_menu().
The dropdown_menu() function takes the same arguments as wp_nav_menu() with the addition of three extras:
'-- Main Menu --',

// indent_string is a string that gets output before the title of a
// sub-menu item. It is repeated twice for sub-sub-menu items and so on
'indent_string' => '- ',

// indent_after is an optional string to output after the indent_string
// if the item is a sub-menu item
'indent_after' => ''

) );
?>

You can extend and alter the output of the dropdowns using the output filters available in the code.
There are also plenty of styling hooks like in the standard list type menus with the addition of classes for targetting items at a certain depth in the menu (.menu-item-depth-1 for example) aswell the usual .current-menu-item and .current-menu-ancestor classes.
Filters/Hooks
dropdown_blank_item_text

If you want to show the menu title as the blank item text use the follwing code:
menu->name . ' -';
}
?>

dropdown_menus_indent_string

dropdown_menus_indent_after

dropdown_menus_class
Use this if you find you get class name or CSS conflicts, for example with Twitter Bootstrap.

dropdown_menus_select_current
Use this filter to stop the output of the selected="selected" attribute. Useful if you prefer to show the blank option on every page.

Can I make sure this plugin is available to my theme?
If your theme requires this plugin to be available it will work as a simple include. Just place the plugin into your theme directory and include dropdown-menus.php from your functions.php file.
If you place the plugin folder into your theme’s directory you would use the following code in your functions.php file:

延伸相關外掛

文章
Filter
Apply Filters
Mastodon