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