Бесплатный фрагмент - Сайт на WordPress без программирования

Введение

Почему появилась эта книга

Добрый день, дорогой читатель. Меня зовут Ирина Никулина, моя история на прямую связана с темой книги. Я долгое время работала веб-дизайнером и делала сайты для своих клиентов таким образом: я разрабатывала дизайн, а нанятый программист делал заливку, установку и настройку темы WordPress. При этом стоимость нашей работы распределялась примерно так: 10—15% — стоимость дизайна сайта, 85—90% — стоимость работы программиста.

После того как цены сильно выросли, хорошие программисты значительно увеличили цену на свою работу. Многим моим клиентам цена на сайт в районе 150—200 т. р. показалась высокой (я живу на юге в небольшом городе, было это в 2024 г). Тогда я задумалась, как выйти из ситуации, ведь сайты все равно нужны людям. Стала предлагать сайты на конструкторе сайтов. Для одностраничников это был неплохой вариант. Но вот многие корпоративные сайты, в том числе сайты интернет-магазины и блоги оказались не функциональными для продвижения они уступали по СЕО сайтам на движках.

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

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

Что будет в книге кратко:

— как бесплатно скачать WordPress,

— как найти нормальный хостинг,

— как зарегистрировать домен,

— как залить WordPress на хостинг и создать базу данных (без программирования),

— как найти бесплатную тему дизайна или купить готовую СЕО-оптимизированную тему,

— как установить и настроить тему под свои задачи,

— как создать СЕО-статью или пост,

— как установить плагины,

— как продвигать сайт,

— как создать материалы для сайта,

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

Только практические знания, ничего лишнего, никакой воды!

Что такое WordPress

WordPress: движок, который построил большую часть сайтов в сети Интернет.

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

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

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

Знакомьтесь, ваш самый лучший движок в сети Интернет: WordPress.

Что такое WordPress

WordPress — это свободное (open-source) программное обеспечение, написанное на языке PHP и использующее базу данных MySQL. Это каркас, на который вы устанавливаете дизайнерскую тему и плагины, получая в итоге уникальный продукт (сайт), готовый к использованию. Другими словами это «движок» сайта, его основа и начало начал. Можно представить движок как здание без ремонта, но стены, крыша и фундамент уже созданы. Вам остаётся только сделать ремонт на свой вкус, покрасить стены, положить полы, вставить окна, двери, расставить мебель и т. д.

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

Главная философия WordPress — свобода публикации сайта. Его цель — дать возможность каждому человеку, независимо от уровня его технических навыков, создать свой сайт, управлять контентом (текстами, видео, картинками, каталогом товаров) и все это без необходимости изучать сложные коды PHP и JavaScript.

Краткая история WordPress: от блога до гиганта

История WordPress началось в 2003 году. WordPress тогда был ответвлением другого проекта. Программист Мэтт Мулленвег и разработчик Майк Литтл решили создать удобную платформу для ведения блогов, взяв за основу уже существовавший, но заброшенный инструмент b2/cafelog. Они сосредоточились на простоте, их ключевым принципом стал open-source (открытый код). Коды WordPress были доступны для всех желающих, что позволило тысячам энтузиастов со всего мира улучшать и расширять этот движок.

До сих пор в каждой админке (административной части) сайта WordPress есть меню «Внешний вид» — «Редактор тем», где можно увидеть программные коды сайта. И раньше мне приходилось с ними работать или нанимать программиста, чтобы что-то подправить на сайте в функционале или дизайне. Но современный движок стал похож на конструктор сайтов — все можно сделать, не обращаясь к сложным кодом программирования. Любое редактирование сайта доступно из меню «Темы» — «Настройка темы». Этому будет посвящена глава 4 этой книги.

Уже к 2005 году WordPress вышел за рамки простого движка для блогов и стал использоваться для разных видов сайтов. Появление системы плагинов и бесплатных готовых тем дизайна кардинально изменило его судьбу. Он стал модульным, превратившись в универсальный конструктор. Сегодня на WordPress работает свыше 43% всех сайтов в мире — цифра, говорящая сама за себя.

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

Особенности и преимущества:

1. Простота и удобство использования.

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

2. Гибкость и масштабируемость.

