如何将图像添加到Wordpress自定义菜单窗口小部件

Question

我在/wp-includes/default-widgets.php下找到了自定义菜单窗口小部件的代码。我想要做的是在菜单UL上添加一个静态图像。我已经在列表中垂直创建列表，并且希望在小部件标题之后和列表之前放置一个图像，但我对PHP没有多少了解。

下面是自定义菜单插件的代码：

`/** 
* Navigation Menu widget class 
* 
* @since 3.0.0 
*/ 
class WP_Nav_Menu_Widget extends WP_Widget { 

function __construct() { 
$widget_ops = array('description' => __('Use this widget to add one of your custom menus as a widget.')); 
parent::__construct('nav_menu', __('Custom Menu'), $widget_ops); 
} 

function widget($args, $instance) { 
// Get menu 
$nav_menu = ! empty($instance['nav_menu']) ? wp_get_nav_menu_object($instance['nav_menu']) : false; 

if (!$nav_menu) 
return; 

$instance['title'] = apply_filters('widget_title', empty($instance['title']) ? '' : $instance['title'], $instance, $this->id_base); 

echo $args['before_widget']; 

if (!empty($instance['title'])) 
echo $args['before_title'] . $instance['title'] . $args['after_title']; 

wp_nav_menu(array('fallback_cb' => '', 'menu' => $nav_menu)); 

echo $args['after_widget']; 
} 

function update($new_instance, $old_instance) { 
$instance['title'] = strip_tags(stripslashes($new_instance['title'])); 
$instance['nav_menu'] = (int) $new_instance['nav_menu']; 
return $instance; 
} 

function form($instance) { 
$title = isset($instance['title']) ? $instance['title'] : ''; 
$nav_menu = isset($instance['nav_menu']) ? $instance['nav_menu'] : ''; 

// Get menus 
$menus = get_terms('nav_menu', array('hide_empty' => false)); 

// If no menus exists, direct the user to go and create some. 
if (!$menus) { 
echo '<p>'. sprintf(__('No menus have been created yet. Create some.'), admin_url('nav-menus.php')) .'</p>'; 
return; 
} 
?> 
<p> 
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:') ?></label> 
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" /> 
</p> 
<p> 
<label for="<?php echo $this->get_field_id('nav_menu'); ?>"><?php _e('Select Menu:'); ?></label> 
<select id="<?php echo $this->get_field_id('nav_menu'); ?>" name="<?php echo $this->get_field_name('nav_menu'); ?>"> 
<?php 
foreach ($menus as $menu) { 
$selected = $nav_menu == $menu->term_id ? ' selected="selected"' : ''; 
echo '<option'. $selected .' value="'. $menu->term_id .'">'. $menu->name .'</option>'; 
} 
?> 
</select> 
</p> 
<?php 
} 
} 

Sample Picture

Answer 1

永远不要修改核心文件...永远！ /拍拍手腕。

如果您想要这样做，您可以在第一个<li>的顶部或标题底部添加一些填充（〜100px）。然后设置一个背景到div就像

.custom-menu { background: url(your-image.png) center 5px no-repeat; } /*note no-repeat*/ 

，或者如果你想要的图像可点击，解雇的一切，我只是告诉你：

使自定义菜单菜单新的第一个菜单项。抓住那个特定的类，并添加类似的风格它

.the-li-you-want { width: 200px; height: 100px; text-indent: -999px; /*hide the text on it*/ background: url(your-image.png) no-repeat; }