Как добавить разделитель в меню админки WordPress

WordPress для чайников

Вторая версия курса по работе с WordPress для новичков

Как в WordPress сделать меню с подменю

Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» — «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.

Структура меню

Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:

• Главная
• Отзывы клиентов
• Услуги
  • Подбор оборудования
  • Монтаж и прокладка ЛВС
  • Виртуализация
  • IP-телефония
  • Видеонаблюдение
  • Мониторинг
• Контакты
• Блог

Уровень вложенности меню может быть любым, но на мой взгляд, сайты, у которых больше двух уровней вложенности очень неудобны в использовании. Пока ведёшь к подпункту, предыдущий пункт закрывается или постоянно скачет перед глазами. Это по большей части проблема программиста или автора темы, но факт остаётся фактом: самый частый вариант меню на сайтах — двухуровневый.

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

В принципе, это неплохо и можем пойти по такому же пути: сначала создадим структуру, посмотрим, всё ли нормально у нас и затем уже будем создавать страницы (создать страницы вы сможете и самостоятельно, я верю в вас!).

Заходим в раздел «Внешний вид» — «Меню»:

Создаём новый набор меню или используем уже существующий.

В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции Как добавить ссылку в меню):

Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки — #, а в поле «Текст ссылки» вставляем нужную нам фразу.

После нажатия на кнопку «Добавить в меню» в правой части экрана появится созданный нами пункт:

Добавляем остальные пункты в меню

Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:

Давайте сохраним наш промежуточный результат и зайдём на сайт, чтобы посмотреть, как будет выглядеть первый вариант созданного только что меню:

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

Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.

Результат должен получиться следующий:

Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с рубриками, но они сделали это удобнее, взгляните:

Вам достаточно захватить кнопкой мыши нужный вам пункт и просто перетянуть его под основной пункт меню. Что в итоге я сделал: перетащил «Подбор оборудования» под «Услуги», визуально пункт подменю получил отступ с левой стороны.

По аналогии сделаем и другие пункты:

Создание меню завершается нажатием на кнопку сохранения. После этого мы можем спокойно идти на главную страницу сайта и проверять промежуточный результат:

Что дальше?

Дальше всё просто:

1. Создаёте нужные вам страницы с подстраницами для Услуг
2. Удаляете по очереди каждый пункт меню-заглушку
3. Вставляете ссылку на созданную страницу через раздел «Страницы» интерфейса управления меню

Если какие-то из пунктов вам остались непонятными — напишите об этом в комментарии, я подготовлю более развёрнутую инструкцию на этот счёт, но, как мне кажется, этого материала будет достаточно, чтобы создать развёрнутое меню в WordPress. Успехов! ��

Видео

Если вы нашли ошибку — выделите фрагмент текста и нажмите Ctrl+Enter.

Avada. Вставить разделители между ячейками меню

Всем привет. Есть сайт http://agoveq.com — WordPress+Avada. Нужно между ячейками меню, поставить красные вертикальные черточки-разделители. Мне посоветовали
| . Но в php я пока разбираюсь плохо. Поэтому испытываю небольшие затруднения. Я так понимаю, главное меню, это register_nav_menu.

Нашел несколько строчек, как всегда, хаотично разбросанных по всему движку:

12.12.2015, 01:27

Как убрать разделители между пунктами Горизонтального меню
Как скрыть вертикальную линию при наведении на нее курсора? Скриншот.

Как сделать разделители между пунктами меню прозрачными?
border-top: 2px solid transparent; — такой вариант работает только между выпадающим и основным.

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

Нужно выровнять разделители в меню
Привет! Проблема верхнего меню в firefox или в руках ))) Во всех основных браузерах отображение.

вертикальные разделители в меню CSS
Добрый день , помогите решить проблему тренеруюсь делать меню и решил добавить в свое.

Compnot

Блог о WordPress

Главная » Плагины WordPress » Admin Menu Editor — управляем меню админ-панели в WordPress

Admin Menu Editor — управляем меню админ-панели в WordPress

Версия плагина: 1.6.2
Версия WordPress: 4.5.2

Краткое описание

Плагин Admin Menu Editor позволяет управлять пунктами меню админ-панели.

Использование

С помощью Admin Menu Editor можно переместить, скопировать, изменить, скрыть, удалить, добавить и отсортировать нужные пункты административного меню.

Управление пунктами меню осуществляется в разделе Настройки -> Menu Editor.

Перемещение и копирование

Любой пункт меню можно переместить путем перетаскивания в нужное положение, либо воспользоваться кнопками панели инструментов плагина Cut (Вырезать) и Paste (Вставить).

Аналогичным образом можно скопировать любой элемент с помощью кнопок Copy (Копировать) и Paste (Вставить).

Редактирование

Для редактирования элемента необходимо щелкнуть на стрелку рядом с его названием. За отображение дополнительных опций отвечает ссылка Show advanced options / Hide advanced options.

Menu title — название пункта в меню.

Target page — целевая страница для данного пункта. Вы можете выбрать одну из стандартных страниц WordPress, либо указать свою ссылку в поле URL, выбрав вариант . Выбор варианта сделает данный пункт меню неактивным. Посмотреть все варианты.

URL — ссылка для пункта меню. Указывается автоматически при выборе одной из стандартных страниц в параметре Target page, а в случае варианта становится доступной для редактирования.

