17 советов по CSS для пользователей WordPress, которые помогут сэкономить время

WordPress предлагает безграничные возможности для проектирования и настройки вашего веб-сайта. В этой статье мы поделимся некоторыми практическими советами по CSS специально для пользователей WordPress: от стилизации заголовка до настройки шрифтов.

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

Если вы когда-либо задавали какой-либо из этих вопросов во время работы над своим сайтом WordPress:

• «Как убрать кнопку «читать дальше»?»
• «Как я могу изменить цвет этой ссылки?»
• «Как мне сделать эту ссылку некликабельной, но сохранить текст на странице?»

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

В этом уроке мы рассмотрим:

• Советы по CSS для WordPress
  1. Центрировать элемент по горизонтали и вертикали
  2. Изменить цвет ссылки
  3. Удалить ссылку
  4. Отключить ссылку (ссылка остается видимой, но пользователи не могут по ней щелкнуть)
  5. Изменение цвета ссылок при наведении
  6. Ссылки на стили
  7. Стиль кнопки
  8. Изменить шрифт раздела
  9. Создайте прикрепленный заголовок
  10. Создайте липкий заголовок с эффектом тени.
  11. Добавление цвета фона в раздел
  12. Изменение цвета фона тела
  13. Изменение цвета определенного слова или фразы
  14. Создайте рамку вокруг изображения
  15. Создание эффекта наведения на изображение
  16. Оформление формы
  17. Создайте адаптивный макет
• Поднимите свои навыки CSS на новый уровень

Советы по CSS для WordPress

Чтобы реализовать эти советы, вам нужно знать только две вещи:

• Как работает CSS
• Как добавить CSS в WordPress

Примечание. CSS не представляет риска, поэтому, если вы допустили ошибку, вы можете просто удалить код или изменить его… это ничего не сломает :)

Разобравшись с этим, давайте сразу перейдем к некоторым практическим советам по CSS с примерами, чтобы вы могли опробовать их на своем собственном сайте WordPress:

Центрировать элемент по горизонтали и вертикали

Чтобы центрировать элемент (например, изображение, текст или элемент div) по горизонтали и вертикали, используйте следующий код CSS:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

В этом коде свойство position: relative используется для позиционирования элемента относительно его ближайшего позиционированного предка. Свойства top: 50% и left: 50% перемещают элемент в центр его контейнера. Наконец, transform: translate(-50%, -50%) центрирует элемент как по горизонтали, так и по вертикали, перемещая его назад на 50% от его собственной ширины и высоты.

Изменить цвет ссылки

.item-class{
color : blue;
}

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

В данном случае это можно сделать так:

.item-class{
color : #F7F7F7;
}

Если вы хотите создать цветовую палитру для дизайна своего веб-сайта, попробуйте использовать инструмент Paletton. Это очень полезно!

Примечание. Если вы хотите объединить элементы, это довольно просто.

Например, предположим, что вы хотите отключить щелчок и снова сделать ссылку черной.

Вы можете использовать этот код:

.item-class{
pointer-events : none;
color : black;
}

Удалить ссылку

.item-class{
display : none;
}

Примечание. Иногда вам может потребоваться a после класса, чтобы он работал, например:

.item-class a{
display : none;
}

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

Отключить ссылку (ссылка остается видимой, но пользователи не могут по ней щелкнуть)

Примечание. Для этого всегда лучше изменить HTML, но если CSS может быть проще или единственным возможным решением, используйте этот код:

.item-class{
pointer-events: none;
}

Изменение цвета ссылок при наведении

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

a:hover {
color: red;
}

В этом коде селектор a:hover нацелен на все ссылки на странице, на которую в данный момент наводит курсор мыши. Свойство color: red меняет цвет текста на красный.

Ссылки на стили

Чтобы стилизовать ссылки на своем веб-сайте, используйте следующий код CSS:

a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

В этом коде a используется для стилизации всех ссылок на странице. Свойство color задает цвет ссылок, а свойство text-decoration удаляет подчеркивание по умолчанию. Свойство border-bottom добавляет тонкий эффект подчеркивания. Свойство transition создает эффект плавного перехода, когда пользователь наводит курсор на ссылку. Селектор a:hover используется для стилизации ссылки, когда пользователь наводит на нее курсор.

