Как создать сайт на Вордпресс с нуля: просто о домене, хостинге, движке и во сколько это вам обойдется

image

10 апреля 2020 WordPress Bootstrap

Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или «натянуть» HTML шаблон; ну или в конце концов работать в этом направлении получая свои кровные.

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

Вот ещё один пример, когда может понадобится создать тему с нуля. На одном известном мне сайте изначально был установлен шаблон, который полностью устраивал хозяина и дизайном и функционалом. Но скорость его работы была занижена за счет лишних скриптов и не нужного ему функционала. Я думаю это проблема любого шаблона для любой CMS. После долгих мучений с оптимизацией было решено разработать шаблон с нуля на чистом Bootstrap, чтобы не было ничего лишнего, только то, что нужно. На самом деле это заняло не так много времени. Гораздо больше он бы потратил на оптимизацию готового шаблона. Вся работа заняла около недели. И вуаля в Google PageSpeed 99 пунктов.

В этом уроке я покажу как создать тему для WordPress с нуля используя начальный шаблон Bootstrap 4. На самом деле вы можете использовать любой HTML шаблон или сверстать его самостоятельно суть от этого не изменится.

Структура шаблона

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

style.css — файл стилей в корне темы. В нём так же указывается основная информация о шаблоне, но можно её не добавлять. Без этого файла WordPress будет выдавать ошибку темы. Лично я создаю его именно для того, чтобы тема работала и оставляю его пустым. index.php — содержимое главной страницы header.php — общая шапка сайта footer.php — общий футер сайта functions.php — файл с функциями темы single.php — шаблон записи page.php — шаблон страницы category.php — шаблон списка записей категории archive.php — шаблон списка записей архивов 404.php — содержимое страницы ошибки 404 search.php — шаблон страницы со списком результатов поиска

css/ — папка со стилями js/ — папка со JS скриптами

image

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

Создание темы WordPress

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.

Активация новой темы

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

/* Theme Name: Progme Version: 1.0 Description: Тема Bootstrap 4 Author: Progme Author URI: https://it-blog.ru */

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.

HTML шаблон

Как я уже говорил мы будем использовать стандартный начальный шаблон Bootstrap 4. Скачать его можно на по ссылке Starter template.

Bootstrap v4 начальный шаблон

Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.

Официальный сайт Bootstrap

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

<!doctype html>             Starter Template for Bootstrap             

Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.

Добавляем API WordPress

Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:

  wp_title('|', true, 'right'); 

Теперь заголовок окна браузера будет содержать тайтл из системы WordPress.

И ниже подключаем API. Код должен находится внутри тега :

  wp_head(); 

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

Далее нужно перед закрывающим тегом добавить следующий код:

  wp_footer(); 

Эта функция выведет панель инструментов WordPress вверху сайта.

Правильное подключение скриптов

Мы вывели скрипты прямо в шаблоне указав путь до них через функцию get_template_directory_uri();. Вы конечно можете оставить это и так. Я и сам так делал. Но по правилам WordPress скрипты должны подключаться через специальную функцию в файле functions.php. Давайте подключим их правильно. Делается это следующим образом:

function it-blog_style_frontend() {  wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css'); wp_enqueue_style('styles', get_stylesheet_directory_uri() . '/css/style.css'); }   add_action('wp_enqueue_scripts', 'it-blog_style_frontend');  function it-blog_include_myscript(){ wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', '', '1.0', false);  wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', '', '1.0', false); }   add_action('wp_enqueue_scripts', 'it-blog_include_myscript');

Как вы можете заметить ещё я подключил файл style.css, в нём будут находится пользовательские CSS стили, которые рано или поздно вам понадобятся.

header.php

Итак, пришло время «разрезать» наш шаблон на шапку и футер. Для чего это нужно? На большинстве сайтов шапка и футер одинаковые на всех страницах, меняется только часть с контентом. Так получается и в нашем шаблоне. После манипуляцией с разделением, шапку и футер станет проще и удобнее изменять сразу для всех страниц. Мы просто отделим от нашего шаблона часть до динамического контента и часть после. Еще я убрал лишнее из шаблона и добавил сайдбар справа. Про него я расскажу позже.

Вот что получилось:

<!DOCTYPE html>         wp_title('|', true, 'right');    wp_head();    

Пока меню выводится статично, но это мы исправим позже.

footer.php

Добавляем код футера. Здесь же мы подключаем функцию для вывода виджетов dynamic_sidebar():

Регистрация виджетов

