Интегрируйте свой собственный CSS в тему WordPress - вот как это работает

1. Настройки CSS с использованием плагина WordPress
2. Найдите правильное свойство CSS в теме
3. Используйте! Важный
4. Пользовательский CSS от Jetpack
5. Используйте пользовательский вариант CSS темы
6. Реализуйте настройки CSS в дочерней теме
7. Ваш отзыв

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

Обязательным условием является то, что вы уже знакомы с CSS. Тогда адаптация темы с ее собственным CSS на самом деле не так уж сложна, и есть три различных способа интеграции вашего собственного CSS. Если вы действительно хотите изменить или добавить несколько свойств CSS и оставить тему в состоянии по умолчанию, вы можете использовать плагин WordPress, например: Простой пользовательский CSS или Мой пользовательский CSS , Кто уже что Jetpack плагин вообще не нуждается в каком-либо дополнительном плагине, но может просто активировать функцию «Пользовательский CSS», уже встроенную в плагин Jetpack, и начать свой собственный CSS в разделе « Дизайн» → «Редактировать CSS». Во многих темах WordPress Premium уже есть возможность написать свой собственный CSS. Таким образом, вы также сохраняете установку дополнительных плагинов, недостатком является то, что CSS не является независимым от темы и теряется при смене темы. Так что эту опцию следует использовать, только если вы хотите настроить CSS темы.

Третий вариант - интегрировать свой собственный CSS через файл style.css дочерней темы. Если вы уже используете дочернюю тему или планируете настройки темы, которые выходят за рамки только настроек CSS, использование дочерней темы определенно полезно. В дочерней теме вы можете настроить все файлы темы, а также интегрировать свой собственный файл functions.php. Таким образом, вы полностью независимы от родительской темы и можете внести множество изменений и дополнений в тему.

Настройки CSS с использованием плагина WordPress

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

Мой любимый плагин для CSS настроек Простой пользовательский CSS , Плагин действительно прост, и после установки вы найдете новый пункт меню «Custom CSS» в разделе «Дизайн». Здесь вы можете просто начать писать свой CSS.

Простой пользовательский CSS в админке WordPress.

После сохранения изменений вы можете контролировать свои настройки в браузере.

Регулировка цвета заголовков в браузере.

Найдите правильное свойство CSS в теме

Если вы точно не знаете, какое CSS-свойство темы необходимо настроить, чтобы добиться желаемого изменения, вы можете использовать инструменты браузера, такие как функция «Изучить элемент» (например, Firefox или Chrome) или дополнения браузера, такие как Firebug (для Safari, Chrome или Firefox).

Функция «Элемент исследования» в браузере Chrome.

В статье Elmastudio «Подсказка к видео: быстро управляйте элементами HTML и CSS в браузере» Вы найдете удобный видеоурок, объясняющий функцию поиска правильного CSS.

Используйте! Важный

По умолчанию, поскольку ваш новый CSS переопределяет свойства CSS темы, вам действительно не нужно правило! Важно. Если CSS темы не должен быть перезаписан, но вы все равно можете помочь с правилом! Важно. Например:

.entry-details {text-transform: none! важный; }

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

Если вы все равно используете плагин Jetpack, вам обязательно следует использовать Пользовательская функция CSS в Jetpack активируйте и введите свой CSS в разделе « Дизайн» → «Редактировать CSS» .

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

Изменения CSS в функции Jetpack Custom CSS.

Используйте пользовательский вариант CSS темы

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

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

Реализуйте настройки CSS в дочерней теме

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

Итак, если у вас уже есть дочерняя тема или вы планируете внести дополнительные изменения прямо в файлы темы, вам, конечно, следует записать свои настройки и расширения CSS непосредственно в файл style.css вашей дочерней темы. Таким образом, у вас есть все ваши настройки в одном месте, и вам не нужно устанавливать другой плагин.

Ваш отзыв

Какие плагины и инструменты вы считаете удобными для интеграции вашего собственного CSS в WordPress? Каким опытом и советами вы можете поделиться? Я с нетерпением жду ваших отзывов о собственном CSS в WordPress!

Похожие

Комментарии