Intereting Posts
Какую папку WP можно использовать для записи файлов? Как загружать файлы виджета javascript + css только в том случае, если они используются? Является ли ACF медовым ловушкой? Функция the_excerpt, не отображающая изображение Хранить изображения и другие мультимедийные файлы во внешнем хранилище (облако) Проблемы кодирования символов для страниц на нескольких языках Удалить публикацию изменений в публикации Как вывести сопоставленные мета-ключи из custom_type_posts? Как проверить уровень пользовательского сайта основного сайта с сайта в многопользовательской сети Исключает сообщения, которые не имеют вложений в файле__состоянии () wp_dropdown_pages с условием tax_query Перенаправить старые .html URL-адреса на новую установку в подпапку Открыть библиотеку медиа-боксов из ссылки Как добавить пользовательский CSS (параметр темы) в TinyMCE? Пользовательская страница пользователя

Добавление разделителей или разделителей между элементами меню Nav

Есть ли у кого-нибудь идеи о том, как разрешить пользователю опускать разделители или разделители между определенными элементами меню навигации?

Google только, кажется, поднимает советы для новобрачных CSS для первых / последних дочерних селекторов, но я за чем-то очень похож на закладки Firefox.

ОБНОВИТЬ:

До сих пор я ценю все данные, но я уточню, чтобы не допустить дальнейшего путаницы;

  • Я написал много плагинов и тем, и хорошо понимаю все основы (подключение к WordPress, внедрение расширенных функций, обработка и сохранение данных и т. Д.),
  • Я специально после консультации по расширению пользовательского интерфейса администрирования навигационных меню , который позволит пользователям добавлять «разделители» (не более маркеров) между элементами в меню и как лучше хранить эти данные, а затем визуализировать их в некоторой форме или форму на выходе с помощью wp_nav_menu

Обычно я буду разбираться и просто работать. Но поскольку это всего лишь возможное требование для предстоящего проекта, я подумал, что посмотрю, кто-нибудь уже пробовал что-то подобное.

Плюс я думал, что это может быть полезно для других, и опубликует мои собственные отзывы / результаты, если я продолжу его.

Используйте специальный ходок . Расширьте start_el() чтобы напечатать <li class="menu_separator"><hr></li> если название меню – это просто '-' .

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

Создать меню

Теперь создайте свое обычное меню. Добавьте элемент с '-' качестве заголовка:

введите описание изображения здесь Изображение полного размера

Вызовите меню в своем шаблоне

 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.

У вас должно быть 2 уровня для этого, PHP-скрипт, чтобы сохранить предпочтения пользователя и воссоздать его при повторной попытке и JS-скрипт, чтобы позволить им разместить его. Как вы справляетесь с размещением, это зависит от вас, я бы, вероятно, пошел с перетаскиванием интерфейса. Мой скрипт будет выглядеть примерно так:

 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), но он должен заставить вас двигаться в правильном направлении.

Я использовал бы функции .before () и .after () jQuery, если вы не против.