Как установить шаблон на wordpress — загрузить и настроить тему

Что дальше?

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

Мы рекомендуем ознакомиться с этими материалами:

Первые шаги с WordPress — подробнее узнайте о том, как устроен WordPress.

10 WordPress-плагинов, которые прокачают ваш сайт — скорее всего, все 10 вам не нужны, но какие-то наверняка пригодятся.

С чего начать SEO-продвижение сайта — привлеките на сайт посетителей.

Что сделать, чтобы мой сайт видели поисковые системы? — ускорьте индексацию сайта в поисковых системах.

Тема wordpress ― что это

Тема WordPress — это набор файлов, который отвечает за внешний вид сайта.

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

Тема WordPress:

― выводит содержимое сайта на экран;

― указывает, какой контент будет отображаться для разных пользователей;

― отвечает за адаптивность для разных устройств (монитор, смартфон и т. д.);

― использует любые элементы дизайна (картинки, видео).

В других CMS готовое оформление сайта называют шаблонами. В WordPress привычный нам шаблон называют темой, а уже внутри неё находятся шаблоны (файлы сайта). Таким образом, тема WP ― это совокупность шаблонов. Каждый файл (шаблон WordPress) отвечает за отображение определённого контента (записей, изображений) на сайте.

2 способа как добавить шаблон в вордпресс

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

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

Жмем на загрузку темы. Вордпресс потребует от вас файл формата zip. А поскольку вы уже его подготовили, то нажимайте «Установить тему формата zip». Далее через «Обзор» находите расположение файла на компьютере, и нажимаете «Загрузить» (или «Открыть»).

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

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

Найдите папку «wp-content». В ней должна быть директория с темами, обычно называется «themes». Загрузите папку с файлами шаблона страницы в эту директорию. А потом возвращайтесь в «админку» Вордпресс, и активируйте загруженный шаблон через соответственный раздел.

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

Боковое меню

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

Создадим новое меню в админке с названием «Тестовое боковое меню».

В настройке «Область отображения» выбираем «Социальное меню».

В боковое меню добавляем все страницы с услугами, а также общую страницу «Услуги» — ее мы переименуем во «Все услуги».

Сохраняем меню.

Теперь давайте добавим его на какую-то страницу. Например, на страницу услуги «Мойка окон».

Открываем страницу в Elementor:

Добавляем секцию с двумя колонками:

На панели элементов находим элемент Vertical Mega Menu. Перетаскиваем его в левую колонку.

Затем в настройках содержимого выбираем меню, которое следует отображать в блоке («Тестовое боковое меню»):

Меню отображается в блоке:

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

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

Главное меню

В админпанели переходим на вкладку Внешний вид → Меню.

Здесь открывается для редактирования меню, импортированное с демо-контентом. Нам нужно создать собственное меню, поэтому кликаем по ссылке «создайте новой меню».

Вводим название и жмем «Создать меню».

Назначаем область отображения: ставим галочку возле пункта «Основное меню». Затем сохраняем.

В левой части экрана — настройки плагина JetMenu. Устанавливаем переключатель «Включить JetMenu для данной области отображения» в положение «Да» и жмем «Сохранить».

Затем раскрываем блок «Страницы», переключаемся на вкладку «Все» и отмечаем галочками все страницы, которые необходимо добавить в меню. Затем кликаем по кнопке «Добавить в меню».

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

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

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

• изменить текст ссылки (например, для ссылки «Тестовая главная» мы изменим текст на «Главная»);
• переместить элемент на 1 позицию ниже или выше. Если элемент находится ниже верхнего — доступна ссылка «Наверх», которая сразу перемещает элемент на первую позицию.

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

Рекомендуем почитать: «Как сделать перелинковку для успешного SEO и роста конверсий»

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

С другими элементами поступаем так же. Но проще будет раскрыть дополнительные настройки и кликнуть по ссылке под «Услуги».

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

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