Required capability — необходимая роль или права для просмотра данного пункта меню. Более подробно о механизме ролей и прав в WordPress можно прочитать в документации.

Window title — заголовок страницы, которая откроется при переходе в данный пункт меню.

CSS classes — css-классы для данного пункта меню.

Icon URL — иконка пункта меню. Можно выбрать одну из стандартных или загрузить свою. Посмотреть все иконки.

Hook name — атрибут id пункта меню.

Keep this menu open — вложенные элементы данного пункта меню будут всегда отображаться на экране.

Иконка карандаша справа от каждого параметра позволяет восстановить значение параметра по умолчанию.

Стоит учитывать, что в стандартных пунктах админ-меню WordPress родительские пункты имеют ссылку одного из вложенных пунктов. Поэтому, например, в случае с пунктом Записи параметр Window title нужно указывать для пункта меню Все записи.

Скрытие и удаление

Для скрытия и удаления используются кнопки Hide without preventing access (cosmetic) и Delete menu.

При скрытии, элемент меню не будет отображаться на экране, но будет доступен по прямой ссылке.

Стандартные пункты меню нельзя удалить, только скрыть.

Добавление

Кнопка New menu позволяет добавить новый элемент меню. Кнопка New separator служит для добавления разделителя.

Новый пункт меню будет добавлен после выделенного.

Сортировка

Кнопки Sort ascending и Sort descending позволяют отсортировать пункты меню в алфавитном порядке по возрастанию или убыванию.

Сохранение и отмена изменений

После внесения изменений в административное меню, необходимо сохранить изменения с помощью кнопки Save Changes.

Кнопка Undo changes позволяет отменить изменения, внесенные с последнего сохранения.

Кнопка Load default menu позволяет восстановить параметры админ-меню по умолчанию. После восстановления, необходимо сохранить изменения с помощью кнопки Save Changes.

Настройки

Who can access this plugin — параметр, определяющий кто будет иметь доступ к плагину: все администраторы (Anyone with the «manage_options» capability) или только текущий пользователь (Only the current user). Вариант Super Admin актуален только для WordPress Multisite и дает доступ к плагину только администратору сети.

Multisite settings — определяет будут ли настройки едины для всех сайтов сети. Параметр актуален только для WordPress Multisite.

Interface — показывать или скрывать дополнительные настройки пунктов меню по умолчанию.

Editor colour scheme — выбор стиля интерфейса плагина.

New menu position — параметр определяет, где будут отображаться пункты меню, добавленные другими плагинами и темой: по умолчанию (Maintain relative order) и внизу меню (Bottom).

Debugging — опция включает отображение отладочной информации.

Настройки экрана

Hide advanced options — аналогична опции Interface из раздела настроек плагина.

Show extra menu icons — определяет, показывать ли расширенный набор иконок в окне выбора иконки пункта меню.

Как сделать подпункты в меню Вордпресс

Сегодняшний пост будет небольшим, но от этого не менее полезным, особенно для новичков, у которых на повестке дня значится вопрос добавления в меню своего сайта на WordPress подпунктов.

Начиная с версии 3.0 в системе управления контентом WordPress стало возможным прямо из админки настраивать меню, то есть менять его внешний вид и структуру, в частности добавлять в него ссылки, рубрики, страницы, делать элементы дочерними относительно других, изменять порядок элементов.

Однако, чтобы данная возможность была доступна, необходимо выполнение определенных условий, о которых я расскажу чуть ниже.

А сейчас переходим непосредственно к рассмотрению вопроса о том, как сконфигурировать меню в WordPress и создать в нем подпункты.

Настраиваем меню WordPress и добавляем в него подпункты

Настройки меню в админке доступны во вкладке Внешний вид → Меню:

Заходим туда, в результате чего должно появиться окно, которое выглядит следующим образом:

Слева в данном окне располагается область элементов, которые можно добавить в меню:

Среди данных элементов значатся страницы, ссылки и рубрики.

В разделе, именуемом как Структура меню, предоставлена возможность посредством обыкновенного перемещения элементов мышью задать необходимый порядок пунктов в меню:

Также здесь можно сделать какой-либо раздел меню дочерним по отношению к любому другому (стало быть, родительскому), то есть добавить в меню подпункты. Делается это крайне просто, нужно лишь переместить указателем мыши потенциальный подпункт немного вправо и расположить его под соответствующим родительским пунктом:

Чтобы изменения вступили в силу, необходимо нажать кнопку Сохранить меню:

Также здесь доступна функция, позволяющая новым страницам автоматически включаться в состав меню.

Для ее активации необходимо поставить галочку в соответствующий чекбокс и нажать Сохранить меню.

В результате проделанных действий мы легко и просто добавили в меню WordPress подпункты стандартными средствами этой самой CMS:

Довольно просто, не правда ли?

Теперь, как я и обещал в начале статьи, пришло время рассказать о тех условиях, соблюдение которых делает возможным применение данного способа формирования меню в WordPress.

Условия, при которых поддерживается настраиваемое меню

Условиями доступности рассматриваемых в данной статье возможностей является наличие в некоторых файлах используемого вами шаблона WordPress определенных фрагментов кода, а именно:

в файле functions.php должна быть предусмотрена возможность использования произвольных меню и зарегистрированы сами меню (одно или несколько). Если в указанном файле шаблона имеется подобный фрагмент кода, то все уже сделано и должно работать:

register_nav_menus(array( ‘menu_1’ => ‘Menu 1’, ‘menu_2’ => ‘Menu 2’ ));

Данный фрагмент кода является примерным, может различаться и отвечает за регистрацию двух меню с идентификаторами menu_1 и menu_2.
в зависимости от того, где отображается меню, следующий код нужно искать в соответствующем файле шаблона:

для верхнего меню (в связи с тем, что чаще всего основное меню отображается сразу под шапкой сайта, или прямо в шапке, то и речь идет о файле header.php):

‘menu’, ‘theme_location’=>’menu_1’, ‘after’=>’ /’ ) ); ?>

для нижнего меню (на самом деле оно не является обязательным, и если оно и используется, то чаще всего располагается в подвале сайта, то есть необходимо искать код в файле footer.php):

Если подобного рода фрагменты кода в файлах вашего шаблона присутствуют, то возможность конфигурировать меню прямо из админки WordPress будет для вас доступна, а о том, как это делается, мы уже поговорили выше.

Именно так можно легко и просто добавить подпункты в меню WordPress, а также произвести с ним некоторые другие манипуляции, позволяющие сконфигурировать его по своему усмотрению.

Как создать страницу настроек в админ-панели WordPress

WordPress имеет удобный интерфейс управления сайтом. Админ-меню разделено на логические разделы, которые понятны даже для новичка. Например, впервые зайдя в админку своего сайта, владелец сразу сориентируется куда перейти, чтобы начать настройку своего сайта или создавать контент. Это и отличает WordPress от всех остальных систем управления контентом.

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

Начиная с версии 2.7, в движок была добавлена возможность создания различных полей настроек и разделов на страницах администрирования. Это позволяет пользователю быстро и легко задать необходимые опции.

Как создать страницу настроек в админ-панели WordPress?

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

Весь код будем размещать в functions.php – основном файле активной темы WordPress-сайта.

Чтобы добавить в админку WordPress свою страницу настроек, мы будем использовать служебную конструкцию add_options_page() . Вот как она выглядит:

Видно, что конструкция принимает несколько параметров.

• $page_title отвечает за название страницы настроек и будет показано в самом ее начале.
• $menu_title – название пункта меню.
• $capability – права доступа для пользователей, которые имеют доступ к этому пункту меню.
• $menu_slug – уникальный идентификатор меню для регистрации в системе.

Для нашего примера add_options_page() зададим так:

Чтобы эта конструкция была как-то задействована системой, ее необходимо вызвать, прикрепив к специальному хуку (см. Что такое хуки в WordPress?) admin_menu , который используется для добавления элементов (подменю и меню опций) в структуру меню панели администратора. Он запускается после обработки базового меню панели администратора. Это позволит нашим настройкам быть всегда доступными для пользователя и движка.

Если нужно, чтобы наш пункт меню находился в корневом меню, а не в подменю Настройки, то для этого нужно использовать конструкцию add_menu_page() вместо add_options_page(), которая принимает аналогичные аргументы.

Теперь, если мы откроем страницу в нашем браузере, то увидим пустую страницу. Это связано с тем, что мы все еще не создали функцию wpschool_api_options_page, указанную в последнем параметре.

API настроек

API настроек WordPress – это сложный механизм, который позволяет разработчикам легко создавать страницы настроек. Рассмотрим несколько важных функций, которые WordPress предоставляет в рамках своего API настроек.

register_setting() – это функция используется для регистрации настройки, для которой будет создана отдельная запись в таблице wp_options. Прежде, чем мы сможем создать поле настройки, его нужно зарегистрировать. Аргументы функции следующие:

Первые два аргумента являются обязательными. $option_group позволяет нам присваивать имя поля, а $option_name является фактическим именем опции в базе данных WordPress.

Конструкция add_settings_section() добавляет раздел на страницу администратора. Ее аргументы:

$callback – это функция, которая выводит HTML-заголовок раздела (он может быть пустым), а $page – это фрагмент страницы администратора, на которой мы будем его отображать.

add_settings_field() определяет поле в разделе на странице настроек администратора.

Из всех параметров конструкции нам нужны $id, $title, $callback и $page. Параметр $callback должен выводить HTML-код поля ввода.

API настроек предоставляет аргумент $page для конструкций add_settings_section() и add_settings_field() в качестве средства добавления разделов и полей на существующие страницы настроек. Мы будем использовать значение wpschoolCustom как для нашей группы параметров, так и для присоединения раздела настроек и полей настроек к странице.

settings_fields() выводит скрытые поля формы на странице настроек. Конструкция принимает только один параметр $option_group, который используется в register_setting().

do_settings_sections() выводит все разделы с соответствующими полями, зарегистрированными для конкретной страницы $page.

Собрав воедино все вышесказанное, полностью наш код будет выглядеть так:

Здесь мы подключаем функцию wpschool_api_settings_init() к хуку admin_init . В ней определяем и регистрируем наши настройки, разделы и поля.

Функции wpschool_api_text_field_0_render() и wpschool_api_select_field_1_render() определяют вывод HTML наших двух полей (текстового и поля выбора).

Наконец, в функции wpschool_api_options_page() выводим HTML-код для нашей страницы настроек администратора. Мы включаем в него разделы настроек и поля.

Добавив этот код, видно, что на нашей странице настроек теперь появились созданные опции.

