Сайт на WordPress


Александр Айвазов
Александр Айвазов

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


Содержание статьи

  1. Почему wordpress популярен
  2. С чего начинается сайт?
    1. Структура сайта “Из головы”
    2. Структура сайта на основе анализа конкурентов
  3. Хостинг и домен
    1. Регистрация хостигна и домена
  4. Типы Wordress
  5. Скачиваем WordPress
  6. Загружаем его на хостинг
  7. Создаём базу данных
  8. Удаляем пустой индексный файл
  9. Запускаем процесс установки Вордпресс
  10. Пишем название сайта и первичные данные
  11. Интерфейс админки
    1. Типы контента
    2. Создание страниц
    3. Создание записей
    4. Внешний вид и меню
    5. Настройки сайта
    6. Виджеты и плагины
  12. Темы WordPress
    1. Предустановленные
    2. Бесплатные
    3. Платные шаблоны для WordPress
  13. Редакторы контента
    1. Guttenberg
    2. Классический
    3. Конструктор WPBakery
    4. Конструктор Elementor
    5. Какой редактор выбрать для работы?
  14. Плагины
    1. Обязательные
      1. Yoast SEO
      2. Autoptimize
      3. Contact form 7 или Ninja Forms
      4. ReCaptcha
    2. Плагины под конкретные задачи
      1. Woocommerce
      2. Wpbakery
      3. Elementor
      4. Buddypress
      5. Masterstudy
      6. Loco translate
      7. WPML
  15. Установка сертификата безопасности
  16. Резюме

Для тех, кому лениво читать, эта статья существует в виде видео-урока


Почему wordpress популярен

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

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

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


Тема – готовый шаблон, который устанавливается прямо на вордпресс. Остаётся его наполнить и вперёд.

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


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


С чего начинается сайт?

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

Поэтому самый начальный этап — это размышления на тему о чем и как писать.

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

Есть два простых способа придумать структуру.

  1. Общечеловеческая логика
  2. Конкуренты как источник информации

Структура сайта “Из головы”

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

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

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

По стандарту — это “О компании, Наши услуги, Статьи и Контакты.

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

Поэтому тексты должны быть уникальными. Да и фотографии тоже. Правда, есть небольшие хитрости.

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

О том, как писать и фотографировать, в этой статье тоже не будем говорить. Сфокусируемся именно на создании сайта на вордпресс.


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

Есть еще один вариант создания структуры – это конкурентный анализ. Просто вводим в Яндекс или Google поисковый запрос, связанный с нашим видом деятельности. Просматриваем все сайты из топ-10 и выписываем в табличку, файлик или на листок бумаги пункты меню, которые есть на ресурсах конкурентов. А так же обращаем внимание на детали. Наличие тарифной сетки, способ подачи информации, присутствует ли галерея, отзывы, какая-либо инфографика.

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


Хостинг и домен

Второе, что нам нужно после наличия контента, — это хостинг и домен. 

Хостинг — это папка на сервере. Сервер подключён к интернету 24/7, за его работоспособностью следят компетентные люди. Именно поэтому на веб-ресурс и можно зайти в любой момент. 

А вот путь сайта, его адрес — это домен. 

Нам необходимо иметь и хостинг, и домен. 

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

Я рекомендую:

timeweb.ru

beget.ru


Регистрация хостинга и домена

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

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

1. Переходим на сайт timeweb.ru

Тарифы Timeweb

2. Выбираем самый младший тариф Year+ на 1 сайт. 

3. Нажимаем на кнопку “Заказать”

4. Переходим к форме регистрации, регистрируемся

Форма регистрации в Timeweb

Таймвеб как и другие хостинг-провайдеры предоставляет бесплатный пробный период от 10 до 30 дней. За это время можно протестировать качество услуг. Правда, некоторые возможности будут ограничены. Например, функция отправки писем может не работать. А она важна для получения заявок.

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

Панель управления хостингом у разных провайдеров выглядит по-разному. На скриншоте ПУ от Timeweb

Мы зарегистрировали хостинг, но ещё нам понадобится домен. 

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

Сделать это возможно в разделе “Домены и поддомены”.

Мы перейдем на страницу, где нас ждет пустое поле, куда мы и должны вписать желаемый домен. Если он свободен, то нам покажут зеленую галочку напротив адреса. Если нет, то предложат альтернативные варианты. Либо мы можем придумать что-то еще. И проверить снова. Далее остается нажать на кнопку “Заргеитрировать”

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

Итак, на следующей странице мы можем выбрать вариант с оплатой на 1 год (по умолчанию стоит 3). Отжимаем галочку “Защитить сайт с помощью…”. Мы будем получать SSL-сертификат, но бесплатный. Для учебных задач этого вполне достаточно. Но если вам придется создавать интернет-магазин или портал, где важно защитить персональные данные пользователей, то лучше купить более надежный SSL-сертификат.

Как видите сумма к оплате уменьшилась.

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

Отлично. Теперь мы можем Зарегистрировать домен. Нажимаем на кнопку “Зарегистрировать домен”.

Мы покупаем домен второго уровня. Звучит нелогично. Но все просто. Оказывается, домен первого уровня — это .ru или .com и тому подобное. 

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

# Информация о занятости домена поступает всем регистратора из общем новой службы, которая называется whois #

Регистрация домена происходит не мгновенно. Сначала он бронируется за вами, а потом информация о том, что такой адрес теперь существует и он закреплён за вами, должна уйти во все сервера мира. Это может занять от 3 до 24 часов. Согласитесь немного с учётом количество адресатов). 

Тем не менее, в абсолютном большинстве случаев, пользоваться доменом мы можем уже через 10-60 минут.

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


Типы WordPress

Вордпресс хоть и един, но бывает двух видов. 

  1. В виде свободно распространяемого программного обеспечения. 
  2. В виде онлайн-решения

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


Скачиваем WordPress

Вбиваем в поиске “скачать вордпресс”, либо следуем самостоятельно по адресу ru.wordpress.org

В верхнем правом углу видим кнопку “Получить wordpress”, нажимаем её, переходим на страницу скачивания. Находим кнопку “Скачать WordPress”. Абсолютно бесплатно получаем последнюю версию мощнейшего движка.

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


Загружаем вордпресс на хостинг

Возвращаемся в таймвеб. 

Залить архив можно тремя способами. 

  1. Через фтп-клиент
  2. Через таймвеб простым перетаскиванием архива 
  3. Через таймвеб через кнопку загрузить. 

Выбираем последние 2 способа, так как в данный момент это легче. 

Переходим в “Файловый менеджер”. У нас есть одна папка с названием “Public_html”. Сюда и будем заливать архив. На скриншоте представлены файлы уже внутри этой папки.

Файловый менеджер Timeweb

Как перенести вордпресс на хостинг? Технологии идут вперед. Поэтому просто перетаскиваем архив с wordpress в файловый менеджер. Так же как мы бы перетаскивали файлы на своем компе между папками.

Хостинг спросит следует ли распаковать архив после загрузки. Нажимаем “Да”. Это удобно и экономит время.

Переносим вордпресс на хостинг

Загрузка файлов займет какое-то время. Чем быстрее у вас скорость интернета на отдачу, тем быстрее.

Если все прошло хорошо, то в файловом менеджере появится папка WordPress.

После распаковки архива появилась папка WordPress

Сделаем один пируэт. Чтобы хостинг понимал лучше, где лежит сайт, и чтобы нам пришлось меньше его настраивать, переходим в папку WordPress. Нажимаем на верхнюю папку, скролим мышкой вниз, нажимаем кнопку Shift на клавиатуре, а затем – на последний файл. Тем самым, мы выберем все внутренние папки и файлы. К слову, все файлы будут отмечены желтым цветом.

Далее нажимаем на ссылку “Правка” и выбираем “Вырезать”. Возвращаемся на уровень выше в папку Public_html. “Правка” -> “Вставить”.

Колесико крутится, файлы скопировались.

Теперь удаляем папку “Wordpress”. Она нам больше не нужна.

А в нашем файловом менеджере примерно такая картина.

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


Создаем базу данных

Что ещё нужно для работы? Это база данных. Святая святых всех данных вашего сайта. Именно здесь хранится ваша база товаров, записи вашего блога, страниц и фотогалерей. 

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

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

Идём в раздел база данных. 

Нажимаем на ссылку “Создание новой базы данных”.

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

В поле пароль вписываем свой любимый от всех сайтов. Шучу. Лучше довериться хостинг-провайдеру и нажать на ссылку “Сгенерировать пароль”. Рекомендую так же сохранить все технические данные доступа в отдельный файл. И знать, где он лежит. А то будет очень обидно, если когда-то вы не сможете зайти в админку или на хостинг.

