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

Опубликовано: 01.09.2018

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

Story of my life или панические атаки начало.

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



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

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

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


Ускорение загрузки сайта при помощи плагина Comet Cache. Улетное ускорение загрузки сайта!

Вот несколько стандартных  секций в 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 ;

}

}

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

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

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

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

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

 

rss