Как самостоятельно установить тему на Вордпресс

4 мая 2020

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

Кворк 3

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

Не нужно быть разработчиком

Во-первых, я не призываю сразу всех становиться веб‑разработчиками!

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

Реальная стоимость установки премиум-темы

Я не берусь рассуждать насколько $50 большая или маленькая сумма — все относительно. Если исходить из реальных трудозатрат, на решение этой задачи потребуется пара-тройка часов. Есть люди, которые с пеной у рта утверждают, что все это можно сделать и за 15 минут. Да, можно и за пять, но скорость прямо пропорциональна качеству. И она здесь не в приоритете — важен конечный результат, которым не всегда бываешь доволен с первого раза. Иногда приходится экспериментировать, чтобы хотя бы не стыдно было показать результат заказчику. Поэтому, давайте закладывать минимум три реальных часа. За это время точно можно спокойно все установить, настроить и запустить. Конечно, если не возникнет вопросов к серверу. А чтобы их не возникало, правильно выбирайте хостинг-провайдера.

Размещайте свои сайты только у проверенных хостинг-провайдеров. Я рекомендую хостинг Рег.ру и Таймвеб.

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

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

Зарплата Вордпресс разработчиков

Как видим, средний рейт джуниора в Восточной Европе около $5 в час. Три часа его работы стоят $15. Именно столько и должна в среднем стоить установка темы, примерно тысячу российских рублей.

Но наши джуниоры часто пытаются использовать на локальном рынке европейские и американские ценники. Для сравнения в Западной Европе джуниор стоит $12, в США — $15. Из этих ценников и складывается тот пресловутый полтинник. Кстати, желающие сэкономить, могут нанять китайцев или индусов, они ещё дешевле. Например, в Юго-Восточной Азии джуниор стоит $3, а в Южной вообще $1,5 в час.

А можно вообще никого не нанимать, установить и настроить тему самостоятельно — ничего сложного в этом нет. И сегодня я это докажу на примере трёх своих любимых премиум-тем: Bridge, BeTheme, Enfold со своего любимого маркетплейса ThemeForest. Кстати, со всем топом тем можно ознакомиться по ссылке.

Как скачать и установить премиум-тему Вордпресс

Процедура скачивания и установки одинаковая для всех премиум‑тем.

Заходим в свой аккаунт, открываем раздел «Downloads», находим в списке своих купленных тем нужную тему, нажимаем кнопку «Download» и кликаем на «Installable WordPress file only» — для установки темы больше ничего не нужно. Документацию, лицензию и другие файлы, идущие с темой можно скачать в другой раз.

Download Installable WordPress file only

Распаковывать скачанный архив с темой не нужно.

Открываем админку сайта, переходим в раздел «Внешний вид» ⟶ «Темы» ⟶ «Добавить» ⟶ «Загрузить тему»

Загрузить Вордпресс тему

Я загрузил все три темы.

Активация темы

Начнем с «Bridge», для этого нажимаем на ней кнопку «Активировать».

Настройка темы «Bridge»

21-я версия Бриджа встречает пользователей таким приветствием.

Welcome to Bridge 21.0

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

Нажимаем на синюю кнопку «Install Required Plugins» и устанавливаем все необходимые плагины.

Install Required Plugins

Bridge Core, LayerSlider WP, Revolution Slider — обязательные плагины. Хотя, если вы не планируете использовать слайдеры, можно установить только Bridge Core. Остальные плагины из этого списка опциональные и устанавливаются при необходимости.

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

Импорт шаблона

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

Импорт демо-контента

Просто выбираем тему, в «Import Type» ставим «All», в «Import Attachments» — «Yes» и нажимаем «Import».

Я выбрал «Demo 8 — Fashion».

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

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

Шаблон и демонстрационный контент импортированы.

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

Bridge — импортированные страницы

Все лишнее можно и нужно удалить.

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

Все основные настройки Bridge расположены в разделе «Qode Options», там же находится и настройка логотипа.

Bridge — установка логотипа

В Bridge можно задать аж 7 разных версий логотипа: основной, светлый, темный, мобильный, для прилипающего, фиксированного и бокового меню. Не забываем про ретина-дисплеи и задаем логотипы в SVG.

