• Главная
• Новости
• 17 советов по CSS, экономящих время, для пользователей WordPress

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

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

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

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

• “Как мне удалить кнопку "Подробнее"?”
• “Как я могу изменить цвет этой ссылки?”
• “Как мне сделать эту ссылку недоступной, но сохранить текст на странице?”

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

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

• Советы по CSS для WordPress
• Центрируйте элемент по горизонтали и вертикали
• Измените цвет ссылки
• Удалить ссылку
• Отключите ссылку (ссылка остается видимой, но пользователи не могут щелкнуть по ней)
• Измените цвет ссылок при наведении курсора мыши
• Стиль ссылок
• Оформите кнопку
• Измените шрифт раздела
• Создайте липкий заголовок
• Создайте липкий заголовок с эффектом тени
• Добавьте цвет фона в раздел
• Измените цвет фона основного текста
• Измените цвет определенного слова или фразы
• Создайте рамку вокруг изображения
• Создайте эффект наведения на изображение
• Создайте форму
• Создайте адаптивный макет

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

Для реализации этих советов вам нужно знать только две вещи:

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

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

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

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

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

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

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

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

В этом случае вы можете сделать это следующим образом:

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

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

Допустим, вы хотите отключить щелчок и вернуть ссылку черным цветом.

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

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

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

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

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

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

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

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

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

Стиль ссылок

Для оформления ссылок на вашем сайте используйте следующий код CSS:

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

Оформите кнопку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Измените цвет фона основного текста

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

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

В этом случае фраза “consectetur adipiscing elit” будет выделена красным цветом.

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

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

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

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

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

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

Создайте форму

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

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

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

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

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

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

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

Чтобы переопределить это, просто добавьте !important вот так:

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

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