Создание меню wordpress

UberMenu – WordPress Mega Menu Premium WordPress Plugin

Mega Menu — сенсация на рынке меню WordPress, а UberMenu — горячий пирог. С более чем 75 тысячами продаж вы не ошибетесь в выборе UberMenu, трендовым плагином мега-меню, который на несколько ступеней выше обычного плагина меню.

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

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

Плагины меню

Существует немало плагинов, расширяющих возможности создания меню на сайте WordPress. Например:

Menu Image: загрузка изображений в меню;
Max Mega Menu: создание и редактирование мега-меню;
WooCommerce Menu Extension: вставка ссылок магазина в меню WordPress;
Superfly Responsive Menu: расширение инструментария навигации WordPress;
Nextend Accordion Menu: создание и редактирование меню типа «аккордеон»;
Sticky Menu on Scroll: добавление «липкого» меню.

«Липкое» меню «приклеивается» к верхней части экрана и не уходит из зоны видимости пользователя при прокрутке страницы. «Аккордеон» представляет собой список с раскрывающимся содержимым. С его помощью удобно представлять блоки вопросов и ответов. Max Mega Menu и другие расширения с «Mega Menu» в названии служат для создания и редактирования мега-меню. Этот вариант оптимален при большом количестве категорий и необходимости вставки в меню изображений и иконок.

Superfly Responsive Menu может использоваться и как независимый инструмент, и как расширение стандартного функционала WordPress. Во втором случае вам просто нужно выбрать на странице опций Superfly элементы, ранее созданные на вкладке «Внешний вид» > «Меню» консоли управления. Особенности расширения Superfly Responsive Menu:

поддержка различных типов меню;
на 100% респонсивный дизайн;
добавление кастомного кода HTML, шорткодов, виджетов;
шрифты Google Fonts, дополнительные настройки параметров текста;
вставка логотипа, фоновых изображений, иконок;
расширенные настройки цвета, разделителей, границ;
интеграция с социальными платформами (Facebook, Instagram, Twitter, Dribbble, Pinterest, Vimeo, YouTube, Skype, email, RSS);
поддержка до 4 уровней вложенности;
плавная прокрутка;
библиотека иконок;
настройки действий в зависимости от поведения пользователя (по клику, по наведению курсора мыши и так далее);
расширенная поддержка мобильных платформ;
красивые эффекты анимации CSS3.

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

Азы языка PHP

Мы создавали пустую страницу index.php — это главная страница сайта. Давайте ее наполнять. Откройте файл index.php с помощью редактора кода Geany.

PHP-команды вставляются в обычный HTML-код. Каждый кусок PHP начинается с такого знака:

<?php

Напишите в файле index.php:

<!DOCTYPE html>
<html>
<head>
<title>Пробный сайт</title>
</head>
<body>
<h1 style=»font-size: 400%; color: red»>
<?php

echo date(«g:i:s»);

?>
</h1>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>

<html>

<head>

<title>Пробныйсайт<title>

<head>

<body>

<?php

echodate(«g:i:s»);

<h1>

<body>

<html>

<?php — в этой строчке мы начинаем вставку PHP-кода

echo date(«g:i:s»); — это команда (точнее, две команды), которая на языке PHP означает “узнать (date) и вывести (echo) на экран текущее время в формате “часы (g): минуты (i): секунды (s)”.

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

?> — как вы уже, возможно, догадались, этой строкой мы говорим, что вставка PHP-кода закончена и начинается снова обычный HTML.

Давайте проверим, как это работает. Откройте главную страницу сайта: http://localhost/wordpress/

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

Не обращайте внимания, сейчас для нас это неважно.)

Откройте HTML-код загруженной страницы. Вы не увидите там PHP-кода.

Это связано с тем, что язык PHP обрабатывается на сервере — раньше, чем страница отправляется в браузер. Сервер выполнил наши инструкции и «превратил» их в обычный HTML.

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

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

в файле functions.php должна быть предусмотрена возможность использования произвольных меню и зарегистрированы сами меню (одно или несколько). Если в указанном файле шаблона имеется подобный фрагмент кода, то все уже сделано и должно работать:
1 2 3 4
register_nav_menus(array( 'menu_1' => 'Menu 1', 'menu_2' => 'Menu 2' ));
Данный фрагмент кода является примерным, может различаться и отвечает за регистрацию двух меню с идентификаторами menu_1 и menu_2.
в зависимости от того, где отображается меню, следующий код нужно искать в соответствующем файле шаблона:для верхнего меню (в связи с тем, что чаще всего основное меню отображается сразу под шапкой сайта, или прямо в шапке, то и речь идет о файле header.php):
1 2 3 4 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как настроить основные параметры вашей темы

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

