カスタムメニューで画像を追加する。

こんにちは、今回は真面目に記事を書こうかと思います。
なのでおもしろさはないです。

今回は、カスタムメニューで画像を上げてメニューを画像にしようという事で、すでにどこかに投稿されていたらすみません。。。

今回用意するものは、やる気, くじけぬ心, 好奇心です。
また使うのは、wp_edit_nav_menu_walker というフィルター、wp_update_nav_menu_item というアクション、wp_nav_menu_args というフィルターと Walker_Nav_Menu になります。

今回画像をアップするに辺り『和歌山県に住むWordPressに詳しい中年男性』の記事を参考にしました。
また言い回しは『WordPress に詳しい小説家さん』のこの記事から学びました。
早速ですがコードですね。(使っているテーマの functions.php とかに記述してください。)

1.メディアアップローダー用のスクリプトを読み込む

PHP

add_action('load-nav-menus.php', 'my_admin_scripts_styles' );
function my_admin_scripts_styles() {
	wp_enqueue_media(); // メディアアップローダー用のスクリプトをロードするらしいです。
	wp_enqueue_script( 'my-media-uploader-script', get_template_directory_uri() . '/js/my-media-uploader.js', array( 'jquery' ), '710', false ); //ファイル名等は適当につけてください。 710はバージョン番号なのでこれも適当に。
}

2.my-media-uploader.js を作る。

Java Script

// http://firegoby.jp/archives/4031 を参考にしました。
jQuery(document).ready(function($) {
	if ( $("ul#menu-to-edit").size()>0 ) {
		$("ul#menu-to-edit li").each(function(){
			var num = $('button.add-button', this ).attr('date-num');
			if ( $('div#my-preview-images-' + num + ' img').size() > 0 ) {
				$('button.delete-button', this ).show();
			} else {
				$('button.delete-button', this ).hide();
			}
		});
	}
 
	var custom_uploader;
	$('button[id^="my-media-add"]').click(function(e) {
		var num = $(this).attr('date-num');
 
		e.preventDefault();
		if (custom_uploader) {
			custom_uploader.open();
			return;
		}
		custom_uploader = wp.media({
			title: 'Choose Image',
			library: {
				type: 'image'
			},
			button: {
				text: 'Choose Image'
			},
			multiple: false // falseにすると画像を1つしか選択できなくなる
		});
		 
		custom_uploader.on('select', function() {
			var images = custom_uploader.state().get('selection');
			images.each(function(file){
				$('div#my-preview-images-' + num + ' img').remove();
				$('div#my-preview-images-' + num).append('<img src="'+file.toJSON().sizes.thumbnail.url+'" />');
				$('input#menu-item-my-image-' + num).val(file.toJSON().id);
				$('button#my-media-delete-' + num).show();
			});
		});
		custom_uploader.open();
	});
	$('button[id^="my-media-delete-"]').click(function() {
		var num = $(this).attr('date-number');
		$('div#my-preview-images-' + num + ' img').remove();
		$('input#menu-item-my-image-' + num).val('');
		$(this).hide();
	});
});

テーマ内に js ディレクトリを作って my-media-uploader.js で保存しましたよね?

3.カスタムメニュー登録画面にカスタムフィールドを足すための準備

PHP

add_filter( 'wp_edit_nav_menu_walker', 'my_edit_nav_menu_walker' );
function my_edit_nav_menu_walker( $args ) {
	return 'Walker_My_Nav_Menu_Edit'; //ここでカスタムメニューの所のあれをあれする感じで。
}

4.Walker を作る

PHP

class Walker_My_Nav_Menu_Edit extends Walker_Nav_Menu {
 
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		global $_wp_nav_menu_max_depth;
		$_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth;
 
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
		ob_start();
		$item_id = esc_attr( $item->ID );
		$removed_args = array(
			'action',
			'customlink-tab',
			'edit-menu-item',
			'menu-item',
			'page-tab',
			'_wpnonce',
		);
 
		$original_title = '';
		if ( 'taxonomy' == $item->type ) {
			$original_title = get_term_field( 'name', $item->object_id, $item->object, 'raw' );
			if ( is_wp_error( $original_title ) )
				$original_title = false;
		} elseif ( 'post_type' == $item->type ) {
			$original_object = get_post( $item->object_id );
			$original_title = $original_object->post_title;
		}
 
		$classes = array(
			'menu-item menu-item-depth-' . $depth,
			'menu-item-' . esc_attr( $item->object ),
			'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 'active' : 'inactive'),
		);
 
		$title = $item->title;
 
		if ( ! empty( $item->_invalid ) ) {
			$classes[] = 'menu-item-invalid';
			/* translators: %s: title of menu item which is invalid */
			$title = sprintf( __( '%s (Invalid)' ), $item->title );
		} elseif ( isset( $item->post_status ) && 'draft' == $item->post_status ) {
			$classes[] = 'pending';
			/* translators: %s: title of menu item in draft status */
			$title = sprintf( __('%s (Pending)'), $item->title );
		}
 
