it-swarm.com.de

Hinzufügen von Teilern oder Trennzeichen zwischen Navigationsmenüelementen

Hat jemand eine Idee, wie ein Benutzer Trenn- oder Trennzeichen zwischen bestimmten Navigationsmenüpunkten einfügen kann?

Google scheint nur Rookie-CSS-Tipps für Erst-/Letztkind-Selektoren zu bringen, aber ich bin nach etwas sehr ähnlichem wie Firefox-Lesezeichen.

UPDATE:

Ich tun schätze alle bisherigen Beiträge, aber ich werde darauf eingehen, um weitere Verwirrung zu vermeiden.

  • Ich habe viele Plugins und Themes geschrieben und habe ein gutes Verständnis für alle Grundlagen (sich in WordPress einbinden, erweiterte Funktionen implementieren, Daten verarbeiten und speichern usw.)
  • Ich bin speziell auf den Rat zur Erweiterung der nav-Menüs-Admin-Benutzeroberfläche angewiesen, mit der Benutzer Trennzeichen (nicht mehr als Markierungen) zwischen Elementen im Menü einfügen und dann rendern können es in irgendeiner Form bei der Ausgabe mit wp_nav_menu

Normalerweise würde ich mich vertiefen und einfach an die Arbeit gehen. Aber da dies nur eine mögliche Voraussetzung für ein anstehendes Projekt ist, dachte ich, ich würde sehen, ob jemand schon etwas Ähnliches ausprobiert hat.

Außerdem dachte ich, es könnte für andere nützlich sein und würde mein eigenes Feedback/Ergebnis veröffentlichen, wenn ich damit fortfahre.

5
TheDeadMedic

Verwenden Sie eine benutzerdefinierte Gehhilfe . Erweitern Sie start_el(), um <li class="menu_separator"><hr></li> zu drucken, wenn der Menütitel nur ein '-' ist.

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 );
        }
    }
}

Erstellen Sie das Menü

Erstellen Sie nun Ihr gewohntes Menü. Fügen Sie einen Artikel mit '-' als Titel hinzu:

enter image description here Bild in voller Größe

Rufen Sie das Menü in Ihrer Vorlage auf

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

Ausgabe

(aus Gründen der Lesbarkeit neu formatiert)

<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>

Dies funktioniert auch ohne JavaScript und CSS.

4
fuxia

Dazu müssen Sie zwei Ebenen haben, ein PHP -Skript, um die Einstellungen des Benutzers zu speichern und sie bei erneuter Eingabe neu zu erstellen, und ein JS-Skript, damit er sie platzieren kann. Wie Sie damit umgehen, liegt ganz bei Ihnen. Ich würde wahrscheinlich eine Drag-and-Drop-Oberfläche verwenden. Mein Skript würde ungefähr so ​​lauten:

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;
}

Dokumente: 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()

und danach müssen Sie Javascript/jQuery verwenden, wenn sich der Benutzer ändert (dies ist Pseudocode, da Sie sich für die Implementierung entscheiden müssen).

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
        }
    );
}

Skript ist völlig ungetestet (ich habe es direkt in den Antworteditor geschrieben lol), aber es sollte Sie in die richtige Richtung bringen.

0
mor7ifer