Создание базы данных для сайта WordPress.

К тому же, эти данные нам ещё пригодятся при установке WP (Вордпресс сокращенно). Все. База данных создана. Было несложно, верно? 


Удаляем пустой индексный файл

Теперь подготовимся к установке вордпресс. 

Идём в раздел “Файловый менеджер” в папку public_html. 

В ней находим файл index.htm и удаляем его (вероятно, на другом хостинге, если вы работаете не с Timeweb, его может не быть).

Как это сделать? Кликаем один раз на названием файла. Далее выбираем “Файл” и затем “Удалить”.

Удаляем индексный файл, если он по умолчанию создается на хстинге

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

В то же время, в иерархии файлов вордпресса index.html не является главным. Круг замыкается. И чтобы его разомкнуть, сделаем простое действие. Удаляем ненужный файл.


Запускаем процесс установки Вордпресс

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

Так выглядит страница установки Вордпресса, если мы сделали все правильно на предыдущих этапах.

Если ничего не происходит, то в конце добавляем /index.php.

Предположим, ваш адрес miumiumiu.ru. Переходите по этому адресу. Ничего не произошло? Тогда miumiumiu.ru/index.php.

В своем же примере я буду работать с доменом telenation.ru. Нажимаем кнопку “Вперёд”.

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

Страница установки WordPress. Настройки базы данных

Данные в полях “Имя базы данных” и “Имя пользователя” одинаковы. В моем случае это telentn_wowwow.

В поле “Пароль” я вписываю, тот” что сгенерировал Timeweb. Либо тот, который я придумал сам.

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

Вписываю значения для базы данных

При правильном заполнении мы должны перейти на страницу, где нам говорят, что все в порядке. Остается нажать на кнопку “Запустить установку”.

Нажимаем на кнопку “Запустить установку”

Пишем название сайта и первичные данные

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

Вводим названием сайта, имя пользователя, пароль и email администратора

Название сайта будет вашим Title. И соответственно эта информация будет выводиться в верхнем окне браузера и в поисковой выдаче. Если нужно получить вводную информацию об основах seo-продвижения, то рекомендую к прочтению эту статью.

Имя пользователя – это логин администратора.

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

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

Видимость для поисковых систем. Я прекомендую поставить галочку в этом поле. В этом случае поисковики не будут индексировать сайт. Рекомендую открыть его для индексации после того как он полностью или почти полностью готов. Так результаты SEO буду выше. Но об этом не в этой статье.

Нажимаем на заветную кнопку “Установить WordPress”. На следующей странице нам напишут, что все в порядке. Заходим в админку, используя наш логин и пароль.


Интерфейс админки

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

Интерфейс админки WordPress

Типы контента

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

А вторые – для статей, блога, новостей, публикаций.

У страниц могут быть главные страницы и вложенные в них. Например, “Услуги”. В них могут входить “Торты на заказ”, “Пироги”, “Пирожки”.

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

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

Для создания рубрики нужно перейти в меню “Записи” -> “Рубрики”

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

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

Если мы перейдем в раздел “Страницы”, то интерфейс будет немного отличаться. Здесь мы можем сразу создать страницу. И увидеть перечень уже существующих. По умолчанию WordPress создает “Пример страницы” и “Политику конфиденциальности” (кстати, говоря, она должна у вас быть по закону, если вы собираете персональные данные пользователей).

Раздел “Страницы” с перечнем всех созданных страниц

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

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

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

Структура будет такой:

  • Услуги (она же будет главной страницей)
  • О нас
  • Новости и акции
  • Оплата
  • Доставка
  • Контакты

Почти все перечисленное относится к типу контента “Страницы”, а “Новости и акции” по сути будут блоговым разделом. То есть относится к типу “Записи”.

Чтобы создать страницу, переходим в раздел “Страницы” и нажимаем на кнопку “Добавить новую” в верхней части.

Добавление новой страницы


Создание записей

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

Текст вбиваем прямо здесь, в браузере. Можно выбирать блоки: текст, заголовок, разделитесь, картинки, галерея, колонки и так далее. Или вставлять видео с Youtubе.


Внешний вид и меню

Настроить внешний вид темы, поменять цвета, шрифты, добавить виджеты, установить фон, а так же создать и отредактировать меню можно в разделе “Внешний вид”. Давайте создадим меню из одной созданной страницы и одной записи. Идем во “Внешний вид” и выбираем “Меню”.

