WordPress с нуля: полное руководство для новичков по установке и настройке

Как создать сайт на WordPress с нуля: пошаговая инструкция

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

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

Почему WordPress и Timeweb?

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

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

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

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

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

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

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

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

• Выбираем пункт «Виртуальный хостинг». 

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

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

Но еще проще завести тариф с установленным WordPress и сразу переходить к шагу «Настраиваем сайт».

• Потом регистрируем новую учетную запись. Указываем имя и адрес электронной почты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Выбираем там WordPress.

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

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

• Затем жмем по кнопке «Начать установку». Процесс займет несколько секунд.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Галерея

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

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

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

Обложка

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

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

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

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

Цитата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создаем меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

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

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

Цвета

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

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

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

Контейнер

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

Кнопки

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

Шапка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Блог

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

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

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

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

Сайдбар

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

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

Футер

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

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

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

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

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

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

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

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

Меню

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

Виджеты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Создание Сайта на WordPress: Пошаговое Руководство

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

Начинаем Путешествие по WordPress

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

1. Определяем Тематику Контента

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

Рекомендуем к прочтению наши статьи о различных типах сайтов (англ) и блогов.

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

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

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

Вам также следует определиться с целевой аудиторией: кому будет полезен ваш ресурс? Отталкиваясь от этого, подберите правильный формат, стиль и тон контента.

2. Выбор Доменного Имени

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

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

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

Если вы довольны выбранным именем, самое время проверить, доступно ли оно, и зарегистрировать его. Здесь, в Hostinger, вы можете приобрести домены с расширением .xyz, .online или .store менее чем за 1$, а домен .com — всего за 508₽.

3. Выбираем Хостинг

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

• Что вам нужно: сколько ресурсов понадобится вашему сайту, каков ваш план на следующие 12 месяцев и насколько большой он будет.
• Время безотказной работы. Важно, чтобы ваш сайт работал и работал стабильно 24/7/365. Убедитесь, что хостинг гарантирует это.
• Служба поддержки. Если всё-таки так случилось, что ваш сайт не работает или у вас возникли какие-либо проблемы, важно, чтобы вы могли обратиться в службу поддержки за помощью.
• Прост в использовании. Многие владельцы веб-сайтов не имеют опыта программирования. Панель управления должна быть удобной и простой в навигации.
• Доступность. Бюджет и затраты — не последнее, что играет роль при запуске сайта. Вы не хотите платить деньги за хостинг, который не отвечает вашим потребностям.

И немножко рекламы: если вы задумываетесь про хостинг в Hostinger, забегая на перёд, скажем, что вы получите всё, что мы перечислили выше. Мы предлагаем недорогой, но качественный хостинг, поддержку клиентов онлайн, 99.9% аптайма и многое другое.

Вот краткий обзор общих планов хостинга Hostinger:

Кроме того, мы предлагаем WordPress хостинг, тарифные планы которого по умолчанию оптимизированы под эту CMS.

4. Установка WordPress

Как же установить WordPress? Ещё одно преимущество хостинга Hostinger — это удобная установка WordPress всего в несколько кликов из панели управления. 

Вот как это происходит:

1. Зайдя в личный кабинет Hostinger, щёлкните значок Автоустановщика на панели инструментов.

2. Найдите кнопку WordPress и просто нажмите на неё.

3. Введите необходимые данные:

• URL — ваш зарегистрированный домен или адрес вашего сайта WordPress.
• Язык — выберите основной язык для WordPress.
• Имя администратора — имя пользователя, которое вы будете использовать для входа в панель управления WordPress.
• Пароль администратора — пароль, который вы должны ввести, чтобы войти в админку WordPress.
• Электронная почта администратора — введите активный адрес электронной почты, так как он будет использоваться для уведомлений и сброса пароля.
• Заголовок сайта — заголовок вашего сайта
• Тэглайн сайта — слоган или краткое описание того, о чём ваш сайт.

4. Нажмите на кнопку Установить.