Чтобы виджеты отобразились на страницах сайта, необходимо зарегистрировать из функцией register_sidebar() в файле functions.php. В аргументах функции я так же добавил немного разметки Bootstrap , которая будет добавлена в каждый блок с виджетом.

if (function_exists('register_sidebar')) register_sidebar(array( 'before_widget' => '', 'after_widget'  => '

1

Создайте аккаунт хостинга для своего будущего сайта

Тариф хостинга WordPress-1

2 сайта, 4 ГБ NVMe SSD , SSL-сертификат бесплатно , техническая поддержка 24/7/365

Стоимость месяца услуг при оплате за 1 мес 1 год 99 руб/мес

Заказ хостинга по тарифу WordPress-1

2

Установите CMS WordPress в один клик из панели управления

Перейдите по ссылке для входа в Панель управления и укажите логин и пароль из письма.

В Панели управления перейдите в раздел «Аккаунт» → «Владелец» и укажите ваши ФИО. Это нужно для безопасности: любые действия с аккаунтом может выполнять только его владелец.

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

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

Когда сайт будет готов, вы сможете зарегистрировать новое красивое имя и перенести на него проект самостоятельно или с помощью службы поддержки. Для регистрации добавьте выбранный домен в разделе «Сайты и домены» → «Добавить сайт» и отметьте опцию «Зарегистрировать этот домен». Домены регистрируются на год и их стоимость зависит от зоны (.RU, .COM и другие). Подобрать подходящее имя для сайта и узнать стоимость регистрации можно на нашем сайте.

Рекомендуем не торопиться и не регистрировать домен пока идет тестовый период.

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

2. Знакомимся с CMS WordPress

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

Установка WordPress

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

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

Давайте войдем в административную панель и ознакомимся с ней. Ссылка для входа в административную панель WordPress имеет общий вид: http://domain.ru/wp-admin

Подставьте в эту ссылку адрес своего сайта вместо domain.ru и перейдите по ней. Логин и пароль для входа в административную панель отправляются на контактный email вашего аккаунта хостинга после установки WordPress.

Административная панель WordPress

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

Кликнув по иконке с домиком, вы откроете свой сайт в режиме просмотра. Кружок со стрелками иллюстрирует раздел обновлений: здесь вы найдете информацию о наличии актуальных версий компонентов сайта. Текстовое облако — раздел комментариев, оставленных пользователями сайта. Знак «плюс» позволяет быстро перейти к созданию нового элемента (например, новость или статью). В правом верхнем углу доступен раздел настроек профиля пользователя. Здесь можно изменить пароль или контактный email и задать свою аватарку.

Ознакомимся с разделами левой вертикальной панели. На снимке экрана она обведена оранжевым маркером.

В разделе «Консоль» вы найдете подсказки для быстрой настройки сайта. Раздел «Записи» позволяет работать с записями на сайте: здесь можно, например, создавать новости или редактировать свои публикации. Раздел «Медиафайлы» предназначен для загрузки и удаления различных данных: изображений, видео и т.д. В разделе «Страницы» доступно создание и редактирование страниц.

Возможно, у вас возникнет вопрос, в чем разницами между «Записями» и «Страницами»? Запись — это публикация, которая привязана к дате и автору: новость или статья, например. Ниже на снимке экрана мы показали создание записи в разделе «Записи» → «Добавить новую».

Страница — статический раздел сайта, который не привязан к дате и автору. Например, разделы «Контакты» и «Обо мне». Раздел создания страницы («Страницы» → «Добавить новую») вы видите на снимке экрана.

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

Раздел «Настройки» содержит несколько полезных вкладок:

  • «Общие»: здесь вы найдете основные настройки сайта: язык сайта, его краткое описание, формат даты и т.д.;
  • «Написание»: в этой вкладке доступна функция изменения формата записей;
  • вкладка «Чтение» позволяет настроить количество отображаемых записей на странице;
  • во вкладке «Обсуждение» настраиваются комментарии;
  • «Медиафайлы»: здесь задаются размеры изображений;
  • во вкладке «Постоянные ссылки» настраиваются URL — ссылки сайта, которые отображается в адресной строке браузера;
  • раздел «Конфиденциальность» позволяет добавить на сайт информацию о сборе, хранении и обработке личных данных посетителей сайта.

В этом уроке вы познакомились с меню административной панели CMS WordPress и функциями её разделов. Вы готовы приступить к созданию сайта? Скорее открывайте следующий урок!

3. Устанавливаем и настраиваем тему

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

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

Чтобы начать поиск темы перейдите в раздел «Внешний вид» → «Темы». Выберите одну из популярных или воспользуйтесь фильтром в каталоге.

Мы будем использовать тему Nisarg. Она проста в настройке и выглядит современно. Вводим ее название в поиске, нажимаем «Установить», а затем «Активировать».

Вы попадете на главную страницу раздела и увидите сообщение о том, что тема успешно активирована. Нажмите «Перейти на сайт», чтобы приступить к настройке.

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

Начнем с основных настроек, кликнув на «Свойства сайта». Укажите название и краткое описание сайта. Они отобразятся в шапке. После внесения изменений нажмите «Опубликовать».

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

В разделе «Цвет выделения» измените цвета иконок и ссылок.

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

Рекомендуемый размер шапки для этой темы 1600×400 пикселей. Найдите картинку с подходящим разрешением.

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

Вот некоторые из таких сайтов:

pixabay.com picography.co ru.freeimages.com

Для своего проекта мы нашли картинку с котиком и скачали ее в максимальном разрешении.

Затем загрузили в онлайн-редактор, нажав «Upload».

Уменьшили размер картинки, чтобы не обрезать лишнее.

И кадрировали, указав требуемый размер: 1600×400 пикселей

Кнопка «Download» позволит сохранить обработанное изображение на компьютер.

В итоге у нас получилась такая шапка:

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

Теперь создадим меню. Вы сможете отредактировать его, когда наполните сайт контентом.

Перейдите в раздел «Меню» и нажмите «Создать новое меню». Придумайте название: оно будет видно только вам. Чтобы меню отображалось вверху страницы, отметьте чекбокс «Главное меню шапки». Теперь добавьте первый раздел — ссылку на главную страницу. Нажмите «Добавить элементы» и в списке страниц выберите «Главная». Опубликуйте изменения.

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

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

4. Плагины WordPress

Плагины WordPress – это приложения, которые позволяют добавлять новые функции и возможности на ваш сайт WordPress. Их можно назвать фундаментом вашего сайта: именно они выполняют все важные функции, которыми пользуются как администраторы, так и посетители ресурса. С помощью плагинов вы можете ускорить работу вашего сайта, создать интернет-магазин, вести статистику посещений и многое другое. Мы выбрали 2 самых полезных инструмента, которые помогут вам начать работу.

WooCommerce

Хотите открыть свой собственный интернет-магазин? Мы понимаем, что создание интернет-магазина своими силами может казаться невыполнимой задачей. Мы расскажем как заложить фундамент для вашего интернет-магазина при помощи одного из самых популярных плагинов – WooCommerce.

Чтобы начать установку плагина, перейдите в раздел «Плагины» → «Добавить новый».

Введите название плагина WooCommerce и нажмите «Установить».

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

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

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

Чтобы обеспечить оплату через PayPal, потребуется также установить другой полезный плагин – Jetpack. Кликните «Продолжить» и подождите, пока этот плагин установится. Если вы не желаете принимать оплату через PayPal, деактивируйте его и перейдите к следующему шагу – доставке.

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

Нажмите кнопку «Продолжить», чтобы подключить различные расширения: добавить темы для индивидуальной стилизации вашего магазина, создавать рассылки через MailChimp, синхронизировать магазин с продуктами Facebook.

Если ранее вы отметили пункт об установке Jetpack, следующим шагом будет настройка этого многофункционального плагина.

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

Осталось загрузить товары и можно приступать к работе.

Плагин W3 Total Cache

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

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

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

Плагин W3 Total Cache делает работу пользователей сайта комфортнее, сокращая время загрузки веб-страниц. Мы рассмотрим самые необходимые функции, которые подойдут для большинства проектов.

Установите плагин из раздела «Добавить новый».

После установки плагина в боковом меню появится пункт «Performance». Перейдите в раздел «General Settings» и найдите блок «Page cache». Основная настройка плагина сводится к отметке галочкой необходимых нам опций. Не забудьте сохранять все внесенные вами изменения.

Главная функция — Page cache. Она будет кешировать страницы вашего сайта. Активируем ее, кликнув на «Enable».

Пропускаем раздел Minify и Opcode Cache и переходим к Database Cache. Включаем кеширование базы данных, кликнув на «Enable».

Нажимаем кнопку «Save all settings», чтобы сохранить настройки кеширования.

В боковом меню перейдите в раздел «Page cache». Если на сайте доступна регистрация пользователей, отключите опцию «Don’t cache pages for logged in users». Нажмите «Save all settings».

Ниже в блоке «Cache Preload» отметьте галочкой пункт «Automatically prime the page cache» установите интервал очистки кеша — 86400 секунд (сутки). Эта опция будет автоматически очищать накопленный кеш за последние сутки.

Сохраните изменения, нажав на кнопку «Save all settings».

Готово! Теперь наш интернет-магазин будет работать быстро.

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

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

Больше о плагинах можно почитать в Кодексе WordPress.

Урок 1 Поддержка 24/7/365 8-800-555-78-23 support@sprinthost.ru консультант онлайн

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

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

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

Весь процесс создания сайта можно условно разделить на 2 части — организационную и техническую. Первая часть самая ответственная, включает в себя ряд важных моментов, изменить которые впоследствии будет не просто. Например, доменное имя, хостинг. Вторая — техническая, в этом плане проще. Многие хостинги предоставляют возможность установить Вордпресс в один клик. А настроить его — пара пустяков.

Организационная часть

Подбор домена

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

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

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

Основные моменты

Никогда не связывайтесь с кириллическими доменами (.РФ, .РУС и т.п.)

Их можно использовать в качестве зеркал, для использования в рекламе, печати на визитках. Они хорошо читаются, запоминаются, но в основном домене должна быть только латиница.

Регистрируйте домены только второго уровня.

Никаких .MSK.RU, .SPB.RU и прочего, без исключений.

Используйте национальный верхний уровень.

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

Короткие доменные имена лучше чем длинные.

Они легче воспринимаются на слух, легче запоминается.

Постарайтесь не использовать в именах цифры и символ минуса (дефис).

Естественно, если цифра не является частью бренда, торговой марки — Tele2, 1tv, 112, 3m и т. п.

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

Выбор хостинга

Для небольшого сайта вполне хватит возможностей начальных тарифов виртуального хостинга. 

Главное — хостинг должен работать быстро и стабильно, что бывает не всегда, к сожалению. На скорость также влияет географическая удаленность дата-центра. Желательно, чтобы сервера хостинга физически размещались хотя бы на том же континенте, где целевая аудитория сайта.

Мне часто задают вопрос какой хостинг выбрать для Вордпресс. В принципе подойдёт любой известный российский хостинг. Лично я много лет пользуюсь услугами двух компаний — Рег.ру и Таймвеб. Меня все устраивает и я вполне могу их рекомендовать.

  • Рег.ру — лидер отрасли, также является регистратором доменных имён.
  • Таймвеб — качественный хостинг по доступным ценам.

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

Процедура не сложная, рекомендую сразу указывать свои реальные персональные данные.

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

Хостинг Таймвеб, домен в Рег.ру

Регистрируем домен в Рег.ру, прописываем ему сразу NS Таймвеб:

  • ns1.timeweb.ru
  • ns2.timeweb.ru
  • ns3.timeweb.org
  • ns4.timeweb.org

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

Хостинг и домен в Рег.ру

В Рег.ру выгоднее начать с оформления хостинга. За регистрацию домена вместе с хостингом полагается скидка на хостинг 15%.

Когда все организационные вопросы решены, можно переходить к технической части.

Техническая часть

Установка и настройка Вордпресс

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

В Рег.ру приложения устанавливаются с помощью установщика Softaculous, который также находится в панели управления хостингом.

Например, в ISPmanager он находится в Инструментах.

image

А выглядит Softaculous так.

image

Что делать если нет установщика

На самом деле ручная установка даже лучше.

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

Алгоритм действий стандартный, я покажу как это делается на примере панели ISPmanager.

Скачиваем архив дистрибутива Вордпресс.

image

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

image

Переносим распакованные файлы из папки wordpress в корень сайта. Для этого заходим в папку, выделяем все файлы и нажимаем кнопку «Вырезать».

image

Затем поднимаемся на уровень выше и как обычно нажимаем «Вставить».

Создаём базу данных, кодировка UTF-8.

image

Открываем браузер и вводим адрес сайта. Запустится инсталлятор, и после экрана приветствия увидим форму, в которую нужно ввести реквизиты базы данных, которую создали на предыдущем этапе.

image

Если все указано верно, увидим такое сообщение.

image

Приступаем к установке, вводим название сайта и задаем администратора. Не используйте в качестве имени пользователя admin.

Затем поздравления и переход в админку. Если все прошло успешно, увидим такую картину.

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

Разработка структуры сайта

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

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

Выбор и установка темы

По-умолчанию в Вордпресс уже имеется несколько стандартных тем. В версии 4.8 это Twenty Seventeen, Twenty Sixteen и Twenty Fifteen. Никто не запрещает остановиться на одной из них. На мой взгляд, из бесплатных они лучшие.

А вообще есть 3 варианта

Подобрать бесплатную тему в официальном репозитории Вордпресс

Переходим в раздел «Темы» и кликаем по кнопке «Добавить новую».

Или непосредственно на официальном сайте Вордпресс.

Купить премиум-тему

Что такое премиум-темы, чем они отличаются от бесплатных, в чем их преимущества, недостатки я рассказывал год назад в своей публикации про покупку шаблонов Вордпресс.

Я рекомендую покупать темы для Вордпресс только у известных разработчиков или на известных стоках. Например, на TemplateMonster или ThemeForest.

 

Заказать разработку собственной темы в соответствии с задачей сайта.

Это самый сложный и дорогой вариант, который требует тщательного осмысления и детальной проработки.

Установка и настройка плагинов

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

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

В первую очередь я рекомендую установить следующие плагины.

  • Akismet — предустановлен, имеет смысл при активных обсуждениях, спаме в комментариях. Для его работы требуется обязательная регистрация, без которой смысла от него ровно ноль.
  • WP Super Cache — файловое кеширование Вордпресс, в условиях виртуального хостинга необходимость.
  • Cyr to Lat enhanced — обязателен для всех сайтов на русском, украинском и других языках, в алфавите которых используется кириллица.
  • Yoast SEO — мощный сео-комбайн с большим количеством полезных функций.

И так далее в зависимости от потребностей.

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

Мой маст-хэв плагинов Вордпресс.

Генерация контента

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

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

Где взять тексты для сайта

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

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

Где взять изображения для сайта

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

Найти и нанять специалистов, которые вам все снимут и красиво оформят. 

Для этого можно воспользоваться фриланс-биржами. Например, Кворком, где все услуги стоят 500 рублей.

Приобрести материал на фотостоках.

Фотоматериал на Photodune, а графику на Graphicriver, например.

 

Найти бесплатный контент

Ищите контент с лицензией Creative Commons, она позволяет использовать материалы без разрешения автора при соблюдении некоторых условий. Начать поиски можно с Flickr.

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

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

Обрезать изображения можно с помощью любого графического редактора, а сжать для веб без потери видимого качества в Фотошопе или онлайн с помощью сервиса TinyPNG, например.

Регистрация сайта в поисковых системах

После наполнения нужно обязательно сообщить о новом сайте поисковикам.

Для РФ вполне достаточно зарегистрировать сайт в Гугле и Яндексе. Процедура достаточно простая, сложность может вызвать только подтверждение прав на сайт. Но и это очень легко решается с помощью плагина Yoast SEO, о котором уже шла речь выше.

Google Search Console

Авторизуемся, нажимаем красную кнопку «Добавить ресурс» и переходим на страницу подтверждения прав.

Копируем значение параметра content, идем в админку Вордпресс и открываем настройки плагина Yoast SEO, а именно раздел «Инструменты для веб-мастеров» и вставляем скопированный код.

Возвращаемся в Google Search Console и нажимаем кнопку «Подтвердить».

Яндекс Вебмастер

Добавляем сайт, копируем код подтверждения и аналогичным образом вставляем его в настройках Yoast SEO.

Ровно таким же образом эта процедура проделывается и для поисковой системы Бинг.

Чтобы поисковые системы более глубоко и точно индексировали сайт, рекомендуется загрузить им карту сайта. В Yoast SEO она доступна по умолчанию, просто идём в раздел «XML-карта сайта», копируем ссылку на карту, затем прописываем её в настройках Google Search Console (Сканирование — Файлы Sitemap) и Яндекс Вебмастер (Индексирование — Файлы Sitemap).

Установка счетчиков посещаемости

Развивать сайт без анализа его посещаемости невозможно.

Устанавливать все существующие счетчики смысла нет. Вполне достаточно какого-то одного из сервисов, который покажет исчерпывающую картину посещаемости сайта. С этим прекрасно справляется Яндекс Метрика, например.

Переходим на сайт Яндекс Метрики и нажимаем кнопку «Добавить счётчик», заполняем простую форму и создаем счетчик.

Затем копируем генерированный код и вставляем его на сайт. В настройках премиум-тем для этого обычно имеется специальное поле — Tracking code, Google Analytics или как-то так. Если его нет, код можно вставить в текстовый виджет или непосредственно в код темы (Внешний вид — Редактор — Подвал) и др.

В заключение

Как видим, ничего сложного в создании сайтов нет.

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

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

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий