Menu Image, Icons made easy

外掛說明

Easily add an image or icon in a menu item. Creating a better website menu.
Control the position of the image or icon and also it’s size.

With Menu Image plugin you can do more, check some of the features:

  • Hide Title.
  • Add Image / Icon on the Left of the menu item title.
  • Add Image / Icon on the Right of the menu item title.
  • Add Image / Icon on the Above of the menu item title.
  • Add Image / Icon on the Below of the menu item title.
  • Switch images / icons on mouse over the menu item.

It’s compatible with WPML and no coding knowledge is required.

Related Plugins

  • Mobile Menu: WP Mobile Menu is the best WordPress responsive mobile menu. Provide to your mobile visitor an easy access to your site content using any device smartphone/tablet/desktop.

I need help or I have a doubt, check our Support

Bug reports for Menu Image are welcomed on GitHub. Please note GitHub is not a support forum, and issues that aren’t properly qualified as bugs will be closed.

螢幕擷圖

  • Admin screen
  • Menu preview in standard twenty-thirteen theme

安裝方式

  1. Upload menu-image to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. 移至 /wp-admin/nav-menus.php
  4. Edit exist menu item or add new menu item and just upload image than click Save Menu
  5. 在您的網站檢視選單
  6. (WMPL users only) Goto WPML > WP Menus Sync and click to Sync

常見問題集

How to add custom attributes to menu item link (useful for integration with dropdown menus)

Use core nav_menu_link_attributes and nav_menu_item_title filters.

How to wrap menu link text in `span` html element

Menu link text is already wrapped in span.menu-image-title.

How to add another size for the image?

To add a new size (or remove an old one) add a function to the menu_image_default_sizes filter. For example

<?php
add_filter( 'menu_image_default_sizes', function($sizes) {

  // remove the default 36x36 size
  unset($sizes['menu-36x36']);

  // add a new size
  $sizes['menu-50x50'] = array(50,50);

  // return $sizes (required)
  return $sizes;

});
?>
How to make hovered image visible on current page of menu item?

增加此連結至 style.css

.menu-item.current-menu-item > a.menu-image-hovered img.hovered-image {
  opacity: 1;
}
If you have problem with srcset image problem on WordPress version >= 4.4 and Azure hosting

If you srcset property look like this:

Then you can disable srcset (add it to your function.php):

/**
 * Fix for broken images on azure & wordpress 4.4
 * @see https://wordpress.org/support/topic/wordpress-adding-absolute-paths
 */
add_filter( 'wp_calculate_image_srcset', '__return_false' );

使用者評論

七月 18, 2019
Hello when I put icone, or custom icon the text is never below, sempe next, of an error that does not stay below the text how can I solve?
二月 12, 2019
One of the best legendary plugin. I hope the Author can make a premium version for support this project.
閱讀全部 80 則使用者評論

參與者及開發者

Menu Image, Icons made easy 外掛為開源軟體。以下人員為這個外掛做出了重大貢獻。

參與者

Menu Image, Icons made easy 外掛目前已有 6 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 Menu Image, Icons made easy 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.9.1

  • Fix previous broken update. Sorry for that, everyone is mistake.
  • Remove images srcset and sizes attributes.
  • Add autotests on for images view.

2.9.0

  • Update admin part copy regarding to new wp version.
  • Fix support url.
  • Fix php warning.

2.8.0

  • Use core nav_menu_link_attributes, nav_menu_item_title filters to add image and class instead of walker_nav_menu_start_el filter.
  • Drop support of core version < 4.4.0.

2.7.0

  • Remove notification plugin. It was not a good idea btw.

2.6.9

  • Revert back php <=5.2 support, https://wordpress.org/support/topic/upgrade-to-wp-453-and-268-and-got-this-error. Reported by @itmnetcom and @cjg79

2.6.8

  • Fix wp_nav_menu_item_custom_fields filter usage https://wordpress.org/support/topic/blocked-on-36×36-image. Reported by @vladimir-slonska
  • Fix php warning in notifier component https://wordpress.org/support/topic/invalid-argument-supplied-for-foreach-in-4. Reported by @susanmarshallva

2.6.7

  • Add menu_image_link_attributes filter, fix bug with menu dropdown in Flatsome theme https://wordpress.org/support/topic/bug-image-menu-dropdown. Reported by @apardo

2.6.6

  • Fix various php errors.

2.6.5

  • Add notification plugin.

2.6.4

  • Fixing a clearing bug for WordPress 4.5+. Thanx @kau-boy

2.6.3

  • Fix php warning ‘Invalid Argument foreach()’ https://wordpress.org/support/topic/invalid-argument-foreach-in-menu-imagephp-line-126. Thanx @majancart

2.6.2

  • Update FAQ to dial with srcset and Azure hosting https://wordpress.org/support/topic/wordpress-adding-absolute-paths. Thanx @GeertvanHorrik

2.6.1

  • Fix php warning https://wordpress.org/support/topic/bug-fix-error-in-the-file-menu-imagephp

2.6

  • Fix bug on attachment page.
  • Add french translation. Thanx @CreativeJuiz

2.5

  • Add above and below title. Thanx @alhoseany
  • Add original image size. Thanx @alhoseany
  • Fix the loss of choices on size and title when updating image by ajax. Thanx @alhoseany
  • Fix hidden title on responsive select menu.

2.4

  • Fix compatibility with some modules and themes to according to this topic
  • Fix Jetpack Phonon frontend bug

2.3

2.2

  • Added grunt-wp-readme-to-markdown npm package for converting readme to markdown for github users.

2.1

2.0

  • Added support of media uploader.
  • Fixed php strict warnings.
  • Added .ico image support, thanks to ivol84

1.3

  • Added ability to set title position, an example: before, after image or hide

1.2

  • Fix styles for hovered image

1.1

  • Added style file with vertical align of menu image item by default
  • Added ability to upload image that which will be replaced on hover
  • Added default image sizes for menu items: 24×24, 36×36 and 48×48