Как редактировать CSS в WordPress (редактировать, добавлять и настраивать внешний вид вашего сайта)

Хотите попробовать редактировать CSS WordPress, но не знаете, с чего начать? С помощью стилей CSS вы можете изменить внешний вид вашего сайта глобально или на определенных страницах. Добавьте цвета, разместите определенные элементы, создайте макет и в основном измените внешний вид всего в вашей теме WordPress.

Если вы хотите лучше познакомиться со средой разработки WordPress или просто лучше контролировать внешний вид своего веб-сайта, вам нужно знать, как добавить CSS в WordPress (а также как изменить то, что уже есть).

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

Готов начать? Давай сделаем это!

Предпочитаете смотреть видео версию?

Что такое редактирование CSS?

CSS расшифровывается как каскадные таблицы стилей и является самым популярным веб-языком помимо HTML. Они идут рука об руку, поскольку CSS используется для стилизации HTML-элементов. HTML закладывает основу внешнего вида веб-сайта, а CSS используется для его дальнейшего оформления.

CSS дает вам возможность сделать веб-сайт адаптивным, добавить цвета, изменить шрифты, изменить макет и в целом настроить визуальное представление веб-сайта. Подобно HTML и JavaScript, CSS — это клиентский язык внешнего интерфейса, что означает, что он выполняется на стороне пользователя, а не на внутреннем сервере.

При погружении в разработку WordPress вам необходимо знать языки HTML, CSS, JavaScript и PHP. Это то, во что встроена основная CMS, а также множество тем и плагинов.

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

WordPress и CSS

В WordPress CSS немного отличается. Он управляется темами, которые состоят из файлов шаблонов, тегов шаблонов и, конечно же, таблицы стилей CSS. Хотя они созданы вашей темой, все они доступны для редактирования вами.

Файлы шаблонов разбивают части вашего веб-сайта на разделы (например, header.php или archive.php), а теги шаблонов используются для вызова их и другого контента из вашей базы данных. Эти файлы на самом деле состоят в основном из PHP и HTML, хотя при необходимости вы можете добавить CSS.

Что вам действительно нужно, так это таблица стилей или style.css. Чтобы изменить внешний вид вашего веб-сайта, вам нужно научиться добавлять и редактировать код в этом файле.

Как настроить тему WordPress с помощью CSS

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

Когда вы вносите эти изменения, вы должны знать одну вещь: при обновлении вашей темы любые изменения, внесенные вами в файлы style.css , functions.php или другие файлы шаблонов темы, будут стерты. Как правило, вы не должны вносить прямые изменения в свой веб-сайт в редакторе без использования дочерней темы.

Таблица стилей похожа на «список инструкций» для вашего веб-сайта, точно определяя, как он оформлен и как обрабатывается код CSS. Здесь вы будете выполнять основную часть редактирования, но мы также покажем вам, как получить доступ к другим файлам шаблонов тем, таким как header.php и footer.php.

Есть два способа получить доступ к таблице стилей вашего сайта WordPress: через панель управления WordPress или через FTP-клиент. Мы рассмотрим их обоих.

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

Редактирование CSS WordPress на панели инструментов

Самый простой и удобный способ получить доступ к вашей таблице стилей CSS — прямо в панели управления WordPress. Нет необходимости устанавливать FTP-программы или редакторы кода. Вы можете напрямую редактировать любой файл с подсветкой синтаксиса и встроенной документацией по функциям.

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

После того, как вы сделали резервную копию и дочернюю тему, войдите в свой сервер. Вы можете найти редактор, зайдя в меню и щелкнув Внешний вид > Редактор тем.

Вы должны увидеть всплывающее окно, предупреждающее вас о недопустимости прямого редактирования этих файлов. Не волнуйтесь, просто нажмите «Я понимаю». Это всего лишь предупреждение использовать дочернюю тему и сделать резервную копию вашего сайта, прежде чем вносить какие-либо серьезные изменения. Выполните эти шаги, и редактировать безопасно.

И теперь ты внутри! Вы должны быть в таблице стилей по умолчанию, но посмотрите в меню справа, чтобы просмотреть файлы темы, если это не так.

Помимо style.css, у вас также будет доступ к файлам шаблонов, таким как functions.php, header.php и single.php. Все это влияет на поведение определенных страниц на вашем сайте.

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

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

Редактируйте файлы темы напрямую

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

FTP, или протокол передачи файлов, позволяет удаленно получать доступ к файлам веб-сайта и изменять их. Первое, что вам нужно сделать, это загрузить FileZilla или любой другой FTP-клиент.

Затем вы должны связаться со своим хостом и запросить свои учетные данные FTP (хост, порт и имя пользователя/пароль, если применимо). Если у вашего хоста есть панель инструментов, вы можете найти их, войдя в систему.

Учетные данные пользователей Kinsta находятся на панели инструментов MyKinsta в разделе Сайты > SFTP/SSH .

