web-dev-qa-db-ja.com

ナビゲーションメニュー項目間に仕切りまたは区切り記号を追加する

ユーザーが特定のナビゲーションメニュー項目間の区切り記号や区切り記号をドロップできるようにする方法について誰かが考えを持っていますか？

グーグルは最初/最後の子セレクターのためのルーキーなCSSのヒントを提起するように思われるだけですが、私はFirefoxのブックマークに非常によく似た何かの後にいます。

更新：

I doこれまでのすべての入力に感謝しますが、それ以上の混乱を避けるために詳しく説明します。

  • 私はたくさんのプラグインとテーマを書き、そしてすべての基本をよく理解しています（WordPressへのフック、拡張機能の実装、データの取り扱いと保存など）。
  • 私は navメニュー管理UI を拡張することについて特にアドバイスしています。これはユーザーがメニューの項目間の「区切り文字」（マーカーにすぎないもの）をドロップできるようにします。 wp_nav_menuを使った出力では、何らかの形や形式のものです。

通常私は掘り下げて仕事に就くだけです。しかし、これは単なる可能な今後のプロジェクトの要件）なので、私は誰かがすでに似たようなことを試したかどうか私は見るだろうと思いました。

さらに、私はそれが実際に他の人に役立つかもしれないと思いました、そして、私がそれを続けるならば私自身のフィードバック/結果を掲示するであろう。

plugin-developmentmenusnavigation
5
TheDeadMedic

カスタムウォーカーを使用します 。メニュータイトルが単に<li class="menu_separator"><hr></li>である場合は、start_el()を拡張して'-'を表示します。

functions.php

function wpse38241_setup_menu()
{
    register_nav_menu( 'main-menu', 'Main Menu' );
}
add_action( 'after_setup_theme', 'wpse38241_setup_menu' );


/**
 * Replaces items with '-' as title with li class="menu_separator"
 *
 * @author Thomas Scholz (toscho)
 */
class Wpse38241_Separator_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    public function start_el( &$output, $item, $depth, $args )
    {
        if ( '-' === $item->title )
        {
            // you may remove the <hr> here and use plain CSS.
            $output .= '<li class="menu_separator"><hr>';
        }
        else
        {
            parent::start_el( &$output, $item, $depth, $args );
        }
    }
}

メニューを作成する

それではいつものメニューを作りましょう。タイトルとして'-'を使用して項目を追加します。

enter image description here フルサイズ画像

テンプレートのメニューを呼び出す

wp_nav_menu(
    array (
        'menu'            => 'main-menu',
        'container'       => FALSE,
        'container_id'    => FALSE,
        'menu_class'      => '',
        'menu_id'         => FALSE,
        'walker'          => new Wpse38241_Separator_Walker
    )
);

出力

（読みやすくするために再フォーマット） 

<ul id="menu-separated" class="">
  <li id="menu-item-92" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-92">
    <a href="https://wordpress.stackexchange.com/questions/38241/nav-menu-separators">Nav menu separators?</a>
  </li>
  <li class="menu_separator">
    <hr>
  </li>
  <li id="menu-item-93" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-93">
    <a href="https://wordpress.stackexchange.com/">wordpress.stackexchange.com</a>
  </li>
</ul>

これはJavaScriptとCSSがなくても機能します。

4
fuxia

これには、ユーザーの設定を保存して再入力時に再作成するPHPスクリプトと、それらを配置できるようにするJSスクリプトの2層が必要です。あなたがそれを配置する方法はあなた次第です、私はおそらくドラッグアンドドロップインターフェースを使います。私のスクリプトは次のようになります。

add_action( 'wp_enqueue_scripts', 'my_divider_enqueue' );
add_action( 'wp_ajax_insert-divider', 'ajax_insert_divider' );

// enqueue the script
function my_divider_enqueue() {
    // register the script elsewhere, preferably in an init hook
    wp_enqueue_script( 'divider-js' );
    $passed_vars = array(
        'ajaxurl' => admin_url('admin-ajax.php' ),
        'nonce'   => wp_create_nonce( 'divider-ajax-nonce' )
    );
    if( is_user_logged_in() )
        $passed_vars['prev'] => get_user_meta( $current_user->ID, 'divider_location', true ); // you shouldn't need to declare $current_user, but you may
    wp_localize_script( 'divider-js', 'divider', $passed_vars );
}
// handle the js
function ajax_insert_divider() {
    if( !wp_verify_nonce( $_POST['divider_nonce'], 'divider-ajax-nonce' ) ) {
        header("HTTP/1.0 401 Internal Server Error", true, 401);
        exit;
    } else {
        //may not be necessary, you can test this
        global $current_user;
        get_currentuserinfo();

        //update user meta
        update_user_meta( $current_user->ID, 'divider_location', $_POST['divider_location'] );
    }
    exit;
}

ドキュメント： wp_register_script() 、 wp_enqueue_script() 、 wp_localize_script() 、 wp_create_nonce() 、 is_user_logged_in() 、 get_user_meta() 、 wp_verify_nonce() 、 get_currentuserinfo()update_user_meta()

そしてその後、ユーザーが変更したときに処理するjavascript/jQueryがあります（実装は決定する必要があるので、これは擬似コードです）。

jQuery(document).ready(function(){
    //when the user releases the divider in the desired location, do some stuff
    jQuery('.divider').mouseup(function() {
        if( divider_is_valid() ) {
            place_divider();
        } else {
            reset_divider();
        }
    });
    //using divider.prev, place the desired dividers
});
function reset_divider() {
    //put the divider back where it started, either in a holder for unused dividers or where it was in the menu previously
}
function place_divider() {
    //place divider where it's going
    jQuery.post(
        divider.ajaxurl,
        {
            action        : 'insert-divider',
            divider_nonce : divider.nonce,
            location      : //some representation of the location that you can call later
        },
        function( response ) {
            //execute any actions you need to do on response
        }
    );
}

スクリプトは完全にテストされていません（私はそれをアンサーエディタlolに直接書きました）が、正しい方向に進むはずです。

0
mor7ifer