Intereting Posts
Как управлять SSL в WordPress для автоматического изменения http на https? Как добавить php в jquery Перенаправить старую ссылку на домашнюю страницу нового сайта Как создать иерархический каталог для широких служб общественного здравоохранения Отображать связанные сообщения и содержимое настраиваемого поля Расширьте список MIME-типов, поддерживаемых встроенным загрузчиком в 3.3 Не удается удалить архивы и мета с боковой панели Получите значения полей Gravity Forms и подсчитайте, сколько? Я заблокирован из моего сайта WordPress после изменения URL-адреса сайта с Http на Https Получить значение массива Расширить вывод wp_get_archives с помощью '? Post_type = foo'? HTML-таблица из короткого кода с несколькими параметрами Как предотвратить использование персонализированного типа сообщений с использованием шаблона archive.php? Клонирование страниц администратора, таких как users.php Что такое использование to_ping и pinged column?

Изменение структуры html и создание пользовательских меню

Я довольно новичок в WordPress, и я пытаюсь сделать что-то очень конкретное. В настоящее время я использую awesome html5blank для создания моей настраиваемой темы. Я использую собственные меню для моих навигационных вкладок. В настоящее время я использую background-image , чтобы сделать мои навигационные вкладки изображениями вместо текста, но это создает проблемы с тем, что я пытаюсь достичь w / css и сделать его отзывчивым.

Я хочу иметь возможность добавлять теги <img> (разные изображения для каждого <li> ) в <li> через HTML.

Насколько мне удалось найти и прочитать, мне нужно создать настраиваемую структуру, найденную в моем файле function.php ?

 function html5blank_nav() { wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu' => '', 'container' => 'div', 'container_class' => 'menu-{menu slug}-container', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul>%3$s</ul>', 'depth' => 0, 'walker' => '' ) ); } 

Пожалуйста, дайте мне знать, что еще мне нужно для того, чтобы этот вопрос стал более понятным и помог вам на правильном пути. Заранее спасибо.

Учитывая объем настройки, которую вы хотите сделать, лучшим вариантом может быть интеграция пользовательской функции Walker. Из Кодекса :

Для более глубоких условных классов вам потребуется использовать пользовательскую функцию walker (созданную в аргументе 'walker' => new Your_Walker_Function ).

Самый простой способ создать новую функцию walker – скопировать класс по умолчанию (Walker_Nav_Menu) из \wp-includes\nav-menu-template.php и просто настроить то, что вам нужно.

Использование пользовательского Уолкера дает вам широкую гибкость и контроль над тем, что wp_nav_menu() просто не позволяет сама по себе. Это позволяет вам не просто переформатировать вывод элементов меню, но теперь вы можете запускать весь код во время процесса создания меню.

Вкратце, что вы будете делать:

  1. Копировать / Вставить код для класса Walker_Nav_Menu из файла functions.php вашей темы;
  2. Измените верхнюю строку на что-то вроде class My_HTML5Blank_Walker_Nav_Menu extends Walker_Nav_Menu ;
  3. Вставьте весь новый код для создания ссылок на теги изображений в публичной функции start_el ;
  4. Измените последнюю строку вашего кода wp_nav_menu чтобы указать на ваш новый пользовательский Walker, то есть 'walker' => 'My_HTML5Blank_Walker_Nav_Menu' .

Теперь, как вы решили интегрировать эти изображения, вы полностью зависите от вас … но проверьте это: если пункты меню – сообщения / страницы / категории и т. Д. (Т. Е. Не пользовательские / ручные ссылки), то использование пользовательских Уокер означает, что вы можете использовать метаданные каждого объекта post / page / term object и использовать это для изменения вывода меню. (Другими словами, вы можете установить изображение с изображением для сообщения, а затем используя пользовательский Уокер, вы можете захватить метаданные для этого сообщения и вставить его связанный с ним знаковый миниатюру изображения!)

В любом случае, надеюсь, я дал вам достаточно, чтобы начать здесь. Дайте мне знать, если я пропустил что-нибудь (или если здесь что-то запутанно, вы хотите, чтобы я прояснил ситуацию).

Код, который я предоставляю здесь, может быть изменен для отображения пользовательского меню.

Моя настраиваемая структура для меню:

 <ul class="navigation"> <li class="active"> <a href="item1.html">Menu item 1</a> </li> <li> <a href="item2.html">Menu item 2</a> </li> <li> <a href="item3.html">Menu item 3</a> <div> <a href="subitem1.html">Sub Menu item 1</a> <a href="subitem2.html">Sub Menu item 2</a> </div> </li> </ul> 

Поэтому для создания такого настраиваемого макета для отображения моего меню я использовал следующий код:

 <ul class="navigation"> <?php $count = 0; $submenu = false; foreach( $menuitems as $item ) { $link = $item->url; $title = $item->title; // item does not have a parent so menu_item_parent equals 0 (false) if ( !$item->menu_item_parent ) { // save this id for later comparison with sub-menu items $parent_id = $item->ID; if ($getCurrenturl == $link) { $activeClass = 'active'; } else { $activeClass = ''; } ?> <li class="item <?php echo $activeClass; ?>"> <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a> <?php } if ( $parent_id == $item->menu_item_parent ) { if ( !$submenu ) { $submenu = true; ?> <div> <?php } ?> <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a> <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) { ?> </div> <?php $submenu = false; } } ?> <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) { ?> </li> <?php $submenu = false; } ?> <?php $count++; } ?> </ul>