WordPress уникален своими модулями. Его ядро (core) — быстрое и обновляемое. Дополнительную функциональность обеспечивают плагины. Плагин (от англ. plug-in — «подключаемый модуль») — программный модуль, который динамически подключается к основной программе для расширения её функциональности.

Нужен интернет-магазин? Устанавливаете плагин WooCommerce. Нужна форма захвата лидов? Для этого есть плагины Contact Form 7 или WPForms. Необходима SEO-оптимизация? Используйте плагины Yoast SEO или Rank Math. Существуют десятки тысяч бесплатных и платных плагинов практически для любой задачи: от резервного копирования до создания социальной сети. То же самое с дизайном сайта: десятки тысяч тем от бесплатных до очень дорогих и уникальных позволяют кардинально менять внешний вид сайта за пару кликов.

3. Активное сообщество

Это еще одно преимущество WordPress. Глобальное сообщество разработчиков, программистов, дизайнеров и простых пользователей — это двигатель прогресса WordPress. Сообщество создает и обновляет плагины, пишет документацию, бесплатно консультирует на форумах, организует конференции (WordCamps). Если у вас возникла проблема — с вероятностью 99.9% её решение уже описано на сайтах сообщества.

Существует сообщество в ТГ-канале: wpcommunity, Вконстакте: wordpress_official, клуб ВордПресс на сайте clubwp и т. д.

4. Поисковая оптимизация SEO

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

5. Открытость и свобода WordPress

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

6. Развитие и безопасность

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

7. Мультимедийные возможности

Встроенный медиа-библиотека упрощает работу с изображениями, видео и аудио. Файлы можно легко загружать, редактировать (обрезать, поворачивать), вставлять в материалы и управлять ими. Легко загружается видео, особенно небольшое, единственное, слишком большие файлы (более 1 Гб) могут «подвиснуть».

Недостатки WordPress

Идеальных решений не существует, так и у WordPress есть свои небольшие недостатки:

— Как и любой движок сайта, WordPress требует обслуживания. В отличие от конструкторов, где за всем следит компания-провайдер, за WordPress-сайтом нужно следить: устанавливать обновления, делать резервные копии, контролировать безопасность, скачивать и устанавливать плагины. Впрочем, я не считаю это недостатком. Ведь любой сайт похож на ребенка: после того, как ребенок появляется на свет, необходимо за ним ухаживать: кормить, одевать, обучать и т. д. Если ребенка забросить, он не сможет развиваться. Так же и с сайтом на движке: требуется проверка, обновление ПО (плагинов и самого WP), улучшение, развитие, доработка, обновление контента.

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

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

Движок против конструктора (какой сайт выбрать)

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

Конструктор сайтов (Tilda, ЛП-Моттор)

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

Коды закрыты, вы не можете ими управлять, изменить дизайн модуля можно лишь по определённым параметрам, например: в модуле «Первый экран» можно поменять цвет фона, шрифт, цвет элементов, добавить свою картинку.

Плюсы конструктора сайтов

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

Быстро: сайт можно собрать за несколько часов.

Дизайн: современные готовые блоки «из коробки».

Всё включено: техподдержка сервиса решает большинство проблем.

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

Продвигается через Яндекс. Директ (оплаченную рекламу).

Минусы:

Закрытая система: сайт «заперт» на сервисе конструктора. Перенести его на другой хостинг невозможно.

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

Подписка навсегда: пока платите — сайт работает. Перестали платить — сайт отключается.

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

Движок/CMS (WordPress, Joomla, 1С-Битрикс)

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

Плюсы движка:

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

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

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

Мощное SEO: полный доступ к технической настройке для продвижения сайта в поиске по ключевым словам.

Минусы:

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

Требует времени: настройка займет больше времени, чем в конструкторе.

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

Можно «сломать» сайт: неумелым обращением с плагинами или кодом можно нарушить работу сайта.

Краткий итог: что выбрать

Выберите КОНСТРУКТОР, если:

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

— Вы не собираетесь писать много статей и продвигать сайт через ключевые слова.

— Нет времени/желания разбираться в технических деталях.

— Важен красивый современный дизайн «в три клика».

— Бюджет ограничен ежемесячной подпиской, а не одноразовой тратой денег.

Выберите ДВИЖОК (особенно WordPress), если:

— Вы планируете серьёзный проект, который будет расти (бизнес-сайт, интернет-магазин, портал, блог).

— Вам нужна уникальная функциональность или дизайн.

— Важен полный контроль над сайтом и его данными.

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

Проще говоря: конструктор — это «сайт как услуга» (вы его арендуете), а движок — это «сайт как актив» (вы им владеете).

Основное отличие: сайт на конструкторе не продвигается через СЕО, а движок наоборот адаптирован под продвижение по ключевым словам. Сайты на конструкторе продвигаются через Яндекс. Директ (контекстную рекламу), но с учетом большой конкуренции во многих сферах бизнеса, эти услуги стоят очень дорого. Рекомендации от поисковой системы: от 50 000 руб. в месяц на рекламу.

В то время как грамотное СЕО-продвижение может обходиться недорого, главное грамотно подготовить тексты статей. Подготовке статей к СЕО будет посвящена глава 6.

Для кого подходит WordPress

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

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

— Коучи и преподаватели. Для любой онлайн-школы кроме основного продающего сайта требуется статейный сайт для продвижения по СЕО (ключевым словам) — наилучший вариант здесь сайт на WordPress.

— Малый и средний бизнес. Сайты-визитки, каталоги услуг, лэндинги. Юристам, врачам, турбизнесу, индустрии красоты, продавцам товаров и продуктов, производителям, агрофирмам и т. д.

— Интернет-магазины. Связка WordPress + WooCommerce — мощнейшее бесплатное решение для электронной коммерции.

— Корпоративные порталы и сайты новостей. Управление большими объемами контента, разграничение прав доступа, быстрота загрузки плюс СЕО-оптимизация — все это WordPress.

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

— Портфолио фотографов, дизайнеров, художников, музыкантов.

Цены на сайты

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

Посмотрите на рис. 6а — это скриншот с сайта, предлагающего услуги по разработке, и это в целом средняя цена на конец 2025 года. Корпоративный сайт или сайт-блог начинается от 100 000 руб., и это стандартное решение, при эксклюзивном дизайне и дополнительных функциях смело можно прибавить к стоимости еще 50—100%. Конечно цена колеблется в зависимости от фирмы-разработчика и профессионализма ее сотрудников, от сроков исполнения и от города. В крупных городах это сумма еще больше.

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

Сколько будет стоить сделать сайт на WordPress самому по готовой теме?

Траты на сайт при самостоятельной работе:

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

Стоимость домена обычно не превышает 200—400 руб. в зоне ru и 1700—2000 руб. в зоне com за год.

2. Скачка и заливка WordPress — бесплатно!

3. Покупка готовой оптимизированной под СЕО темы — от 5000 руб., в принципе можно использовать бесплатные темы.

4. Установка и настройка темы — бесплатно.

Итого, при самостоятельной настройке сайта вам потребуется: 10000 — 12000 руб. Если использовать бесплатную тему дизайна, то можно сделать сайт за 5000—6000 руб. вместо 100000—150000 руб. Вот это реальная экономия средств!

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

А теперь давайте посчитаем, сколько времени будет делать сайт фирма-разработчик. 1—2 недели на дизайн сайта, но это первоначальные варианты, дальше идет доработка дизайна сайта и разработка дополнительных страниц и модулей. Как правило, это выливается в 3—4 недели.

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

Вот и сравните 10 000 руб. и 3—4 дня сами или 200 000 руб. и 6 месяцев. Я думаю, выбор очевиден. Разница будет в одном: вы используете готовую тему и адаптируете ее под себя как на сайте-конструкторе или вы закажите свой оригинальный веб-дизайн. Все остальное (функционал WordPress, плагины, быстродействие и т. д.) будут одинаковые.

Я занимаюсь разработкой сайтов более 15 лет и было время, когда в моде были эксклюзивные дизайны и имиджевые сайты. Но сейчас от сайта требуется только одно: его функциональность и возможность СЕО-продвижения. Красивый дизайн ушел на второй план. Поэтому я стала предлагать своим клиентам простые, быстрые и недорогие решения по разработке сайтов с использованием готовой темы дизайна.

