Как изменить оформление сайта?

Заказать сайт под ваши требования - это только начало работы над ним. Через какое-то время, в процессе его эксплуатации вам требуется доработка дизайна сайта, например, на основании отзывов пользователей, нового видения структуры сайта или еще каких-либо причин. Заказать разработку сайта снова или же заказать новый дизайн? Занятие не дешевое, требующее существенных вложений. Именно поэтому вам могут пригодиться знания по добавлению пользовательского стиля (таблицы стилей) к теме вашего сайта.

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

После того как вы решили какой элемент темы (кнопка, изображение, или еще что-либо) вы хотели бы изменить, необходимо определить какие стили уже применяются к нему. Это совсем не сложно. Конечно же, если у вас нет желания этим заниматься вы можете заказать сайт у сторонних специалистов. В таком случае данная статься вам пригодится только для общего развития и оценки объема работ.

Идем далее. CSS использует селекторы для того что бы указать к какой части дизайна относится тот или иной стиль. Как правило, для этого используются классы, прописанные для отдельной составляющей документа. Современные браузеры позволяют буквально за два клика определить какие свойства и классы прописаны к интересующему вас элементу. 

Для этого нужно выделить необходимую часть сайта и нажать правую кнопку мышки. В меню, которое появилось выбрать «просмотреть код» (или производные данной фразы) и далее изучить всю информацию, любезно предоставленную браузером.

Как правило, в темах, созданных под Wordpress, таблица стилей находится в файле *.css, например, style.css, template.css. Могут быть и другие варианты.

Заказать сайт можно на любой CMS (системе управления сайтом), но выбор CMS будет зависеть от функционала сайта. Например, если заказать сайт визитку, то вполне возможно, что он будет построен не на движке, а при помощи статических страниц. Но и в таком случае он будет содержать файл стилей (или файлы стилей). Если посмотреть на содержимое такого файла, то можно увидеть, что он содержит инструкции по оформлению сайта для вашей темы, или же сайта в целом. Данная статья не предусматривает углубленное изучение стилей CSS, поэтому идём далее.

Метод 1. Правка файла стилей

Существует два способа доступа к файлу стилей.

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

В случае с WordPress необходимо на панели навигации, слева, выбрать опцию Appearance (Внешний вид). Выпавший список подменю будет содержать несколько пунктов. В нижней его части вы увидите пункт Editor (Редактор).

Открыв редактор, вы увидите список файлов темы. Среди них вы найдёте файл с расширением *.css. Открыв данный файл в редакторе, вы сможете отредактировать дизайн вашего сайта.

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

Для нашего примера когда сайт создан на WordPress, необходимо найти папку wp-content, а она уже содержит папку с темами для сайта. В папке с активированной темой и следует искать файл *.css

Метод 2. Использование дочерних тем

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

Зачем? Потому что авторы тем часто обновляют темы для устранения мелких недостатков и совершенствования дизайна. Если вы захотите обновить вашу тему, то всё что было исправлено вами в папке стилей исчезнет.

Для добавления дочерней темы достаточно создать в папке с основной темой еще одну папку с названием [название родительской темы]-child, а в ней уже размещать файлы стилей с изменениями дизайна основной (родительской) темы. В случае обновления родительской темы папка с дочерней темой затронута не будет и в таком случае все внесенные вами изменения будут сохранены.

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

Метод 3. Использование плагинов

Существует много плагинов, позволяющих редактировать CSS темы. Данный способ может быть применим к любой CMS, главное это наличие такого плагина для системы управления вашего сайта. Так же, как и в случае дочерней темы, такие изменения хранятся в отдельном файле. Поэтому обновление темы никак не повредит вашему дизайну. Ещё одно преимущество использования плагинов состоит в том, что вам не придётся трудиться над созданием дочерней темы.