Настройка цветовой схемы

Настройке цветовой схемы сайта посвящен целый блок настроек в разделе «General» ⟶ «Design Style».

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

Установка фавиконки

Настройка фавиконки находится там же в разделе «General» ⟶ «Settings» ⟶ «Favicon Image».

Типографика

Настройке шрифтов посвящен отдельный раздел настроек «Fonts».

Все очень просто и наглядно.

Bridge — настройка заголовка H1

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

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

Скачать тему «Bridge»

Настройка темы «BeTheme»

Стартовый экран BeTheme более информативный, особенно полезен блок «О системе», в котором сразу видно насколько соответствует ваш сервер техническим требованиям темы.

BeTheme — стартовый экран

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

Установка плагинов ничем не отличается от предыдущей темы. Инсталлятор находится в разделе «Betheme» ⟶ «Install Plugins»

BeTheme — установка плагинов

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

Импорт шаблона

В комплект BeTheme, как и в предыдущий Bridge входит более 500 готовых вариантов оформления сайта. В русской локализации именуемыми «заготовками».

Установим заготовку на злободневную тему «Medical Shop 2».

BeTheme — Medical Shop 2

Установщик попросит установить WooCommerce, если его нет. Потому что «Medical Shop 2» — это интернет-магазин.

Выбираем какой контент будем импортировать и нажимаем «Install». Там все ровно то же самое, что и в предыдущей теме Bridge.

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

Все настройки темы находятся в разделе «BeTheme» ⟶ «Настройка темы», настройка логотипа находится там же в разделе глобальных настроек.

Betheme — установка логотипа

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

Настройка цветовой схемы

В BeTheme можно выбрать готовую цветовую схему.

Betheme — скин темы

Можно пойти дальше и настроить цвета абсолютно всех элементов сайта: хедер, меню, экшн-бар, содержание, подвал, верхнюю панель, заголовки, шорткоды, формы.

Betheme — глубокая настройка цветовой схемы

Установка фавиконки

Фавикон (32×32) и эппловский тачикон (180×180) задаются в разделе «Глобальные» ⟶ «Основные настройки».

Betheme — установка иконок

Типографика

С типографикой в BeTheme тоже нет никаких проблем — ей посвящен отдельный раздел настроек «Шрифты».

Все предельно просто и понятно.

Скачать тему «BeTheme»

Настройка темы «Enfold»

Enfold — ещё один из моих фаворитов. Прекрасная тема от австрийского веб-разработчика Кристиана Будщедла, более известного под ником Kriesi.

Enfold устанавливается таким же образом, как предыдущие темы. После активации вместо приветствия, откроются настройки темы. Кстати, они тоже почти все на русском.

Enfold — настройки темы

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

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

Импорт шаблона

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

Импортировать мы будем снова медицинскую тему.
Идем в раздел настроек «Демо импорт» и кликаем по нужной теме.

Enfold — демо медицина

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

Установка происходит очень быстро, в результате имеем такой прекрасный сайт.

Enfold Medical

Настройка цветовой схемы

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

Так выглядит выбор и настройка цветовой схемы.

Enfold — настройка основного стиля

Типографика

Настройка типографики в Enfold находится в разделе «Расширенный стиль»

Enfold — настройка расширенного стиля

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

Скачать тему «Enfold»

В заключение

Каждый решает сам: платить или делать самому.

Если работа по сайту полностью делегирована, смысла вникать в технические нюансы нет. Я полностью поддерживаю такой подход, когда каждый занимается своим делом. Заказывая же настройку премиум-темы, все таки лучше отталкиваться от реальной стоимости часа работы конкретного специалиста. А не оперировать абстрактными цифрами, предлагаемыми фрилансерами. Нужно учитывать, что начинающие специалисты не всегда адекватно оценивают объёмы работ, сроки выполнения. В итоге низкий рейт, умноженный на огромное количество часов может оказаться дороже услуг более продвинутого специалиста, который решил бы задачу в более короткий срок. Поэтому, старайтесь разбивать большие задачи на более мелкие. Решайте и оплачивайте их последовательно.

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

INNERSTAT
Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Добавить комментарий