Эта книга-инструкция поможет вам самим сделать свой сайт за 3—4 дня. Возможно, какое-то время у вас уйдет на заливку контента, подбор логотипа, заполнения страниц («Контакты», «О нас» и т. д.), но в любом случае, это намного быстрее, чем ждать программиста.

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

Итоги

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

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

Глава 1. Этапы разработки сайта на WordPress

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

Кратко шаги разработки сайта

1. Анализ темы и конкурентов.

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

3. Подготовка к разработке сайта (подбор хостинга, регистрация домена, подготовка материалов на сайт).

4. Разработка сайта (заливка WordPress, установка и настройка темы).

5. Наполнение сайта материалами (тексты, статьи, видео), добавление новых разделов и страниц.

6. Тестирование и проверка на ошибки.

7. Установка счетчиков посещаемости и регистрация в ВебМатсере Яндекса.

8. Пост-обслуживание: установка плагинов, продвижение сайта.

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

Шаг 0: Подготовка. Что понадобится

1. Компьютер/ноутбук с доступом в интернет.

2. Браузер (любой: Google Chrome, Mozilla Firefox, Яндекс. Браузер и т. д.).

3. Электронная почта для регистрации (с паролем).

4. Несколько дней свободного времени.

5. Тема и идея сайта. О чем будет сайт? (О себе, о бизнесе, блог о хобби, портфолио, корпоративный сайт и т. д.).

6. Анализ конкурентов.

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

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

7. Подготовьте свои оригинальные тексты и картинки для наполнения сайта. Если все тексты не готовы к этому моменту, составьте хотя бы основные тексты «Обо мне» или «О компании», приветственный пост, «Контакты», первые два поста и т. д.

Шаг 1: Выбор «места жительства» для сайта — хостинг и домен

Хостинг — это место на сервере, который всегда подключен к интернету. Это то, куда загружается ПО и контент сайта. Без хостинга нет сайта. В главе 2 вы получите ссылку на хостинг для сайта.

Домен — это адрес сайта (например, imagika или yandex). Каждый домен еще имеет доменную зону в названии, например ru, com, net. В главе 2 вы узнаете, как зарегистрировать домен и привязать его к хостингу.

Шаг 2: Установка и настройка WordPress

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

Более подробно о том, как скачать и установить WordPress, будет рассказано в главе 3.

Шаг 3: Выбор темы

Установка темы дизайна для сайта — это как выбор одежды для человека. Дизайн сайта определяется именно темой.

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

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

Шаг 4. Настройка сайта и заполнение сайта материалами

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

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

Вам так же надо будет настроить меню сайта и продумать рубрики статей (для сайта- блога).

Шаг 5: Установка плагинов (дополнения)

Плагины — это полезные приложения для сайта. Без них будет неудобно работать с подготовкой статей для СЕО. В главе 5 мы подробно разберем, какие плагины нам необходимы. Есть платные и бесплатные плагины. Для нормальной работы сайта достаточно бесплатных версий плагинов. Кроме того, у платной темы есть свои полезные плагины, вы сможете найти их на сайте, где купили тему.

Шаг 6. Тестирование и докрутка сайта

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

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

Шаг 7. Продвижение сайта

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

Все эти шаги будут подробно рассмотрены в виде простых пошаговых инструкций в следующих главах.

Глава 2. Домен, ДНС, сертификат безопасности и хостинг для сайта

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

Что такое домен и доменная зона

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

Пример домена: yandex.ru, imagika.ru, google.com.

Обычно к домену еще добавляется протокол https://, буква s на конце означает, что у домена есть сертификат безопасности. Например так: https://имя сайта. доменная зона

HTTP (HyperText Transfer Protocol — «протокол передачи гипертекста») — это фундаментальный набор правил для обмена данными в интернете. HTTP — это язык, на котором браузер разговаривает с сайтами.

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

Основные типы доменных зон (доменов верхнего уровня):

Национальные (ccTLD). Они обычно привязаны к странам.

Примеры:

.ru,.рф — Россия

.kz — Казахстан

.by — Беларусь

.de — Германия

.fr — Франция

Общие (gTLD) доменные зоны. Эти доменные зоны определяют тематику или тип организации.

Классические:.com (коммерческие),.org (некоммерческие),.net (сетевые),.info (информационные).

Тематические:.shop,.blog,.tech,.art.

Для бизнеса:.biz,.pro.

Новые (new gTLD): большой выбор современных зон, появившихся после 2012 года:

.online,.site,.club,.store,.moscow,.top.

Как это выглядит на примере news.yandex.ru:

.ru — доменная зона (первого уровня, национальная).

yandex — домен второго уровня (уникальное имя, которое вы регистрируете).

news — поддомен (субдомен) третьего уровня.

Что такое поддомен

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

Простая аналогия: если ваш основной сайт — это целое здание, то поддомены — это разные комнаты или этажи в нём.

Пример поддомена: shop.example.ru:

ru — доменная зона.

example — зарегистрированное доменное имя (второго уровня).

shop — поддомен (третьего уровня).

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

Зачем нужны поддомены:

С их помощью происходит удобная организация контента по темам или функциям:

blog.example.ru — отдельный блог компании.

shop.example.ru — интернет-магазин.

support.example.ru — служба поддержки.

forum.example.ru — форум для обсуждений.

Техническое разделение:

mail.example.ru или email.example.ru — часто ведут на почтовый сервис.

cdn.example.ru — для хранения статического контента (картинок, стилей).

dev.example.ru или test.example.ru — тестовая версия сайта для разработчиков.

Географическое или языковое разделение:

en.example.ru — английская версия сайта.

moscow.example.ru — региональный раздел.

Поддомен может использоваться для мобильной версии сайта:

m.example.ru — мобильная версия сайта (раньше было популярно, сейчас чаще используют адаптивный дизайн).

Как зарегистрировать домен

Подготовительные шаги.

Подготовьте цветной скан ксерокопии паспорта — первой страницы и прописки, они понадобятся для регистрации вашего домена. Если вы регистрируете домен на другого человека, то уточните еще мобильный телефон, почтовый адрес и рабочий e-mail. Подготовьте деньги на карте, чтобы оплатить домен (обычно не дороже 300—600 руб. в зоне ru).

1. Зайдите на сайт хостинг-провайдера (например, Reg.ru, Timeweb, webnames.ru). Авторизируйтесь на сайте, пройдя процедуру регистрации. Если вы заходите второй раз, просто наберите свой логин и пароль.

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

3. При оформлении хостинга вам предложат зарегистрировать новый домен или использовать существующий. Введите в строку понравившееся имя домена (система подскажет, свободно ли оно). Выбейте зону. ru,.com,.рф или другую.

4. Завершите покупку. На вашу почту придут данные для доступа (логин, пароль, адрес панели управления).

5. Если вы регистрируете домен отдельно от хостинга, то сделайте это так:

— зарегистрируйтесь на сайте провайдере, например, здесь: webnames.ru или зайдите под логином и паролем.

— найдите раздел «Домены», выберите зону для домена, например ru. См. рис. 10.

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

— далее в поле для имени домена введите то имя, которое вам нравится (или которое указал заказчик в техническом задании). См. рис. 11.

Может оказаться, что это имя уже занято. Не имеет смысла занимать такое же имя только в другой доменной зоне. Например, уже есть имя imagika-blog в зоне ru (блог автора книги), но свободно имя imagika-blog в зоне su (другая доменная зона su вместо ru). Люди обычно не запоминают зоны и ваше имя будут путать с тем, что уже занято, так вы потеряете половину, а то и большую часть вашего трафика (количества посетителей сайта). Если в основных зонах имя уже занято, ищите другое, оригинальное имя для домена.

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

Когда вы выбрали имя, нажмите напротив имени на кнопку «В корзину». Кликните на «Корзину»

— Оформите домен в корзине. Рис. 12.

— Заполните анкету владельца домена.

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

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

Именно эти данные определяют владельца домена. Ни в коем случае не оформляйте домены клиентов на свое имя. Это не этично!

Домен можно так же оформить на юридическое лицо, например, на ООО. Но при смене названия домен «зависнет», поэтому предпочтительнее оформлять на частное лицо, например, на директора фирмы.

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

Приобретение хостинга

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

Простыми словами: хостинг — это аренда места для папки с файлами сайта на мощном компьютере в дата-центре.

Домен (имя сайта, например site.ru) — это адрес, который указывает посетителям, где найти эту папку на сервере.

Аналогия: домен — это адрес вашего дома (например, ул. Красная, дом 1). Хостинг — это сам земельный участок и фундамент, на котором стоит ваш дом (сайт).

Файлы сайта — это сам дом со всей мебелью и содержимым.

Без хостинга ваш сайт не будет доступен другим пользователям в интернете.

Основные виды хостинга

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

VPS/VDS (Виртуальный выделенный сервер) — на физическом сервере создаются изолированные виртуальные «машины» с гарантированными ресурсами. Больше контроля, гибкости и мощности. Подходит для интернет-магазинов, корпоративных сайтов.

Выделенный сервер (Dedicated) — вы арендуете целый физический сервер. Максимальная производительность, контроль и безопасность. Подходит для высоконагруженных проектов, игровых серверов, крупных порталов.

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

Как выбрать и купить хостинг

1. Определите тип своего сайта:

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

Интернет-магазин, корпоративный сайт — VPS/VDS.

Высоконагруженный проект — выделенный сервер.

2. Ключевые критерии при выборе хостинга:

Надёжность — от 99%.

Тех поддержка — 24/7, оперативная (тестируйте до покупки).

Технические параметры: должны быть эти ресурсы (CPU, RAM, SSD), панель управления (cPanel, ISPmanager), поддержка нужных технологий (PHP, базы данных, Node. js и т.д.).

Безопасность: SSL-сертификат, автоматические бэкапы, защита от DDoS.

Масштабируемость — возможность легко увеличить хостинг.

Пример хостинга https://timeweb.com

3. Дополнительные услуги:

Домен в подарок (часто на первый год при оплате хостинга на год вперед).

Конструктор сайтов.

Автоустановка CMS (движков сайта: WordPress, Joomla и др.).

4. Порядок действий по приобретению хостинга:

1. Составьте список требований.

2. Сравните несколько проверенных хостинг-провайдеров (например, Beget, Timeweb, REG.RU, FirstVDS). Я пользуюсь хостингом Timeweb.

https://timeweb.com/ru/services/hosting/ — ссылка на хостинг.

3. Почитайте независимые отзывы о хостинге.

4. Выберите подходящий тариф. Часто есть тестовый период или гарантия возврата.

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

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

Совет: не гонитесь за самой низкой ценой. Стабильность и поддержка часто важнее.

ДНС для сайта

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

— ДНС DNS (Domain Name System — «система доменных имён») — это «телефонная книга интернета». Если объяснять очень коротко: DNS переводит удобные для человека адреса (например, yandex.ru) в понятные для компьютеров цифровые IP-адреса (например, 77.88.55.88).

Как это работает на простом примере:

Вы вводите yandex.ru в браузере.

Ваш компьютер не знает, где этот сайт. Он спрашивает у DNS-сервера (как будто смотрит в телефонную книгу): «Какой IP-адрес у yandex.ru?»

DNS-сервер отвечает: «Это 77.88.55.88».

Ваш компьютер по полученному IP-адресу находит сервер Яндекса и загружает сайт.

Вся эта сложная процедура происходит за доли секунды и не видна пользователю. Так же ДНС используются для перенаправления домена на определённый хостинг.

Как прописать ДНС

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

На рисунке 15 красным цветом подчеркнуты ДНС хостинга и конструктора. Для одного домена прописывается два или четыре ДНС, например, для конструктора ЛП-Моттор: ns1.lpmotor.ru

ns2.lpmotor.ru

ns3.lpmotor.ru

ns4.lpmotor.ru

Узнать ДНС можно в аккаунте, где оформлен ваш хостинг или обратившись в техподдержку хостинга.

Как прописать ДНС для вашего домена

Надо в своем аккаунте кликнуть на домен или «Настройки домена» (у разных провайдеров может отличаться) и найти строку «ДНС» и нажать кнопку «Изменить». См. рис. 16.

В открывшемся окне пропишите новые ДНС. См. рис. 17. Для каждой ссылки используется отдельное поле.

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

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

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

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

При наличии сертификата безопасности ваш сайт будет открываться по протоколу https (безопасная версия протокола http, который используется для передачи данных между браузером и сайтом).

Если объяснять просто:

HTTP — это как отправить открытку по почте. Любой, кто её перехватит, может прочитать содержимое (ваши логины, пароли, номера карт).

HTTPS — это как отправить то же письмо в защищённом сейфе, который может открыть только получатель.

Как работает https (ключевые элементы):

1. Шифрование (SSL/TLS-сертификат).

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

2. Идентификация сайта (подтверждение владельца).

Сертификат подтверждает например, что сайт bank.ru — это действительно сайт банка, а не подделка, созданная мошенниками.

3. Целостность данных.

Гарантирует, что информация не была изменена или подменена при передаче.

Как увидеть https:

1. В адресной строке браузера:

Если адрес сайта начинается с https:// (часто «https://» скрыто, но отображается значок «замка»), значит он защищен и имеет сертификат безопасности.

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

Для сайтов с расширенной проверкой (EV) может отображаться название компании зеленым цветом.

2. Отсутствие сертификата

Современные браузеры (Chrome, Firefox и др.) помечают сайты без сертификата https как «Небезопасные» и часто просто не открывают его.

Почему HTTPS важен сегодня:

— Защита личных данных: логины, пароли, личная информация, телефоны.

— Безопасность платежей: будут защищены от мошенников номера банковских карт и транзакции.

— Доверие пользователей: наличие сертификата безопасности на сайте — знак безопасности для посетителей сайта, он вызывает больше доверия.

— SEO-ранжирование: Яндекс и другие поисковые системы повышают сайт с https в результатах поисковой выдачи.

— Скорость: современный https часто работает быстрее старого протокола http.

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

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

Как оформить сертификат безопасности

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

Если у вас домен на одном сайте, а хостинг на другом — сертификат надо заказывать там, где куплен тариф хостинга. Не перепутайте! Не там, где домен, а именно там, где вы оплатили хостинг.

Пошаговый алгоритм заказа сертификата безопасности на примере хостинга Timeweb:

1. Авторизуйтесь на аккаунте хостинга для вашего сайта.

2. Слева найдите «Домены», кликните по галочке справа от слова «Домены», в открывшемся списке найдите «SSL-сертификаты». См. рис. 19, подчеркнуто красным.

3. В правой части окна найдите раздел «Магазин сертификатов» и увидите список доступных сертификатов безопасности. Для простого сайта будет достаточно бесплатного сертификата SSL Let’s Encrypt (сертификат начального уровня). Для сайтов, имеющих поддомены, подойдет SSL Wildcard, он оплачивается один раз и является бессрочным. Для больших сайтов необходим профессиональный сертификат, например SSL Timeweb Pro. Выбор сертификата зависит от вас и ваших целей, но у сайта обязательно должен быть хоть какой-то сертификат.

4. Нажмите «Заказать» и ожидайте установки, обычно это несколько часов (от 6 часов до 24). Если по прошествии 24 часов в доменном имени в адресной строке браузера не появилась иконка «замочек» и сайт не открывается, необходимо обратится в тех поддержку хостинга и попросить настроить сертификат.

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

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

Глава 3. Установка WordPress на хостинг

Скачивание WordPress и создание нового сайта

Если вы оплатили современный хостинг, например Таймвеб, то в своем аккаунте вы сможете бесплатно установить движок на выбор, в том числе там есть и WordPress. См. рис. 20.

Для установки WordPress зайдите в свой аккаунт хостинга, найдите раздел «Сайты» и в нем подраздел «Установка CMS», справа откроется выбор движков, найдите WordPress, кликните по нему и нажмите «Установить приложение».

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

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

1. Переходим на официальный сайт WordPress по ссылке: https://ru.wordpress.org/download или ru.wordpress.org (находим кнопку «Скачать»). Скачиваем архив к себе на компьютер. Ни в коем случае не качайте файлы с неофициального сайта!

2. Заходим в аккаунт хостинга. На этот момент у вас должен быть оплаченный хостинг (лучше на 1 год) и привязанный к нему домен с сертификатом безопасности (подробно описано в главе 2).

3. В панели управления хостингом создаем новый сайт. Для этого в панели управления перейдите в раздел «Сайты — Создать сайт», см. рис. 21. Называем сайт по имени своего домена (это не обязательно, но так проще).

Далее заполняем форму создания нового сайта во всплывающем окне и нажимаем кнопку «Создать». См. рис. 22.