Новичкам

Пять простых путей сменить дизайн сайта

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

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

Мелкие изменения дизайна – WordPress кастомайзер

WordPress кастомайзер

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

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

  • Идентификационная информация сайта. Здесь вы можете изменять такие вещи, как название сайта, а также добавить логотип сайта.
  • Цвета/цветовые схемы. Понятно, что здесь можно менять цвет разных частей вашего сайта.
  • Изображение «шапки». Здесь вы можете управлять расположением и размером вашего изображения в «шапке».
  • Статичная домашняя  страница. Здесь вы можете выбрать страницу, которая станет домашней страницей вашего сайта.

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

Мелкие изменения дизайна – плагины, решающие проблемы дизайна

yellow-pencil 3

Если WP-кастомайзер не помог решить вашу проблему, то возможно, вам пригодятся плагины-помошники. Например, для изменения цветов вашей темы вы можете использовать плагин Theme Tweaker.

Если же вы не можете изменить изображение в «шапке» вашей темы, или вы хотите изменить это изображение только для некоторых страниц/категорий, то вам пригодится плагин Unique Headers. Или вот уникальный и мощный плагин о котором мы уже писали — Yellow Pencil. Подобных плагинов существует довольно много, нужно только не лениться и использовать поиск.

Мелкие изменения дизайна – конструкторы страниц

Visual Composer - строим страницы сами

Здесь мы не будем говорить о решениях, которые позволяют создать тему с нуля, используя уже встроенные шаблоны (Divi или WPMU’s Upfront). Мы имеем в виду такие плагины, как Visual Composer, которые позволяют вам создавать динамичные страницы для практически любой понравившейся темы.

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

Средние изменения дизайна – изменяем CSS

Medium Design Changes

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

Для изменения CSS можно использовать плагин Simple Custom CSS или CSS Editor, который является частью Jetpack.

Перво-наперво, вам необходимо почерпнуть базовую информацию о том, что такое HTML/CSS, узнать, как это работает, как найти класс или элемент, который вы хотите изменить. Чтобы например, в Хроме подсветить область, которую вы хотите просмотреть, нажмите на правую кнопку мыши, а потом на «Посмотреть код». В нашем примере мы рассмотрим HTML и CSS, присущие заголовку записи.

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

В этом примере  есть медиа-запрос, который говорит:

@media screen and (min-width: 61.5625em)

И он задает следующие стили для .entry-title.

font-size: 40px;
font-size: 2.5rem;
line-height: 1.225;
margin-bottom: 1.05em;

Это значит, что данные стили применяются только если экран (или окно браузера) шире, чем 61.5625em (или  985px). Так что, если вам нужно поменять то, как что-то выглядит на определенном экране, то вам нужно включить специфичный медиа-запрос. Давайте изменим размер шрифта только для экранов мониторов. Для этого напишите что-то подобное в вашем кастомном CSS плагине:

@media screen and (min-width: 61.5625em) {
.entry-title {
font-size: 200px;
}
}

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

title

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

Крупные изменения дизайна – используем дочернюю тему

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

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

 

Похожие

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button