		$title = empty( $item->label ) ? $title : $item->label;
 
		?>
		<li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
			<dl class="menu-item-bar">
				<dt class="menu-item-handle">
					<span class="item-title"><?php echo esc_html( $title ); ?></span>
					<span class="item-controls">
						<span class="item-type"><?php echo esc_html( $item->type_label ); ?></span>
						<span class="item-order hide-if-js">
							<a href="<?php
								echo wp_nonce_url(
									add_query_arg(
										array(
											'action' => 'move-up-menu-item',
											'menu-item' => $item_id,
										),
										remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
									),
									'move-menu_item'
								);
							?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">&#8593;</abbr></a>
							|
							<a href="<?php
								echo wp_nonce_url(
									add_query_arg(
										array(
											'action' => 'move-down-menu-item',
											'menu-item' => $item_id,
										),
										remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
									),
									'move-menu_item'
								);
							?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">&#8595;</abbr></a>
						</span>
						<a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php
							echo ( isset( $_GET&#91;'edit-menu-item'&#93; ) && $item_id == $_GET&#91;'edit-menu-item'&#93; ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) );
						?>"><?php _e( 'Edit Menu Item' ); ?></a>
					</span>
				</dt>
			</dl>
 
			<div class="menu-item-settings" id="menu-item-settings-<?php echo $item_id; ?>">
				<?php if( 'custom' == $item->type ) : ?>
					<p class="field-url description description-wide">
						<label for="edit-menu-item-url-<?php echo $item_id; ?>">
							<?php _e( 'URL' ); ?><br />
							<input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->url ); ?>" />
						</label>
					</p>
				<?php endif; ?>
				<p class="description description-thin">
					<label for="edit-menu-item-title-<?php echo $item_id; ?>">
						<?php _e( 'Navigation Label' ); ?><br />
						<input type="text" id="edit-menu-item-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->title ); ?>" />
					</label>
				</p>
				<p class="description description-thin">
					<label for="edit-menu-item-attr-title-<?php echo $item_id; ?>">
						<?php _e( 'Title Attribute' ); ?><br />
						<input type="text" id="edit-menu-item-attr-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->post_excerpt ); ?>" />
					</label>
				</p>
				<p class="field-link-target description">
					<label for="edit-menu-item-target-<?php echo $item_id; ?>">
						<input type="checkbox" id="edit-menu-item-target-<?php echo $item_id; ?>" value="_blank" name="menu-item-target[<?php echo $item_id; ?>]"<?php checked( $item->target, '_blank' ); ?> />
						<?php _e( 'Open link in a new window/tab' ); ?>
					</label>
				</p>
				<p class="field-css-classes description description-thin">
					<label for="edit-menu-item-classes-<?php echo $item_id; ?>">
						<?php _e( 'CSS Classes (optional)' ); ?><br />
						<input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode(' ', $item->classes ) ); ?>" />
					</label>
				</p>
				<p class="field-xfn description description-thin">
					<label for="edit-menu-item-xfn-<?php echo $item_id; ?>">
						<?php _e( 'Link Relationship (XFN)' ); ?><br />
						<input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->xfn ); ?>" />
					</label>
				</p>
				<p class="field-description description description-wide">
					<label for="edit-menu-item-description-<?php echo $item_id; ?>">
						<?php _e( 'Description' ); ?><br />
						<textarea id="edit-menu-item-description-<?php echo $item_id; ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo $item_id; ?>]"><?php echo esc_html( $item->description ); // textarea_escaped ?></textarea>
						<span class="description"><?php _e('The description will be displayed in the menu if the current theme supports it.'); ?></span>
					</label>
				</p>
				<?php $thumb = ( $attachment_id = $item->menu_item_my_image ) ? wp_get_attachment_image( $attachment_id ) : ''; ?>
				<p class="field-images-classes">
					<label for="my-media-add-<?php echo $item_id; ?>">
						<?php _e( 'Images' ); ?><br />
						<button id="my-media-add-<?php echo $item_id; ?>" class="add-button" date-num="<?php echo $item_id; ?>"><?php _e( 'Images' ); ?></button>
						<input type="hidden" id="menu-item-my-image-<?php echo $item_id; ?>" name="menu-item-my-image[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_item_my_image ); ?>">
					</label>
					<label><button type="button" id="my-media-delete-<?php echo $item_id; ?>"  class="delete-button" date-number="<?php echo $item_id; ?>"><?php _e( 'Delete' ); ?></button></label>
				</p>
				<div id="my-preview-images-<?php echo $item_id; ?>">
					<?php echo $thumb; ?>
				</div>
 
				<div class="menu-item-actions description-wide submitbox">
					<?php if( 'custom' != $item->type && $original_title !== false ) : ?>
						<p class="link-to-original">
							<?php printf( __('Original: %s'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?>
						</p>
					<?php endif; ?>
					<a class="item-delete submitdelete deletion" id="delete-<?php echo $item_id; ?>" href="<?php
					echo wp_nonce_url(
						add_query_arg(
							array(
								'action' => 'delete-menu-item',
								'menu-item' => $item_id,
							),
							remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) )
						),
						'delete-menu_item_' . $item_id
					); ?>"><?php _e('Remove'); ?></a> <span class="meta-sep"> | </span> <a class="item-cancel submitcancel" id="cancel-<?php echo $item_id; ?>" href="<?php   echo esc_url( add_query_arg( array('edit-menu-item' => $item_id, 'cancel' => time()), remove_query_arg( $removed_args, admin_url( 'nav-menus.php' ) ) ) );
						?>#menu-item-settings-<?php echo $item_id; ?>"><?php _e('Cancel'); ?></a>
				</div>
 
				<input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id&#91;<?php echo $item_id; ?>]" value="<?php echo $item_id; ?>" />
				<input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id&#91;<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" />
				<input class="menu-item-data-object" type="hidden" name="menu-item-object&#91;<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object ); ?>" />
				<input class="menu-item-data-parent-id" type="hidden" name="menu-item-parent-id&#91;<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_item_parent ); ?>" />
				<input class="menu-item-data-position" type="hidden" name="menu-item-position&#91;<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" />
				<input class="menu-item-data-type" type="hidden" name="menu-item-type&#91;<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->type ); ?>" />
			</div><!-- .menu-item-settings-->
			<ul class="menu-item-transport"></ul>
		<?php
		$output .= ob_get_clean();
	}
}
&#91;/php&#93;

5.値を保存する。
&#91;php lang_name="true"&#93;
add_action( 'wp_update_nav_menu_item', 'my_update_nav_menu_item', 10, 3 );
function my_update_nav_menu_item( $menu_id, $menu_item_db_id, $menu_item_data ) {
	if ( isset( $_POST&#91;'menu-item-my-image'&#93; ) ) {
		foreach( (array) $_POST&#91;'menu-item-my-image'&#93; as $key => $value ) {
			update_post_meta( $key, 'menu_item_my_image', $value );
		}
	}
}

6.カスタムメニューに今回のを追加するための準備。

PHP

add_filter( 'wp_nav_menu_args', 'my_nav_menu_args' );
function my_nav_menu_args( $args ) {
	$locations = get_nav_menu_locations();
	if ( !empty($locations) && 0 !== $locations[$args['theme_location']]) {
		$args['walker'] = new Walker_My_Nav_Menu;
	}
	return $args;
}

7.Walker を作る

PHP

class Walker_My_Nav_Menu extends Walker_Nav_Menu {
 
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
		$class_names = $value = '';
 
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;
 
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
 
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
 
		$output .= $indent . '<li' . $id . $value . $class_names .'>';
 
		$atts = array();
		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
		$atts['target'] = ! empty( $item->target )     ? $item->target     : '';
		$atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
		$atts['href']   = ! empty( $item->url )        ? $item->url        : '';
 
		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
 
		$attributes = '';
		foreach ( $atts as $attr => $value ) {
			if ( ! empty( $value ) ) {
				$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
				$attributes .= ' ' . $attr . '="' . $value . '"';
			}
		}
 
		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		if ( $attachment_id = $item->menu_item_my_image ) {
			$item_output .= $args->link_before . wp_get_attachment_image( $attachment_id, 'full', false, array(
				'alt' => apply_filters( 'the_title', $item->title, $item->ID ) ) ) . $args->link_after;
		} else {
			$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		}
		$item_output .= '</a>';
		$item_output .= $args->after;
 
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

長いですが、ハイライトされている所が追加された部分ですね。
nav_menu_link_attributes, walker_nav_menu_start_el 等そのままなのでなんかあったら適当に変えてください。

以上ですかね。

うまくいくと、
custom-menu-image-1
こんな感じで画像が指定できます。

Just another WordPress site Webnist Local Test
表は画像が大きいですがこんな感じで表示されます。

まとめ
1.画像のサイズは full で指定しているので、add_image_size でサイズを足すか、実際のサイズで画像を上げてください。
2.見た目とかは各自お願いします。
3.ウィジェットのカスタムメニューを使えばバナー管理としても使えるかもしれませんね。
その場合は、今回のにちょっと足してクリックを計測するのを足すとかね。
そのへんは詳しくないので各自で頑張ってください。
4.my って書いてあるのは各自で適当に変更してください。
5.後は自己責任でお願いします。
6.インデントがおかしくなるので、置き換えてください。(追記2013/06/26 14:46)