実は簡単なナビメニューの編集方法！ 参照ページが少ないだけでそれほど難しくない。
日付
カテゴリー
カスタマイズ
ナビメニューって大体ドロップダウン式で並んでいて、親アイテムをホバーしたりクリックしたりすると、子アイテムが表示されるようになっていますよね。
テーマ「ShapeShifter」でもそういった初歩的なドロップダウン式のメニューを使用しているんですが、凝ったデザインだとナビメニューに説明を加えられていたり、サムネイルも同時に出力したポップアップだったり、と結構通常の出力とは異なったものを出力しています。
で、最近テーマ「ShapeShifter」でもちょっと凝ったものを作れるように、というよりはカスタマイズ出来るようにしようと思い、ナビメニューに着手し始めています。
今までしていなかったのは、僕がCSSだけでドロップダウンメニューをデザインするのが苦手だったからですが、まぁワードプレスのコードを使ってHTMLを編集するくらいは案外簡単にできてしまうんです。
ただ、ナビメニューは参照ページが少ないのか、あまりカスタマイズの方法が載っているページが見つからない気がしますので、ちょっと簡単に設定項目の追加・保存、また出力するナビメニューの編集方法について紹介してみようと思います。
Walkerクラスについて
ナビメニューの編集にはワードプレスに用意されているクラス「Walker」が付き纏いますので、簡単な解説を先にしておきます。
既に知っていると簡単に理解できると思いますし、知らない人は「階層有りのアイテムのHTMLを出力するクラス」だったり、「アイテム毎、階層毎に出力するラッパーなどを編集できるクラス」などと覚えておくと良いかもしれません。
例えば、ナビメニュー用のウォーカークラスには、階層の初めに「<ul class=”sub-menu”> ~~~ 」後に「</ul>」、アイテムの初めに「<li class=~~~~”> ~~~ Menu Link Item HTML ~~~ 」後に「</li>」といった感じで出力されるような、メソッドが用意されています。
これらのクラスを引き継いで、メソッドを編集することで簡単に編集でき、実はこれは管理画面の「メニュー」ページでも、公開側で使用される関数「wp_nav_menu」の引数でも使われています。
このクラスの編集方法を知っていれば、階層を持つアイテムをカスタマイズすることが可能になりますので、覚えておいて損はないと思います。
関数「wp_nav_menu」で出力されるナビメニューを編集
恐らくどのテーマにも使われていると思いますが、ナビメニューのHTMLを出力・取得することができる関数「wp_nav_menu」は、カスタマイズを試みたことがある人なら一度は触ったことがあると思います。
大きく分けると２種類方法があります。Walkerクラスを作成して指定し直す方法とフィルターフックを使う方法です。
フィルターフックの方が簡単そうに見えますが、フィルターフックもWalkerクラス内に用意されているものですから、先にWalkerクラスを編集する方法を紹介すると同時に、どの部分にフィルターがかけられているかを見ておくと編集しやすいので、Walkerクラスから紹介していきます。
継承クラスの作成
ただ、実際はナビメニューのIDを指定する以外に、ラッパーとなるHTML、クラス、出力の有無を指定したりできますが、引数となる連想配列のキー「walker」を指定することが出来ます。これは上記したWalkerクラスのことです。これを指定しない場合、デフォルトでワードプレスが用意している「Walker_Nav_Menu」というクラスが使われることになります。
ええ、ですので、これを継承したクラスを作成し、部分的に編集してやれば、思い通りのナビメニューを作成することが可能になりますので、部分改造だけでも試みてください。
まず「class/walker-nav-menu.php」など何でも構いませんので、PHPのファイルを作成してインクルードします。
後は以下のようにコーディングします。
<?php
if( ! class_exists( 'ShapeShifter_Walker_Nav_Menu' ) ) {
class ShapeShifter_Walker_Nav_Menu extends Walker_Nav_Menu {
private $nav_menu_settings;
// 階層の開始
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<div class=\"sub-menu-wrapper sub-menu-wrapper-$depth\"><ul class=\"sub-menu\">\n";
}
// 階層の終わり
public function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "$indent</ul></div>\n";
}
// アイテムの開始
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
/**
* Filters the arguments for a single nav menu item.
*
* @since 4.4.0
*
* @param array $args An array of arguments.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*/
$args = apply_filters( 'shapeshifter_nav_menu_item_args', $args, $item, $depth );
/**
* Filters the CSS class(es) applied to a menu item's list item element.
*
* @since 3.0.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $classes The CSS classes that are applied to the menu item's `<li>` element.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'shapeshifter_nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
/**
* Filters the ID applied to a menu item's list item element.
*
* @since 3.0.1
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string $menu_id The ID that is applied to the menu item's `<li>` element.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$id = apply_filters( 'shapeshifter_nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $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 : '';
/**
* Filters the HTML attributes applied to a menu item's anchor element.
*
* @since 3.6.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $atts {
* The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
*
* @type string $title Title attribute.
* @type string $target Target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* }
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$atts = apply_filters( 'shapeshifter_nav_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
/** This filter is documented in wp-includes/post-template.php */
$title = apply_filters( 'shapeshifter_the_title', $item->title, $item->ID );
/**
* Filters a menu item's title.
*
* @since 4.4.0
*
* @param string $title The menu item's title.
* @param object $item The current menu item.
* @param array $args An array of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$title = apply_filters( 'shapeshifter_nav_menu_item_title', $title, $item, $args, $depth );
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
/**
* Filters a menu item's starting output.
*
* The menu item's starting output only includes `$args->before`, the opening `<a>`,
* the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
* no filter for modifying the opening and closing `<li>` for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of wp_nav_menu() arguments.
*/
$output .= apply_filters( 'shapeshifter_walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
// アイテムの終わり
public function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "</li>\n";
}
}
}
?>
長々と書いていますが、基本的には親クラス「Walker_Nav_Menu」をコピーしていますので殆ど編集はしていません。
階層の最初と最後に「DIV」タグを追加して、各フィルターフック名に「shapeshifter_」とプレフィックスを付けた程度です。
また、Walkerクラスごとメリットは、任意の箇所にフィルターを掛けることが出来ますし、階層やアイテム毎に細かい編集も可能ですから、HTMLを丸ごと一新できてしまうんですよ。ええ、各アイテムがページのIDも持っていますから、そこからメタデータやサムネイルを引っ張ってくることも可能なんです。
あとは出力する際に以下のようにして「wp_nav_menu」を使うだけです。
<?php wp_nav_menu( array( 'theme_location' => 'your_nav_menu', 'walker' => new ShapeShifter_Walker_Nav_Menu ) ); ?>
意外と簡単だと思います。
ちょっとした工夫
まぁ単純にウォーカークラスを指定するよりは、関数やメソッドでWalkerクラスのインスタンスを取得できるようにしておくと、テーマカスタマイザーなどの設定で、条件を付けて適用するWalkerクラスを切り替えることも可能です。
複数のナビメニューを使用する場合などもそうで、デザインを変えたい場合はそれ毎にWalkerクラスを作成して引数に使用することで、自由自在にナビメニューを編集することが出来るんですよ。
また、ちょっとしたアイテム内の部分編集でしたら、Walkerクラス内のフィルターフックを使って編集できますので、一度試してみてはどうでしょうか？
「メニュー」ページでアイテムの設定項目を追加
次はオプションで管理画面で設定項目の追加方法です。
実はこれはちょっと厄介で、何故かアイテムのフォーム内にアクションフックが用意されていませんから、自分でアイテムを出力するWalkerクラスを用意する必要があります。ええ、さっき上で紹介したようなことをします。
カスタムWalkerクラスを指定
まず、最初の問題はどのようにして編集するかです。
当たり前の話なんですが、ワードプレスにはウィジェットなりメタボックスなり、アクションフックやフィルターフックでフォームの後に出力することも結構簡単に出来るものが多いのですが、ナビメニューには現状（4.6.1）それがありません。
ただ、コアのコードを見てみると、ナビメニューに使用するWalkerクラス名がフィルター適応されていますので、これを使ってWalkerクラス名を切り替えることが可能なんです。
フィルターフック名は「wp_edit_nav_menu_walker」で、クラス名とメニューIDを受け取れますので、
add_filter( 'wp_edit_nav_menu_walker', 'your_walker_nav_menu_edit', 10, 2 );
function your_walker_nav_menu_edit( $class_name, $menu_id ) {
return 'Your_Custom_Walker';
}
こういう形でカスタムWalkerクラス名を指定することが出来ます。
Walkerクラスを作成
「メニュー」ページでアイテムの編集用設定フォームを編集するために使われる、ワードプレスが用意しているWalkerクラスが「Walker_Nav_Menu_Edit」というんですが、このクラスを継承して、オリジナルのカスタムWalkerクラスを作成したいのに、そのままやっても定義されていない事になっています。
何故？
実はこのクラスを定義しているファイルは、通常ワードプレスのページを読み込んだ際には読まれない様になっていて、AJAXで読まれる時にインクルードされるようになっているんですよ。
ただ、まぁ「Walker_Nav_Menu_Edit」は「Walker_Nav_Menu」の継承クラスですので、そちらを継承して「Walker_Nav_Menu_Edit」のメソッドをコピペしてしまうのが楽だと思います。
if( ! class_exists( 'Your_Walker_Nav_Menu_Edit' ) ) {
class Your_Walker_Nav_Menu_Edit extends Walker_Nav_Menu {
# Override
public 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;
ob_start();
$item_id = esc_attr( $item->ID );
$removed_args = array(
'action',
'customlink-tab',
'edit-menu-item',
'menu-item',
'page-tab',
'_wpnonce',
);
$original_title = false;
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 = get_the_title( $original_object->ID );
} elseif ( 'post_type_archive' == $item->type ) {
$original_object = get_post_type_object( $item->object );
if ( $original_object ) {
$original_title = $original_object->labels->archives;
}
}
$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 = ( ! isset( $item->label ) || '' == $item->label ) ? $title : $item->label;
$submenu_text = '';
if ( 0 == $depth )
$submenu_text = 'style="display: none;"';
?>
<li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>">
<div class="menu-item-bar">
<div class="menu-item-handle">
<span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></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" aria-label="<?php esc_attr_e( 'Move up' ) ?>">↑</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" aria-label="<?php esc_attr_e( 'Move down' ) ?>">↓</a>
</span>
<a class="item-edit" id="edit-<?php echo $item_id; ?>" href="<?php
echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 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 ) ) );
?>" aria-label="<?php esc_attr_e( 'Edit menu item' ); ?>"><?php _e( 'Edit' ); ?></a>
</span>
</div>
</div>
<div class="menu-item-settings wp-clearfix" id="menu-item-settings-<?php echo $item_id; ?>">
<!-- Settings -->
<!-- WordPress -->
<?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-wide">
<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="field-title-attribute field-attr-title description description-wide">
<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 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>
<!-- Your Custom -->
<?php
// アクションフックを作成
if( function_exists( 'your_nav_menu_item_edit' ) )
your_nav_menu_item_edit( $item, $depth, $args, $id );
?>
<!-- Actions -->
<p class="field-move hide-if-no-js description description-wide">
<label>
<span><?php _e( 'Move' ); ?></span>
<a href="#" class="menus-move menus-move-up" data-dir="up"><?php _e( 'Up one' ); ?></a>
<a href="#" class="menus-move menus-move-down" data-dir="down"><?php _e( 'Down one' ); ?></a>
<a href="#" class="menus-move menus-move-left" data-dir="left"></a>
<a href="#" class="menus-move menus-move-right" data-dir="right"></a>
<a href="#" class="menus-move menus-move-top" data-dir="top"><?php _e( 'To the top' ); ?></a>
</label>
</p>
<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,
),
admin_url( 'nav-menus.php' )
),
'delete-menu_item_' . $item_id
); ?>"><?php _e( 'Remove' ); ?></a> <span class="meta-sep hide-if-no-js"> | </span> <a class="item-cancel submitcancel hide-if-no-js" id="cancel-<?php echo $item_id; ?>" href="<?php echo esc_url( add_query_arg( array( 'edit-menu-item' => $item_id, 'cancel' => time() ), 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[<?php echo $item_id; ?>]" value="<?php echo $item_id; ?>" />
<input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" />
<input class="menu-item-data-object" type="hidden" name="menu-item-object[<?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[<?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[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" />
<input class="menu-item-data-type" type="hidden" name="menu-item-type[<?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();
}
}
}
何を追加したかというと、通常の設定フォームをコピペして、設定項目の最後にアクションフックを１つ追加しています。「your_nav_menu_item_edit」というやつです。
あとはこれにフックさせてINPUTタグなどを出力させてやればOKです。
<?php
if( ! function_exists( 'your_nav_menu_item_edit' ) ) { function your_nav_menu_item_edit( $item, $depth, $args, $id ){ do_action( 'your_nav_menu_item_edit', $item, $depth, $args, $id ); } }
add_action( 'your_nav_menu_item_edit', 'your_custom_nav_menu_item_edit' );
function your_custom_nav_menu_item_edit( $item, $depth, $args, $id ) { ?>
<p>
<label for="something">
<?php esc_html_e( 'Input Something', 'your_text_domain' ); ?><br />
<input type="text" placeholder="input something" name="something">
</label>
</p>
<?php }
?>
と言った感じで追加したい設定項目を追加すれば良いんじゃないでしょうか？
データの保存
データの保存にはアクションフック「wp_update_nav_menu_item」を使用します。
受け取れるデータは「メニューID」「メニューアイテムのデータベースID」「その他のデータ（連想配列）」です。
実は、というか知っているかもしれませんが、メニューは投稿タイプの１つですので、条件を付けて追加した設定項目のデータの保存を「update_post_meta」で行うだけです。
add_action( 'wp_update_nav_menu_item', 'your_update_nav_menu_item', 10, 3 );
function your_update_nav_menu_item( $menu_id, $menu_item_id, $args ) {
// Define $data and Sanitize it
// Save
update_post_meta( $menu_item_id, '_meta_name', $data );
}
めちゃ簡単に書きましたが、ノンスなどのチェックもしておいた方が良いかもしれません。
最後に
コードはあくまで参考用に書いたものですのでコードエラーが出るかもしれませんが、編集方法の概要は掴めたんじゃないでしょうか？
ええ、メニューアイテムに追加したメタデータは出力する際も使えますので、これを使えばサムネイルではなく、メニューのアイテム用にイメージを個別に設定したり、アイコンを設定したり、様々なオプション機能を付け加えることが出来ます。
テーマ「ShapeShifter」ではプラグイン側を編集する予定ですが、デザイン案が皆無な上、僕がスタイル下手なので時間がかかると思います。
