WordPress – прекрасная база для создания блога или сайта, но далеко не все знают как пользоваться этим благом с максимальной пользой. Начиная работать с WordPress, вы можете столкнуться с массой вопросов, тем более, если у вас нет профессиональной подготовки.
Однако в этом нет ничего страшного, и начало работы с WordPress почти у всех проходит по аналогичному сценарию. По этой причине было решено создать полноценное руководство для тех, кого заинтересовало данное направление. Даже если у вас нет специальных знаний в этой сфере, вы без труда сможете создать свой персональный блог на WordPress.
- Рекомендация
- Что потребуется для начала?
- Шаг 1. Начинаем с подготовки
- Шаг 2. Регистрация домена и покупка хостинг для WordPress блога
- 2.1 Доменное имя и хостинг
- 2.2 Установка WordPress
- Шаг 3. Выбор и установка WordPress темы
- Шаг 4. Публикуем первый пост в блоге
- Шаг 5. Плагины и общие настройки
- 5.1 Как работают плагины на примере Google Analytics или как отслеживать посещения вашего WordPress-блога
- 5.2 Оптимизация блога для SEO целей
- 5.3 Важные плагины и специфика работы с WordPress
- Шаг 6. Как сделать так, чтобы блог приносил доход?
- 6.1. Google AdSense
- 6.2 Партнерские программы ( Affiliate Marketing)
- 6.3 Интернет-магазин
- Визуальное редактирование в нашей теме
- Изучение возможностей плагина
- Настройки Elementor
- Какие виджеты (элементы)доступны в бесплатной версии?
- Сравнение версий. А нужно ли покупать Elementor PRO?
- Использование бесплатной версии конструктора
- Шаг 0. Выбор правильной темы (шаблона) для сайта на базе Elementor
- Шаг 1. Создание новой страницы или записи
- Шаг 2. Начало работы в редакторе
- Шаг 3. Глобальные настройки
- Шаг 4. Строки, колонки, элементы и их настройки
- Шаг 5. Шаблоны страниц в Elementor
- Elementor PRO
- Редактор тем в PRO версии
- Подведем итог
- Пошаговое руководство по созданию сайта на CMS WordPress для новичков
- Определяемся с тематикой
- Выбор домена и хостинга. Регистрация
- Домен
- Хостинг
- Установка SSL-сертификата
- Общие
- Написание
- Чтение
- Обсуждение
- Медиафайлы
- Советы по выбору шаблона
- Установка и настройка шаблона
- Плагины
- Как установить плагин
- Плагины, которые я рекомендую для каждого сайта:
- Настройки для улучшения СЕО
- Плагин Clearfy Pro — мега плагин для сайта
- Плагин Yoast SEO — улучшаем СЕО
- Плагин кэширования (WP Super Cache)
- Файл robots.txt
- Настройка защиты на сайте
- Antispam Bee — плагин для борьбы со спамом
- All In One WP Security — плагин для борьбы со злоумышленниками
- Дополнения для сайта
- Приём оплаты
- Контактная форма
- Форма подписки на рассылку
- Модальное окно (попап)
- Картинки в модальном окне
- Кнопки соцсетей
- Делаем начальное наполнение сайта
- Меню (структура сайта)
- Страницы
- Записи (статьи)
- Рубрики
- Метки
- Заключение
- Как сделать landing page (лендинг) — пошаговая инструкция из 9-ти этапов
- Этап 1. Подготовка
- Цель лендинга
- Определяем целевую аудиторию и что для нее важно
- Как определить лецевую аудиторию?
- Смотрим конкурентов (бенчмаркинг)
- Этап 2. Пишем текст для лендинга
- Хаос в голове перенесим на бумагу
- Составляем блоки лендинга
- Вот основной список блоков, который можно встретить на 90% лендингов:
- Какие еще могут быть блоки на сайте:
- Советы по составлению текста
- Где искать копирайтера
Рекомендация
Совершенно не важно сколько вам лет, ведь в инструкции все изложено просто и понятно.
Что потребуется для начала?
Есть три вещи, которые вам нужны для создания блога на WordPress:
- Полчаса свободного времени.
- Хостинг (нужен, чтобы сайт где-то физически существовал в интернете)
- Доменное имя – это будет название вашего блога, например wordpresslab.ru.
Шаг 1. Начинаем с подготовки
Наиболее часто допускаемой новичками ошибкой является выбор неправильного хостинга и платформы. Многие пользователи делают выбор в пользу WordPress и не спроста.
Он является бесплатным сервисом, позволяющим веб-мастеру получить уйму возможностей:
- Установка плагинов.
- Настройка дизайна.
- Неограниченный заработок.
Для большинства успешных блогов выбирают именно решение WordPress.org, в качестве CMS. Это касается не только персональных страничек, но и крупнейших новостных порталов. Бесплатным сервис остаётся, чтобы владельцы проектов могли сами разобраться со всем остальным, в том числе и настройками, вплоть до мельчайших деталей.
Но, тут важно понимать разницу между и , в связи с этим советуем ознакомиться со статьей – Что выбрать WordPress.com или WordPress.org.
Если мы обратимся к истории создания WordPress, то будет ясно, что изначально CMS позиционировалась исключительно как платформа для ведения блога, но это уже давно не так.
Другими словами, вам нужно доменное имя и веб-хостинг.
Шаг 2. Регистрация домена и покупка хостинг для WordPress блога
Доменное имя– по-другому, адрес, на котором располагается сайт. В качестве примера – yandex.ru
или wordpresslab.ru.
Регистрация предполагает не покупку имени насовсем. Наоборот, оформляется аренда на определённый срок. Минимальное время для такого действия – 1 год. После приобретения пользователь становится администратором, получает адрес во временное владение. На домене создают сайты или почтовые платформы, выставляют на продажу, при необходимости – продлевают регистрацию. Но всеми доменами, в конечном счёте, владеет организация под названием ICANN. Это международная компания, которая отвечает за управление подобными ресурсами.
Веб-хостинг– другое дело. Здесь живут все файлы, связанные с сайтом. В нём тоже нуждается каждый проект без исключения.
2.1 Доменное имя и хостинг
Первое, что нужно сделать это подобрать домен.
Затем, к выбранному домену добавить услугу хостинга.
2.2 Установка WordPress
Тут ничего сложного – устанавливаем WordPress (можно выбрать как автоматическую установку, так и произвести ее вручную).
Шаг 3. Выбор и установка WordPress темы
То, как будет выглядеть ваш блог WordPress, зависит от выбранной темы. Сразу, после установки ваш блог будет выглядеть так:
Маловероятно, что вам понравится стартовая тема, так как она не сможет заинтересовать посетителей.
Безусловно, настройка внешнего вида персонального блога станет одним из наиболее увлекательных и важных моментов создания блога на базе WordPress.
Есть масса готовых шаблонов, которыми вы можете воспользоваться: некоторые из них можно получить бесплатно, за некоторые же придется заплатить.
У нас есть отдельная подборка лучших шаблонов для блога WordPress.
Сменить тему просто, достаточно перейти на панель инструментов ВордПресс и нажать « Внешний вид», а затем – « Темы».
Жмем кнопку « Добавить».
На экране, который появится после этих действий, у вас будет возможность выбрать любую из предоставленных в официальном каталоге бесплатных тем WordPress (а их там более 8 тысяч). При выборе темы есть возможность сортировки тем по таким критериям, как: рекомендуемые, новые, популярные и прочие.
Важно!
При предварительном просмотре темы стоит учитывать, что она может выглядеть иначе, чем на скриншоте, однако в этом нет ничего страшного, ведь позже у вас будет возможность настроить шаблон. Внимание стоит обратить на тип шрифта, цвет, дизайн и прочие элементы.
Лучшая рекомендация, которую можно дать при выборе идеальной темы для блога – стремитесь к простоте дизайна.
Определившись с темой, наведите на нее курсор мыши, после чего вы увидите кнопку « Установить». Жмем на нее и ждем завершение установки. Кнопка установки сменится надписью: « Активировать», жмем на нее для активации.
После установки темы, у вас появляется возможность ее настройки. Для этого переходим в графу меню « Внешний вид», а затем жмем « Настроить».
Если вы уже запутались или нужна помощь в выборе темы, ознакомьтесь с нашем крутым руководством – 9 вещей, которые следует учитывать при выборе темы для WordPress.
После того, как тема была выбрана, переходим к созданию своего первого поста в блоге.
Шаг 4. Публикуем первый пост в блоге
На панели инструментов ВордПресс находим в меню графу « Записи», а затем « Добавить новую».
Вы окажетесь в области редактора, где можно создать свой первый пост. В WordPress используется редактор, основанный на блоках.
Каждый элемент – называется блок, что позволяет упорядочить статьи и сделать их более приятными для восприятия.
Чтобы ознакомиться с редактором, см. Наш учебник по редактору блоков WordPress.
После того, как вы окончите свой пост и будете довольны написанным, в правом верхнем углу жмете « Опубликовать», после чего он будет опубликован.
В редакторе вы также найдете несколько других разделов, среди которых «Метки» и «Рубрики». Их использование поможет вам упорядочить посты в блоге по разделам. У нас есть отличное описание различий между рубриками и метками, с которыми мы настоятельно рекомендуем вам ознакомиться.
Шаг 5. Плагины и общие настройки
После написания первого поста вам, скорее всего, захочется облагородить свой сайт с помощью таких полезных элементов, как галерея, форма подписки на рассылку, контактная форма и прочих. Для их добавления вам понадобятся плагины. Что же такое плагины для WordPress?
Плагины в WordPpress– это приложения, с помощью которых можно добавить на свой сайт новые функции (для этого не потребуется знание кода).
В каталоге плагинов WordPress, предоставляемых бесплатно, вы сможете найти более 57 тысяч плагинов. А значит для любого вашего каприза имеется плагин!
А вдогонку, вот руководство по установке плагинов на WordPress, если вы уж совсем новичок.
Давайте рассмотрим использование плагинов для добавления в ваш блог определенных важных функций
5.1 Как работают плагины на примере Google Analytics или как отслеживать посещения вашего WordPress-блога
С помощью Google Analytics вы сможете видеть количество посетителей блога, откуда они пришли и чем занимаются на вашем сайте.
Правильным решением будет установка Google Analytics вместе с запуском блога, что позволит вам проследить рост вашего блога с течением времени.
Для начала стоит посетить сайт Google Analytics
и осуществить вход в систему с помощью своего аккаунта Gmail. После того, как вход будет осуществлен, вы можете создать бесплатную учетную запись Google Analytics.
От вас потребуются ваши данные и адрес веб-сайта. Затем вы получите код отслеживания Google Analytics.
Запоминать его вам не придется, так как мы воспользуемся плагином, позволяющим автоматически загружать и добавлять данный код в ваш блог (в комплекте с настройкой правильного отслеживания WordPress).
Переключаемся в панель администратора WordPress, где устанавливаем и активируем плагин MonsterInsights. Это наиболее простой способ добавления на ваш сайт Google Analytics, причем версия плагина бесплатна.
После того, как плагин будет активирован, переходим на страничку Insights, а затем – « Настройки», где производим настройку плагина.
Для подключения Google Analytics к сайту WordPress жмем кнопку « ConnectMonsterInsights».
Чтобы завершить настройку, воспользуйтесь подсказками, которые будут появляться на экране. После того, как настройка будет завершена, вы сможете следить за аналитикой сайта на вкладке MonsterInsights
прямо на панели инструментов WP.
5.2 Оптимизация блога для SEO целей
Новички редко заморачиваются SEO оптимизацией при создании блога. Поисковая оптимизация, она же SEO, помогает пользователям отыскать в поисковых системах ваш блог. Для увеличения трафика, важно не откладывать оптимизацию своего блога.
Сначала нужно уделить время установке и активации плагина Yoast SEO. Данный плагин является прекрасным решением для ВордПресс, с помощью которого вы сможете оптимизировать блог.
После того, как плагин будет активирован, в меню появится новый пункт « SEO». После нажатия на него, вы будете перенаправлены на страничку настроек плагина. Настроить плагин будет несложно, так как у него имеется мастер быстрой настройки.
У плагина есть мастер быстрой настройки, который поможет вам пройти через настройку. Вы также можете настроить плагин самостоятельно следуя нашему руководству по Yoast SEO
для ручной настройки.
Мы также рекомендуем вам следовать нашему полному пошаговому руководству по WordPress SEO, чтобы максимально оптимизировать ваш блог для поисковых систем.
5.3 Важные плагины и специфика работы с WordPress
Существует масса WordPress плагинов, которые предоставят вам новые возможности. Но, как правило, новички не знают, какие именно плагины им нужны. Но не стоит огорчаться, мы поделимся с вами информацией о том, на какие плагины стоит обратить внимание.
Вот наш экспертный выбор лучших плагинов WordPress, которые вы должны проверить.
Бэкап– Вам необходимо систематически создавать резервные копии
блога, во избежание потери информации в случае сбоя. Обратите внимание на список лучших плагинов для этой цели, и это на самом деле крайне важно!
Безопасность– Немалое внимание стоит уделить безопасности WordPress.
Дизайн и настройка– Прекрасным решением станет плагин Elementor либо же стандартный редактор блоков, который поможет настроить дизайн домашней странички, создать целевые странички либо же даже пользовательских тем.
Шаг 6. Как сделать так, чтобы блог приносил доход?
Существует несколько способов заработка денег с помощью вашего блога, и о некоторых из лучших мы расскажем.
6.1. Google AdSense
Большинство блогеров зарабатывает на показе рекламы. Если цель ведения вашего блога – монетизация, то лучшим помощником станет Google AdSense.
Это огромная рекламная площадка для издателей и блогеров. Google выполняет роль посредника между рекламодателем и блогером, позволяя первым делать ставки на ключевые слова, которые соответствуют вашему контенту.
6.2 Партнерские программы ( Affiliate Marketing)
Участие в партнерке можно смело назвать вторым по популярности вариантом заработка среди блогеров. Тут все просто: вы советуете услуги / продукты, которые вам нравятся, своим посетителям, а в случае, если они их приобретают, вам начисляются комиссионные.
Важным моментом партнерского маркетинга является рекомендация качественных товаров, которыми вы на самом деле пользуетесь.
6.3 Интернет-магазин
Нередко блогеры продают всякие штуки прямо из своего блога, и зарабатывают благодаря этому. Продавать можно все, что угодно: картины, музыку, цифровые товары, реальные продукты и прочее. Лучшим плагином электронной коммерции для WP является WooCommerce.
Три метода заработка, описанные выше, не являются единственными возможными вариантами. Блоги WordPress могут быть созданы для публикации обзоров, кулинарных рецептов, разговоров о моде и прочего. Выбрав определенное направление, вы сможете получить уникальные возможности для заработка.
Также можно использовать свой блог в качестве членского сайта, посредством которого будете предлагать премиум-контент или курсы по подписке.
Визуальное редактирование в нашей теме
В наши дни все, что вам действительно нужно – это плагин под названием Elementor, один из самых универсальных и доступных конструкторов страниц для WordPress. Более того, не нужно платить ни копейки, чтобы начать им пользоваться!
В этом посте мы расскажем о том, как использовать Elementor, и рассмотрим некоторые из его лучших функций. К концу у вас обязательно сложится представление как этот плагин работает, из чего он состоит и всё такое.
Изучение возможностей плагина
Чуть позже мы рассмотрим создание наших собственных страниц и шаблонов с помощью плагина, но сначала давайте взглянем на его основные особенности!
Одной из самых важных отличительных черт любого конструктора является простота использования. Пользователь должен воплотить свое видение в реальность без большого количества головокружительных и бешеных поисков уроков на YouTube.
К счастью, Elementor – это самый простой из когда-либо созданных конструкторов. Это интерфейсный редактор, который даём возможность видеть все вносимые на страницы изменения непосредственно на этапе создания или редактирования.
Когда вы привыкнете к перетаскиванию элементов по странице, то поймете, что он настолько интуитивно понятен, насколько это возможно в принципе!
Большинство параметров настройки, которые вы найдете, основаны на виджетах (элементах) и даже в бесплатной версии их много.
Настройки Elementor
Также есть удобный менеджер ролей, который позволяет определить, какие типы пользователей могут иметь доступ к Elementor, а какие останутся сидеть на стандартном редакторе блоков (контроль над ролями доступен только в PRO версии).
Какие виджеты (элементы) доступны в бесплатной версии?
В целом, плагин построен на методе Drag-and-drop , и содержит много различных элементов структурированных по разделам.
В общей сложности вы получаете около 30 базовых элементов (все вкладки, кроме PRO), которые дают вам все необходимое для создания страниц.
Если базовых элементов недостаточно, можно получить дополнительные виджеты путем обновления до Elementor Pro.
Наконец, Elementor поддерживает виджеты, созданные сторонними разработчиками. Вы можете найти множество сторонних дополнений для плагина, которые еще больше расширяют библиотеку доступных элементов, или даже создать свой собственный виджет, используя API плагина.
Сравнение версий. А нужно ли покупать Elementor PRO?
Давайте посмотрим на сравнительную таблицу и продолжим:
Одной из самых привлекательных отличительных черт является « Конструктор темы», благодаря этой опции можно создавать неограниченное сочетание шапок и подвалов сайта, а также управлять их выводом. Только подумайте, что у вас появляется возможность создать уникальный внешний вид сайта вне зависимости от установленной темы!
Использование бесплатной версии конструктора
Шаг 0. Выбор правильной темы (шаблона) для сайта на базе Elementor
Шаг 1. Создание новой страницы или записи
Шаг 2. Начало работы в редакторе
Откроется редактор Elementor. Первое с чем мы будет работать это строки и столбцы, которые позволят разделить страницу на отдельные логические элементы.
В качестве примера мы создали две строки, первая строка содержит один, полно-размерный столбец, а вторая – 2 столбца.
В первую строку добавим заголовок:
Вы неверное уже заметили, что не смотря на то, что страницы была создана с названием « Моя страница в Elementor» – заголовок не отображается. Добиться этого можно используя родительскую тему « Hello» и её дочернюю тему.
В дочерней темы следует добавить следующий фильтр:
function wplb_disable_page_title( $return ) { return false; } add_filter( 'hello_elementor_page_title', 'wplb_disable_page_title' );
Важной особенность плагина Elementor являются его глобальные настройки. Поменять цвет заголовка можно используя вкладку « Стиль».
Но это крайне не рациональное использование редактора, так как эти действия нужно будет выполнять для каждого заголовка на каждой странице.
Шаг 3. Глобальные настройки
Для создания общей стилевой направленности сайта необходимо задать некоторые глобальные настройки:
В качестве примера была выбрана одна из доступных по умолчанию палитр, но её всегда можно отредактировать или создать собственную.
Шаг 4. Строки, колонки, элементы и их настройки
Даже, используя бесплатную версию плагина у вас есть тонна инструментов для воплощения вашего видения. Каждая
строка, колонка и отельный элемент может быть настроен. Вот где раскрывается настоящая сила Elementor как WordPress плагина.
Сейчас нет смысла описывать все доступные строкам и элементам настройки. Но в качестве примера давайте визуально отделим шапку сайта от заголовка.
Не дурно, да? Но давайте двигаться дальше и разбираться с шаблонами которые доступны в бесплатной версии плагина Elementor.
Шаг 5. Шаблоны страниц в Elementor
Нажав на иконку с изображение папки
открывается библиотека доступных и заранее сверстанных макетов, которые можно использовать при создание страниц и записей:
Тут все просто – выберем понравившийся шаблон и вставляем его в тело контента. Большинство самых “ вкусных”
шаблонов доступно только в PRO версии.
Elementor PRO
Несмотря на то, что благодаря бесплатной версии плагина вполне можно создать сайт, PRO версия
поможет максимально раскрыть весь творческий потенциал и даст доступ к эффективным маркетинговым инструментам, таким как PopUp (всплывающие окна).
Создание форм, также доступно только в Elementor PRO, а ведь благодаря им можно полностью избавиться от сторонних, жрущих тонны ресурсов, плагинов типа « Contact Form 7».
Редактор тем в PRO версии
Elementor – это особый случай, который одновременно прост в использовании и невероятно универсален, во многом благодаря своему конструктору тем.
Конструктор тем
меняет правила игры для всех, кто знаком с созданием собственных тем, поскольку он позволяет создавать собственные верхние и нижние колонтитулы (Header и Footer), а также другой динамический контент для вашего веб-сайта. Он позволяет вам переопределять важнейшие аспекты используемой WordPress темы!
Дальше потребуется ввести название шаблона, пусть он так и называется « Header». А после нажатия большой зеленой кнопки « Создать шаблон» начинается самое интересное.
Выберите один из понравившихся шаблонов и нажмите « Опубликовать», так как к редактированию мы вернемся чуть позже.
Будет предположено добавить условия отображения. Нажимаем « Add Condition», а так как там по умолчанию выбрана опция « Entire Site», что означает – показывать на всех страницах сайта, то нажимаем « Save & Close». Как вы уже поняли можно создавать и совмещать различные условия отображения динамических элементов, но в рамках этого руководства это рассматриваться не будет.
Возвращаемся к редактированию страницы, которую мы создали ранее. И что мы видим? Правильно, нашу созданную шапку. Давайте дополнительно стилизуем её, а для этого нужно нажать « Редактировать Header»
Как видно, всё достаточно просто и на интуитивно понятном уровне. Тем же способом можно создать подвал сайта (Footer)
и различные всплывающие окна, но об этом в другой раз.
Подведем итог
С точки зрения основных выводов, надеемся, вы понимаете, почему Elementor – фантастический конструктор, который берет на себя большую часть по верстке макетов. Он обеспечивает идеальный баланс между простотой использования и широкими функциональными возможностями, что делает его одним из самых доступных конструкторов, доступных для WordPress.
Надеемся, это мини-руководство дало вам отличную отправную точку для успешного использования плагина Elementor и его PRO версии.
После изучения вы будете понимать как шаг за шагом, безошибочно, сделать все необходимые настройки чтобы сайт был готов к дальнейшему наполнению и продвижению.
WordPress крутой движок, с помощью него можно разработать сайт любого формата:
- Блог
- Новостной сайт
- Лендинг ( мой гайд про лендинг)
- Сайт визитка
- Интернет магазин ( мой гайд про разработку магазина)
- Портфолио
- Онлайн школа ( мой гайд про школу)
Пошаговое руководство по созданию сайта на CMS WordPress для новичков
Определяемся с тематикой
Выбор тематики это ответственная задача. Могу посоветовать вам два правила, чтобы легче определиться с направлением. Начинайте проект либо про то, в чем вы эксперт, либо в той нише, которая вам интересна и вы хотите ее изучить.
Для вдохновения и поиска идей вы можете посмотреть каталоги сайтов, рейтинги:
Начинаю описание именно с этого пункта, т.к. в дальнейшем тематика будет влиять на дальнейшие настройки (оформление, виджеты и пр.)
Выбор домена и хостинга. Регистрация
Домен
Домен (доменное имя) — это имя сайта, то название, по которому посетители будут попадать на ваш блог. У моего сайта домен ichigarev.ru, у вас будет свой.
Как выбрать домен? 3 рекомендации
- Чем короче слово, тем лучше;
- Если нужный домен занят, попробуйте добавить цифры или тире, если подходит по логике и продолжает понятно читаться;
- Если домен на английском, то желательно без использования шипящих букв, иначе это выглядит так (ч — ch, ж — zh и пр.).
Если домен свободен, следующим шагом нужно проверить историю домена. Бывает так что домен ранее использовался и у него может быть плохая история, которая навредит вашему сайту.
У меня раньше был другой сайт по адресу http://ilyachigarev.ru, давайте сделаем проверку на его примере.
Для проверки предлагаю использовать два метода:
1. Проверка через сервис web.archive.org
Впишите домен и посмотрите покажет какую-либо историю домена или нет. Можно даже увидеть как выглядел сайт и какие были публикации.
Давайте выберем например 26 августа 2013 года и увидим как в это время выглядел сайт
2. Впишите интересующий домен в поисковик
Если находятся записи с таким доменом, значит он уже ранее был зарегистрирован. И тут уже выбор за вами регистрировать его повторно или нет.
Как выберите домен, не спешите его регистрировать, сначала давайте купим хостинг.
Хостинг
Хостинг — это место, где хранятся все файлы и база данных сайта. Видов много, я расскажу о двух, которые подходят новичкам.
Обычный хостинг
- сайт пока что мало весит, то есть нужно мало места;
- и пока что маленькая посещаемость, нужно немного ресурсов для обработки запросов.
Но когда посещаемость сайта перевалит за 1000 посетителей в сутки, вам придется или покупать тариф подороже или переезжать на VDS хостинг. Я так и сделал, когда трафик на моем блоге вырос. Вы же можете сразу купить VDS, если в дальнейшем не хотите заморочек с переносом сайта. Средняя цена обычного хостинга 150 руб./мес.
На обычном хостинге также важно использовать выделенный ip адрес. Если этого не сделать, то ваш сайт будет находится в одном «месте» с сайтами других разработчиков.
Репутация вашего сайта будет зависеть от «соседей» и если эти соседние проекты некачественные или используют запрещенную информацию, то они будут тянуть ваш сайт вниз. Поэтому если вы хотите успешно продвигать свой ресурс в интернете, то выделенный ip это необходимость.
На моем блоге есть отдельная статья, которая посвящена вопросам домена и хостинга, в конце вы найдете видео уроки как зарегистрировать хостинг и домен — открыть статью в новой вкладке.
- Выберите вкладку Хостинг;
- Выберите тариф. Для начала можно выбрать самый простой, если планируете размещать только один сайт;
- Впишите свой емейл и ФИО, которые требуются при регистрации;
- После успешной регистрации вам на почту придут данные для входа, логин и пароль;
- Зайдите с помощью них в панель управления хостингом и пополните баланс. Оплатить можно 1 месяц, можно сразу на год вперед. Лучше платить на год, так получается экономнее;
- Хостинг готов к работе.
- На главном экране в панеле управления хостингом выберите Домены и поддомены > Зарегистрировать домен;
- Впишите нужный домен, после проверки на занятость появится зеленая галочка, домен свободен, нажимаем Зарегистрировать:
- Далее нужно нажать Создать нового администратора и вписать свои правдивые данные, чтобы домен был закреплен за вами, за настоящим человеком. Если вы делаете сайт для кого-то, то вписывайте данные владельца;
- После всех настроек оплачиваем домен и ждем его активации.
Заметка: Если у вас что-то не получится при регистрации домена или хостинга, смело пишите им в поддержку, помогут. Также если вас беспокоит переезд с одного хостинга на другой, то могу вас успокоить, в большинстве случаев хостинг заинтересован чтобы ваш сайт обслуживался именно у него и с радостью предоставляет бесплатную услугу по переносу вашего сайта на свой хостинг.
Установка SSL-сертификата
SSL сертификат обеспечивает безопасное соединение между сайтом и посетителем. В последнее время это обязательная настройка, чтобы и поисковые системы и посетители считали ваш сайт безопасным.
В итоге ваш проект будет доступен по ссылке https://, а не просто http://.
Сертификат я устанавливаю перед установкой WordPress, чтобы в последствии не появилась проблема «смешанный контент», это некоторые файлы сайта открываются по http:// и если есть хотя бы один такой файл, то браузер будет ругаться, пока мы это не исправим.
Для новичков я рекомендую устанавливать бесплатный сертификат Let’s encrypt. Сегодня он почти ничем не отличается от платного. Установили один раз и хостер сам будет его обновлять. Но если все же хотите установить платный, то обойдется он примерно в 1000 руб./ год. Его нужно будет обновлять, либо же сразу купить на 2-3 года и забыть на это время.
Купить платный SSL можно сразу на хостинге.
Есть два метода установить WordPress.
1 — вручную
2 — с помощью инструментов хостинга (если такая функция есть у хостера)
Я чаще выбираю первый, потому что все данные ты создаешь самостоятельно, а хостинг часть процесса автоматизирует. В любом случае, независимо от того какой метод вы выберите, он займет у вас не более 10-ти минут.
Общие
- Название сайта— пишем как будет называться ваш проект.
- Краткое описание— пишем 1-2 предложения с использованием ключевых слов по вашей тематике, о чем ваш сайт.
Остальные настройки как правило автоматически сделаны правильно. Сохраняемся и идем дальше.
Написание
- Форматирование— здесь я убираю галочки
- Сервисы обновления— тут вставляю такие значения (можете также скопировать и вставить на своем сайте):
Больше ничего не меняю. Сохраняемся.
Чтение
- На главной странице отображать— здесь можно задать что мы покажем на главной странице, ленту блога или статическую страницу. Я выбираю второй вариант и создаю лендинг, вы же можете пока что оставить ваши последние записи.
- Видимость для поисковых систем— галочка не должна стоять.
Обсуждение
Медиафайлы
Я ставлю все значения на 0. Потому что мне не нужна автоматическая обрезка картинки, я ее сам изменяю через редактор Photoshop, и если оставить цифры, то с каждой загруженной картинкой, WordPress будет создавать еще три копии с разными размерами, будет занято больше места на хостинге, а это нам не нужно.
Помимо многих преимуществ, одно из главных это админ панель на русском языке. То, что многих тормозит в начале пути создания сайта.
Второй сайт, где я рекомендую покупать шаблоны это ThemeForest. Это уже англоязычный магазин, где продаются тысячи шаблонов. Чтобы не блуждать среди них, посмотрите подборку про 45+ лучших шаблонов для блога на WP.
Советы по выбору шаблона
- Смотрите как отображается лента статей;
- Смотрите как выглядит отдельная статья, есть сайдбар (боковая колонка или нет), если вы решите использовать его на блоге;
- Если есть документация или описание к шаблону, прочитайте какие настройки вы сможете делать после его установки;
- Если решите использовать бесплатный шаблон, то устанавливайте его через админ панель Внешний вид — Темы. Если скачать со стороннего ресурса, велик шанс словить вирус;
- Если устанавливаете платный шаблон, то читайте отзывы которые пишут те кто купил тему;
- Посмотрите когда было последнее обновление шаблона, если больше года назад, то я бы подумал насчет такого варианта. WordPress постоянно обновляется и шаблонам периодически требуются обновления.
Установка и настройка шаблона
У каждого шаблона настройки будут отличаться, особенно у платных. Так что в этом разделе я дам только общие рекомендации.
- Настройки темы находятся во вкладке «Внешний вид» — «Настроить», либо «Внешний вид» — [Название темы], либо отдельной вкладкой с названием темы;
- Настройте заголовок и описание сайта в левом верхнем углу, либо загрузите логотип;
- Выберите размер и семейство для шрифтов (заголовков и наборного текста);
- Выберите основные цвета сайта для элементов и шрифта;
- Сделайте настройки нижней части сайта (подвала).
Примеры панели настроек у шаблонов:
Плагины
Плагины это дополнения для сайта.
Изначально система Вордпресс не настроена должным образом для продвижения и дополнения сайта нужным функционалом. Чтобы сделать сайт настроенным под свои нужды, мы добавим необходимые плагины. Плагинов для Вордпресс очень много, десятки тысяч, их разрабатывают обычные люди, пользователи, компании.
Как установить плагин
В админке сайта выберите Плагины » Добавить новый » Выберите из каталога WordPress или загрузите свой.
Плагины, которые я рекомендую для каждого сайта:
- Clearfy Pro
- Yoast SEO
- WP Super Cache
- Antispam Bee
- All In One WP Security
На мой взгляд, это «стандартный набор джентльмена», который должен быть на каждом ресурсе. Ниже в каждом разделе я распишу для чего нужен каждый плагин.
Настройки для улучшения СЕО
Подготовить сайт для СЕО продвижения важно, посетители из поисковых систем это основной источник трафика.
Плагин Clearfy Pro — мега плагин для сайта
Сразу скажу что он платный, но это мега вложение в ваш сайт. В нем сочетается два качества, он легкий, не нагружает систему и сочетает в себе много важных настроек для правильной работы сайта, СЕО, очистки лишнего мусора и защиты от злоумышленников. Подробнее о плагине вы можете прочитать в моем обзоре
или на сайте разработчиков.
Это все те же WPShop, чьи шаблоны я рекомендовал выше.
Если не ставить Clearfy Pro, взамен тогда нужно установить:
- Cyr to Lat enhanced— делает транслитерацию символов с русских на латиницу, ссылка на плагин.
- С другими плагинами для чистки кода от мусора я не работал, поэтому информацию можете поискать самостоятельно.
Но! Имейте ввиду, если даже вы не установите этот плагин на блог, ничего страшного не произойдет, это не панацея, блог будет также работать. Просто если его установить, то сайт будет более привлекательным для поисковых систем, по сравнению с вашими конкурентами. Можете установить его со временем.
Плагин Yoast SEO — улучшаем СЕО
Основной плагин для СЕО. С помощью него мы будем прописывать Заголовок и Описание для каждой статьи, страницы, рубрики. Это мега важно для продвижения.
Также с помощью плагина мы создадим карту сайта XML, которая важна для ПС (поисковых систем).
Плагин кэширования (WP Super Cache)
Нужен для настройки кэширования. Это ускорит загрузку страниц за счет того, что страницы будут сохраняться в кэше и при повторной загрузке будут быстрее открываться, нежели если она загружалась каждый раз по новой.
Файл robots.txt
Важный файл для ПС, он показывает какие файлы и страницы на сайте можно индексировать, а какие нет. В сети много вариантов сборки файла Роботса, я вам прикреплю свой вариант, который использую на своих блогах и для клиентов.
Ссылка на архив с файлом robots.txt. Файл нужно сначала извлечь из архива, откройте его через блокнот и отредактируйте в двух местах, там где site.ru замените на свой домен, а затем сохраните файл и закачайте в корень сайта.
Настройка защиты на сайте
Защищать сайт нужно от двух бед, это спам и взлом.
Antispam Bee — плагин для борьбы со спамом
All In One WP Security — плагин для борьбы со злоумышленниками
Основной плагин для защиты от взлома. Имеет множество полезных функций. Ссылка на плагин All In One WP Security.
Примечание.
Всегда помните, что на 100% защититься от злоумышленников вы не сможете, всегда найдется кто-то более проворный, кто сможет взломать сайт, если захочет. Но и не нужно этого бояться, на моей практике пока что ни мои, ни сайты клиентов не взламывали.В любом случае вам нужно научиться делать бэкапы сайта (резервные копии), чтобы всегда иметь возможность восстановить сайт, если с ним что-то произойдет. Как правильно делать бэкап я сделаю отдельную статью.
Дополнения для сайта
Итак, сайт мы создали, настроили шаблон, СЕО и защиту. Теперь давайте посмотрим какие дополнительные элементы мы можем поставить на наш проект, чтобы он был еще более эффективным.
Наиболее популярные дополнения:
Приём оплаты
Если у вас интернет-магазин или вы что-то продаёте с блога, например курсы, то можете подключить сервис приёма оплаты. Это делается для удобства посетителей и для соблюдения закона об оплате товаров и услуг через интернет.
Контактная форма
Чтобы получать сообщения или заявки с сайта, нужно поставить плагин для формы.
Форма подписки на рассылку
- MailChimp
- SendPulse
- Getresponse
- MailerLite
- Unisender
После регистрации на любом из сервисе и создании списка для подписчиков, вы создадите форму и код данной формы сможете добавить на сайт. Например можно поставить после статьи или в сайдбар.
Модальное окно (попап)
В данном окне вы можете что-то предложить или перенаправить посетителя на нужную вам страницу, например страницу с акцией или интересной свежей статьей. Также можно добавить форму заявки /подписки в модальное окно. Наиболее популярный плагин из бесплатных это Popup Maker.
Картинки в модальном окне
Частая ошибка на блогах когда при клике на картинку она открывается в новой вкладке, тем самым посетитель уходит со статьи. Чтобы этого не допустить нужно поставить плагин, который будет открывать картинки в попап окне, на случай если этой функции нет в выбранном шаблоне. Ссылка на плагин Easy FancyBox.
Кнопки соцсетей
Связь с соцсетями тоже важный пункт для продвижения блога. Вы можете добавить два вида кнопок:
- Кнопки соцсетей, которые будут вести на ваши профили/группы, канал на Ютубе. Можно также использовать виджеты.
- Кнопки, с помощью которых можно поделиться в соцсетях статьей с вашего сайта.
В премиум шаблонах такой функционал уже реализован, если вы добавляете его в ручную, то могу посоветовать плагины:
Рекламные баннеры можно добавлять в сайдбар или в тело статьи: до, в середине или после статьи.
Онлайн чат однозначно повысит конверсию вашего сайта, чем бы вы не занимались.
Могу посоветовать сервис JivoSite. У него есть как бесплатная версия, так и платная версия, которую вы можете в течении двух недель протестировать. Подробный гайд по Живосайту я сделал в отдельной статье — Обзор сервиса Jivosite.
При добавлении интересных плюшек на блог стоит помнить о балансе, не перегружать как визуально, чтобы не пестрило в глазах и удобно было читать статьи, так и не нагружать в плане скорости загрузки, чтобы она была максимально быстрой.
Делаем начальное наполнение сайта
Сайт готов и еще рано идти отдыхать, сейчас начинается самая работа, то ради чего и создавался сайт, теперь его нужно наполнить, давайте сделаем первоначальное и самое основное наполнение.
Меню (структура сайта)
Как правило у сайта горизонтальное меню, которое ведет на различные страницы. Что именно добавить в меню каждый решает сам, вот пункты которые встречаются почти на каждом сайте:
- Главная
— ведет на главную страницу сайта. Можно такой пункт меню не делать, т.к. пользователи привыкли что при клике на логотип попадаем на главную; - Обо мне / О сайте
— страница на которой рассказываете о себе или проекте; - Блог / Новости
— отдельный пункт в меню стоит делать если у вас на главной не лента статей. а например лендинг; - Контакты
— страница с информацией как с вами связаться.
Это база, дополнительно можно придумать миллион других вариантов, например:
- Кейсы / Примеры работ / Портфолио— страница с вашими работами, например у меня так;
- Услуги— описываете свои услуги, у меня так;
- Реклама— тут расскажите какие варианты рекламы у вас есть, у меня так;
- Бесплатно— материалы, которые посетители могут получить/скачать бесплатно, возможно подписавшись на рассылку;
- Курсы / Обучение / Магазин— страница где показываете свой товар, у меня так;
- Полезные ссылки— любые полезные ссылки по теме, я сделал так;
- Видео— страница с видео;
- Инфографика— страница или рубрика с какой-то инфографикой
Добавляйте пункты в меню в зависимости от ваших целей.
Меню настраивается во вкладке Внешний вид » Меню.
Задайте название для меню и выберите страницы, которые будут в меню. Помимо страниц можно также добавлять Записи, Произвольные ссылки или Рубрики.
Страницы
Давайте создадим первую страницу и добавим ее в меню. Страницы создаются в панели Страницы » Добавить новую. Задайте название и заполните необходимой информацией, нажмите Опубликовать. Теперь чтобы на сайте ее стало видно, добавьте ее в меню.
По аналогии создайте и остальные страницы.
Записи (статьи)
Главный инструмент для контентного сайта это конечно же статьи. Добавляются они из панели Записи » Добавить новую. Пока что также можете задать Заголовок и наполнить текстом, нажмите Опубликовать и посмотрите как статья появится на сайте.
Как писать СЕО статьи
Как написать популярную статью
Рубрики
Чтобы не запутаться в десятках и сотнях статей, в Вордпресс вы можете из разбить на категории (рубрики). Создать их можете в панели Записи » Рубрики. Когда их создадите и по новой зайдете в редактор статьи, то справа можете выбрать рубрику за которой статья будет закреплена.
Метки
Еще один вариант чтобы объединять статьи по ключевым словам, это метки. Метки можете указывать при редактировании статьи или в панели Записи » Метки. Метки, как правило, отображаются после статьи и при клике на метку открывается список статей в которых также была указана эта метка.
Разберем пример.
У нас есть статья на кулинарном блоге «Как правильно сварить манную кашу на завтрак». Статья будет находится в рубрике «Каши», а метки можем задать «Завтрак», «Детское меню».Тем самым посетитель сайта может выбрать что ему интересно дальше изучить после прочтения статьи, перейти в рубрику и посмотреть другие каши или посмотреть другие рецепты по меткам Завтрак или Детское меню.
Заключение
Давайте в заключении я еще раз напишу весь план разработки сайта в краткой форме:
В данной статье я делюсь своим опытом разработки лендингов. Разработкой сайтов, в том числе и лендингов, я занимаюсь более 7-ти лет и есть чем поделиться. Статья направлена больше для новичков, кто хочет понять как создать лендинг с нуля, но также если у вас уже есть опыт разработки лендингов, надеюсь вы найдете что-то интересное для себя.
Как сделать landing page (лендинг) — пошаговая инструкция из 9-ти этапов
Этап 1. Подготовка
Цель лендинга
Первым делом определяемся с целью лендинга, что мы хотим получить от посетителей страницы.
Как правило это что-то одно из трех вариантов:
1. Продажа товара / услуги (например: продажа меда, продажа услуг по разработке логотипа, продажа онлайн курса, продажа наушников и пр.);
2. Получение контакта (например: подписка на рассылку, заявка на замер, заявка на телефонный звонок);
3. Информирование (например: приглашение на бесплатное оффлайн мероприятие, промо страница магазина с акциями).
Определяем целевую аудиторию и что для нее важно
На этом шаге нам важно понимать кто целевая аудитория для нашего предложения, какие у нее боли, какие желания и страхи, и что эти люди хотят получить в итоге. Все это важно понимать, чтобы создавать элементы сайта ориентируясь на ЦА (целевую аудиторию).
Как определить лецевую аудиторию?
- Проанализируйте тех клиентов, с которыми уже работали или работаете сейчас;
- Спросите у клиентов, что для них важно. Да, прям так, просто позвоните или напишите, заранее подготовьте список вопросов;
- Вспомните, а лучше записывайте вопросы, которые вам чаще всего задают по поводу вашего продукта;
- Почитайте тематические сайты/форумы, посмотрите что волнует ваших клиентов.
Смотрим конкурентов (бенчмаркинг)
Когда вы выписали все свои мысли и идеи касательно будущего лендинга, самое время заняться анализом конкурентов (бенчмаркингом). Если вы уже знаете своих конкурентов — отлично, если еще нет, ищите в поисковиках по ключевым словам вашей ниши.
Цель анализа — это найти и посмотреть, что конкуренты делают плохо и не повторять их ошибок, и что делают хорошо, посмотреть идеи, недостающие блоки, интересные решения в плане дизайна. Это не значит что их нужно просто скопировать, конечно так делать не нужно.
Сохраняйте идеи, затем на этапе написания текста и разработки дизайна адаптируете под свой проект.
Я создаю отдельную папку с названием «Идеи для проекта» и делаю скриншоты интересных блоков сайта.
Этап 2. Пишем текст для лендинга
Для многих (в том числе и для меня), составление текста является самым сложным этапом разработки, поэтому лично я стараюсь этот этап всегда делегировать копирайтеру.
Хаос в голове перенесим на бумагу
Просто, не думая о последовательности, перенесите все мысли и идеи по будущему ленду на бумагу. Выпишите всё, о чем хотите рассказать. Когда вы напишите такой список мыслей, плюс мы посмотрели идеи у конкурентов, следующим шагом мы все это объединяем и составляем блоки и структуру лендинга.
Составляем блоки лендинга
Лендинг состоит из определенных блоков, нельзя просто написать сплошной текст как статью и просто опубликовать. Это будет ужасно неудобно читать.
Вот основной список блоков, который можно встретить на 90% лендингов:
- Первый экран с УТП (уникальным торговым предложением);
- Раскрытие продукта (Описание услуги или товара);
- Информация об авторе / компании;
- Отзывы;
- Кейсы (Истории успеха);
- Форма / призыв к действию;
- FAQ (Ответы на частые вопросы);
- Контакты / подвал сайта.
Какие еще могут быть блоки на сайте:
- Факты в цифрах;
- Выгоды (преимущества);
- Видео;
- Портфолио;
- Для кого;
- Этапы сотрудничества (или Как сделать заказ, Как оставить заявку);
- Тарифы и цены;
- Платёжная кнопка;
- Партнеры;
- Галерея;
- Расписание;
- Команда;
- Сертификаты, дипломы, благодарственные письма;
- Документы.
Когда готов каркас лендинга, начинаем писать текст. Вы можете это сделать сами или отдать на аутсорс копирайтеру.
Советы по составлению текста
- Главное ставим в начале.
Не нужно в начале сайта писать о себе, покажите сначала свой продукт. - Замените общие слова на факты.
Не нужно убеждать посетителей в чем-либо, оставьте это право за ними. (Пример: не пишите, что вы лидеры на рынке которым можно доверять, покажите отзывы компаний, которым вы предоставляли услуги и они остались довольны, в дополнение приложите оригинал отзыва, чтобы не быть голословным). - Проработайте особенно хорошо первый экран и УТП.
После захода посетителя на лендинг у вас есть три секунды чтобы захватить его внимание. Если не успели, то человек закроет страницу и будет искать дальше. Первый экран должен быть максимально релевантным запросу, через который посетитель попал на сайт. (Пример: если человек ищет «Бухгалтерия для ИП», не нужно показывать лендинг с заголовком «Ведение бухгалтерии для ООО»). - УТП (Уникальное торговое предложение).
Проще говоря главный заголовок и описание, которое должно емко рассказать о чем данный лендинг. У ТП вы можете составить по технологии 4U. - Чем короче тем лучше.
Старайтесь писать блоки с текстом как можно короче. Длинные портянки текста никто не читает, сегодня у людей всегда нехватка времени и это нужно учитывать. Если все же нужно предоставить много информации, то разбивайте ее на абзацы, блоки. - Больше заголовков.
Абзацы текста не должны быть написаны просто так, без заголовка. Большинство посетителей заходя на сайт, сначала проматывают сайт пытаясь оценить туда они попали или нет. И здесь как раз заголовки играют важную роль, потому что пробегать глазами и оценивать сайт они будут именно по заголовкам.
Не хотите составлять текст самостоятельно? Найдите копирайтера, который сделает это за вас.
Где искать копирайтера
- Биржа копирайтинга ContentMonster.ru
- Биржа копирайтинга Etxt.biz
- Частные компании или специалисты. Их вы можете поискать через поиск или в соцсетях
Обратиться к копирайтеру вы можете не только для разработки текста с нуля. Лучше обращаться с готовым списком блоков, с первичными набросками, или даже уже с составленным текстом, который копирайтер «оживит», сделает более интересным, исправит ошибки.