Как создать сайт на WordPress с нуля? Делаем сайт для заработка в интернете

Обсудить
Создание сайта на Wordpress

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

В конце статьи вы найдете видеоинструкцию по созданию сайта на Wordpress.

Почему WordPress и Timeweb?

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

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

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

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

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

Для начала подготовим хостинг, выбрав тарифный план, установив на сервере CMS и купив свободный домен.

Регистрируем хостинг

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

  • Заходим на официальный сайт Timeweb.
  • Затем кликаем по кнопке «Хостинг» в левом верхнем углу.

Главное меню на сайте Timeweb

  • Выбираем пункт «Виртуальный хостинг». Либо «Хостинг для CMS», если нас интересует только WordPress.

Раскрывающееся меню с выбором хостинга

  • Знакомимся с тарифами, выбираем подходящий и нажимаем на кнопку «Заказать».

Основные тарифы хостинга Timeweb

Дополнительные тарифы с WordPress на борту

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

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

Поле для ввода почты и имени

Также можно зарегистрировать данные юридического лица.

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

Главное окно админки

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

Оплачиваем услуги хостинга

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

  • Кликаем по иконке в виде кошелька в верхней части экрана.

Иконка с балансом на счету администратора

  • Затем указываем период, который хотим оплатить и дополнительные опции (если нужны).

Опции для оплаты

  • После этого выбираем удобный способ оплаты. Там есть все от дебетовой карты до Apple Pay. Выбрав удобный способ, жмем на кнопку «Перейти к оплате».

Выбор способа оплаты

  • В случае с картой просто указываем свои данные…

Окно оплаты картой

  • В случае с Apple Pay или Google Pay жмем на соответствующую клавишу и ждем инструкций от используемых браузеров.

Окно оплаты через Apple Pay

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

Забираем бесплатный домен

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

  • В боковой панели админки находим и открываем раздел «Бонусы и промокоды»

Пункт с промокодами

  • Затем кликаем на кнопку «Активировать» напротив надписи «Бесплатный домен в зоне рф…»

Меню активации промокодов

Тут же будет плашка для ввода промокодов со стороны.

Добавляем администратора домена

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

  • Открываем меню «Домены и поддомены» в боковом меню.

 Вход в меню с настройками домена

  • Жмем по ссылке «Администраторы доменов».

Настройка администраторов домена

  • Потом нажимаем на кнопку «Добавить администратора».

 Кнопка создания администратора

  • Вводим свои данные (ну или данные заказчика, который будет владеть сайтом).

 Интерфейс для добавления администратора.

  • Потом нажимаем на кнопку «Создать».

 Кнопка «Создать»

Должно получиться что-то такое. Я вводил данные лишь для примера.

Данные администратора в Timeweb

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

Регистрируем домен

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

  • Опять открываем меню «Домены и поддомены».

 Настройки в админке Timeweb

  • Кликаем по кнопке «Зарегистрировать домен».

Ссылка для регистрации домена

  • В появившемся текстовом поле вводим имя домена. Оно может быть любым. Главное, чтобы соответствовало нормам интернета и было свободным. Если что, Timeweb подскажет и предложит подходящие варианты. Выбрав имя и ознакомившись с ценой (даже с оплатой бонусами за первый год продление будет стоить денег), жмем на кнопку «Зарегистрировать»

Меню регистрации домена

  • Потом нажимаем на ссылку «…к основному сайту».

Выбор типа привязки домена

  • Выбираем вариант «Не привязывать».

Настройки привязки домена

  • И сохраняем эту настройку. Полдела сделано.

Сохранение настроек привязки

  • Убираем галочку с платного сертификата. Нам он пока не нужен.

Убираем платный сертификат

Регистрация сайта для заработка без сертификата

Должно быть так.

  • Потом нажимаем на фразу «Сумма к оплате», чтобы указать вариант оплаты бонусами (появится соответствующее всплывающее меню).

 Покупаем домен за бонусы

  • Перед нами появится список доменов. Кликаем по вновь созданному.

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

Проверка нового домена

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

Сообщение о том, что сайт еще не готов

Устанавливаем WordPress

Платформа для нашего сайта готова, осталось только установить систему управления WordPress.

  • Сначала открываем вкладку «Каталог CMS» в боковом меню.

 Быстрые настройки CMS

  • Выбираем там WordPress (она точно будет одной из первых).

CMS WordPress в Timeweb

  • Потом нажимаем на кнопку «Установить приложение».

Кнопка для установки CMS

  • В появившемся окошке выбираем домен, на который хотим установить WordPress (в моем случае будет тестовый).

CMS Выбор домена под WordPress

  • Затем жмем по кнопке «Начать установку». Процесс не должен занять много времени. Железо у Timeweb мощное.

 Устанавливаем WordPress

  • Фиксируем логин и пароль.

Данные для входа в админку

Их, если что, отправят на указанный при регистрации адрес.

  • Потом открываем меню «Сайты» в боковой панели.

 Настраиваем Сайты в Timeweb

  • Ищем там вновь созданный ресурс на базе WordPress и заходим туда.

Ссылки на сайты в TimeWeb

Перед вами должно появиться что-то вроде изображения ниже.

Сайт для заработка на базе WordPress

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

Настраиваем сайт на Wordpress

Теперь из административной панели Timeweb мы переползаем в админку WordPress и начинаем работать с ней.

Как зайти в админку Wordpress

Тут на самом деле все просто, хоть и не сразу очевидно. Чтобы попасть в админку:

  • Надо в адресную строку браузера ввести *название сайта без домена*/wp-admin. Такого рода ссылка приведет в админку WordPress.

 Вход в сайт для заработка

Вот как это может выглядеть.

  • Потом вводим реквизиты админки, которые нам отправили по почте.

Заходим в админку

Настраиваем внешний вид админки

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

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

 Настройки консоли WP

  • Потом открываем настройки экрана.

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

  • Убираем галочки везде, кроме пункта «На виду». Он пригодится.

 Консоль WordPress

Будет как-то так. Чистенько и не слишком пугающе.

Консоль WordPress

Устанавливаем свежую версию WordPress

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

  • Нажимаем на ссылку «Пожалуйста, обновитесь» в верхней части экрана.

 Кнопка для обновления WP

  • Потом ищем большую синюю кнопку «Обновить сейчас» и кликаем по ней.

 Переход к обновлениям CMS

  • Через несколько секунд, когда на экране загорится стартовая страница WP, переходим в меню «Консоль» в левом верхнем углу.

 Переход в консоль CMS

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

 Панель с обновлениями WordPress

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

 Доступ с обновлениями WordPress

  • Выбираем плагины и темы, которые хотим обновить, поставив напротив них галочки.

 Обновление для плагинов CMS

  • Потом нажимаем на кнопку «Обновить…»

 Кнопка для обновления плагинов WordPress

Больше никакие обновления не нужны. Теперь вы знаете, как установить свежие версии дополнений в свою CMS.

Удаляем ненужные темы

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

  • Сначала наводим курсор на меню «Внешний вид».

 Вход в настройки внешнего вида WordPress

  • Потом переходим в подменю «Темы».

Вход в меню с настройками внешнего вида

  • Кликаем по теме, которую хотим стереть.

Доступные темы в WP

  • Нажимаем на кнопку «Удалить» в правом нижнем углу.

Кнопка удаления тем в WP

  • И еще раз подтверждаем, что хотим это сделать, но уже в браузере.

Кнопка удаления тем в WP в браузере

Повторяем это, пока не сотрем все ненужные темы (по сути, все, кроме одной).

Заказываем SSL-сертификат

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

  • Возвращаемся в панель управления Timeweb и открываем меню «SSL-сертификаты».

Настройки SSL в Timeweb

  • Затем кликаем по ссылке «Заказать».

Кнопка заказа нового сертификата

  • Выбираем бесплатный сертификат.

Выбор сертификата безопасности для сайта

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

  • А потом выбираем домен, которому он достанется.

 Выбор домена для сертификата в WordPress

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

Устанавливаем тему 

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

  • Переходим в раздел с темами, как мы это уже делали ранее.

Раздел с темами

Раздел с темами оформления

  • Кликаем по кнопке «Добавить».

 Кнопка добавления новых тем в WP

  • Оказавшись в библиотеке тем, ищем поисковую строку.

Поиск новых тем для WP

  • Вводим в нее слово Astra.

Поисковой запрос в темах для WP

  • Ищем ту самую тему и нажимаем на кнопку «Установить».

Устанавливаем тему в WordPress

  • А потом еще и активируем.

Тема для WordPress

  • Ну и нажимаем на ссылку «Перейти на сайт», чтобы убедиться, что тема установилась и активировалась.

Ссылка для перехода на сайт для заработка

Сайт для заработка на базе WordPress

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

Устанавливаем плагин Really Simple SSL

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

  • Жмем на кнопку WordPress в панели управления CMS.

Тулбар WordPress

  • Переходим в консоль.

Переход в консоль WordPress

  • Выбираем подпункт «Добавить новый» в меню «Плагины».

Меню с плагинами WP

  • Ищем в открывшемся окне поисковое поле и вводим туда название плагина Really Simple SSL.

Поиск плагина SSL

Поисковая выдача для плагина SSL

Вот так он называется.

  • Потом нажимаем на кнопку «Установить».

Установка плагина для SSL

  • Ну и активируем.

Активация плагина для SSL

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

Как работать с сайтом

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

Добавляем статью в свой блог

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

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

Добавляем контент на сайт для заработка

  • Закрываем обучалку с основной информацией о редакторе WordPress (мы все сейчас будем подробно разбирать).

Кнопка, закрывающая обучение

  • Тут все интуитивно понятно, прописываем заголовок вверху и основной текст внизу.

Выбор заголовка и текста для статьи

Вот как это может выглядеть.

Вариант оформления контента

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

Кнопка добавления материалов в статью

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

Дополнительные опции

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

Управление текстовым блоком в WP

Добавляем фото на сайт

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

  • Снова нажимаем на плюсик.

Клавиша добавления контента в WordPress

  • Среди предложенных вариантов выбираем «Изображение».

Добавление изображений в статью WP

  • В появившемся окошке нажимаем на кнопку «Загрузить».

Загрузка изображений в статью

  • Выделяем картинку и нажимаем «Выбрать» (ну или ОК, зависит от системы и браузера).

Выбор картинок в браузере

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

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

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

Дополнительные опции для работы с картинками

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

Дополнительные варианты для работы с картинками

Добавляем другие виды контента

Процедура почти такая же. Я просто пробегусь по некоторым типам контента.

Галерея

Галерея — серия картинок, объединенных в один блок.

  • Выбираем соотвествующий пункт в меню.

 Кнопка для добавления галереи

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

Интерфейс для выбора изображений

Обложка

Обложка — это фон для текста. 

  • Выбираем пункт «Обложка», прежде нажав на плюсик.

Кнопка добавления обложки

  • Нажимаем кнопку «Загрузить», чтобы сделать обложку уникальной.

Кнопка для загрузки обложек

  • Выбираем картинку, которая станет обложкой.

 Выбор картинки обложки

Цитата

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

  • Кликаем по плюсу и добавляем блок «Цитата».

Кнопка добавления цитаты

  • Вписываем текст, который будет выделен цитатой.

 Текст цитаты в WP

Заглавное изображение

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

  • Открываем пункт меню «Изображение записи» в правой части экрана.

Кнопка добавления изображения записи

  • Потом нажимаем на кнопку «Установить изображение записи».

Кнопка установки изображения записи

  • Загружаем подходящую картинку.

Кнопка для загрузки изображения записи

  • Потом выбираем ее в библиотеке WordPress и устанавливаем в качестве основной.

Выбор картинки в библиотеке

При желании ее можно отредактировать. Уменьшить размер или перевернуть прямо в CMS.

  • Снова открываем то же меню и кликаем по нашей обложке.

 Меню управления обложками в WordPress

  • Выбираем пункт «Редактировать».

Кнопка редактирования обложек в WP

  • Редактируем картинку с помощью инструментов, доступных выше.

Инструменты для редактирования обложек

  • А потом сохраняем.

 Кнопка для сохранения изменений обложки

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

Публикуем нашу статью

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

  • В редакторе статьи нажимаем на кнопку «Опубликовать».

 Кнопка публикации статьи на сайте для заработка

  • Потом кликаем по ссылку «Посмотреть запись».

Переход к просмотру статьи

И на этом все. Статья опубликована. Теперь ее смогут увидеть все посетители сайта.

Готовая статья на сайте для заработка

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

 Опубликованная статья на главной странице сайта

Редактируем разметку

Теперь покажу, как можно изменить внешний вид сайта. Покажу это на примере изменения разметки.

  • Для начала нажимаем на кнопку «Настроить» в верхнем левом углу. Она отправит нас в режим редактирования внешнего вида страницы.

Редактирование разметки сайта

  • Выбираем вкладку «Общие» в боковой панели.

Общие настройки внешнего вида сайта для заработка

  • Потом вкладку «Контейнер».

Вкладка Контейнер в настройках

  • Затем кликаем по блоку под словом «Разметка».

Блок настройки разметки

  • Выбираем третий вариант, чтобы контент на сайте занял больше пространства, но без перебора.

Кнопка изменения дизайна разметки

Так сайт будет выглядеть более симпатично.

Ищем и обрабатываем изображения

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

  • Заходим на сайт Unsplash.

Главная страница Unsplash

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

Результаты поиска на сайте Unsplash

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

Загрузка изображений с Unsplash

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

  • Заходим на сайт Tinypng и на главную страницу перетаскиваем картинки, которые хотим использовать в статье.

Сайт для компресса картинок

  • Ждем, пока завершится процесс компрессии и нажимаем на кнопку Download All.

Кнопка загрузки компрессированных изображений

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

Настраиваем рубрики, страницы и меню WP

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

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

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

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

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

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

  • Придумываем заголовок и пишем текст.

Заголовок для статичной страницы

  • И потом жмем «Опубликовать».

Кнопка публикации статичной страницы

После этого мы получим ссылку на новую страницу. 

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

Страница в меню в WordPress

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

Страницы в WordPress

Создаем рубрики

Рубрики — это подразделы для статей. Они нужны, чтобы пользователь мог ориентироваться на сайте быстрее. Объясню на примере: представьте, что ваш блог посвящен разного рода электронике. Пишете буквально обо всем. Но люди к вам приходят читать не обо всем, а, например, только об Айфонах. Тогда можно создать рубрику Apple. А внутри нее еще и рубрику «Айфон». Получится, что человек, посетивший страницу, сможет сразу перейти к статьям, посвященным этому гаджету. Быстро и просто, без пролистывания десятков неинтересных статей.

  • Наводим курсор на пункт «Записи», потом выбираем подпункт «Рубрики».

Пункт создания рубрик

Далее надо задать параметры для рубрики.

  1. Даем любое имя (зависит от того, о чем пишете у себя в блоге).

  2. Указываем ярлык (это текст для ссылок).

  3. Выбираем родительскую рубрику (это пригодится, когда будем создавать подрубрики).

  4. Коротенькое описание, чтобы понимать, о чем тут вообще идет речь.

  5. Пишем описание и нажимаем на кнопку «Добавить новую рубрику».

Добавление новой рубрики в WP

Все рубрики появятся справа.

Список рубрик

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

Управление рубриками в WordPress

Давайте сделаем подрубрику iPhone, чтобы было понятно, как это работает.

  • Вводим название, ярлык и указываем родительскую рубрику (у нас это Apple, естественно).

Настройка родительских рубрик

Затем можно изменить ярлык и название.

Параметры ярлыков в рубриках

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

  • Открываем список записей.

Список записей в CMS

  • Кликаем по кнопке «Свойства» под статьей, рубрику которой хотим поменять.

Настройки статей в WP

  • Ставим галочку напротив нужной рубрики.

Меняем параметры рубрики

  • Потом нажимаем «Обновить».

Обновление рубрик

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

Измененные рубрики

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

Создаем меню

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

  • Наводим курсор на пункт «Внешний вид» и выбираем подпункт «Меню».

Отстройка меню в WP

  • Вводим название будущего меню и создаем его.

Ввод названия нового меню

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

Выбор страниц для меню

  • Потом то же самое делаем с рубриками.

Выбор рубрик для меню

  • Не забываем это все добавить во вновь созданное меню.

Кнопка добавления изменения в меню

  • А потом нажимаем «Сохранить меню».

Кнопка сохранения меню

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

Настройки подменю

  • Снова идем в настройки нашего меню и слегка сдвигаем рубрику iPhone под рубрику Apple (тянем мышью). 

Настройка дизайна меню

Логично и красиво. Ну и куча свободного места появилась на главной странице.

Измененное меню на сайте

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

Меняем параметры WordPress

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

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

Главное меню в WordPress

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

  1. Поменять название.
  2. Сделать уникальное описание.
  3. Указать корректный адрес электронной почты.
  4. Указать язык.
  5. Выставить часовой пояс.
  6. Настроить формат времени.

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

Сохранение настроек WP

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

Главные параметры WordPress

Сохраняем изменения и переходим к теме.

Настраиваем тему Astra

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

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

Первичные настройки Astra

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

Настройка меню Astra

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

Вариант мобильной верстки

Общие настройки

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

Общие настройки темы Astra

Типографика

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

Базовые параметры шрифтов

Для заголовков во второй типографике есть точно такие же настройки. Причем для каждого типа заголовка и подзаголовка (а их много) свои.

Базовые параметры подзаголовков

На скриншоте видны «Подзаголовок 2» и «Подзаголовок 4».

Цвета

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

Отстройка цветов на главной

Если что, WordPress предупредит, когда вы переборщите и текст на вашем сайте станет откровенно нечитаемым (а люди придут его читать). Ориентируйтесь на мнение WP, если хотите, чтобы посетителям было приятно находиться на странице.

 Плохое сочетание цветов для сайта для заработка

Можно сделать так, если хотите погубить визитеров.

Контейнер

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

Кнопки

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

Дизайн кнопок в WP

Шапка

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

Айдентика сайта

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

  • Просто нажимаем «Выбрать Логотип» и загружаем подходящую картинку.

Выбор картинки для логотипа

  • Нажимаем «Загрузить файлы».

Интерфейс для загрузки картинок

  • А потом «Выберите файлы».

Выбор файлов для загрузки картинок

И все. Потом можно подкрутить ширину.

Настройки параметров айдентики

Кошка с копибарой тоже подойдут, если их красиво нарисовать.

Во-вторых, фавиконка. Это значок сайта, который видно в поисковике и на вкладках браузера.

Добавление логотипа сайта

  • Нажимаем «Загрузить файлы».

Клавиша загрузки лого

  • Потом «Выберите файлы».

Выбор файла для фавиконки

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

Вариант фавиконки

Основные шапка и меню

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

Настройки основной шапки

У меня параметров побольше. Можно тонко настроить визуальную репрезентацию меню, так сказать.

Настройки основного меню в Astra

Хлебные крошки

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

Внешний вид хлебных крошек

Блог

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

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

Другой вариант оформления блога

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

Вариант оформления тела статьи

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

Сайдбар

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

Настройки сайдбара WP

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

Футер

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

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

Вы можете поступить иначе и встроить туда виджеты. Причем виджетом может выступать что угодно. Контент с других сайтов, картинки, видео, песни, мини-приложения, ссылки, куски других страниц. Если ввести в Google что-то вроде «Виджеты для WordPress», то получите выдачу с сотнями сторонних виджетов. Многие могут оказаться действительно полезными, но настраиваются они не здесь. Тут только включаются.

Для этого надо сделать следующее:

  • Выбрать разметку справа.

Вариант разметки с виджетами

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

Пространство под виджеты

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

Иной пример оформления

А можно просто написать «Привет».

Пример оформления футера

Меню

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

Виджеты

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

  • Выбираем область для виджетов. Можно любую.

Область под виджеты

  • Потом нажимаем на кнопку «Добавить виджет».

Кнопка добавления виджетов

  • Выбираем виджет, который хотим добавить.

Выбор виджетов

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

Виджеты в теме Astra

Настройки главной страницы

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

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

Дополнительные настройки главной страницы

Дополнительные стили

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

Продвинутые настройки темы

Настройки страниц с помощью плагина Elementor

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

  • Открываем меню плагинов в боковой панели и выбираем пункт «Добавить новый».

Добавление нового плагина

  • Ищем плагин Elementor, устанавливаем и активируем.

Поиск нужного плагина

  • Потом нажимаем на кнопку «Добавить» и выбираем вариант «Страницу».

Ссылка для установки плагина

  • Ищем вверху синюю кнопку «Редактировать в Elementor» и нажимаем на нее.

Запускаем дополнение Elementor

  • Кликаем на «Начать».

Открываем Elementor

  • Пропускаем обучение и переходим к регистрации в сервисе Elementor, чтобы подключить свой WordPress к нему.

Окно регистрации в Elementor

Появится основной интерфейс Elementor. То есть конструктор страниц. Сбоку будут элементы, которые можно перетащить на свой сайт. С помощью них можно быстро построить необходимый ресурс. Но можно взять и шаблон.

Базовый интерфейс Elementor

  • Кликаем по иконке в виде папки в правой части окна.

Основные органы управления Elementor

  • Выбираем шаблон. Можно любой доступной в бесплатной версии.

Выбор шаблонов в плагине

  • Потом нажимаем на кнопку «Вставить».

Вставка страницы из Elementor в WordPress

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

Готовая страница из ElementorМожно добавить не целую страницу, а отдельные куски. Допустим, если вам нужна FAQ-секция или кусок с информацией о команде, работающей над сайтом.

Отдельные куски в списке шаблонов

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

Отдельные блоки в списке шаблонов

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

Подключаем к своему сайту рекламу

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

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

Находим партнерскую программу

Это первая и, на самом деле, самая сложная часть подключения рекламы. Нужно найти партнерскую программу. Для этого придется зарегистрироваться в сервисе наподобие AdSense или Admitad. Второй вариант вполне ничего. Там есть партнерские программы от М-Видео, Wargaming, Связного и Timeweb. Можно подключить их баннеры. Главное, пройти модерацию. Ваш сайт проверят и дадут возможность сотрудничать с компаниям. Вы начнете приводить к ним новых посетителей, а они вам за это предложат небольшое (или очень большое) вознаграждение.

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

Устанавливаем Ad Inserter

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

  • Открываем меню плагины и выбираем пункт «Добавить новый».

Поиск нового плагина

  • Вписываем в поисковое поле слово Ad Inserter.
  • Потом нажимаем «Установить» рядом с названием плагина.

Поиск новых плагинов

  • Потом нажимаем на кнопку «Активировать».

Клавиша активации плагинов

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

Подключаем рекламу к сайту

Начинаем встраивание баннеров.

  • Открываем настройки WordPress и выбираем там Ad Inserter.

Настройки Ad Inserter

  • Выбираем один из доступных 16 блоков с будущей рекламой.

Интерфейс Ad Inserter

Вот как можно выглядеть код с рекламой.

Код рекламы

  • Ставим галочки на тех секциях сайта, в которые мы хотим встроить рекламу.

Настройка рекламы сайта

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

Параметры виджетов в меню WordPress

Здесь будет три секции:

  1. Установленные виджеты.
  2. Элементы сайдбара.
  3. Виджеты в футере.

Секции под рекламу

  • Мы перетаскивает виджет Ad Inserter в панель «Основной сайдбар».

Добавление рекламы в сайдбар

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

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

Пример рекламы

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

Не используйте такую гигантскую рекламу никогда. Это кошмар.

Еще реклама

  • Еще закинем рекламу в футер. Пусть будет.

Добавление рекламы в подвал

  • Укажем расположение рекламы в других участках сайта.

Выбор расположения рекламы

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

Добавление опции Sticky

Вот как это выглядит в динамике.

Sticky в динамике

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

Интерфейс Ad Inserter

Вот одна из возможных позиций.

Вариант позиционирования рекламы

Оно настраивается вот в этом меню.

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

Вот какие варианты доступны при настройке в Ad Inserter

Варианты настройки позиционирования рекламы

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

Разыскиваем контент для сайта

Чтобы зарабатывать деньги с партнерских программ, нужно привлекать большую аудиторию. А чтобы привлечь аудиторию, нужно сделать сайт, который ее заинтересует. Для этого нужен контент. Хороший во всех смыслах. Грамотный. Тот, который интересно читать. И тот, который соответствует техническим требованиям поисковиков.

Такой можно писать самому. Или можно воспользоваться услугами копирайтеров.

Где искать статьи для блога?

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

Text.ru — относительно популярная площадка. Тут много людей и бесплатные инструменты для проверки текстов.

Копирайтеры на Text.ru

Вот как выглядит список востребованных авторов на Text.ru.

Рерайтеры на Text.ru

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

Главная страница Advego

eTXT — наверное, самая масштабная площадка в РФ. Можно найти сотрудников по самым разным критериям. Пользовательская база реально очень большая.

Главная страница eTXT

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

Настраиваем аналитику

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

Подключаем Яндекс.Метрику

Нам понадобится очередной плагин.

  • Открываем меню «Плагины» и нажимаем на «Добавить новый».

Скачка новых плагинов

  • Ищем Яндекс.Метрику и скачивает соотвествующий счетчик.

Закачка новых плагинов Яндекс

  • Потом открываем настройки установленного плагина.

Настройки Яндекс.Метрики

  • Видим пустое поле. Заходим на сайт Яндекс.Метрики, регистрируем аккаунт.

Где взять счетчик Метрики?

Теперь нам нужен код для сбора информации о посетителях.

Подключение счетчика

  • Затем нажимаем на кнопку «Добавить счетчик».

Добавление счетчика Яндекса

  • Вводим название сайта, указываем его адрес, врубаем «Вебвизор» и соглашаемся с условиями использования.

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

  • Потом создаем счетчик.

Параметры счетчика

  • Копируем код со страницы Яндекс.Метрики.
  • Вставляем его в пустое окно плагина и сохраняем.

Настройка плагина

Готово. Теперь на сайте Яндекс.Метрики можно посмотреть всю информацию о вашей аудитории. Очень полезно для внесения изменений в работу сайта и адаптации под нужды клиентов. Это позволит нарастить прибыль.

Заключение

На этом, пожалуй, все. Мы сделали сайт на Worpress, оформили его. Все проверили. Сделали безопасным. Настроили аналитику. Подключили рекламу, чтобы получать деньги. Что еще нужно? Получше разобраться в SEO и нанять хороших копирайтеров. Тогда успех обеспечен. 

Видеоинструкция

Комментарии