Стиль кнопки

Используйте следующий код для оформления кнопки:

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

В этом коде для стилизации кнопки используются различные свойства, включая свойства background-color и color для внешнего вида кнопки, свойство padding для размера кнопки и свойство cursor для изменения указателя мыши при наведении курсора на кнопку.

Изменить шрифт раздела

Измените шрифт раздела вашего веб-сайта, используя следующий код CSS:

.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

В этом коде свойство font-family устанавливает шрифт Arial или аналогичный шрифт без засечек, свойство font-size устанавливает размер шрифта равным 16 пикселей, а свойство line-height устанавливает расстояние между строками текста равным 1,5. раз больше размера шрифта.

Создайте прикрепленный заголовок

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

.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

В этом коде свойство position: fixed фиксирует заголовок в верхней части области просмотра, а свойство top: 0 позиционирует его в самом верху страницы. Свойство width: 100% гарантирует, что заголовок охватывает всю ширину области просмотра. background-color , color используются для стилизации заголовка, а свойство z-index: 9999 гарантирует, что заголовок появится поверх всех остальных элементов на странице.

Создайте липкий заголовок с эффектом тени.

Чтобы создать липкий заголовок с эффектом тени, который остается фиксированным в верхней части страницы при прокрутке пользователем, используйте этот код CSS:

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

В этом коде свойство position: fixed используется для фиксации заголовка в верхней части страницы. Свойства top: 0 и left: 0 размещают заголовок в верхнем левом углу страницы. Свойство width: 100% устанавливает ширину заголовка равной полной ширине страницы. Свойство background-color задает цвет фона заголовка, а свойство z-index гарантирует, что заголовок появится поверх других элементов на странице. Наконец, свойство box-shadow добавляет к заголовку легкий эффект тени. Селектор .content используется для добавления заполнения в верхнюю часть страницы, чтобы содержимое не закрывалось фиксированным заголовком.

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ КНИГА

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

Скачать

Загружая эту электронную книгу, я соглашаюсь время от времени получать электронные письма от WPMU DEV.
Мы сохраняем вашу электронную почту на 100% конфиденциальной и не рассылаем спам.

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ КНИГА

Планируйте, создавайте и запускайте свой следующий сайт WP без проблем. Наш контрольный список делает процесс простым и повторяемым.

Скачать

Загружая эту электронную книгу, я соглашаюсь время от времени получать электронные письма от WPMU DEV.
Мы сохраняем вашу электронную почту на 100% конфиденциальной и не рассылаем спам.

Добавление цвета фона в раздел

Хотите добавить цвет фона в раздел вашего сайта? Затем используйте следующий код CSS:

.section {
background-color: #f2f2f2;
padding: 20px;
}

В этом коде свойство background-color: #f2f2f2 устанавливает светло-серый цвет фона, а свойство padding: 20px добавляет 20 пикселей пространства вокруг содержимого в разделе.

Изменение цвета фона тела

Добавьте этот код, чтобы изменить цвет фона тела вашего сайта:

body {
background-color: #f5f5f5;
}

В этом коде свойство background-color устанавливает светло-серый цвет фона.

Изменение цвета определенного слова или фразы

Чтобы изменить цвет определенного слова или фразы в блоке текста, вы можете использовать следующий код CSS:

p span {
color: red;
}

В этом коде селектор p span нацелен на любой элемент span , который появляется внутри элемента p . Затем вы можете обернуть слово или фразу, на которую вы хотите настроить таргетинг, элементом span в своем HTML, например:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

В результате фраза «consectetur adipiscing elit» будет выделена красным цветом.

Создайте рамку вокруг изображения

Вот как добавить рамку вокруг изображения:

img {
border: 2px solid #ccc;
}

В этом коде свойство border задает ширину, стиль и цвет границы. Значение 2px устанавливает ширину границы в 2 пикселя, solid устанавливает стиль сплошной линии, а #ccc устанавливает светло-серый цвет.

Создание эффекта наведения на изображение

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

img:hover {
opacity: 0.8;
}

В этом коде селектор img:hover выбирает изображение, когда пользователь наводит на него курсор. Свойство opacity устанавливает прозрачность изображения. В данном случае установлено значение 0,8, что делает изображение слегка прозрачным, когда пользователь наводит на него курсор.

Оформление формы

Оформите форму на своем веб-сайте с помощью следующего кода CSS:

form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

В этом коде для стилизации формы используются различные свойства, в том числе свойства background-color , padding и border-radius для общего внешнего вида формы. Селектор form label используется для стилизации меток, связанных с каждым полем формы. form input[type="text"], form input[type="email"], form textarea используется для стилизации различных полей ввода в форме. Селектор form input[type="submit"] используется для стилизации кнопки отправки.

Создайте адаптивный макет

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

@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

В этом коде правило @media используется для указания разных стилей для разных размеров экрана. Первое правило @media нацелено на экраны с максимальной шириной 768 пикселей, а второе правило @media — на экраны с минимальной шириной 769 пикселей. Различные селекторы в каждом правиле @media используются для настройки макета и внешнего вида страницы в зависимости от размера экрана.

Еще один совет по CSS…

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

Чтобы переопределить это, просто добавьте !important следующим образом:

.item-class{
pointer-events: none !important;
}

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

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

Поднимите свои навыки CSS на новый уровень

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

• 10 простых советов по изучению CSS для WordPress. Практические советы для новичков, которые хотят изучить CSS специально для использования с WordPress. Он охватывает все: от понимания синтаксиса CSS до использования фреймворков CSS.
• Изучение и использование CSS для WordPress. Подробное руководство по изучению и использованию CSS специально для использования с WordPress. В нем рассматриваются такие темы, как использование настройщика WordPress, понимание селекторов CSS и работа с дочерними темами.
• 7 лучших сайтов для поиска фрагментов CSS и вдохновения. Ищете вдохновение для своего CSS-кода? В этой статье перечислены семь веб-сайтов, предлагающих фрагменты CSS и примеры, которые вы можете использовать на своем собственном веб-сайте WordPress.
• Как стилизовать изображения на вашем веб-сайте WordPress с помощью CSS. Изображения являются важной частью любого веб-сайта, и в этой статье предлагаются советы о том, как стилизовать их с помощью CSS. Вы узнаете, как добавлять границы, изменять размер и выравнивание изображения и многое другое.
• Как добавить пользовательский CSS на ваш сайт WordPress. В этой статье вы узнаете, как добавить пользовательский CSS на ваш сайт WordPress, используя как встроенный настройщик, так и плагины.
• Бесплатные плагины CSS для оперативного редактирования вашего сайта WordPress. В этой статье перечислены некоторые бесплатные плагины CSS, которые позволяют вам редактировать ваш веб-сайт WordPress в реальном времени, что упрощает просмотр эффектов ваших изменений CSS в режиме реального времени.
• 14 крутых инструментов CSS-анимации для WordPress. Если вы хотите добавить анимацию на свой веб-сайт WordPress с помощью CSS, в этой статье перечислены несколько интересных инструментов, которые вы можете использовать для этого.
• Добавьте макеты каменной кладки и сетки на свой сайт WordPress с помощью CSS. В этой статье объясняется, как использовать CSS для добавления макетов каменной кладки и сетки на ваш веб-сайт WordPress, создавая более визуально привлекательный дизайн.
• 25 советов экспертов по более чистому кодированию CSS для WordPress. Если вы хотите улучшить чистоту и читаемость вашего кода CSS, в этой статье предлагаются 25 советов экспертов, как это сделать.
• 25 советов для профессионалов по улучшению рабочего процесса CSS — советы по улучшению рабочего процесса CSS, от использования препроцессоров CSS до использования инструментов разработчика браузера для отладки кода.

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

Авторы

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

Не пропустили ли мы какие-нибудь изящные приемы CSS, которым вы научились? Будем рады узнать о них в комментариях!