1

/wp-includes/default-widgets.php でカスタム メニュー ウィジェットのコードを見つけました。私がやりたいことは、Menu UL の上に静止画像を追加することです。すでにリストを縦に作成しており、ウィジェットのタイトルの後、リストの前に画像を 1 つ配置したいのですが、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
}
}

サンプル画像

4

1 に答える 1

0

コアファイルを編集しないでください...絶対に！/手首を叩く.

これを行いたい場合は<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; }
于 2012-10-11T05:25:11.577 に答える