如何將圖像添加到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; }