Категории, или рубрики сайта

Обычно сайт состоит не из одной страницы. Если у вас сайт про рыбалку и охоту, вы можете завести в нем разделы «Рыбалка» и «Охота». Каждому разделу может понадобиться свой дизайн. Сейчас мы разберемся, как это сделать.

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

Название рубрики будет отображаться на сайте.

Ярлык обязательно напишите латиницей. Это то, как рубрика будет называться в гиперссылках, в адресной строке браузера, в названиях файлов WordPress и в нашем коде. Давайте для примера создадим две рубрики — Рыбалка (впишите ярлык fishing) и Охота (впишите ярлык hunting).

Создайте побольше постов в каждой рубрике — это понадобится для теста.

Как привязать пост к рубрике во время его создания или редактирования:

Как быстро изменить рубрику поста:

Сокращаем повторяющиеся элементы

Посмотрите еще раз на код файла index.php:

Эта часть будет одинаковой для всех страниц сайта. Меняться будет только заголовок страницы.

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

Скопируйте код верхней части сайта в файл header.php. А в файле index.php вместо этого кода напишите строчку:

<?php get_header(); ?>

1	<?phpget_header();?>

Это команда для WordPress найти и включить файл header.php сюда.

Внешне ничего не поменялось. Но вместо того, чтобы каждый раз писать верхнюю часть страницы вручную, достаточно будет написать
<?phpget_header();?> , и WordPress сделает остальное за вас.

То же самое стоит сделать с подвалом — нижней частью страницы, где размещаются счетчики, информация об авторских правах и так далее. В нашем примере подвала пока нет. Когда вы будете его добавлять, поместите код в файл footer.php и вызывайте командой
<?phpget_footer();?>

Метод 2: Как установить тему WordPress из ZIP-файла

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

Первым делом zip архив шаблона скачивается с сайта на компьютер. Далее нужно пройти по цепочке – внешний вид→темы→добавить новую. Эта часть процедуры не отличается от начала установки через админку. Но дальше, вместо того, чтобы открывать каталог, необходимо нажать «загрузить тему», потом «выбрать файл», отыскать скачанный архив и нажать «установить сейчас». Шаблон будет установлен, после чего его надо, как и в предыдущем варианте активировать.

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

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

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

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

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

‘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

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.

Активация новой темы

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

/*
Theme Name: Progme
Version: 1.0
Description: Тема Bootstrap 4
Author: Progme
Author URI: https://it-blog.ru
*/

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

Планируете внедрить CRM или уже используете? Заходите на сайт о CRM

Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.

Работаем с файлом footer.php

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

1. Откройте файл function.php и перед дескриптором ?> вставьте такой код:

 register_sidebar(array(
                                 'name' => 'foot',
                                 'before_widget' => '',
                                 'after_widget' => '',
                                 'before_title' => '<p>',
                                 'after_title' => '</p>',
                                )
                        );

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

2. В файле footer.php весь код внутри контейнера footer замените одной строкой:

      <?php dynamic_sidebar( 'foot' ); ?>

Она выводит зарегистрированный в файле functions.php блок foot.

3. Перейдите в админ-панель WordPress, откройте страницу настройки виджетов, перетащите в область foot блок Текст, в поле Текст: введите что угодно, например, нижеследующее.

<p>
      Copyright  2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a>
</p>
<p>
      +7-(777)-777-77-77 | <a href="#">Москва</a>
</p>

Поле Заголовок можно оставить пустым.

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

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

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Как сделать меню

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

Меню создастся. Теперь нужно добавить в него пункты. Добавлять в меню вы можете любые части сайта — страницы, записи, рубрики, произвольные ссылки. Некоторые темы могут создавать дополнительные виды контента, их тоже можно добавлять в меню. Для этого используйте элементы с левой части редактора. Отметьте галочками те части сайта, которые должны быть в меню, а затем нажмите «Добавить в меню».

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

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

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

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

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

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

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

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

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

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

Структура шаблона

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

style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым.index.php — содержимое главной страницыheader.php — общая шапка сайтаfooter.php — общий футер сайтаfunctions.php — файл с функциями темыsingle.php — шаблон записиpage.php — шаблон страницыcategory.php — шаблон списка записей категорииarchive.php — шаблон списка записей архивов404.php — содержимое страницы ошибки 404search.php — шаблон страницы со списком результатов поиска

css/ — папка со стилями js/ — папка со JS скриптами

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

Вывод страницы в меню сайта

Мы создали страницу. Но её пока не видно. Поэтому давайте узнаем, как можно добавить страницу в меню сайта. Для этого надо зайти в раздел консоли Внешний вид → Меню.

Теперь смотрим в открывшееся окно, которое поделено на две части:

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

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

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