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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Если вы регистрируете домен отдельно от хостинга, то сделайте это так:

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

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

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

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

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

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

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

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

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

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

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

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

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

Конец ознакомительного фрагмента.

Текст предоставлен ООО «Литрес».

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

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.