Question

我在/wp-includes/default-widgets.php下找到了Custom Menu Widget的代码。我想要做的是在菜单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; }

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

1 个答案: