Один из лучших инструментов для создания сайта — CMS WordPress.
В статье приведена пошаговая инструкция как создать сайт на WordPress с «нуля». Выполнив последовательно ряд действий на выходе вы получите полноценный работающий сайт. Здесь мы исходим из того, что:
- идея сайта у вас уже есть
- вы уже решили, на чем вы хотите сосредоточить внимание и определили, какова цель вашего сайта (зарабатываете деньги, позиционируете себя в качестве эксперта в своей области, просто хобби)
- определили кто ваша целевая аудитория
- придумали потенциальные имена для вашего сайта
Итак, двигаемся дальше.
Оглавление
- Основные ресурсы и шаги для создания сайта
- 1. Подбор имени сайта, регистрация имени, выбор хостинга
- 2. Установка WordPress, установка плагинов
- 2.1. Установка плагина Maintenance Mode и его активация
- 2.2 Настройка плагинов, настройка прав доступа, настройка .htaccess .htpasswd
- 3. Выбор рабочей темы для блога, установка темы
- 3.1. Общая настройка темы, содание файла robots.txt
- 4. Создание меню, генерация необходимых страниц и рубрик
- 4.1. Создание логотипа сайта, «девиза» и иконки сайта
- 4.2. Настройка хедера («шапки») и футтера («подвала») сайта
- 4.3. Настройка и наполнение статических страниц
- 4.4. Настройка виджетов в сайдбаре
- 5. Настройка связи с социальными сетями
- 6. Настройка подписки RSS
- 7. Настройка подписки и рассылки
- 8. Регистрация сайта в Яндекс и Гугл, подключение статистики Гугл и/или метрики Яндекси
- 9. Деактивация плагина Maintenance Mode и публикация сайта в сети
Основные ресурсы и шаги для создания сайта на WordPress
Чтобы создать сайт на WordPress вам нужно иметь основные четыре ресурса:
1.Домен и хостинг
2.WordPress
3.Тема
4.Время
Домен и хостинг
1. Настроить хостинг, доменное имя и электронную почту.
WordPress
2. На сайт установить и настроить WordPress
Тема
3. Установить и сконфигурировать тему
Страницы и контент
4. Создать страницы и заполнить сайт контентом
1. Подбор имени сайта (блога), регистрация имени, выбор хостинга, настройка хостинга
Вначале для сайта нужно выбрать название и зарегистрировать его. Подобрать имя сайта и зарегистрировать его можно в компании-регистраторе имен. Например: Хостинг-Украина
За регистрацию домена и его поддержку регистратор возьмет деньги в зависимости от зоны, где будет размещен этот домен.
Зона в Интернете – это название, что идет в имени сайта после точки: например: сайт «electrostal.com.ua» имеет «electrostal» — имя, «com.ua» — зона. Каждая из зон имеет некоторый контекст: «biz», «com» — бизнес, «net» — сети, «org» — организация, «gov» — государственные структуры. Но это не значит, что в зоне «com» не может быть личный блог.
Имя сайта и зона в совокупности дадут уникальный адрес сайта в Интернет. Зарегистрируйте это имя в выбранной зоне. И при окончании срока продолжайте поддержку (читайте — оплату) этого имени далее.
По сути, адрес сайта — это запись в общемировой книге (реестре) всех адресов Интернета. Не более того. А вот чтобы сайт правильно работал — надо физически разместить тексты, фото, видео ( обычно называют это «контент») на конкретных компьютерах-серверах и связать их с выбранным адресом сайта. Делается это «на хостинге» у «провайдера» — компании, которая должна предоставить в пользование определенный объем компьютерных ресурсов (место на диске, памяти и т.д.) и обеспечить 24/7 работу сайта. За деньги, разумеется.
Физически содержимое сайта может находиться где-то на компьютерах-серверах или в Украине, России, Германии, США. Это уже забота этой компании-провайдера. Но вне зависимости от физического расположения сайта он будет открываться у пользователей по единому адресу.
«Базовое» обеспечения работы сайта = поддержка его имени + хостинг (поддержка ресурсов)
Правда, можно открыть сайт на уже существующих сервисах как поддомен — но там другие возможности и ограничения.
2. Установка WordPress, установка плагинов
Самая «свежая» версия русской редакции WordPress здесь: https://ru.wordpress.org/. Там же размещена инструкция по установке WordPress.
Следует отметить, что многие хостинги могут установить WordPress автоматически. Уточните у своего хостинга наличие такой функции.
Сразу же после установки WordPress можно расширить его функциональность путем установки ряда плагинов. Плагины — это некий отдельный программный модуль, который подключается к Вордпресс и дает ему дополнительные возможности.
Каталог плагинов Вордпресс: https://ru.wordpress.org/plugins/.
Некоторые полезные плагины:
- защита от спама: Akismet Anti-Spam
- замена русских названий в адресах на английские: Cyr to Lat enhanced
- ограничение попыток входа в админпанель сайта: Login LockDown
- оптимизация базы данных:WP-Optimize
- защита сайта: Cerber Security, Antispam & Malware Scan
- настройка SEO: Yoast SEO
- архивация сайта: Duplicator
- +49 пунктов по улучшению сайта WordPress (платный плагин): Clearfy Pro
2.1. Установка плагина Maintenance Mode и его активация
Пока вы будете настраивать сайт — доступ к нему будет открыт со всего Интернета. Все могут видеть «строительые работы» на сайте.
Во избежание этого и служит плагин типа Maintenance Mode: заставка «обслуживание сайта». Для посетителей плагин выводит аккуратную картинку, где можно уведомить их что сайт на реконструкции
Плагинов данного типа есть большое количество, я использую: YITH Maintenance Mode
Еще один способ скрыть сайт от нежелательного просмотра — использовать плагин Password Protected. Этот плагин позволяет увидеть сайт только после ввода пароля.
2.2. Настройка плагинов, обеспечение безопасности сайта и настройка прав доступа, настройка .htaccess .htpasswd
Почти каждый плагин требует внимания для его настройки. Возможно нужно будет потратить некоторое время на файлы .htaccess и .htpasswd. Вордпресс генерирует файл .htaccess при настройке постоянных ссылок и этого в большинстве случаев достаточно.
Однако если хочете дополнительно защитить сайт от злоумышленников — придется потратить некоторое время на создание .htpasswd и настройке .htaccess для повышения безопасности сайта.
3. Выбор рабочей темы для блога, установка темы
Тема в WordPress — это некий базовый дизайн сайта, его внешний вид. Другими словами, тема в Вордпрессе — это как одежда на человеке. Может быть разная: суть одна, внешний вид разный.
Обычно Вородпресс устанавливат несколько тем при инсталляции. Но, возможно, тебе захочется чего-то другого.
Темы можно подобрать в Интернете на любой вкус:
- бесплатные на официальном сайте Вордпресса: https://wordpress.org/themes/
- или платные преимум-темы многих разработчиков, например тема Divi от ElegantThemes.
Я рекомендую использовать тему Divi. На данный момент Divi по сути превратилась в платформу для веб-дизайна.
Конструктор страниц Divi Builder, доступный либо как отдельный плагин, либо как полностью интегрирован в тему Divi.
Divi builder позволяет создавать каждую веб-страницу в соответствии с требованиями к дизайну, используя обширную коллекцию модулей. Слайдеры, объявления, контактные формы, «аккордеоны», переключатели и многие другие современные настраиваемые модули Divi практически исключает необходимость в дополнительных плагинах и пользовательских вмешательствах в код сайта.
3.1. Общая настройка темы, содание файла robots.txt
Каждая тема в большей или меньшей степени имеет возможность изменения: цветов, шрифтов, отступов, размеров и других параметров. Наверняка вы захотите подстроить выбранную тему под себя. Как это делать — зависит от того, каким образом в теме реализована панель управления темой. Конечно, если «копнуть» глубже — то внешний вид сайта можно настроить с помощью CSS, хуков, шаблонов страниц — но это выходит за рамки данной статьи.
В корневой директории сайта желательно иметь файл robots.txt В файле прописаны инструкции для роботов, которые будут заходить на сайт и периодически индексировать его. В этих инструкциях роботам указано какие директории индексировать запрещено, а какие разрешено. Это делаеться во избежание дублирования контента. Также в этом файле указывается адрес карты сайта (sitemap).
Ниже в качестве примера привожу содержание файла robots.txt моего блога:
User-agent: * Disallow: /wp-admin Disallow: /wp-includes Disallow: /wp-content/plugins Disallow: /wp-content/cache Disallow: /wp-json/ Disallow: /xmlrpc.php Disallow: /readme.html Disallow: /*? Disallow: /?s= Allow: /*.css Allow: /*.js Allow: /wp-content/themes/*.css Allow: /wp-content/plugins/*.css Allow: /wp-content/uploads/*.css Allow: /wp-content/themes/*.js Allow: /wp-content/plugins/*.js Allow: /wp-content/uploads/*.js Allow: /wp-includes/css/ Allow: /wp-includes/js/ Allow: /wp-includes/images/ Allow: /wp-content/cache/*.css Allow: /wp-content/cache/*.js Host: https://alexkoval.name Sitemap: https://alexkoval.name/sitemap_index.xml Sitemap: https://alexkoval.name/sitemap-image.xml
4. Создание меню, генерация необходимых страниц и рубрик
Меню — важный элемент сайта, ведь удобное и понятное меню позволяет посетителю сайта проще соориентроваться на сайте и быстрее понять, может ли он решить с помощью сайта свою проблему.
В меню WordPress могут быть ссылки на страницы, записи, категории, метки, товары, и другие типы данных. Поэтому перед построением меню желательно создать нужную структуру сайта (страницы, категории, метки),
4.1 Создание логотипа сайта, «девиза» и иконки сайта
Исходим из того, что при первом открытии сайта посетителем у тебя есть несколько секунд внимания посетителя, чтобы ему просто объяснить куда он попал. И посему логотип и краткий «девиз» сайта крайне важен для такой функции. «Девиз» — это одно или два кратких точных предложений, которые описывают суть сайта (блога), чему он «посвящен», какую проблему посетитель может решить здесь.
Иконка сайта (фавикон) — маленькое графическое изображение (favicon.ico), которое выводит браузер у себя в панели закладок рядом с именем сайта или «поисковик» в выдаче. Никакой функции он не несет, но его использование позволяет в какой-то мере повысить узнаваемость сайта.
Для создания фавикона нужно загрузить изображение в онлайн-генератор и получить результат. Для таких целей я пользуюсь онлайн генератором. После генерации фавикона файл favicon.ico надо разметить в корневом каталоге сайта.
В WordPress есть механизм создания иконки сайта. В админпанели надо выбрать меню: «Внешний вид«->»Настроить«->»Свойства сайта«, слева внизу выбрать изображение для иконки сайта размером 512 пикселей по сторонам и сохранить иконку.
4.2. Настройка хедера («шапки») и футтера («подвала») сайта
В хедере (шапке) сайта обычно размещается меню, логотип, девиз, иногда иконки социальных сетей, реклама, и т.д.
В футтере (низ, «подвал» сайта) обычно прописываются авторские права на сайт, возможно некая дополнительная информация, или еще одно меню, например
Чаще всего хедер и футтер настариваются средствами темы.
4.3. Настройка и наполнение статических страниц
В базовой установке WordPress на сайте присутсвуют несколько типов данных: «страницы», «записи», «рубрики»,»метки».
Страницы — практически это редко изменяемые данные: «Контакты», «Главная», «Мои работы», «О себе». Скажем так—страницы—это самая «консервативная» часть сайта.
Записи — это статьи: данные о технических аспектах чего-нибудь, новости об участии в чем-нибудь, размышления, рассказы и др. С фото, с видео.
Темы и плагины могут создавать свои типы данных. Например тема Divi создает тип «Проекты». Это описание портфолио и выполненных работ.
Плагин для создания интернет-магазина Woocommerce создает данные «Товары».
4.4. Настройка виджетов в сайдбаре
Сайдбар — отдельная от других элементов панель (колонка), располагающаяся справа или слева на странице. Место расположения обычно задается в теме.
В сайдбаре могут располагаться поиск, список категорий и страниц, последние комментарии и записи, ссылки, рейтинги, реклама, счетчики посещаемости и другое.
Настаривается сайдбар может с помощью виджетов — отдельных «программ», выполняющих определенную функцию или функции. Перечень доступных виджетов и сайдбаров приведен в панели администратора, позиция меню — «Внешний вид» → «Виджеты«
5. Настройка связи с социальными сетями
В связи с развитием социальных сетей по всему миру связь сайта с ними важна для его продвижения. Существует огромное количество плагинов и онлайн сервисов, помогающих решить данный вопрос.
Например: Monarch Social Sharing Plugin или Easy Social Share Buttons for WordPress.
Существует два вида связи сайта с соцсетями: «Share» и «Following«.
«Share» (поделиться) — если посетителю понравилась статья, он нажимает кнопку и краткое описание со ссылкой на эту статью копируються на ленту записей этого посетителя в социальной сети. Таким образом статья распространяеться в социальной сети.
«Following» (последователи) — если вы хотите получить больше подписчиков (последователей) на своих социальных страницах, то вы размещаете ссылки «последовать за вами в социальных сетях» на своем сайте. Посетитель нажав на кнопку «Following» подписывается на вашу страницу в социальной сети и вы получаете себе еще одного последователя (то есть читателя).
6. Настройка подписки RSS
Технология RSS дает возможность информировать всех желающих о новой информации, появившейся на сайте. В Интернете можно встретить разные термины, обозначающие одно и те же: RSS-канал, RSS-лента, RSS-рассылка, фид (от английского «feed» – подача, питание, скармливать).
Собственно, для сайта на Вордпресс RSS уже присутствует на сайте, его адрес: http://имя_сайта/feed/
Если понадобиться создать возможность для посетителя подписаться на RSS, то можно сделать иконку и разместить ссылку на RSS: http://имя_сайта/feed/. Или же использовать сервис FeedBurner для организации подписки на RSS и получения «фидов» на электронную почту читателей.
«Минус» RSS в том, что он может использоваться для нежелательного парсинга (выборочного извлечения информации с других сайтов и ее последующее использование). Для статейных сайтов (блогов), сайтов-визиток, корпоративных сайтов рекомендую RSS отключать.
7. Настройка подписки и рассылки
В отличие от RSS, который обновляется автоматически при появлении новых статей на сайте, рассылкой можно управлять вручную.
Для регистрации подписчиков и проведения рассылок писем существуют различные сервысы: MailChimp, GetResponse и многие другие. У всех есть возможность интеграции формы подписки на сайт. По сути, на сайте присутствует лишь форма подписки, а сам список подписчиков, управление подпиской и рассылка — все производятся на сервисе.
Однако существуют способы формирования списка подписчиков, управлением подпиской и рассылкой писем непосредственно на сайте. Используя различные плагины.
Например, используя плагин MailPoet или MyMail
8. Регистрация сайта в панелях разработчиков Яндекс и Гугл, подключение статистики Гугл и/или метрики Яндекси их настройка
Полезная вещь — добавить сайт в панели инструментов разработчика Гугл и/или Яндекс. Лучше в оба сервиса. В данных сервисах есть много полезных функций для проверки и улучшения сайта, что способствует его продвижению.
Если хотите отслеживать посетителей на сайте — тогда нужно установить коды Метрики Яндекса или Аналитики Гугла, или каких-то других счетчиков. Обычно эти коды надо вставлять или в хедер («шапка») или в футер («подвал») сайта на тех страницах, по которым нужна статистика посещений. Подробнее смотрите документацию Метрики Яндекса и Аналитики Гугла.
9. Деактивация плагина Maintenance Mode и публикация сайта в сети
Самый ответственный момент — в основном сайт готов и деактивация плагина делает его видимым для пользователей в сети Интернет.
Возможно я что-то упустил как создать сайт на WordPress или информация в чем то устарела. Оставте свои замечания и предложения в комментариях ниже.
Удачи.
Александр Коваль.