Переходим в Monstroid 2 → Моя библиотека на вкладку «Хедер». Выбираем наш «Тестовый хедер» и открываем его в Elementor.

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

Жмем «Обновить» и открываем хедер для просмотра изменений:

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

На всякий случай проверяем главную:

Здесь также все корректно отображается.

Дополнительно: добавляем pop-up для удержания пользователей

В боковом меню админки WordPress перейдите в JetPopup → Добавить новый Popup. Укажите заголовок и нажмите «Сохранить».

После этого появится кнопка «Редактировать в Elementor». В интерфейсе конструктора мы можем собрать pop-up и настроить его.

Мы сделали максимально примитивный pop-up — заголовок, стикер и кнопка. Вы же можете делать кастомные всплывашки с привлекательным дизайном.

После того как pop-up готов, нужно настроить условия его показа. Для этого на панели инструментов кликаем по значку шестеренки (Настройки, внизу слева) и в поле «Условие показа» раскрываем выпадающий список с вариантами условий показа. Выбираем нужный.

Рекомендуем почитать: «10 ready-to-use сценариев pop-up виджетов для интернет-магазина [гайд Promopult/Getsale]»

Также здесь следует настроить:

• эффект анимации для появления поп-апа;
• включить опцию «Показывать один раз» — со всплывающими окнами нельзя быть навязчивым и показывать их пользователю при каждом движении в сторону вкладок.
• в пункте «Repeat showing popup in» — выбрать время, по истечению которого пользователю снова покажется поп-ап (при соблюдении условия, конечно).

Дополнительно раскроем блок настроек «Display Settings». Кликаем по кнопке «Display Conditions» и жмем «Add Condition».

Здесь мы можем указать, на каких страницах сайта следует показывать всплывающее окно. Переключаемся на вкладку «Include» (должна быть активна по умолчанию), в выпадающем списке выбираем «Для всего сайта».

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

1. Кликаем по кнопке «Add Additional Condition».
2. Переключаем вкладку Exclude.
3. В первом выпадающем списке выбираем «Для одной страницы», во втором — тип страницы.
4. В третьем выпадающем списке выбираем название страницы, для которой нужно отключить показ pop-up.

Нажимаем «Сохранить» и проверяем на сайте, показывается ли pop-up.

Дочерняя тема

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

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

Процесс создания дочерней темы требует знания и навыков создания сайта без помощи CMS. Простой способ создания дочерней темы ― это использование плагина Child Theme Configurator. Достаточно вставить ссылку на родительскую тему, и плагин сам поможет всё настроить.

Преимущества дочерних тем:

1. Сохраняет ваши настройки. Используя дочернюю тему, вы можете внести изменения прямо в код, без боязни потерять ваши настройки при обновлении родительской темы.
2. Дочерняя тема Вордпресс может улучшить рабочий процесс. Используя только одну тему, вы можете создать сайты с разным функционалом для нескольких клиентов.

Загрузка и распаковка файла архива платформы

1. Открыть ISPManager.
2. Перейти в раздел «WWW» в левой панели и выбрать пункт «WWW-домены».
4. Выбрать домен сайта, для которого загружается CMS и нажать кнопку «Каталог».
5. В результате в каталоге инсталляции сайта будут созданы файлы парковочной страницы, которые необходимо удалить, кроме папки «webstat» (если таковая будет).

6. Нажать кнопку «Закачать».
7. Выберите архив CMS, расположенный на локальном диске компьютера. Нажать «Ok».
9. Выделить загруженный архив и распаковать его нажатием кнопки «Извлечь». Распаковка будет произведена во вложенный каталог WordPress.
6. Нажать кнопку «Закачать».
7. Выберите архив CMS, расположенный на локальном диске компьютера. Нажать «Ok».
9. Выделить загруженный архив и распаковать его нажатием кнопки «Извлечь». Распаковка будет произведена во вложенный каталог WordPress.
10. Файлы из каталога WordPress необходимо переместить в папку инсталляции платформы. Для этой цели потребуется вернуться в каталог WordPress и выделить все его файлы, а затем — нажать «Копировать».
11. Указать каталог инсталляции сайта блога.
12. Включить опцию «Перенести файлы» и кликнуть «ОК».

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

Из чего состоит тема wordpress

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

Тема содержит два основных файла:

1. index.php — главный файл темы, который отвечает за вывод содержимого страницы;
2. style.css — главный файл стилей. Все файлы .css отвечают за облик элементов будущего сайта: их размер, цвет и др.

Любой сайт можно визуально поделить на блоки. За каждый блок будет отвечать определённый файл внутри темы. Рассмотрим основные элементы страницы:

― Шапка (header) находится в верхней части страницы. Файл header.php отвечает за вывод этой шапки.

― Футер (подвал) находится в нижней части страницы. За вывод подвала отвечает файл footer.php.

― Боковые части (виджеты). За их вывод отвечает файл sidebar.php.

Структурная схема самого простого шаблона выглядит так:

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

Таким образом, тема в WordPress отвечает за то, как будет выглядеть сайт для посетителя. Для добавления дополнительного функционал на сайт (опросы, форумы, оптимизация поиска) используются плагины WordPress.

Как создать запись

Перейдите в Записи → Добавить новую. Откроется редактор WordPress, в котором вы можете разместить и отформатировать текст записи, а также добавить изображения.

Запись также можно отредактировать в конструкторе Elementor, однако если вы публикуете обычные статьи с картинками (без сложных графических и интерактивных элементов), вам будет достаточно стандартного редактора WordPress. В нем проще и удобнее работать с большим количеством текста.

Рекомендуем почитать: «13 приемов оптимизации изображений: как выйти в топ поиска по картинкам»

Если же вы хотите создавать кастомные страницы с красивой графикой и нестандартными элементами, используйте Elementor.

В интерфейсе редактора WordPress справа вы можете управлять настройками записи.

Здесь вы можете:

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

Если все шаблоны не устраивают, отредактируйте запись в Elementor и сохраните ее как шаблон.

Область редактирования

В области редактирования отображаются такие кнопки:

1. Magic Button

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

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

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

2. Добавить секцию

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

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

Если хотите разместить информацию о тарифных планах, выбирайте структуру секции с 3 и более колонками (зависит от того, сколько тарифных планов у вас есть).

Конструкторы — это круто. Но что делать со всеми этими блоками?

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

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

Отключаем отображение заголовка страницы

По умолчанию при создании страницы в Elementor отображается заголовок страницы (название страницы или сгенерированное самим плагином название).

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

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

Что делать, если переключатель включен, а заголовок не пропадает?

Такая ситуация возможна, но достаточно просто исправляется. По умолчанию Elementor отключает заголовок с селектором h1.entry-title. Если в вашей теме для заголовка страницы используется именно такой селектор, настройка сработает.

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

В настройки плагина можно перейти прямо из интерфейса конструктора. Для этого кликните по ссылке «странице настроек»:

Альтернативный способ попасть в настройки — перейти в них в админпанели WordPress. Выберите Elementor → Настройки и переключитесь на вкладку «Стиль».

Вам нужно поле «Селектор заголовка страницы».

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

Откройте любую страницу с заголовком в режиме предпросмотра (или откройте уже опубликованную страницу).

Кликните правой кнопкой мышки по заголовку страницы и выберите «Просмотреть код» (в Google Chrome эта функция называется «Просмотреть код», в других браузерах, например, в Яндекс.Браузере, она имеет название «Исследовать элемент»).

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

Этот селектор указываем на вкладке «Стиль» в настройках плагина Elementor (в поле «Селектор заголовка страницы»).

Ошибки при загрузке плагина elementor

Иногда при создании страницы вы можете столкнуться с такой проблемой: при нажатии кнопки «Редактировать в Elementor» конструктор не загружается, а появляется такое уведомление:

Такая ошибка может случиться, если вы устанавливали плагины вручную (из архива с темой). Скорее всего, причина в том, что какой-то из установленных плагинов конфликтует с плагином Elementor.

Решение

Первым делом определите, какой именно плагин является причиной ошибки. В админке перейдите в Плагины → Установленные.

Выберите все плагины кроме Elementor и деактивируйте их (в выпадающем списке выберите действие «Деактивировать» и нажмите «Применить»).

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

Здесь три варианта:

• обновите плагин, если для него доступно обновление. Возможно, проблема в том, что у плагина Elementor более свежая версия, а у конфликтующего плагина — старая;
• замените плагин на альтернативный;
• деактивируйте и удалите плагин, если он не важен для вас.

Платные и бесплатные темы

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

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

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

Некоторые премиум-темы можно найти в Интернете бесплатно. Однако мы настоятельно не рекомендуем их использовать. Часто код этих тем изменен третьими лицами. К тому же использовать платные темы, полученные из неофициальных источников, опасно по следующим причинам:

― Высокий риск взлома вашего сайта и кражи конфиденциальной информации.

― Темы могут содержать в себе вредоносное ПО.

― Мошенники могут сделать редиректы с вашего сайта на свой сайт или провести спам-рассылку.

Права доступа к файлам/папкам (chmod)

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

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

Права нужно ставить так:

• папки 755, файлы 644 — когда пользователь WordPress (php) тот же под которым вы подключаетесь по FTP и изменяете файлы.

• папки 775, файлы 664 — когда пользователь WordPress (php) отличается от пользователя под которым вы подключаетесь по FTP и изменяете файлы. При этом пользователь WordPress (php) должен быть в группе, имеющей доступ на запись.

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

• wp-config.php — (600) — может изменить / смотреть только владелец и никто другой. Этот файл изначально создается с правами 644, и оставлять его в таком виде опасно.
• /wp-content/cache/ — (755 или 775) — полный доступ.
• /wp-content/uploads/ — (755 или 775) — полный доступ.
• /wp-content/blogs.dir/ (мультисайт) — (755 или 775) — полный доступ.

Редактировать (изменить) несколько файлов

Этот параграф несколько устарел и версии WordPress 4 не требуют отдельного редактирования файла wp-config. Всё делается из окна браузера при установке WordPress.

На этом этапе понадобиться текстовой редактор. Я использую Notepad или Sublime Text2. В распакованном архиве WordPress, ищем файл wp-config-sample.php. Его нужно переименовать в  файл wp-config.php. В редакторе Notepad открываем файл wp-config.php.

В открытом Notepad в файле wp-config.php ищем строки MySQL и вписываем свои данные базы данных.

Не забываем сохраняться в кодировке UTF-8 без BOM.

Важно! Не редактируйте файл wp-config.php в Блокноте Windows и тем более не используйте редакторы Word.

Примечание: Современные версии выше 3.7, устанавливаемые из ведущих браузеров не требуют предварительного изменения в файле wp-config.php. Система сделает всё сама в инсталляторе. Однако ручное редактирование wp-config.php может понадобится если вы используете “оригинальные” браузеры.

Создаем дополнительные страницы

Чтобы сайт был полноценным, нам нужны страницы. Для сайта клининговой компании понадобятся такие страницы:

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

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

Создаем страницы:

Страницы готовы, теперь можно приступать к созданию меню.

Регулярное наполнение сайта или отдельный заказ оптимизированных текстов. Тариф 250 руб. за 1000 знаков включает профессиональную редактуру текста и генерацию ТЗ. Заказывайте тексты в системе PromoPult — мы знаем толк в оптимизации контента.

Создаем или редактируем меню

Следующий блок настроек, на котором мы остановимся — меню.

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

Если у вас еще нет меню, нажмите кнопку «Создать новое меню».

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

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

Если вы еще не создавали страницы, то вы можете создать их прямо в редакторе меню. Для этого в поле «Добавить страницу» введите название страницы и нажмите кнопку «Добавить». Будет создана пустая страница, которую вы позже сможете оформить и наполнить контентом.

После того как добавите все элементы, кликните по ссылке «Упорядочить».

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

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

Создаем красивые кастомные страницы в wordpress с помощью плагина elementor

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

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

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

Альтернативный способ создания страницы — использовать конструктор Elementor. С помощью конструктора можно собрать страницу из блоков и секций. У него намного больше возможностей, чем у стандартного редактора WordPress, поэтому мы будем использовать именно его.

После создания страницы в интерфейсе стандартного редактора WordPress кликните по кнопке «Редактировать в Elementor».

Интерфейс выглядит так:

Основную часть экрана занимает область редактирования.

Здесь вы будете добавлять различные блоки и элементы.

Внизу справа находится Навигатор — окно, в котором отображаются все добавленные элементы. С помощью Навигатора вы можете просматривать структуру блоков на странице. Также в нем удобно быстро менять порядок элементов — методом drag-and-drop перемещаются секции, колонки и виджеты.

Если окно Навигатора скрыто (или вы закрыли его самостоятельно), откройте его с помощью кнопки на панели внизу слева.

А так окно Навигатора выглядит, когда на странице уже есть блоки:

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

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

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

Также можно сохранить черновик страницы или страницу как шаблон.

Чтобы посмотреть, как выглядит страница на сайте, кликните по пиктограмме глаза («Просмотреть изменения»).

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

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

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

На вкладке настроек (вы попадаете на нее при нажатии на пиктограмму шестеренки) можно:

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

На вкладке «Стиль» можно добавить фон для всей страницы (сплошной или градиентный). А также настроить внутренние отступы от границ экрана (в пикселях, em или в %).

Установка cms

1. Запустить сайт в браузере.
2. На открывшейся стартовой странице нажать кнопку «Вперед».

3. Заполнить параметры соединения с БД. Наименование базы данных, имя пользователя и его пароль должны совпадать с теми, что были заданы на этапе создании базы. Для реквизита «Сервер базы данных» можно не менять значение по умолчанию — localhost. Рекомендуется заменить префикс «wp» на другой. Префикс должен состоять из букв латинского алфавита, а также цифр. По окончании заполнения реквизитов нажать кнопку «Отправить».
3. Заполнить параметры соединения с БД. Наименование базы данных, имя пользователя и его пароль должны совпадать с теми, что были заданы на этапе создании базы. Для реквизита «Сервер базы данных» можно не менять значение по умолчанию — localhost. Рекомендуется заменить префикс «wp» на другой. Префикс должен состоять из букв латинского алфавита, а также цифр. По окончании заполнения реквизитов нажать кнопку «Отправить».
4. Далее, если все поля были заполнены правильно, следует нажать кнопку «Запустить установку». В противном случае потребуется повторная настройка полей реквизитов подключения к базе.

Установка темы wordpress из официального каталога через сайт

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

1. Войти в административную панель WordPress.
2. Найти слева пункт меню Внешний вид, подпункт Темы. После нажатия вы увидите список предустановленных тем.
   
3. Чтобы установить тему с официального каталога WordPress необходимо нажать кнопку Добавить новую после чего появится список доступных для установки тем. Для удобства выбора можно воспользоваться фильтром характеристик. При наведении курсора на каждую тему появляется кнопка предпросмотра шаблона темы.
   
4. Для установки выбранной темы необходимо нажать кнопку Установить.
   
5. Когда процесс установки закончится необходимо применить шаблон темы на сайте нажав кнопку Активировать.
   

Установка темы wordpress через ftp

Установка темы WordPress через FTP реализуется посредством FTP клиента (например FileZilla) или файлового менеджера. Чтобы установить тему WordPress через FTP необходимо:

1. Распаковать скачанный архив с темой.
2. При помощи FTP клиента подключиться к хостинг аккаунту. Для этого необходимо в FTP клиенте ввести данные доступа вашего хостинг провайдера (хост, имя пользователя и пароль) и нажать кнопку Быстрое соединение.
3. В открывшемся списке файлов перейти в папку WordPress, где войти в папку wp-content. Предустановленные темы находятся в папке themes. Сюда и необходимо скопировать разархивированную тему.
4. После окончания копирования файлов войдите в административную панель сайта.
5. Найти слева пункт меню Внешний вид, подпункт Темы. После нажатия вы увидите список предустановленных тем среди которых должна быть загруженная вами тема.
6. Примените тему при помощи кнопки Активировать.

Установка через ftp

Установка WordPress через FTP отличается от установки через панель хостинга только тем, что файлы WordPress вы загружаете на хостинг не с помощью меню панели, а через FTP-клиент, например, FileZilla. После загрузки файлов шаги те же – перейти по адресу сайта и запустить процесс установки в появившемся приветственном окне CMS.

Если вы хоститесь у нас, и вам не удалось установить WordPress по этой инструкции – напишите в техподдержку, мы поможем.

Установка Opencart на хостинг

Перенос сайта WordPress на хостинг

Перенос сайта ModX на другой хостинг

Цветовая схема и типографика

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

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

Для этого в админке WordPress перейдите в Elementor → Настройки.

Снимите галочки с пунктов «Отключить цвета по умолчанию» и «Отключить шрифты по умолчанию». Затем сохраните изменения.

После этого в настройках Elementor вы сможете установить те цвета и шрифты по умолчанию, которые вам нужны.

Как это сделать?

Создайте новую страницу или откройте существующую в режиме «Редактировать в Elementor».

В панели управления кликните по гамбургер-меню (в левой верхней части экрана).

Кликните по пункту «Цвета по умолчанию».

Выберите подходящую цветовую палитру из доступных или настройте основные цвета вручную.

Затем нажмите «Готово».

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

Такую же процедуру следует проделать и со шрифтами. Вернитесь на предыдущий шаг и кликните по пункту «Стандартные шрифты».

Здесь вы можете выбрать шрифт и насыщенность для четырех текстовых элементов:

• основной заголовок;
• вторичный заголовок;
• основной текст;
• акцентный текст.

Сделайте необходимые настройки и жмите «Готово».

Шаг 2. приобретаем домен хостинг ssl

Теперь нужно выбрать хостинг и подключить к сайту SSL-сертификат.

Хостинг — услуга, которая предоставляет вам место на сервере и специальное программное обеспечение для управления сайтом. В этой статье мы рассмотрим виртуальный или shared-хостинг — самый распространённый вид хостинга, подходящий для большинства сайтов.

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

На предыдущем шаге вы нажали кнопку «Зарегистрировать», и у вас должен был открыться мастер заказа, в котором можно сразу же приобрести хостинг и SSL. 

Для хостинга мы выберем тариф Host-1, так как на старте он подойдёт для большинства сайтов. Если в дальнейшем вам потребуется больше ресурсов, можно в любой момент сменить тариф на более мощный.

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

Шрифты

Переходим к настройкам типографики.

Настройте правила отображения для всех текстовых элементов: основного текста, заголовков, меню, логотипа, а также текста в «хлебных крошках» и кнопках.

Для каждого элемента вы можете указать:

• семейство шрифтов;
• стиль шрифта (стандартный, курсив или наклонный);
• начертание;
• размер шрифта;
• высоту строки;
• кернинг шрифта (интервал между буквами и символами);
• набор символов (выбирайте здесь «Cyrillic», чтобы использовать кириллические символы);
• выравнивание текста (слева, по центру, справа или по ширине).

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

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

• используйте 1-2 шрифта без засечек (не стоит настраивать отдельный шрифт для каждого элемента);
• размер текста должен быть удобным для чтения (минимум — 14 px);
• соотношение размера заголовка к основному тексту — от 1,5 до 1,9.