Получив их, запустите FTP-клиент и введите эту информацию. Если это не сработает, попробуйте поставить «sftp://» перед URL-адресом в разделе « Хост ».

Как только вы войдете, вы можете найти свой файл style.css, щелкнув папку wp-content , чтобы открыть его, затем папку вашей темы (например, тему T goty Twenty ), а затем прокручивая, пока не увидите style.css.

Дважды щелкните, чтобы открыть его (или щелкните правой кнопкой мыши и выберите View/Edit ) и внесите изменения. Не забудьте сохранить и загрузить обратно на сервер.

Если вам нужно отредактировать другие файлы шаблонов, такие как home.php, single.php, archive.php, вы можете найти их в той же папке, что и style.css.

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

Для небольших дополнений, вот лучший способ добавить CSS на ваш сайт WordPress.

Как добавить пользовательский CSS в WordPress

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

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

Подпишитесь на рассылку новостей

Хотите знать, как мы увеличили наш трафик более чем на 1000%?

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

Подпишись сейчас

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

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

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

Хотя вы можете просто добавить код в style.css и положить этому конец, если вы не хотите создавать дочернюю тему, вносить серьезные изменения в существующий CSS в своей теме и, возможно, в конечном итоге стереть всю свою работу, лучше либо использовать опцию «Дополнительный CSS» в настройщике WordPress, либо установить плагин.

1. Редактирование CSS через настройщик WordPress

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

В самом низу этого меню вы должны найти поле « Дополнительные CSS ».

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

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

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

Как видите, страница «Дополнительные CSS» во многих отношениях более мощная, чем редактор тем, и гораздо больше подходит для добавления кода, чем для работы с основными файлами.

Код CSS, который вы пишете здесь, перезаписывает стиль вашей темы по умолчанию и не исчезает при обновлении вашей темы. Если вы не видите его «вживую» в предварительном просмотре, дважды проверьте, используете ли вы правильные селекторы в своем коде CSS.

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

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

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

2. Добавление пользовательского CSS в WordPress с помощью плагинов

Есть несколько причин, по которым вы можете захотеть использовать плагин для добавления CSS в WordPress. Хотя эта функция аналогична меню «Дополнительные CSS», стили обычно сохраняются, даже если вы переключаете/обновляете темы.

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

Простой пользовательский CSS

Simple Custom CSS — самый популярный плагин для редактирования CSS из-за простоты использования, минимального интерфейса и легкого бэкенда. Короче говоря, это очень маленький плагин WordPress, который обладает большим потенциалом.

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

Простой пользовательский CSS и JS

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

CSS исходного сайта

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

WP Добавить пользовательский CSS

Если вы изо всех сил пытаетесь добавить CSS на определенные страницы, WP Add Custom CSS добавляет пользовательское поле CSS на экран редактирования, а также поставляется с глобальными стилями.

CSS-герой

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

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

Где изучать CSS

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

Это может быть сложно, но если вы не пытаетесь сделать что-то действительно сложное, CSS не так уж и сложен! Простые вещи, такие как изменение цвета фона или настройка стиля шрифта, довольно просты, и в Интернете есть множество примеров.

(Рекомендуемое чтение: 50+ современных шрифтов для использования на вашем сайте WordPress)

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

Вот несколько примеров лучших руководств по CSS для начинающих.

• Учебное пособие W3Schools по CSS: здесь можно найти огромное количество информации: подробные учебные пособия, примеры и справочные материалы, с которыми вы можете работать. Учебные пособия W3Schools максимально просты и понятны, поэтому даже если вы новичок, это отличное место для начала.
• Codeacademy Learn CSS: шесть бесплатных практических уроков помогут вам изучить основы CSS. Это не простое видеоруководство, а интерактивный урок, на котором вы работаете с реальным кодом. С профессиональной версией вы также получаете викторины и проекты произвольной формы для работы.
• Изучите CSS за один час: многие люди хотят выучить новый язык программирования, но у них просто нет на это времени. Но если вы можете выделить всего один час, вы можете изучить CSS с помощью этого бесплатного курса из 20 частей. Даже если к концу вы не станете мастером, вы должны хорошо разбираться в основах.
• Введение в базовый HTML и CSS для пользователей WordPress: Ищете что-то конкретное для WordPress? Если вы всегда боролись с написанием HTML и CSS, этот курс идеально подходит для вас. Он платный, но содержит 52 лекции и пять часов видео для обучения.

Резюме

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

Файлы темы можно редактировать либо из вашего бэкэнда, либо через FTP, чтобы изменить внешний вид вашего сайта, но обычно этого следует избегать, если вам не нужно редактировать существующий код.

Если вы просто хотите добавить свой собственный CSS, используйте страницу «Дополнительные CSS» в разделе « Внешний вид» > «Настроить » или попробуйте плагин, если вам нужно что-то более мощное.

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

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

Удачного стайлинга!

Рекомендуемое чтение: Лучшие онлайн-курсы по веб-дизайну