Теперь, когда вы измените значения полей и нажмете кнопку Сохранить изменения, они будут сохранены в базе данных и показаны при повторном переходе на страницу настроек.

Блог Владимира Шишкова

Главная » Боковая панель WordPress и ее настройка для удобства пользования

Боковая панель WordPress и ее настройка для удобства пользования

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

Плагин Admin Menu Editor

Боковая панель WordPress имеет самое главное значение при настройке и администрировании блога. Однако при ее использовании в процессе работы появляются некоторые неудобства.

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

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

Гораздо проще ее настроить, как говориться под себя. Что даст большие возможности и удобства при работе с блогом.

Меню настройки

Давайте теперь перейдем непосредственно к настройке боковой панели WordPress.

При работе с блогом в консоли WordPress, наступает такое время. Когда боковая панель при установке различных плагинов начинает заполняться ссылками на них. Что очень мешает продуктивной работе.

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

Теперь посмотрите на (Рис.1), где при наведении кнопки мыши на пункт меню “Настройки” (п.1). Видим подменю в котором находятся ссылки на плагины (п.2). Они загромождают боковое меню без всякой необходимости. И тем самым отвлекают внимание от главного.

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

Давайте этим и займемся. Для прежде всего установим плагин Admin Menu Editor, который собственно и поможет нам это осуществить.

Идем в боковое меню “Плагины” > “Настройки” (Рис.2).

Вкладка Admin Menu

Перед нами появляется панель настроек плагина Admin Menu Editor (Рис.3). Находясь на вкладке “Admin menu” (п.1), мы теперь можем производить различные действия с боковым меню WordPress.

Пункты меню мы можем:

1. Вырезать
2. Копировать
3. Вставлять
4. Добавлять новый пункт
5. Добавлять разделитель между пунктами
6. Скрывать
7. Удалять
8. Выстраивать по алфавиту

То есть проводить все те манипуляции, которые используем в текстовом редакторе Word. И это скажу я Вам, очень удобно.

В левой колонке (Рис.3-п.3), находятся пункты главного меню, а в правой их подпункты (п.4). Также имеются кнопки:

1. Сохранить изменения (п.5)
2. Перейти на версию Pro (п.6)
3. Отменить изменения (п.7)
4. Вернуть меню по умолчанию (п.8)
5. Сделать компактный вид панелей (п.9)

Перенос элементов меню

В результате нажатии на кнопку “Compact layout” (Рис.4-п.2), зазоры между панелями и сами панели уменьшаются (п.1), тем самым превращаясь в более компактный вид.

Прежде всего, приступаем к настройке основного меню. Например, нам надо перенести пункт “Плагины”, выше и поставить перед пунктом “Внешний вид”.

Делается это довольно просто. Берем левой кнопкой мыши панель “Плагины”, удерживая ее, переносим выше и оставляем перед панелью “Внешний вид”. Согласитесь, очень удобно и просто.

После этого, мы видим что наша панель “Плагины”, перенесена в нужное нам место (Рис.6-п.1). В результате, сохраняем наше изменение (п.2).

Вид элементов меню после переноса

И видим, что в боковой панели наш пункт меню “Плагины” (Рис.7-п.1) переместился и встал в нужное нам место. А именно перед пунктом “Внешний вид” (п.2).

Точно так же, переносим все другие панели и устанавливаем их, в том порядке, в каком нам будет нужно.

Вкладка Plugins

Во вкладке “Plagins” (Рис.8-п.1), можно отредактировать название и описание плагинов, т.е. прописать их на русском языке для удобства.

Для этого нужно нажать на ссылку “Edit” (п.2), где открывается панель для редактирования (Рис.9).

Здесь мы можем изменить название (Рис.9-п.1) и описание (п.2) плагина. Например, изменим описание плагина “Admin Menu Editor” (п.2). Прежде всего, вписываем туда свой текст, чтобы было понятно, за что данный плагин отвечает.

Свой текст в названии и описании плагина

Во-первых, нажимаем кнопку “Update”, чтобы зафиксировать наше изменение, а затем сохраняем кнопкой “Save Changes” (п.3). И затем, смотрим результат. Заходим в меню “Плагины” бокового меню консоли WordPress и видим (Рис.10):

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

Перевод на русский язык плагина

Наконец, переходим в последнюю вкладку “Настройки”, предварительно делаем перевод на русский язык (Рис.11).

Нажимаем “Перевести на русский” (Рис.11-п.1).

Вкладка Настройки

Здесь можно настроить (Рис.12):

1. Кто может получить доступ к этому плагину (если работаете в команде) (п.2)
2. Настройки мультисайта (если используете одну консоль WordPress для редактирования нескольких сайтов или блогов. Где можно выбрать использовать для нескольких сайтов одинаковые настройки или разные) (п.3)
3. Модули (можно отключать и включать плагины или пункты меню) (п.4)

Смотрим на другие настройки (Рис.13):

1. Интерфейс (срыть расширенные функции меню по умолчанию) (п.1)
2. Редактор цветовой схемы (можно выбрать один из трех) (п.2)
3. Новая позиция меню (помещать элементы меню в стандартное меню или в нижнюю часть) (п.3)

Смотрим далее (Рис.14):

1. Уровень детализации ошибок (настраивается уровень доступа к плагину) (п.1)
2. Отладка (показывает проверки доступа к меню) (п.2)
3. Переопределяет значок добавленный другими плагинами (п.3)
4. Сжимает данные конфигурации меню “Сжатие”

