Лучшие коды CSS для настройки веб-сайтов WordPress

Опубликовано: 2022-03-15

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

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

Почему коды CSS используются в WordPress для настройки веб-сайтов?

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

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

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

Лучшие коды CSS для настройки веб-сайта WordPress

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

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

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

1. Скрыть элементы

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

1.1. Скрыть заголовок:

 заголовок {
    дисплей:нет;
}

1.2. Скрыть кнопку «Добавить в корзину»

 .single_add_to_cart_button.button{
    дисплей:нет;
}

1.3. Скрыть хлебные крошки

 .woocommerce-хлебные крошки{
    дисплей:нет;
}

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

Тем не менее, он дает быстрое и простое решение проблем со стилем или дизайном, и мы по-прежнему можем использовать его без каких-либо проблем.

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

2. Переместить элементы

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

 #qlwapp{
    внизу: 45 пикселей;
    слева: 25 пикселей;
    должность: родственница;
}

В некоторых случаях вам может понадобиться установить position:relative , если элемент уже был позиционирован ранее.

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

3. CSS-коды для мобильного режима

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

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

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

 Только экран @media и (max-width:768px){
    div.masthead{
        дисплей: встроенный блок;
        ширина: 50%;
        поля:авто;
    }
}

4. Редактировать текст

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

Псевдоселекторы :before и :after after позволяют вставлять «псевдоэлемент» прямо перед любым другим элементом HTML или после него. Таким образом, мы можем скрыть текст и заменить его любым другим:

 п.текст{
    видимость: скрытая;
}
п.текст::до{
    видимость: видимая;
    content:'новый текст здесь';
    дисплей:блок;
}

5. Переводы с использованием кодов CSS

Псевдокласс :lang() позволяет нам применять правила CSS в зависимости от языка страницы. Даже если он переведен с помощью одного из подключаемых модулей перевода, таких как WPML или Polylang, текущий атрибут lang всегда будет в основном теге <html> вывода HTML веб-сайта.

Лучшие скрипты CSS для WordPress

Итак, если мы воспользуемся псевдоселектором :before , как в предыдущем примере скрипта, в сочетании с псевдоклассом :lang() , мы сможем перевести любую строку на веб-сайте.

Это также будет работать на многоязычных веб-сайтах.

 p.text:яз(ан){
    видимость: скрытая; 
} 
p.text:lang(en)::before{ 
    видимость: видимая;
    content:'переведенный текст';
    дисплей:блок; 
}

6. Добавьте полосу прокрутки

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

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

Мы также можем вставить полосу прокрутки в сообщения и страницы:

Этот скрипт добавит в список полосу прокрутки, сделав все документы намного короче.

 ул {
    высота: 370 пикселей;
    переполнение-у: прокрутка;
}

Лучшие скрипты CSS для WordPress

7. Коды CSS для использования изображений в качестве значков

Вы можете добавить любой тип изображения с помощью скрипта CSS, и это можно сделать несколькими способами. Но с помощью псевдоселектора :before мы можем добавить изображение и сделать его похожим на значок.
Обязательно загрузите изображение в медиатеку и используйте постоянную ссылку на изображение в качестве url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    content:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

Или мы можем использовать настоящие иконки, также используя тот же селектор:

 .entry-content > p:nth-child(3)::before{
	семейство шрифтов: "Шрифт Awesome 5 Free"; 
        вес шрифта: 400; 
        содержимое: "\f0f3";
}

Чтобы использовать настоящие значки, HTML-тег ссылки значка установлен на шрифт awesome 5 Free в нашем примере. Он должен быть загружен в разделе <head> веб-страницы.

8. Изменить шрифты

Вы также можете настроить шрифты веб-сайта WordPress с помощью кодов CSS. Подобно значкам, шрифты также должны быть загружены в заголовок темы, чтобы мы могли их использовать. Мы можем проверить, доступен ли набор шрифтов, взглянув на раздел <head> страницы.

Здесь ссылка на Google Fonts уже добавлена ​​с помощью PHP-скрипта.

лучшие скрипты CSS для WordPress

После того, как вы подтвердите, что набор значков или шрифтов, который вы хотите использовать, уже загружен в HTML-раздел <head> , вы можете свободно использовать его на всем веб-сайте.

 h1,h2,h3,p,a,li{
    семейство шрифтов: «Hubballi», курсив;
}

Бонус: 3 способа применить CSS к веб-сайту WordPress.

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

Итак, вот 3 распространенных способа применения CSS на веб-сайте WordPress.

1. Настройщик темы

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

Перейдите в « Внешний вид» > «Настроить» > «Дополнительный CSS» , чтобы открыть редактор стилей. Затем вставьте сюда свои CSS-скрипты.

лучшие css скрипты для wordpress

Скрипты здесь будут сохранены в базе данных после нажатия кнопки « Опубликовать ». Вы сможете увидеть изменения на своем веб-сайте после предварительного просмотра.

2. CSS-файл дочерней темы

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

Откройте редактор кода, чтобы вставить туда свои скрипты, или используйте встроенный редактор WP, выбрав « Внешний вид» > «Редактор файлов темы» . Теперь откройте таблицу стилей или файл style.css дочерней темы.

Это место, куда вы должны вставить все свои пользовательские сценарии. После добавления кодов CSS нажмите « Обновить файл» . Но если он превращается в большой файл, может быть хорошей идеей создать новый файл или несколько.

3. файл functions.php дочерней темы

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

Как и в предыдущем подходе, убедитесь, что дочерняя тема активна для вашего сайта. Затем откройте файл functions.php в редакторе тем и вставьте сюда следующие коды.

 add_action('wp_head','QuadLayers_headlink');
функция QuadLayers_headlink () {
	эхо '<стиль>
    .entry-content > p:nth-child(3)::before{
	    семейство шрифтов: "Шрифт Awesome 5 Free"; 
	    вес шрифта: 400; 
	    содержимое: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    семейство шрифтов: "Hubballi", курсив;
    </стиль>';
}

Большим преимуществом использования этого способа является то, что вы можете применять условия PHP, используя всю мощь хуков и функций WP.

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

Вывод

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

  1. Скрыть элементы
  2. Переместить элементы
  3. CSS для мобильных устройств
  4. Редактировать текст
  5. Переводы
  6. Добавить полосу прокрутки
  7. Используйте изображения в качестве значков
  8. Изменить шрифты

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

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

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

А пока вот еще несколько статей, которые могут быть вам интересны:

  • Как создать собственный плагин WordPress
  • Исправление проблемы с загрузкой панели управления WordPress
  • Как создать настраиваемое поле WordPress программно