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 используется для добавления отступов в верхнюю часть страницы, чтобы содержимое не закрывалось фиксированным заголовком.

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

Вы хотите добавить цвет фона в раздел вашего сайта? Затем используйте следующий код 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.
• Learning and Reference CSS for 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, в этой статье перечислены некоторые крутые инструменты, которые вы можете использовать для этого.
• Добавьте макеты Masonry и Grid на свой сайт WordPress с помощью CSS. В этой статье объясняется, как использовать CSS для добавления макетов Masonry и Grid на ваш сайт WordPress, создавая более визуально привлекательный дизайн.
• 25 советов экспертов по более чистому кодированию CSS для WordPress. Если вы хотите улучшить чистоту и удобочитаемость своего кода CSS, в этой статье вы найдете 25 советов экспертов, как сделать именно это.
• 25 профессиональных советов по улучшению вашего рабочего процесса CSS — советы по улучшению вашего рабочего процесса CSS, от использования препроцессоров CSS до использования инструментов разработчика браузера для отладки вашего кода.

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

Авторы

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

***

Примечание. Мы не принимаем статьи из внешних источников. Однако члены WPMU DEV могут вносить идеи и предложения для учебных пособий и статей в нашем блоге через Blog XChange.

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