Последний пункт содержит информацию о сервере (Рис.15-п.1). После того, как произведены все настройки, обязательно жмем на кнопку “Сохранить изменения” (п.2).

Готовая боковая панель WordPress

Теперь смотрим как выглядит наша боковая панель WordPress.

В результате, на (Рис.16), видим модернизированную и настроенную нами административную панель. Как видите, теперь нет ничего лишнего. Все сделано на удобной и продуктивной работы.

В заключение подведу итог. Как видите плагин Admin Menu Editor, очень полезен и дает возможность настроить боковую административную панель под свои нужды.

Теперь пользуйтесь им и наведите порядок в своей административной панели. Это очень удобно и сохранит Ваше время при администрировании блога.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как в wordpress добавить меню? – шаблон горизонтального меню

В качестве примера предлагаю вам, вместе со мной, сделать простенькое, одноуровневое, горизонтальное меню wordpress.

Если вы искали информацию о выпадающих меню wordpress, советую обратить внимание на эти статьи:

В этих статьях описан механизм создания меню, вам будет достаточно скопировать html и CSS с примеров и вывести через php меню для WordPress как описано ниже в этой статье.

Навигация по странице:

Для начала нам потребуется хтмл код для меню, им мы и займемся.

Горизонтальное меню wordpress на HTML+CSS

к менюЯ не буду особо много времени уделять моментам по созданию Html и CSS для нашего меню. Постараюсь просто привести части кода и краткое описание к ним.

Html код нашего меню будет самый простой:

Именно таким списком ul по-умолчанию генерирует меню вордпресс.

Стили для этого горизонтального меню, также будут несложные, хотя тут вы можете найти код для растягивания меню на всю ширину блока.

Стили CSS

Горизонтальное меню wordpress, которое растягивается на всю ширину блока.

Вот так это меню выглядит в браузере:

CSS код нужно скопировать в свою тему в style.css. Html код также можно скопировать в нужное место темы, обычно это header.php + потребуется малость подогнать CSS стили, чтоб меню стало так как вам нужно на сайте.

Далее я покажу вам какие пхп вставки нужно сделать в вашем меню и как настроить меню в wordpress.

Как добавить шаблон меню в wordpress

к менюНадеюсь вы скопировали CSS и HTML к себе в шаблон. Теперь нам нужно подкоректировать наш код.

1) Открываем место, где находится меню и вместо

ставим вот такой вызов функции вордпресс:

В итоге у нас получится вот так:

Обратите внимание на название «menu1» вот точно с таким идентификатором мы должны зарезервировать место под меню.

‘container’=>false – говорим что нам не нужно оборачивать в контейнер наше меню.

‘depth’=>’1’ – выводим только 1 уровень меню

‘echo’=>’1’ – шаблон меню выводим сразу. Если указать 0, то можно получить меню в переменную.

2) Открываем файл functions.php вашего шаблона и регистрируем там наше меню, но для начала стоить проверить, вдруг функция register_nav_menus уже используется. Для этого воспользуйтесь поиском Ctrl+F. Если такой функции все же нет, добавляем такой код:

Как вы поняли «menu1» это название идентификатора, если его переименовать тут, то нужно будет переименовать в предыдущей функции.

WordPress добавить меню в админке

3) к менюЗаходим в админку сайта, теперь нам нужно создать и добавить меню в wordpress. Заходить нужно по этому адресу ваш_сайт/wp-admin/nav-menus.php

И создаем новое меню. Я назвал его «Top», нажимаем создать как у меня на скине:

4) Сохраняем меню и смотрим результат. Если вы все сделали правильно, у вас должно быть полностью рабочее горизонтальное меню wordpress.

Проблемы с wordpress меню

к менюВ версии вордпресс 4.4 начались жуткие проблемы с меню, а именно:

• между пунктами меню пропали пробелы;
• меню не растягивается на всю ширину блока;
• неправильно добавляются разделители.

В общем в новой версии разработчики немножко погнали и решили подправить шаблон меню, в результате чего в инете все чаще можно встретить запросы «не работает меню wordpress 4.4», «проблемы с меню wordpress».

Сейчас я покажу вам код, который решает эту проблему:

Его нужно записать в самый конец файла functions.php вашей темы. С помощью этого не хитрого кода, можно вернуть правильную работу меню.

На этом у меня все. В этом уроке я рассказал вам как можно просто в wordpress добавить горизонтальное меню, а также привел код для создания шаблона меню вордпресс.

Советую прочесть статью создание сайта на wordpress, а также буду благодарный за клик на кнопку поделится

Добрый день! Подскажите пожалуйста, а можно ли как-то, желательно без особых манипуляций с кодом, а с помощью плагинов, сделать и всплывающее меню горизонтальным? Вот ссылка на тестовый сайт (-url-). Спасибо!

Добрый день.
Не совсем понимаю как вы хотите сделать выпадашку горизонтальной.
У вас сейчас горизонтальное меню, с него выпадает вертикальная плашка, а вы хотите чтоб из горизонтального выпадала горизонтальная?? Впервые такой вариант слышу если честно.

Добавил меню в функции и в файл хедер, теперь на сайте меню на всю страницу, много пунктов и не понятно как ими управлять. Мне все страницы в меню не нужны, а они там все вместе.
Помогите пожалуйста.

Добрый день.
Вы видимо что то напутали вот с этим пунктом https://help-wp.ru/wp-content/uploads/2020/12/menu-wp-3.jpg, там вам нужно добавить нужные пункты меню и выбрать к какому меню мы их добавляем если их несколько. На скине вроде все отображено.

Спасибо большое, 3 дня колдовал над меню вп и безрезультатно, наткнулся на вашу статью и наконец сдвинулось дело с мёртвой точки.

Добрый день! Спасибо за статью, все чётко и понятно. Но у меня вопрос: можно ли сделать 2 горизонтальных меню на сайте? Одно, которое уже есть по умолчанию на сайте и добавить второе к нему? Только чуть ниже под лого

Добрый день. На базе этого меню можно создать сколько угодно других, только единственный момент в примере я использовал ID nav1, если бы это был класс то проблем не было б, а так для второго меню вам нужно добавить через запятую типа: #nav1, #nav2<и далее те же стили>
#nav1 ul, #nav2 ul<> и так далее.
Ну и во время вывода второго меню в хтмл поменять на
и вроде все, горизонтальное меню должно у вас работать тогда

Спасибо за статью! После добавления кода сбились польские шрифты, т.е. выдает абракадабру вместо специфических польских букв.

Огромное спасибо за статью! «На носу» 2020 год, а статья по прежнему актуальна! Добавил меню в шаблон страницы товаров. Вот, что получилось: (-url-)

Спасибо вам большое. Все понятно разложили по полочкам. Ваш вариант меню работает отлично, мой до копирования вашего кода работать никак не хотел ��

Как создавать подстраницы в админке плагина WordPress без добавления их в меню?

Итак, имеется меню в админке WordPress для плагина:

На странице: myplugin.php?page=items у меня есть кнопка Add Item,

по нажатию которой пользователь переходит на: myplugin.php?page=itemAdd для создания нового Item’а, если действовать по стандарту, то мне надо сделать так:

но если я не хочу чтобы у меня страница: Add Item имела пункт в меню админки?

Если мне надо чтобы при переходе по кнопке: Add Item, выделенным слева оставался пункт Items — как быть?

Создание пользовательских страниц в админке WordPress, Часть 1

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В предыдущей серии я представил подробное руководство по работе с API настроек WordPress. Для тех, кто новичок в WordPress или кто использует другие инструменты, такие как The Customizer для обработки различных параметров, это может быть чем-то, что вам не пришлось использовать для разработки ваших темы или плагина.

Как указано в Кодексе:

API параметров, добавленое в WordPress 2.7, позволяет страницам администратора, содержащим настройки формы, управляться полуавтоматически. Это позволяет определить параметры страниц, разделов в рамках этих страниц и полей в рамках разделов.

Я не думаю, что это нужно учить, но это то, о чем вы должны знать и уметь с этим работать, если вам потребуется ввести параметр на страницу, через админку WordPress.

Это мощный, хотя и довольно сложный API, что дает нам большое количество функциональных возможностей. В конечном счете, это позволяет нам сделать много вещей на стороне сервера и минимум вещей на стороне клиента.

Но как насчет времени, когда мы работаем над пользовательским решением для клиентов, и нам нужно немного больше гибкости, чем предоставляет API параметров? Например, нам необходимо построить плагин, который будет иметь страницу параметров, но нуждается в более гибком наборе параметров и с учетом проверки функциональности?

Для этих случаев и существует возможность написания собственных страниц администрирования для WordPress. В этой серии мы рассмотрим, как именно это сделать.

Прежде чем начать

Как в большинстве уроков, важно убедиться, что у вас всё на месте для того, чтобы следовать вместе со мной и работать с исходным кодом, на протяжении всей серии.

Для этого урока, я предполагаю, что:

• На вашей операционной системе установлена локальная среда разработки.
• У вас есть копия WordPress, установленная, готовая к использованию и установке плагина.
• Вы знакомы с разработкой плагинов для WordPress.
• Вы свободно работаете с PHP и HTML.

Если вы не знакомы с настройка локальной среды разработки, включающей WordPress, пожалуйста, посмотрите эту серию о том, как это сделать.

И если вам комфортно с PHP, даже если вы хотя бы умеете читать язык, то я сделаю все от меня зависящее, чтобы обеспечить четкие инструкции и комментарии для каждого куска кода, который мы рассматриваем.

После того, как всё на своих местах, мы готовы начать работу над нашим плагином.

Пользовательские Параметры Администрирования WordPress

К концу этой серии у нас будет плагин, который отвечает следующим требованиям:

• Добавлять новый элемент подменю к существующей системе меню WordPress.
• Добавляет новую страницу настроек, соответствующий новому элементу подменю.
• Очистка и сериализация параметров страницы.
• Проверяет, возвращает значения, которые были сохранены и обрабатывает их соответствующим образом.

Кроме того, мы уверенно приближаемся к этому наиболее модульным способом, используя Стандарты Написания Кода WordPress и аналогичной практике, чтобы сделать чтение, запись и поддержку нашего плагина настолько просто, насколько это возможно.

1. Загрузчик плагина

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

Эти файлы можно загрузить из вложения к этой записи, а пока, ниже, вы можете увидеть, как выглядит мой каталог:

Кроме того содержимое загрузчика плагина очень просто. Просмотрите следующий код для PHP файла custom-admin-settings.php , и затем я расскажу о нем более подробно в блоке ниже.

Обратите внимание, что в приведенном выше коде, фактический очень мало кода. И очень много комментариев. Основной блок комментариев в верхней части файла объясняет, что делает файл.

Область под тегом @wordpress-plugin является тем, что будет читать WordPress для создания названия плагина, описания и связанные ссылки в панели плагина WordPress.

Далее мы запретим кому-либо доступ к файлу напрямую. И, наконец, мы создадим пользовательскую функцию с хуком plugins_loaded . Эта функция будет использоваться для запуска плагина.

На этом этапе, вы должны быть в состоянии войти в WordPress, перейти в панель плагина, а затем убедиться в том, что плагин можно активировать. Так что, давай нажмём Активировать.

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

2. Создание элемента подменю

Для того, чтобы начать работу над плагином, давайте сначала добавим элемент подменю. Чтобы сделать это, мы должны воспользоваться преимуществами API WordPress и функцией add_options_page . Этой функции потребуется пять параметров:

1. текст для отображения в качестве заголовка на соответствующей странице параметрв
2. текст для отображения в виде текста подменю для пункта меню
3. возможности, необходимые для доступа к этот пункт меню
4. токен меню, который используется для идентификации этого элемента подменю
5. функция обратного вызова, которая отвечает за вывод страницы администратора

Обратите внимание на то, что мы будем использовать классы, для организации нашей функциональности, так что это будет объектно-ориентированным.

Во-первых, давайте создадим класс в папке admin с названием class-submenu.php . Поскольку этот класс отвечает за представление нового подменю, мы назовём его более образно.

Содержимое класса должно выглядеть следующим образом:

На данный момент плагин по-прежнему не будет ничего делать. Нам по-прежнему необходимо создать фактический класс Submenu_Page , и нам нужно прикрутить классы для загрузки файла.

3. Создание подменю страницы

Начнем с класса Submenu_Page . Создайте другой файл в папке admin и назовите его class-submenu-page.php . Затем добавьте следующий код в файл.

При отображении этой страницы, он просто будет показывать текст: «This is the basic submenu page.» И наконец, мы добрались до добавления новых возможностей. Но сначала, давайте приведем этот плагин в жизнь, создав для него загрузочный файл.

4. Отображение меню и страницы

Откройте файл custom-admin-settings.php, который мы создали ранее в этом уроке. Давайте двигаться дальше и напишем код, необходимый для добавления нового пункта подменю и связанной страницы.

Помните, что класс Submenu требует, чтобы экземпляр класса Submenu_Page был передан в его конструктор, и затем нам нужно вызвать метод init класса Submenu, чтобы заставить всё это работать.

В коде это выглядит следующим образом:

На данный момент, вы должны обновить вашу установку WordPress, активировать плагин (если он еще не активирован), а затем вы увидите вашу новую страницу в области администрирования.

В следующей статье, мы рассмотрим, как создать отображение реальных настроек. Кроме того, мы рассмотрим лучшие примеры практики с точки зрения работы с нашими шаблоном и частей шаблона, и тогда мы увидим, как они будут соединены по API, отвечающим не только за их сохранение, но так же за очистку и их проверку.

Но прежде чем мы зайдем так далеко, я хочу поговорить немного о классе дизайна, который мы видели в этом уроке. В общем, я хочу поговорить о том, почему у нас есть класс Submenu и Submenu_Page и как они относятся к файлу загрузки.

Несколько слов об ответственности классов

Для тех из вас, кто знаком с Принципом единой ответственности, этот раздел не будет вам интересен. Но если кому-то нужна ссылка или кто хочет узнать больше, то читайте.

Объедините то, что изменяются по тем же причинам. Разделите то, что изменяется по разным причинам.

Там еще много чего, но если вы посмотрите на каждый из наших классов (по крайней мере два у нас уже есть), то становится ясно, что причины изменения наших классов могут быть следующими:

• Содержимое подменю может изменяться. Всё, от названия страницы до токена меню, и всё, что между ними.
• Способ, которым страница отображает ее содержимое может (и будет меняться). В частности, прямо сейчас он ничего не делает, кроме вывода строки. Вскоре он будет включать в себя конкретный файл. После этого может потребоваться включить несколько файлов.

Две причины выше — две очень разные причины, которые могут изменять классы, поэтому держать их вместе в одном классе, будет нарушением вышеуказанного принципа.

В конце концов, я упомянул об этом не только для того, чтобы пролить свет на отличные принципы разработки программного обеспечения, которые могут быть применены в WordPress, но и чтобы подготовить вас к тому, по каким причинам мы будем разбивать большие части файлов в содержимое плагинов.

Познания о принципах хороши и могут быть применены в нескольких проектах, а не только в одном. Вы изучите их, вы попрактикуете их использование, и вы будете лучше проектировать решения для других людей.

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

Заключение

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

В качестве примечания, если вы ищете другие утилиты, для увеличения вашего набора инструментов для WordPress или код, на котором можно учиться и стать более продвинутым в WordPress, не забудьте посмотреть, что у нас есть в наличии на рынке Envato.

Помните, вы можете выловить все мои курсы и учебники на странице Моего профиля, и вы можете следовать за мной в моем блоге и/или Twitter @tommcfarlin, где я говорю о различных практиках разработки программного обеспечения и как мы можем использовать их в WordPress.

