Как правильно редактировать файл стилей CSS активной темы WordPress

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Приходилось вам редактировать вашу активную тему, менять в ней стили CSS? Или вы только планируете это делать? Тогда вопрос: а как вы это собираетесь делать? Хотите, я расскажу вам — как правильно редактировать файл стилей вашей активной темы?

Предисловие

Я практически не знаю ни одной темы WordPress, которую после установки не захочется поменять 🙂 В смысле — что-то подправить...

Например, изменить размер шрифта, или вообще сменить основной шрифт на более симпатичный. Или — сделать мельче мета-данные (названия рубрик, дату, количество комментариев), или рядом с названием рубрики в мета-данных добавить маленькую иконку рубрики.

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

Все эти изменения в основном касаются стилей, которые чаще всего хранятся в файле style.css. В некоторых темах могут лежать в других файлах стилей, имею ввиду названия. Но всегда есть файл style.css, который лежит в корневой папке темы. Без него тема не будет корректно отображаться. Такие правила тем WordPress.

Сегодня разговор — только о файле стилей CSS, который хранит все основные параметры отображения сайта. Простой пример: переименуйте файл style.css и перегрузите главную страницу. Весь контент прижмется к левой стороне браузера, пропадут картинки (изображения, которые лежат в папке самой темы: картинка шапки и т.д.), фон, стилевые оформления шрифта и т.д.

Как неправильно редактировать CSS

Если вы хотите поменять что-то одно — а все остальное вас устраивает — можно поправить сразу в файле в активной теме. Главное — запомнить (записать, скопировать) тот параметр, который вы исправили.

Но все равно такой способ не считается правильным. Я бы вообще всех по остерег заниматься редактированием файлов активной темы на сайте.

Советую прочитать еще:  Flexible Posts Widget | Плагин добавит в виджете любые типы записей

Во-первых, это неудобно делать через редактор файлов WordPress. Есть, правда, плагин — Advanced Code Editor — который добавит больше возможностей вашему редактору файлов, но все равно — редактировать файлы активной темы — не комильфо.

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

Как правильно редактировать CSS

Здесь может быть несколько вариантов. Все они имеют «право на жизнь». Вопрос только в том, кому какой вариант больше подойдет.

Вариант первый — Копия сайта на компьютере, на локальном сервере localhost

Возможно, кто-то из вас огорченно подумает, — зачем? Зачем морочить себе голову, имея один-единственный сайт, который надо совсем немного «подправить».

Поверьте, один раз «подправив», вам захочется это делать еще и еще. И в один момент вы вдруг увидите, что сделали что-то не так, а как вернуть — не помните, ведь копии родной — нет.

Имея полную копию сайта на компьютере, вам намного проще: и редактировать, и сравнивать. Сайт в двух окнах (вкладках) вашего браузера, в разных браузерах — даст возможность увидеть все нюансы старой и новой версии.

После каждого изменения, с помощью FTP-клиента, перенесли исправленный файл CSS на сайт, а там — сделали временную копию файла с литерой 1 или словам — copy, например: style-copy.css, style-2.css, сравнили, подумали и — заменили. В комментариях файла, вверху, написали пометку для себя:

/*
Theme Name: bestplugins
Description: Копия на 21 февраля, 17:09
Version: 1.2.1
*/

Кстати, кому интересно, почему есть 3-х значные и 2-х значные версии:

  • 3-х значные версии — когда вносится исправление в существующий функционал
  • 2-х значная версия — когда функционал дополняется или меняется (удаляются, к примеру, старые функции и скрипты слайдера и меняются на новые, более совершенные)
Советую прочитать еще:  Обзор плагинов WordPress - выделение текста читателем и возможность сразу поделиться в соцсетях

Желательно записывать для себя, что изменялось в той или иной версии. В IT-сообществе это называется — документирование, или журнализация событий.

Скажите, — как сложно!

Отвечу — наоборот, это дисциплинирует и дает возможность восстановить в памяти все, что делал со своим сайтом.

И еще: не обязательно localhost, хотя — это самый лучший вариант. Можно сделать копию на поддомене (если позволяют ресурсы и тарифный план). Как видно из этого сценария — может «упереться» в дисковое пространство и отсутствие возможности создавать поддомены или иметь вторую базу данных. Персональный компьютер — никаких ограничений.

Установка Денвера занимает 5 (!!!!) минут, вдумайтесь. Я давно рассказал и по-шагово описал эту установку на одном своем каталоге бесплатных тем WordPress, вот адрес — http://www.bestwordpress.org.ua/archives/1287

Написал инструкцию в 2009 году и получил на нее несколько положительных комментариев.

В моей Школе WordPress есть видео-урок:
Как установить Денвер за 5 минут? Как создавать на локальном сервере много сайтов?

Вариант второй — создание и использование дочерней темы

Кто не знает, — коротко:

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

Создание простой дочерней темы занимает примерно 15 минут времени.

Я писал такую по-шаговую инструкцию еще в июне 11 года. Если интересно — http://www.wpfreethemes.ru/2011/06/kak-sozdat-dochernyuyu-temu

Мое мнение о дочерней теме:

Мне кажется, создание дочерней темы — гораздо сложнее, если сравнивать с установкой Денвера на домашний компьютер.

Вариант третий — использование специальных плагинов WordPress

Есть бесплатные плагины WordPress, с помощью которых можно вносить изменения в файл стилей CSS, при этом — все изменения в CSS хранятся в настройках плагина WordPress.

Советую прочитать еще:  Как добавить кнопки на сайт не используя шорткоды

Для этого после установки и активации плагина вы найдете страницу настроек с текстовым полем, где вам нужно внести нужный параметр:

селектор {
свойство: значение
}

Например:

<div class="content" {
padding:5px;
margin:10px;
}

Небольшой список таких плагинов (с ссылками):

Мое мнение о использовании плагина для изменения CSS:

Проще двух первых вариантов. Время на внесение изменений с момента установки плагина — до минуты. Но: каждый новый плагин добавляет «веса» вашему сайту, взывает дополнительные PHP-запросы обработки, замедляет работу, возможны конфликты.

Заключение

Я рассказал о трех вариантах сценария — внесения изменений в файл стилей CSS. Вы вправе выбрать такой, какой вам больше понравится и покажется наиболее удобным.

Советую заранее определиться:

1. Если вы хотите внести незначительные изменения — вам надо попробовать наиболее быстрый и простой вариант, например, использование плагина WordPress.

2. Если хотите вносить несколько, или большой список изменений — создавайте дочернюю тему, а еще лучше — установите Денвер, создайте локальный сервер и сделайте копию сайта на компьютере. По моему мнению — идеальное решение для всех случаев работы с сайтом: обновление версий системы, темы, плагинов, резервная копия сайта.

Есть свой вариант?

Поделитесь со мной и читателями.

Если материал вам понравился, нажмите или расскажите о нем друзьям!

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

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

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