5. Выбор Темы

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

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

Огромный плюс в WordPress — огромное количество тем на выбор.

Темы WordPress бывают платные и бесплатные. Среди популярных бесплатных тем WordPress — Zakra, Shapely и Flash.

В то время как Uncode, Divi и X являются одними из рекомендуемых платных тем.

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

Чтобы установить тему, просто войдите в свою панель управления WordPress и наведите курсор на вкладку “Внешний вид”. Выберите “Темы” и нажмите “Добавить новую”. Найдите нужную тему WordPress и наведите на неё курсор, затем нажмите кнопку “Установить”.

Подробное руководство вы можете найти в нашей статье о том, как установить темы WordPress.

6. Установка Плагинов

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

Вот некоторые из основных плагинов, с которых вы можете начать:

• WooCommerce — полезный плагин, с помощью которого вы можете превратить ваш сайт в интернет-магазин. Идеально подходит для тех, кто хочет продавать свои продукты или услуги через сайт WordPress.
• Yoast SEO — один из лучших плагинов для поисковой оптимизации (SEO). С его помощью, вы сможете публиковать более качественный, оптимизированный для поиска контент.
• W3 Total Cache ускорит загрузку вашего сайта на устройствах читателей при последующих посещениях.
• Keyy Two Factor Authentication — плагин для безопасности, защитит ваш сайт от несанкционированного доступа, запрашивает подтверждение личности через дополнительное устройство.

Как установить плагины:

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

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

Как только вы всё это сделаете, приступайте к запуску сайта.

Что дальше?

Вот видите, создание сайта на WordPress — не такой уж и сложный процесс! 

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

Также советуем прочитать нашу статью о том, как привлечь трафик на сайт.

Чтобы облегчить вашу работу по продвижению сайта WordPress, установите плагин Google Analytics.

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

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

Выводы

Теперь вы понимаете, как происходит создание сайта на WordPress и что это совсем не сложно! Самый трудоёмкий и кропотливый этап работы — это этап планирования самого процесса. Мы надеемся, что наше руководство поможет вам реализовать ваши идеи и в скором времени создать и запустить собственный сайт. Давайте ещё раз напомним, что вам предстоит сделать:

• Определится с тематикой контента на сайте: выберите нишу, сформулируйте свои цели и определите целевую аудиторию.
• Выбрать доменное имя. Придумайте короткое, простое и запоминающееся доменное имя.
• Выбор хостинга. Напомним, что Hostinger предлагает надёжный хостинг по доступной цене.
• Установка WordPress. WordPress можно установить через панель управления Hostinger всего несколькими щелчками мыши.
• Выбор темы. Создайте сайт по своему вкусу с помощью тем WordPress.
• Установка плагинов: расширьте функциональность вашего сайта с помощью плагинов WordPress.

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

Как создать сайт на WordPress с нуля

Итак, вы захотели иметь собственный сайт? Прекрасно. Если думаете, что без большого объема знаний и опыта у вас ничего не получится, то зря. Прочитав этот пошаговый план создания сайта на WordPress с нуля, вы сможете за 5 минут установить вполне работоспособный веб-ресурс на самой популярной CMS (система управления, движок) в мире.

Причины популярности WordPress

Новички и профессионалы предпочитают выбирать WordPress (сокр. WP), потому что:

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

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

Регистрация хостинга и домена перед созданием сайта на WordPress

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

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

Рекомендации по выбору хостинга и домена:

1. Хостинг желательно выбирать в том регионе, где планируют продвижение. То есть если сайт для россиян, то физические сервера должны быть в России, из-за чего связь будет лучше, и все страницы будут быстрее грузиться.
2. При регистрации домена стараются выбирать такое имя, которое больше всего соответствует тематике сайта. Придумав название, смотрят, или оно свободно. Если да, регистрируют, если нет, то система обычно предлагает схожие названия. К примеру, если сайт о Форекс брокерах, то хорошее имя для него brokers-fx.ru. Если о туризме, то, например, tourizmania.com. Ну, и в таком духе. Желательно, чтобы домен не был очень длинным.
3. Как показывает статистика, люди обычно доверяют адресам с понятной доменной зоной – это буквы, стоящие непосредственно после имени, т. е. различные: «.com», «.ru», «.ua», «.by», «.net», «.org».

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

Хостинг бывает платный и бесплатный:

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

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

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

Новички могут для начала установить CMS WordPress к себе на компьютер после создания локального сервера Wamp или инсталляции приложения Instant WP. Это позволит поиграться с сайтом, изменяя внешний вид, ковыряясь в файлах CSS, правя программный код и пробуя себя в разработке плагинов, тем и пр. Но в рамках этого гайда мы рассмотрим установку сразу на хостинг. Кстати, некоторые компании могут сразу автоматически поставить вам на арендованный хостинг движок WP.

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

Скачав архив с файлами, его нужно распаковать и загрузить на сервер через FTP-соединение. Данные для подключения по FTP даст хостинг после оплаты, а для загрузки используют любой удобный менеджер. Чаще всего это FileZilla – легкий, удобный, бесплатный.

Загрузив файлы движка, открываем сайт в браузере по основному адресу и видим:

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

Сделав все это, жмем «Установить WordPress» и видим оповещение о том, что настройка завершена, и оказываемся в панели управления сайтом:

При этом по основному адресу открывается главная страница созданного сайта:

Чтобы с главной перейти в «Консоль» для настройки, жмем на название сайта вверху слева или вводим в адресную строку: доменное имя/wp-admin.

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

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

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

Как установить тему: пошаговая инструкция

Вариант первый – в «Консоли» выбираем раздел «Внешний вид» и ищем вкладку «Темы». По умолчанию там будет несколько вариантов, но если они не устраивают, то жмем «Добавить новую»:

Откроется каталог, в котором при помощи фильтров или строки поиска в шапке можно найти подходящие варианты:

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

Второй вариант установки состоит в том, чтобы скачать архив с темой на компьютер, а затем выбрать «Внешний вид» – «Темы» – «Загрузить тему»:

Третий вариант – распаковать скачанный архив и через FTP загрузить его на сервер в папку wp-content – themes.

Напоследок хочется добавить: если попалась привлекательная тема на английском языке, то это не проблема. При помощи специального софта наподобие Poedit или плагина Translate Loco темы легко переводятся на русский.

Топовую подборку профессиональных курсов по обучению созданию сайтов с нуля

Настраиваем основные функции сайта

Чтобы сайт работал корректно, для начала делаем два вида настроек:
– настраиваем CMS WordPress;
– настраиваем понравившуюся тему оформления.

Как настроить движок WP

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

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

Написание

Следующий раздел «Написание» также можно оставить без изменений. Тут можно задать настройки публикации через email, но этим обычно не пользуются. Обратите также внимание на «Сервисы обновления», где по умолчанию стоит http://rpc.pingomatic.com/. Это значит, что каждый раз после новой публикации, сайт будет отправлять уведомление о появлении новой новости, статьи или других материалов.

Чтение

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

Обсуждение

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

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

Из оставшихся разделов «Медиафайлы» и «Конфиденциальность» не трогаем, а в «Постоянных ссылках» выбираем, в каком виде будет формироваться ссылка.

В большинстве случаев тут выбирают «Название записи».

Как настроить установленную тему

У каждой темы могут быть свои настройки в зависимости от ее вида и функциональности. Чтобы приступить к настройке темы, выбираем «Внешний вид» – «Настроить». У нас сейчас активна тема Twenty Twenty, поэтому сразу откроется окно редактирования ее настроек:

Свойства сайта

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

Цвета

Здесь задают цвет фона для основных блоков шаблона. Если оттенки «По умолчанию» не устраивают, то жмем «Пользовательский» и выбираем нужные цвета.

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

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

Шаблон обложки

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

Фоновое изображение

Если хотим изменить фон в выбранном шаблоне, то заходим в этот раздел, жмем «Выбрать изображение» и загружает картинку, размер которой не должен превышать 2Mb. Такую подложку можно найти самому в интернете или заказать ее создание дизайнеру.

Меню

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

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

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

Виджеты

Здесь при необходимости добавляют нужные виджеты, расширяя функциональность темы:

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

Здесь можно настроить в теме то же самое, что мы рассматривали в настройке движка WordPress, раздел «Чтение». То есть тут задаем, что и как будет отображаться на главной странице – статическая страница или последние записи.

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

Если хотите отредактировать макет, добавив стили для CSS, то тема позволяет это сделать и описывает, как происходит добавление нового кода.

Выбираем и добавляем полезные плагины

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

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

1. Обеспечение безопасности.
2. Борьба со спамом в комментариях.
3. SEO-оптимизация.
4. Улучшение юзабилити и расширение функциональности.

Обеспечиваем безопасность

Угроза безопасности исходит с двух сторон:

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

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

Чтобы делать работоспособные копии сайта, обычно используют следующие проверенные плагины:

1. Backup and Restore WordPress.
2. WP Database Backup.
3. Back Up WordPress.

Для установки новых расширений придерживаемся следующей пошаговой инструкции:

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

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

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

Как не допустить спама в комментариях

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

1. Первый состоит в том, чтобы подключить внешнюю систему комментирования, которая сама борется со спамерами. Для этих целей в последнее время используют Disqus.
2. Второй заключается в установке специальных плагинов, значительно усложняющих автоматизацию спам-рассылок. Для таких целей подойдет плагин Antispam Bee, Akismet Anti-Spam. Первый из них более простой, да еще и на русском, так что новичкам лучше выбирать именно его.

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

Ставим плагины для SEO-оптимизации

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

1. Добавление и обновление XML-карты сайта.
2. Определение канонических страниц.
3. Добавление метатегов Title и Description.
4. Блокирование от индексации поисковыми алгоритмами дублей страниц.
5. Оформление микроразметки.

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

Плагины для создания карты

На роль первого из этих плагинов подойдет один из таких:

1. Simple WP Sitemap.
2. Google XML Sitemaps.
3. Sitemap by BestWebSoft.

Выбираем, устанавливаем любой из них. К примеру, XML Sitemaps. Сделав это, плагин самостоятельно создает карту, новичкам ничего делать не требуется. Если же вы опытный веб-мастер и сеошник, тогда можете на свой страх и риск вносить коррективы в работу плагина. С этой целью открываем меню «Настройки» и нажимаем внизу название плагина, чтобы открыть доступ к опциям.

Если решили изменять настройки плагина XML-Sitemap, то учитывайте следующее:

1. В «Приоритете статьи» можно указать желаемый метод определения приоритетности при индексировании контента.
2. В категории «Приоритеты» и «Изменить частоты» (Change Frequencies) можно указать поисковым алгоритмам самые, на ваш взгляд, приоритетные виды контента.
3. В «Дополнительных страницах» вы можете самостоятельно добавить в карту те адреса (урлы), что не добавились автоматом.

Плагины WordPress для SEO-оптимизатора

Уже долгое время при поиске хорошего SEO-плагина рассматривать приходится один из двух вариантов:

• Yoast SEO;
• All-in-One-SEO-Pack.

WordPress не содержит опций по добавлению метатегов, но указанные плагины полностью устраняют подобные препятствия на пути оптимизатора. Если выбрали All-in-One-SEO-Pack, то через него еще можно создать XML-карту сайта.

После активации All-in-One-SEO-Pack просмотрите следующие настройки. В первую очередь отключаем разметку Schema, потому что для разметки целесообразнее задействовать специальный плагин.

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

Через All-in-One-SEO-Pack можно подтвердить права на веб-ресурс, чтобы подключить его к инструментам веб-мастера в Yandex WebMaster и Google Search Console. Для этого получаем проверочный код и копируем его в соответствующие поля плагина:

Закончив настраивать все по своему усмотрению, внизу страницы находим и нажимаем кнопку «Обновить настройки».

Плагины для разметки

Чтобы сделать разметку, используют:

1. WPSSO Core/WPSSO JSON-LD. При помощи первого делают разметку OpenGraph, а при помощи второго Schema.org.
2. WP SEO Structured Data Schema позволяет использовать JSON-LD, делая разметку Schema.org формата Article, Review, Blog Posting.
3. Schema App Structured Data тоже позволяет добавлять разные виды разметки Schema.org.

Плагин WPSSO

Рассмотрим, как делается разметка на примере WPSSO Core и WPSSO JSON-LD. Устанавливаем плагины, не забываем их активировать, а затем находим в меню появившийся пункт SSO, наводим на него мышку и жмем Essential Settings.

Здесь указываем общую информацию, которая отображается в шапке, после чего переходим к разделу Schema Markup, где ищем два поля – Organization Logo и Organization Banner. Тут указываем, соответственно, адрес лого сайта и баннера.

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

Выбирая разметку, учитывайте:

• если на главную страничку будут выводить последние записи, то подойдет разметка Blog;
• если ставите статическую страницу, то используйте Website;
• для страничек с записями берем один из двух следующих видов разметки: Blog Posting или Article.

Разметка Blog Posting подходит для небольших заметок, а вот Article лучше для длинных информационных статей, гайдов.

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

Плагин WP SEO Structured Data Schema

Если планируете регулярно добавлять к себе на сайт разнообразный контент (маленькие заметки, свежие новости, большие обзоры), то в таких ситуациях желательно подбирать для отдельных видов материалов свою разметку, и для этих целей лучше использовать плагин WP SEO Structured Data Schema.

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

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

1. При каждом добавлении новой записи придется вручную указывать структурирование и вид разметки.
2. Плагин поддерживает много разных видов разметки, среди которых: Aggregate Ratings, Review. В WPSSO, к примеру, такого функционала нет.

Улучшаем удобство пользования сайтом и расширяем функциональность

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

К примеру, вы делаете на движке WordPress интернет-магазин. Значит, вам понадобятся плагины для e-commerce. Выберите несколько популярных, сравните их функционал, протестируйте сами, чтобы в итоге оставить один наиболее подходящий именно вам. Далее проанализируйте систему навигации. Тут важно обеспечить пользователю простые и понятные пути, чтобы он понимал, где и что ему искать. В то же время чуть ли не на каждой странице полезно разместить блоки с ссылками на похожие или наиболее интересные материалы. Это задержит пользователя на сайте, что хорошо для ранжирования, т. к. Яндекс отслеживает поведение посетителей. Кроме того, вырастет вероятность, что пользователь выполнит какую-то конверсию.

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

– быстро связаться с владельцами сайта или его представителями;
– увидеть наиболее активных пользователей;
– не пропустить кнопку подписки и пр.

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

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

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

Вот как было до установки плагина:

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

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

• открываем настройки;
• жмем на Translitera;
• ставим галочки напротив соответствующих полей;
• жмем «Транслитерировать».

В обязательном порядке добавляем на все страницы кнопки всех популярных социальных сетей, чтобы пользователи могли делиться материалами сайта на своих страничках и в пабликах. Чтобы поставить кнопки, подойдет дополнение Head, Footer and Post Injections. При помощи этого плагина можно добить код сразу на каждую страничку сайта или на любую отдельно взятую.

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

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

Затем переходим в панель управления WordPress, открываем «Настройки» – Head and Footer», вкладка Posts и вставляем скопированный код с кнопками соцсетей в нужное место. На скрине ниже мы вставили код в блок «После контента»:

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

Делаем первые публикации и создаем страницы на сайте с движком WordPress

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

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

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

Создаем новую страничку

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

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

К примеру, чтобы добавить блок с картинкой, жмем на «+» и выбираем «Изображение» (Image).

Для блока с изображениями можно выбрать готовые или добавить новые стили отображения:

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

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

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

Создаем первую публикацию

Хотя рассмотренный плагин Gutenberg обладает рядом преимуществ, но при создании публикаций он проигрывает по своей функциональности ранее работавшему редактору WordPress. Поэтому рекомендуется скачать и активировать Classic Editor.

После этого для создания новой публикации переходим в раздел «Записи» и жмем на «Добавить новую»:

Затем выбираем рубрику. Если нужной нет, то переходим к созданию. И далее обращаем внимание на «Шаблон», который может быть разным в зависимости от типа записи.

Обратите внимание, что при добавлении контента в основное рабочее окно редактора, можно переключать вид отображения между вкладками «Визуально» и «Текст». Первая позволяет работать с контентом, как в обычном ворде, а если включить вторую, то появится отображение в HTML, что позволяет подправить ссылки, убрать мусорные теги, подкорректировать код мультимедийных объектов и т. д.

Закончив добавлять и редактировать контент, не забудьте прописать правильные, с точки зрения поисковой оптимизации, Title и Description, а затем жмите кнопку «Опубликовать». Все, с этого момента запись появится в свободном доступе, и если ничто не препятствует индексации, а сайт добавлен в поисковую систему Google и Яндекс, то после обработки нового контента роботами страница будет отображаться в выдаче поисковиков по релевантным запросам.

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

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

Создание темы WordPress

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

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

Ну что, погнали! 💪

Что будет в видеоуроке?

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

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

Для доступа к файлам вёрстки необходимо приобрести курс.

Сделаем первые шаги по натяжке этой вёрстки на WordPress, заменим статичные данные в HTML на динамичные при помощи таких функций WordPress, как wp_head(), wp_footer(), get_stylesheet_directory_uri(), get_stylesheet_uri(), bloginfo(), wp_get_document_title(), language_attributes(). Объясняю принцип действия каждой функции.

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

Cтартовые темы. Что это такое и для чего они нужны?

Когда мы создаёт тему с нуля, мы ручками создаёт директорию, в ней потом создаём два файла – index.php и style.css – смотрите следующий шаг.

Возможно стартовые темы придумали те люди, которые, так же как и я, не умеют создавать файлы на MacOS 😅

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

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

Тем не менее, если вдруг вы приноровитесь к использованию какой-либо стартовой темы в своей работе – круто, молодцы! Я ничего не имею против, к тому же самую популярную стартовую темы Underscores разработали ребята из Automattic (компания, которая стоит за WordPress.com). Если вы почувствовали некоторый эмоциональный подтекст в моих словах, это только потому что я встречал людей, которые считают, что разрабатывать нужно ТОЛЬКО на стартовых темах, и обучаться тоже на них.

Приступаем к созданию темы. Файлы index.php и style.css

Для начала создайте какую-нибудь папку в /wp-content/themes — это и будет ваша будущая тема, я например создал kurs (очень оригинально). Каждая тема должна содержать по крайней мере 2 файла — это index.php и style.css — создаём их внутри этой папки.

Если вы забыли/забили на style.css, то в админке во Внешний вид > Темы ожидайте такую ошибку:

Если же отсутствует файл index.php, то:

Тут WordPress ещё что-то болтает про дочерние темы, не обращайте внимания, вам про них ещё рано читать.

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

До тех пор, пока мы ещё не изучили другие файлы шаблона, index.php у нас будет отвечать за вывод любой страницы сайта, а style.css, понятное дело, содержать стили (хоть это и не обязательно), но главное, чтобы в файле style.css вы добавили метаданные и описание темы.

Параметры (метаданные) темы

Если вы не хотите, чтобы ваша тема так и отображалась в админке без названия и описания, давайте добавим немного информации в style.css, поместив её в комментарии CSS /* */.

/*
 * Theme name: Тема для курса
 * Author: Миша
 * Author URI: https://misha.agency
 * Version: 1.0
 */

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

Theme name

Название темы.

Description

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

Version

Версия темы, например 1.0

Author

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

Author URI

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

License

Если вы создаёте под WordPress, рекомендую почитать немного про лицензию GPL

License URI

А в этом параметре указывается ссылка на страницу с лицензией.

Text Domain

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

Tags

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

Template

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

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

Для того, чтобы в качестве изображения темы не отображался «фотошоповский фон», мы создадим файл screenshot.png и отправим его прямиком в папку с темой (рекомендуемое разрешение 1200px на 900px).

Что касается расширения файла, то сгодится и jpg и gif, и jpeg, но в официальной документации WP рекомендуется всё же использовать screenshot.png.

Вот что у меня получилось:

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

1. Добавить функцию wp_head() перед закрывающим тегом </head>,
2. Добавить функцию wp_footer() перед закрывающим тегом </body>.

Что-то типо этого:

<!DOCTYPE html>
<html>
	<head>
 
		<?php wp_head() ?>
	</head>
<body>
 
	<?php wp_footer() ?>
	</body>
</html>

Это обязательное условие для всех тем WordPress, благодаря этим функциям работают плагины (даже банально плагин для вставки кода Google Analytics на сайт), подключаются различные дополнительные CSS и JS в тему и так далее. Чуть более подробно описываю предназначение этих функций на видео.

functions.php

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

Также он сам может содержать какой-то дополнительный функционал, ну либо файлы, подключенные в него через include() / require().

Главное правило по functions.php — сам по себе файл не должен ничего выводить! 💀 То есть никогда не оставляем первую строку пустой! 👿

И никогда не обрываем PHP-код пустыми строками где-то посередине кода! 👿

Это очень распространённая ошибка. Очень!

Пока что можете создать пустой файл functions.php в папке с вашей темой.

Пример работы с functions.php. Что делать, если админ-панель наехала на вёрстку сайта?

После того, как мы вставили в наш шаблон функции wp_head() и wp_footer(), у нас появилась админ панель сверху сайта, которая налезла на вёрстку.

Такое случается практически всегда, когда в вашей вёрстке присутствуют фиксированные меню.

В видеоуроке я решил не заморачиваться и просто скрыл админ-панель при помощи этой строки кода в functions.php:

add_filter( 'show_admin_bar', '__return_false');

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

В этом случае нужно сделать некоторые небольшие изменения в CSS вёрстки, когда у нас фиксированное меню, оно имеет CSS-свойство top:0, верно?

• Высота админ панель для десктопа 32px, значит мы меняем упомянутое выше свойство на top:32px.
• Высота админ бара для мобайл (менее 782px) 46px, а значит меняем свойство меню на top:46px.

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

1. Добавьте к тегу <body> функцию body_class() примерно так: <body <?php body_class() ?>> – суть этой функции в том, что она добавляет различные CSS-классы в зависимости от того, зареган пользователь или нет, от того, на какой странице мы находимся и так далее.
2. Используйте появившийся класс в теге <body> – .admin-bar, для того, чтобы применять соответствующие стили только для ситуаций, когда админ бар отображается на сайте.

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

Что делать, если в процессе создания темы WP у вас всё сломалось и отображается белый экран?

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

1. Открываем файл wp-config.php, который лежит в корне вашей установки WordPress
2. Ищем там параметр WP_DEBUG и устанавливает его равным true (таким его и можно оставить до конца нашего курса).
3. После этого вместо вашего белого экрана у вас будет отображаться, какие ошибки возникли в процессе с указанием того, на какой строке и в каком файле находится ошибка в коде.
4. Исправляете и продолжаем 😁

Купить курс

3500 ₽

• 14 видеоуроков
• Доступ к теме курса с готовым кодом после каждого урока
• Уроки обновляются в соответствии с последними изменениями WordPress
• Доступ навсегда

  


>

    <название>  
    ">
    



      <заголовок>
          
 
  
          
 
  
      

         
  

  









<тело >