И, наконец, не стесняйтесь оставлять любые вопросы или комментарии ниже. Я делаю все возможное, чтобы участвовать и ответить на каждый вопрос или критику, которые относятся к этому проекту.

Заметки на память для начинающих вебмастеров, web-программирование, создание блогов, сайтов, продвижение и монетизация

Настройка меню WordPress для своих целей

Здравствуйте, уважаемые подписчики и посетители блога 4remind.ru. Предлагаю Вашему вниманию урок, в котором будут рассмотрены способы настройки меню WordPress в панели управления для своих нужд.
Многим думаю понятно и известно, что панель управления администратора в WordPress является одной из лучших. Однако, в зависимости от ваших потребностей, меню этой панели может показаться вам излишне переполненной разными позициями и пунктами, которые возможно только мешают и которыми Вы не собираетесь пользоваться.

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

Итак, начнем рассматривать, что мы можем сделать с меню по порядку.

Переименование меню

Если Вам понадобится переименовать один из пунктов меню администратора, то нужно будет использовать хук add_action для манипуляций с admin_menu. Он может использоваться как для добавления подменю в главное меню, так и для других изменений, связанных с меню.

Меню администратора WordPress хранится в массиве $menu. Поэтому в начале функции edit_admin_menus() используется директива «global», чтобы получить доступ к массиву $menu. Затем определяется ключ (Key), связанный с пунктом меню, который мы хотим переименовать. И если мы например хотим изменить «Записи» (Posts) на «Посты», то как видно из таблицы (она в конце этого урока), нам понадобится использовать ключ «5»:

Теперь добавляем этот код в файл functions.php, сохраняем его, обновляем страницу панели администратора и наслаждаемся полученным результатом.

Правда теперь имя подменю не совсем соответствует имени самого пункта главного меню, так как например в русифицированной версии в подменю осталось слово «Все записи», а нам бы хотелось, чтобы там было уже «Все посты». Поэтому пришло время взяться за переименование подменю.

Переименование подменю

Переименование подменю почти такой же процесс, как и описанный выше, но только за исключением того, что вам нужно добавить директиву «global» еще и к глобальному массиву $submenu, чтобы получить доступ к нему.
Далее, получив нужные нам значения ключей (смотрите таблицу в конце этого урока) к каждому пункту подменю, сразу внесем соответствующие дополнения:

Теперь опять добавляем этот код в файл functions.php, сохраняем его, обновляем страницу панели администратора и проверяем результат своей работы.

Упорядочиваем пункты меню

Здесь мы разберемся с тем, как изменить порядок пунктов меню, включая разделители. В данном примере мы расположим «Медиафайлы» и «Ссылки» пониже, чем переименованный нами ранее «Посты», «Страницы» и «Комментарии».

Для достижения цели нам уже понадобится использовать фильтр menu_order. Однако для использования фильтра menu_order нам сначала необходимо активировать custom_menu_order. Поэтому перво наперво нужно будет поместить код активации custom_menu_order выше, чем фильтр menu_order. В итоге у нас должен получиться такой код:

Порядок следования пунктов меню в панели управления администратора WordPress определяется сверху вниз. Таким образом, порядок пунктов меню и разделителей зависит от порядка расположения соответствующих значений в массиве, который возвращает функция custom_menu_order($menu_ord). В массиве Вы можете расположить значение в любом порядке, как вам захочется, а если Вы пропустили, не добавили в массив какой-то из стандартных пунктов меню, то страшного ничего не случится, пункты меню не потеряются, а просто окажутся в самом низу всего меню.

Теперь опять добавляем этот код в файл functions.php, сохраняем его, обновляем страницу панели администратора и наслаждаемся результатами своей работы.

Удаление меню

Как переименовать меню и подменю, а так же изменять порядок их пунктов Вы уже научились. Но как быть с пунктами, которые Вы вообще не хотели бы видеть? Да их можно просто удалить. Давайте теперь посмотрим, как удалять невостребованные пункты из меню WordPress.

Удаление меню верхнего уровня

Для удаления пунктов меню WordPress из панели управления администратора в движке уже предусмотрена встроенная функция:

Все значения, а точнее имена файлов, в которых обрабатываются соответствующие пункты меню, которые можно использовать в функции remove_menu_page() перечислены в списке в конце этого урока.

Так, например, если Вы хотите удалить меню «Инструменты» (Tools), то нужно использовать вот такой вызов:

При удалении пункта меню вполне можно использовать уже ранее созданную нами функцию для переименования. В следующем коде показано, как заодно с переименованием можно и удалять некоторые позиции:

Удаление подменю

Удалять подменю так же просто, как и меню, потому, что для этого используется очень схожая функция. Вот пример, как избавиться от подменю «Редактор» для меню «Внешний вид» (имеется ввиду раздел Темы):

Единственное отличие в том, что первым аргументом функции должно быть имя файла-родителя и вторым аргументом должно быть имя файла обработки самого удаляемого подменю. Вот пример кода, где кроме переименования пунктов меню, скрытия меню «Инструменты» (Tools) еще из подменю «Внешний вид» удаляется пункт «Редактор»:

А вот и таблица, в которой перечислены все пункты меню (включая подменю и разделители), ключи (Key) и файлы с ними связанные (Slug)

На этом урок окончен. Удачной вам настройки меню WordPress!