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