Как в WordPress сделать меню с подменю
Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» — «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.
Структура меню
Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:
- Главная
- Отзывы клиентов
- Услуги
- Подбор оборудования
- Монтаж и прокладка ЛВС
- Виртуализация
- IP-телефония
- Видеонаблюдение
- Мониторинг
Уровень вложенности меню может быть любым, но на мой взгляд, сайты, у которых больше двух уровней вложенности очень неудобны в использовании. Пока ведёшь к подпункту, предыдущий пункт закрывается или постоянно скачет перед глазами. Это по большей части проблема программиста или автора темы, но факт остаётся фактом: самый частый вариант меню на сайтах — двухуровневый.
Некоторые сходятся в мысли, что перед тем, как создать страницы, следует создать меню из ссылок-пустышек, которые никуда не ведут и попросту не работают на сайте. Это нужно для того, чтобы заранее определиться с нужными пунктами и затем создавать структуру страниц по уже готовому варианту.
В принципе, это неплохо и можем пойти по такому же пути: сначала создадим структуру, посмотрим, всё ли нормально у нас и затем уже будем создавать страницы (создать страницы вы сможете и самостоятельно, я верю в вас!).
Заходим в раздел «Внешний вид» — «Меню»:
Создаём новый набор меню или используем уже существующий.
В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции Как добавить ссылку в меню):
Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки — #, а в поле «Текст ссылки» вставляем нужную нам фразу.
После нажатия на кнопку «Добавить в меню» в правой части экрана появится созданный нами пункт:
Добавляем остальные пункты в меню
Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:
Давайте сохраним наш промежуточный результат и зайдём на сайт, чтобы посмотреть, как будет выглядеть первый вариант созданного только что меню:
Пока неплохо выглядит, я думаю можно продолжить дальше. Кстати, если вы не видите созданное только что меню, тогда вам следует обратить внимание на раздел «Области темы» в интерфейсе управления меню и выбрать там нужную вам опцию. У меня это выглядит так:
Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.
Результат должен получиться следующий:
Вы, скорее всего, удивитесь, почему же пункты меню не оказались под пунктом «Услуги». Возможно команда разработчиков WordPress и сделала бы создание дочерних пунктов путём добавления дополнительной опции, как, например, с рубриками, но они сделали это удобнее, взгляните:
Вам достаточно захватить кнопкой мыши нужный вам пункт и просто перетянуть его под основной пункт меню. Что в итоге я сделал: перетащил «Подбор оборудования» под «Услуги», визуально пункт подменю получил отступ с левой стороны.
По аналогии сделаем и другие пункты:
Создание меню завершается нажатием на кнопку сохранения. После этого мы можем спокойно идти на главную страницу сайта и проверять промежуточный результат:
Что дальше?
Дальше всё просто:
- Создаёте нужные вам страницы с подстраницами для Услуг
- Удаляете по очереди каждый пункт меню-заглушку
- Вставляете ссылку на созданную страницу через раздел «Страницы» интерфейса управления меню
Если какие-то из пунктов вам остались непонятными — напишите об этом в комментарии, я подготовлю более развёрнутую инструкцию на этот счёт, но, как мне кажется, этого материала будет достаточно, чтобы создать развёрнутое меню в WordPress. Успехов!
Видео
Автор
Александр Кадыров
Занимаюсь разработкой сайтов на WordPress около 10 лет, с тех же пор стал вести блог о WordPress. В итоге это всё вылилось в этот курс, где вы сейчас находитесь. В свободное время программирую на Ruby, PHP и Golang, увлекаюсь администрированием серверов и автоматизацией своей деятельности. Посмотреть все записи автора Александр Кадыров
Способы создания промежуточного сайта
Не секрет, что сайты WordPress становятся все более сложными с каждым днем. С каждым подключаемым модулем добавляется еще один уровень сложности. Это, конечно же, повышает наши шансы столкнуться с проблемами при выполнении обычных обновлений программного обеспечения.
Это часть сделки с открытым исходным кодом, которую мы принимаем с помощью WordPress. Вы получаете великолепную коллекцию плагинов, которые делают всевозможные вещи. Но все они происходят от разных разработчиков.
Это то, что делает промежуточным сайтом такой отличный ресурс. Это точная копия вашего сайта WordPress, которая работает независимо от вашей «живой» версии. Это позволяет тестировать обновления и другие изменения на вашем сайте, не нарушая их доступности.
Различные способы создания промежуточного сайта
Промежуточные сайты могут быть построены и использованы с использованием ряда методов. Но не у всех есть доступ к тем же инструментам. Итак, какой ресурс вы выбираете, возможно, больше зависит от того, какие ресурсы доступны, а не просто с самым простым решением.
Автоматическая настройка через веб-хостинг
Это Святой Грааль с точки зрения быстрой и простой настройки. Некоторые веб-хосты, особенно в пространстве WordPress, предлагают сайты с одним щелчком мыши, которые делают копию вашего сайта в реальном времени. Оттуда вы можете проверить любые изменения в промежуточной среде, и, когда они готовы, просто перезапишите свой сайт с этими изменениями.
Безусловно, это наиболее предпочтительное решение, поскольку для его использования практически не нужно работать. Единственный улов — вам нужно выбрать веб-хост, который предлагает эту функцию. В противном случае вы застряли, строите свои собственные.
Скопируйте существующий сайт на новую версию WordPress на своем веб-сервере
Теперь мы работаем. Этот метод требует, чтобы вы создали точную копию своего сайта (файлы WordPress и базу данных) и разместили его где-то еще на своей учетной записи хостинга. Вы можете выбрать для этой версии собственный субдомен, такой как «staging.yoursite.com» для легкого доступа. Необходимо также, чтобы вы блокировали запросы поисковой системы на своем промежуточном сайте — чтобы предотвратить любые негативные последствия SEO или другие отслеживания.
Создание собственного промежуточного сайта можно выполнить вручную или с помощью некоторых плагинов, которые сэкономят вам время. Самая большая проблема с выполнением всего вручную заключается в том, что это не простой способ перемещения данных вперед и назад, если вы не мастер командной строки.
Поэтому рекомендуется использовать полезный плагин. Вот несколько достоинств вашего рассмотрения:
Проведение WP
WP Staging действительно может быть «лучшим решением» для веб-хоста, который предлагает сайты с одним щелчком мыши. Бесплатная версия плагина автоматически клонирует ваш сайт в отдельную подпапку и выполняет все необходимые изменения базы данных для вас в фоновом режиме.
Оттуда вы можете посетить сайт и проверить его содержание. Что добавляет доступная версия pro, так это возможность переноса этих изменений обратно на сайт в реальном времени. Без этой функции вам придется запускать обновления на обоих сайтах отдельно. Но по крайней мере у вас будет представление о любых возможных проблемах и исправлениях перед этим.
WPSiteSync для контента
Где WPSiteSync для контента отличается тем, что это действительно только для фактического контента вашего сайта. Таким образом, это не решение для тех, кто хочет автоматизировать создание промежуточного сайта. Но если вы планируете тестировать новый контент на своем промежуточном сайте, прежде чем выкладывать его на публику, это может быть довольно длительно.
Вы можете выбирать контент, который хотите синхронизировать между сайтами, включая страницы, сообщения, изображения, файлы PDF и настраиваемые данные полей. Премиум версия обрабатывает пользовательские типы почтовые, продукты WooCommerce и многие другие.
Gitium
Gitium — это плагин, который позволяет автоматическое управление версиями для вашего сайта WordPress. Таким образом, вы можете нажать / вытащить из репозитория на действующий сайт. Приятно, что вы можете вернуться к предыдущей версии сайта, если возникнут проблемы. Но это довольно продвинутый инструмент и требует использования командной строки (gasp!). Он лучше всего подходит для тех, кто хочет немного более подробного контроля над всем процессом.
BlogVault
BlogVault объявляется как плагин резервного копирования / восстановления и безопасности, завернутый в один. Что касается установки, это позволит вам создать клон или перенести ваш сайт одним щелчком мыши. Также можно легко восстановить сайты. Вы также сможете выполнять инкрементные резервные копии сайта и сохранять их в облаке.
В качестве дополнительного бонуса плагин сканирует вредоносное ПО и шифрует ваши резервные копии. Просто отметьте, что вам нужно будет зарегистрироваться в службе BlogVault, чтобы воспользоваться плагином.
Duplicator
Почтенный плагин Duplicator — это, прежде всего, инструмент миграции сайтов. Его основное использование здесь — помочь вам быстро настроить промежуточную площадку. Плагин обрабатывает множество деталей, которые приходят с копированием сайта и завертывает все в аккуратный пакет, чтобы сэкономить вам время.
Запуск локальной среды размещения
Наконец, вы также можете создать промежуточный сайт локально, превратив ваш компьютер в веб-сервер. Хотя этот метод не имеет такого же удобства, как наличие удаленного промежуточного сайта, он защищен (ваш сервер не должен быть доступен для внешних подключений) и обычно выполняет намного быстрее.
Чтобы настроить все, вам нужно установить некоторое программное обеспечение. Среди вариантов:
Bitnami
Что делает решение Bitnami настолько невероятным, что вы можете загрузить и установить пакет WordPress, в котором есть все необходимое для запуска CMS локально на вашем компьютере. В отличие от большинства локальных серверов, нет необходимости в сложной настройке. Это отличный выбор для тех времен, когда вы просто хотите что-то быстро установить и получить право на работу. Загрузки доступны для Windows, Mac и Linux.
О, и если вы уже используете свои локальные установки WAMP , XAMPP или MAMP , у Bitnami также есть модуль WordPress.
Я объединил эти решения, потому что они очень похожи в том, что они делают, хотя разработчики, как правило, имеют свой собственный любимый. Они предназначены для предоставления вам полного доступа работы с локальным сервером.
Хотя они, безусловно, могут быть использованы для запуска WordPress, они используют немного больше настроек, чем загрузки Bitnami выше. На самом деле, они лучше всего используются, если вы собираетесь разрабатывать проекты, отличные от WordPress, или захотите углубиться в администрирование сервера.
WampServer работает исключительно на Windows, MAMP на Mac / Windows и XAMPP может работать в Windows, Mac, Solaris и Linux.
Все готово
Данные способы создания промежуточного сайта не идеальны и требуют определенных навыков. Наличие собственного промежуточного сайта становится одним из тех обязательных функций для занятых сайтов и особенно тех, которые сосредоточены на электронной торговле . Ошибки или, что еще хуже, простои — это то, что может быть невероятно дорогостоящим и напряженным.
Таким образом, вместо того, чтобы делать новый сайт или переживать за сбои из-за обновлений. Вы просто сможете настроить бета-тестирование для своего ресурса.
ПРО совет: Если вы еще на начальном уровне работы с Вордпресс или в общем сайтостроении, то я полагаю вам не нужны эти функции. В ином случае это грозит тем, что вы усложните себе работу и у вас вообще пропадет желание заниматься веб дизайном.
[Инструкция] Как создать сайт на WordPress самостоятельно
Внимание! Рекомендую читать эту статью предельно внимательно, чтобы сделать сайт на WordPress самостоятельно. На самом деле, это не сложно. Однако для новичка даже простые вещи могут вызывать сложности только потому, что это пока непонятные для него вещи. И сейчас давай определимся с тем, что конечным результатом этой статьи должен быть работающий сайт на Вордпресс на хостинге.
Первый важный момент. Если ты решил сделать личный блог для себя, и это первый блог с целью «просто попробовать», то можешь воспользоваться простым и быстрым способом — сделать сайт на сервисе WordPress.com. У тебя появится собственный сайт на Вордпресс и ты сможете посмотреть админку, установить плагины, выбрать шаблон и заняться наполнением. Однако, у этого способа есть серьезные недостатки, поэтому он не подходит для полноценной разработки. Если ты решил оказать услуги клиенту или сделать сайт для своего дела (бизнеса), то нужен другой подход, о котором я расскажу ниже.
Чтобы серьезно заняться созданием сайтов на Вордпресс, необходимо разобраться, как работают сайты на этой системе. В этой инструкции будет много ссылок на другие статьи, которые раскрывают детальные вопросы более подробно. Рекомендую переходить по ссылкам и читать также внимательно, чтобы максимально быстро разобраться в вопросе.
Эта пошаговая инструкция по созданию сайтов на WordPress будет состоять из следующих шагов:
- Как устроен WordPress сайт?
- Установка WordPress на хостинг
- Прикрепляем доменное имя к сайту
- Устанавливаем плагины и выбираем шаблон
Как устроен WordPress сайт?
Как устроен WordPress сайт? — Это важно знать, чтобы в дальнейшем было понимание, с чем же Вы все такие работаете. И сейчас я в двух словах расскажу, чтобы далее Вы смогли понимать о чем речь в этой статье.
Все Вордпресс сайты состоят из двух важнейших элементов:
- PHP скрипт
- База данных MySQL
PHP скрипт. WordPress — это один большой PHP-скрипт (программа). Этот скрипт состоит из множества PHP-файлов, которые связаны друг с другом в одну единую систему. Эта система является неким «ядром» всего сайта, поверх которого наращивается дополнительный функционал. К этому скрипту последовательно подключаются плагины (дополнения) и шаблон (тема сайта).
База данных MySQL. Система CMS WordPress работает с базой данных MySQL. Если сейчас это слово для тебя не знакомо, просто не беспокойся об этом, позже ты с этим познакомишься ближе. Воспринимай базу данных MySQL как некоторое хранилище информации.
База данных нужна для того, чтобы на основе информации, которая в ней хранится, формировать страницы сайта. Соответственно, когда пользователь запрашивает страницу сайта, то CMS WordPress обращается в базу данных, собирает необходимую информацию и, на основе шаблона, формирует HTML страницу для пользователя, которая отображается в браузере.
Собственно так и устроены Вордпресс сайты, если в двух словах. Теперь окунемся немного глубже в техническую часть.
Установка WordPress на хостинг
PHP скрипт — CMS WordPress — должен работать на сервере или хостинге (хостинг тоже является частью сервера). Поэтому, чтобы сайт открывался в браузере для всех пользователей Интернета, необходимо разместить сайт на хостинге. Об этом пойдет речь далее.
Для дальнейшей работы необходимо зарегистрировать себе аккаунт на сайте хостинговой компании и оплатить хостинг. Если ты делаешь сайт для своего бизнеса или для клиента, то рекомендую хостинг Hostenko.com — это надежный и быстрый хостинг специально для Вордпресс сайтов.
Читайте обзор хостинга Hostenko, если интересно узнать, почему это лучший хостинг для Вордпресс сайтов.
После того как хостинг оплачен, необходимо установить WordPress на хостинг. Для этого, в личном кабинете у хостера необходимо получить FTP доступы:
- host или IP адрес сервера
- FTP логин
- FTP пароль
Также для установки WordPress на хостинг понадобится сам PHP-скрипт. Рекомендую скачать WordPress на официальном сайте .
Если не хочется заморачиваться с установкой WordPress на хостинг, и если ты выбрал хостинг Hostenko, то рекомендую к прочтению предыдущую инструкцию по созданию сайтов на Hostenko. Эта инструкция максимально проста и будет полезна, если не хочется вникать в технические детали по установке WordPress на хостинг. Вордпресс там устанавливается автоматически.
Сделать WordPress сайт на отдельном хостинге
Третий способ сделать сайт — это арендовать хостинг и установить на него CMS WordPress. Это не сложно, но для новичков этот способ может показаться трудным. Но за то этот способ предлагает более широкие возможности, хотя зависит конечно от выбранного вами хостинга.
Я советую вам зарегистрировать хостинг Timeweb , не пожалеете. И уж точно не советую использовать беспатный хостинг, откиньте сразу эту идею.
После регистрации хостинга вам потребуется домен. Зарегистрируйте доменное имя на 2domains.ru всего за 99 рублей.
Далее вам нужно установить движок WordPress на хостинг. Читайте мою инструкцию по установке WordPress.
Как сделать сайт на WordPress
Сейчас можно создать сайт за 5 минут и он не будет отличаться от крупных проектов. И сегодня я расскажу, как сделать сайт на WordPress (на бесплатной платформе).
WordPress — это лучшая платформа для создания интернет журнала, блога или новостного сайта. Самое главное, что здесь все отлично работает!
Однако во всем этом процессе вам придется заплатить за хостинг (100 рублей в месяц) и за покупку домена (180 рублей). То есть за год ваши траты составят 1 380 рублей в лучшем случае.
Как создать сайт на WordPress за 5 минут
Для меня весь процесс по созданию сайта на WordPress занимает 5 минут, но для новичка потребуется 2-3 часа. Все потому, что есть действия, которые требуют ожидания и одобрения со стороны хостинга!
1. Выбор хостинга
Подбор хорошего хостинга самое важное, что может быть в построение сайта! Потому что в интернете много разных компаний, но 90% из них предоставляют отвратительные условия и обслуживание.
Помните, что хостинг отвечает за скорость работы вашего сайта, его доступность в интернете и он влияет даже на позиции в поисковой системе Яндекса и Google!
Лучшие бюджетные варианты:
- — дает высокую скорость, быструю поддержку и постоянный доступ по низкой цене. Цена за год обслуживания + домен будет 1 356 рублей. — считается одной из лучших компаний в этой сфере, правда цена за год выйдет уже 1 570 рублей. — не уступает своим конкурентам сверху и при этом сейчас за год он берет 1 188 рублей (где домен дают в подарок).
Смело переходите на один из хостингов и делайте заказ. Обязательно регистрируйте домен через них, это дешевле и проще. Помните, что на регистрацию домена уйдет 12-48 часов (это время за которое подключат домен к вашему ip).
2. Установка WordPress
Самое главное, что все 3 хостинга имеет автоматическую установку WordPress и с любыми вопросами вам поможет разобраться служба поддержки. Но легче посмотреть одно видео по настройке ниже и 99% всех вопросов сразу отпадут!
Если у вас с деньгами очень тяжело, то можно заказать бесплатный домен tk, ml, ga, cf, gq. Но они будут хуже ранжироваться чем ru зона и юридический принадлежать не вам.
3. Выбор темы (шаблона)
Выбор темы для сайта стоит на втором месте по важности, потому что тяжело найти дизайн, который объединит в себе необходимые качества!
Шаблон должен быть:
- С кодом без критических ошибок, проверяют при помощи Validator.
- Иметь немного скриптов (это влияет на скорость загрузки сайта);
- Хорошо выглядеть на мобильном телефоне;
- Правильная SEO-оптимизация всего шаблона;
- И при этом он должен нравиться вам!
Конечно же для новичка много непонятных вещей, поэтому дам рекомендацию, где искать шаблоны и какие лучше выбрать. Пользуйтесь для этого официальным сайтом WordPress — здесь.
Самые крутые бесплатные шаблоны 2017-2018:
4. Подключение необходимых плагинов (расширений)
Плагины или по-другому расширения позволяют добавлять функции на ваш сайт без влезания в код. Это упрощает жизнь новым вебмастерам, правда, они не знают, что лучше поставить.
Поэтому я создал небольшой список необходимых плагинов, которые вам необходимо установить для правильной работы.
- RusToLat — позволяет автоматический создавать url из заголовков ваших статей латинскими буквами;
- Yoast SEO — лучший SEO-плагин для WordPress, много полезных функций;
- WP Super Cache — включает кэширование сайта и ускоряет его загрузку;
- Google XML Sitemaps — создает карту в формате xml для поисковых систем;
- Disable All WordPress Updates — отключает обновление плагинов (уменьшает нагрузку на хостинг);
- WP-Optimize — удаление закэшированных запросов, комментариев и много чего другого, что нагружает сайт;
- WordPress Related Posts — выводит релевантные статьи в красивом виде, где вам удобно.
- Невидимая капча — отключает спам от роботов (ежедневно попадает в спам 1000 комментариев, которые пишут роботы).
Это 8 расширений, которые я всегда устанавливаю на свои сайты и это одни из самых лучших решений. Но если вы знаете замену каким-то плагинам, то можете поделиться в комментариях.
За эти 4 действия вы сможете сделать сайт на WordPress, который будет готов для заполнения статьями. Если вам кажется это тяжелым, то можете обратиться на биржу фрилансеров, вам это сделают за 3-5 тысяч рублей.