В поле “Название меню” вписываем что-то а-ля “Main menu” (1). Нажимаем на галочку “Основное меню”, чтобы оно выводилось в основном для него месте, то есть в самом верху сайта (2). Нажимаем “Сохранить” (3).


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


Виджеты и плагины

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

Плагин – это небольшое расширение, решающее конкретную задачу. Задача может быть очень маленькой или очень большой.

Например, чтобы не сыпался спам, устанавливаем плагин от Google под названием Recaptcha. Чтобы сделать перевод сайта с английского на русский – используем Loco Translate. А чтобы превратить его в интернет-магазин, нам нужно WooCommerce.

Виджеты позволяют вывести какие-то блоки информации в специально созданные для этого места. Например, в сайдар (боковая панель на странице. Может быть слева или справа). Либо в подвал.

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

Ключевое в виджетах – их можно вывести только в специально отведенные для этого места.

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


Темы WordPress

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

Из коробки нам сразу доступны 3 бесплатные темы (или шаблона). Которые отлично подойдут для блога.


Предустановленные

Предустановленные бесплатные темы находятся в разделе “Внешний вид” -> “Темы”

Темы или шаблоны вордпресс

Темы называются по годам их выхода:

  1. Twenty nineteen (2019)
  2. Twenty twenty (2020)
  3. Twenty Twenty One (2021)

По умолчанию активна последняя (2021). Она содержит в себе все новшества и максимально связана с редактором контента Guttenberg ( о нем чуть ниже).

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

Активируем другую предустановленную тему Вордпресс

Посмотрите как изменился внешний, выйдя из админки.


Бесплатные

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

Множество классных и бесплатных тем можно найти на официальном сайте Вордпресса

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


Платные шаблоны можно купить на специальных сайтах. Их много. Достаточно поискать в Яндекс или Google. Но я порекомендую вот этот маркетплейс: themeforest.net. К недостаткам отнесту то, что все шаблоны англоязычные. Перевести их не сложно, но нужен небольшой опыт в этом вопросе.

Themeforest.net – маркетплейс со множеством платных тем для Вордпресс

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

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


Редакторы контента

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

Стандартные – это блочный редактор Guttenberg и классический редактор. Они бесплатны.

Сторонние – это WpBakery и Elementor. Они платны, но если вы купили шаблон, то могут входить в стоимость этого шаблона. Есть и другие, но выделять их не будем, поскольку они не столь известны.


Guttenberg

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

Если у вас статейный ресурс, то Guttenberg очень приятен, удобен и прост.

Стандартный редактор контента Guttenberg

Под блоками понимаются:

  1. Заголовки
  2. Текст
  3. Разделители
  4. Картинки
  5. Видео
  6. Галерея
  7. Форма обратной связи.

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

Из комбинаций блоков или из индивидуально настроенного блока создается “Мой блок”. То есть сохранить и использовать ровно в таком виде, в какой он вам нравится.

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


Классический

Классический редактор был раньше встроен в WordPress по умолчанию и был типичным WYSIWYG (What you see is what you get). Чем-то напоминал документ MS Word.

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

Перейдите в “Плагины”, затем “Добавить новый”, далее “Classic Editor”, чтобы выбрать классический редактор

Конструктор WPBakery

WPBakery не первый конструктор контента на Вордпресс. Но он первым получил очень широкую известность. Его принцип – это визуальное редактирование и создание блоков контента налету.

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

Идет 2 в 1. Как Backend Editor, то есть редактор как бы внутри админки. Выглядит вот так

Backend-версия редактора WpBakery

А еще есть Frontend-редактор. То есть изменение контента происходит непосредственно в браузере. Вот как выглядит

Frontend-версия редактора WPBakery

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


Конструктор Elementor

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

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

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


Какой редактор выбрать для работы?

Зависит от типа проекта. Если у вас блог, то выбирайте Guttenberg и классический редактор.

Если нужен имиджевый ресурс, то WPBakery и Elementor.


Плагины

Список обязательных и необязательных плагинов условен. Все зависит от проекта. Например, для интернет-магазина обязательным будет Woocommerce. Но его нет в моем списке среди обязательных. Почему?

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


Обязательные

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


Yoast SEO

Это плагин помогает настроить работу веб-ресурса согласно требованиям Google. Но я для Яндекс полезен. Помогает сделать карту сайта (в ней представлены ссылки на все страницы сайта, поэтому поисковикам легче его считывать).

Включает или выключает “хлебные крошки” (дополнительная навигация на странице. Обязательна для интернет-магазинов).

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

Помогает определить насколько читабелен текст на странице (для русского языка не очень хорошо работает).

Показывает плотность вхождения ключевого слова.

Он бесплатен, но есть и платная версия с более широким функционалом.


Autoptimize

Этот плагин – ускоритель. Его задача – сжать html, css и javacscript-коды. Перенести часть скриптов вниз страницы, чтобы они не мешали первичной загрузке.

А еще он сжимает картинки на страницах, делает их легче.

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


Contact form 7 или Ninja Forms

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

Именно поэтому сторонние плагины обрели популярность. Наиболее популярен Contact form 7. Я не мог его не упомянуть. Он прост и понятен. Но как по мне, он ужасно скучен и уродлив.

Поэтому я рекомендую Ninja Forms. Плагин создает красивые формы, которые можно настраивать. Поля могут идти в ряд или в строку (в Contact form 7 это делается только, если залезть в код).


ReCaptcha

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

Самое лучшее решение – это разработка Google. Наверняка, встречали на сайтах “Выберите все картинки, на которых есть горы”. Это и есть Recapthca.

Она существует в 2 версиях. Видимая и невидимая.

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


Плагины под конкретные задачи

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


woocommerce

Плагин позволяет развернуть полноценный интернет-магазин на Wordress. С его помощью мы управляем товарами, их описанием, остатками, выводим или скрываем товары, определяем их в категории, устанавливаем стоимость.


wpbakery

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


elementor

Еще один конструктор страниц, но с более приятным и понятным интерфейсом. Существует в бесплатной и платной версиях.


buddypress

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


Masterstudy

LMS-плагин. Что означает learn management system. Помогает создать полноценную онлайн-школу. Организовать контент в курсы, уроки. Есть функционал с тестами, домашними заданиями. Можно устанавливать доступ к отдельному курсу, набору курсов или доступ по членскому взносу (ежемесячная оплата с доступом ко всему контенту). Существует в бесплатной и платной версиях.


loco translate

Плагин позволяет перевести тему на любой язык. Бесплатен.


WPML

Помогает сделать перевод на несколько языков. Он платен. Лицензия за 79 долларов разрешает использовать его для 3 сайтов. Мой опыт подсказывает, что это единственное нормально работающее решение для создания мультиязычных сайтов.


Установка сертификата безопасности

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

Сейчас поисковики все чаще не пускают пользователей на сайт, где нет SSL. Его отсутствие так же негативно сказывается на позициях в выдаче, то есть на SEO.

К счастью, Timeweb предлагает и платные, и бесплатный варианты.

Переходим в панель управления хостингом в раздел “SSL-сертификаты”. А далее нажимаем на ссылку “Заказать”.

Получаем бесплатный SSL-сертификат в Timeweb

На следующей странице выбираем бесплатный сертификат Lets Encrypt (1).

Затем указываем домен, для которого заказываем его (2).

Выключаем его настройку за 50 рублей (3).

Соглашаемся на обработку данных (4).

На странице SSL-сертификатов поменяется статус. Появится название домена и информация заказе сертификата.

Спустя непродолжительное время статус поменяется на “Установлен”.

Теперь нам нужно указать серверу, чтобы он открывал сайт только с SSL-сертификатом, то есть в начале адреса должно всегда быть https. А если пользователь ввел вручную или перешел откуда-то по неправильной ссылке с http (без S на конце), чтобы его автоматом перенаправляло на https.

Сделать это нужно как в настройках сервера, так и в настройках сайта.

Переходим в раздел “Сайты”. Напротив “Основного сайта” нажимаем на знак шестеренки. Появится всплывающее окно, в котором нам нужно изменить версию php (поставить максимально последнюю).

Затем переключить на “вкл” напротив “Использовать безопасное соединение”.

Далее нажать на “Вкл” напротив “Перенаправлять людей с www.site.com на site.com” и кликнуть на кнопку “Сохранить”.

Настраиваем редиректы для https

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


Резюме

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

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

Любые вопросы, предложения, пожелания оставляйте через форму обратной связи внизу.

И да, я обучаю созданию сайтов на WordPress маркетологов, владельцев бизнеса, начинающих специалистов. Также в моем активе курсы по таргетированной рекламе. Обращайтесь и через какое-то время вы станете обладателем прикладных знаний. Удачи в делах!