Как настроить тема для wordpress

Настройка темы в WordPress. Пошаговый урок

Добрый час! На недавнем занятии мы выбрали и установили тему на наш сайт. А в сегодняшнем уроке мы разберёмся, где и как производится настройка темы в WordPress. Да да, именной той, что вы для своего блога выбрали. Будем наводить красоту. Я покажу на примере своей установленной темы. Тогда вы сможете настроить и свою тему. Итак, приступим.

Где происходит настройка темы WordPress

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

1. Слева в меню панели управления Вордпресс переходим в раздел Внешний вид. И выбираем Настроить.

2. В меню выбираем раздел Внешний вид. Затем переходим в хранилище тем. И на нужной теме жмём кнопку Настроить.

3. В верхней панели самого сайта находим кнопку Настроить.

Как настроить тему в WordPress

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

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

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

Теперь давайте пробежимся по разделам. В общем-то затруднений возникнуть у вас не должно, так как там всё понятно расписано.

Активная тема

Вверху отображается название вашей темы. И отсюда же у вас имеется возможность её поменять. Пока нам это не нужно.

Свойства сайта

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

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

Изображение заголовка

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

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

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

Виджеты

Также интересный раздел, отвечающий за правую колонку на сайте/сайдбаре. В моём случае она именно справа. Бывает возможность расположения и слева. Но я не рекомендую.

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

Настройка главной страницы

Этот пункт отвечает за отображение определённого контента на главной странице. Допустим, вы зашли на сайт не путём поиска какой-то статьи. Что предстанет вашему взору? Тут решать вам. Но я рекомендую отображение последних записей.

Иными словами, в хронологическом порядке будут выводиться ваши написанные статьи. А если вы предпочтёте статическую страницу, то всегда будет висеть одна и та же. Та, которую вы выберете.

Настройка темы

В моём случае в этом разделе настраиваются следующие параметры. Это разметка. Например, место для колонки и расположение текста.

Далее идут Настройки блога, где можно прописать приветствие и описание. А также размер записей и текст кнопки «Читать далее».

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

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

Дополнительные стили

Если вы ничего не знаете о CSS, то пока вам этот раздел не нужен. Ну а если имеете представление, тогда итак всё ясно, чем тут можно заниматься)

Хлебные крошки

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

Список разделов подошёл к концу. А в самом низу можно увидеть кнопку для сворачивания меню настроек — Скрыть управление.

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

Выход из настроек темы

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

На сегодня достаточно информации. Успехов в оформлении. Увидимся в следующих уроках! 😉

Полезная статья — Плагин Regenerate Thumbnails и пересоздание миниатюр сайта.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заходим в свой аккаунт, открываем раздел «Downloads», находим в списке своих купленных тем нужную тему, нажимаем кнопку «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».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

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

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

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

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

Настройка темы «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 тоже нет никаких проблем — ей посвящен отдельный раздел настроек «Шрифты».

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

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

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

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

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

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

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

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

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

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

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

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

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

Enfold Medical

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

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

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

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

Типографика

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

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

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

В заключение

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

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

Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, поддержкой, делюсь опытом в блоге

Источник