Сайт на 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. Далее, следуя инструкциям, приведённым в этой книге необходимо установить движок на хостинг. Не качайте ПО с неофициальных сайтов!

Рис. 9. Официальный сайт ВордПресс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы сделать сайт, необходимо совершить следующие шаги: зарегистрировать доменное имя, купить хостинг, купить сертификат безопасности, залить на хостинг файлы движка и настроить тему дизайна. В этой главе рассмотрим первоначальные шаги до установки 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.

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

Рис. 10. Регистрация домена

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

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

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

Рис. 11. Выбор имени домена

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

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

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

Рис. 12. Оформление домена

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

Рис. 13. Оформление домена

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

Рис. 14. Анкета для домена

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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