Пять простых путей сменить дизайн сайта
Какую бы идеальную тему вы не подобрали для своего сайта, все равно, рано или поздно может стать вопрос об улучшении внешнего вида и дизайна. И тут, зачастую, новички совершают большую ошибку — сразу начинают бездумные копания в коде, следуя чужим советам, к тому же еще часто вырванных из общего контента. Но постойте, вполне возможно, все ваши пожелания и «хотелки» можно получить куда более легким и главное, надежным способом.
В этом посте мы осветим 5 основных способов изменения дизайна WordPress темы, начиная от самого простого варианта и заканчивая решениями средней сложности.
Мелкие изменения дизайна – WordPress кастомайзер
Если вы хотите что-то изменить в вашем дизайне сайта, то первый инструмент для этого – это стандартный WordPress-кастомайзер. Да, возможностей там может и не особо много. Во всяком случае, в стандартных темах. Но для начала, сойдет.
Вот несколько стандартных секций в WordPress-кастомайзере, которые можно изменить во многих темах:
- Идентификационная информация сайта. Здесь вы можете изменять такие вещи, как название сайта, а также добавить логотип сайта.
- Цвета/цветовые схемы. Понятно, что здесь можно менять цвет разных частей вашего сайта.
- Изображение «шапки». Здесь вы можете управлять расположением и размером вашего изображения в «шапке».
- Статичная домашняя страница. Здесь вы можете выбрать страницу, которая станет домашней страницей вашего сайта.
В некоторых премиум темах возможности кастомайзера весьма широки. Но минус данного способа изменения дизайна заключается в том, как я уже упомянул, что не каждая тема предлагает большое количество опций для кастомизатора.
Мелкие изменения дизайна – плагины, решающие проблемы дизайна
Если WP-кастомайзер не помог решить вашу проблему, то возможно, вам пригодятся плагины-помошники. Например, для изменения цветов вашей темы вы можете использовать плагин Theme Tweaker.
Если же вы не можете изменить изображение в «шапке» вашей темы, или вы хотите изменить это изображение только для некоторых страниц/категорий, то вам пригодится плагин Unique Headers. Или вот уникальный и мощный плагин о котором мы уже писали — Yellow Pencil. Подобных плагинов существует довольно много, нужно только не лениться и использовать поиск.
Мелкие изменения дизайна – конструкторы страниц
Здесь мы не будем говорить о решениях, которые позволяют создать тему с нуля, используя уже встроенные шаблоны (Divi или WPMU’s Upfront). Мы имеем в виду такие плагины, как Visual Composer, которые позволяют вам создавать динамичные страницы для практически любой понравившейся темы.
Используя конструктор страниц, вы можете создать страницу с множеством колонок, даже если тема поддерживает только использование одной. Также можно использовать различные шаблоны для построения сложных страниц. Правда, иногда бывает сложно потом уже отказаться от использования какого-либо композера, потому что он хранит информацию вне базы данных WordPress.
Средние изменения дизайна – изменяем CSS
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; } }
Вот так гипертрофировано этот шрифт будет выглядеть на экране монитора, но его нелепость оправдана тем, что позволяет показать, как контрастно шрифт выглядит на большом экране:
Но на экране мобильника и планшета текст будет выглядеть неизменно. Именно то, чего мы добивались.
Крупные изменения дизайна – используем дочернюю тему
Использование дочерней темы еще один популярный способ для продвинутых пользователей. Даже если вы обновите вашу тему, то внесенные ранее изменения никуда не пропадут.
В ряде случаев сначала вам понадобиться установить сайт локально на ваш компьютер, а затем очень желательно заранее запастись знаниями о том, как работать с дочерними темами. Единственный минус этого способа заключается в том, что вам придется потратить свое драгоценное время на некоторое обучение. Более подробно об использовании дочерней темы читайте тут.