it-swarm.com.ru

Как добавить пользовательский файл CSS в тему?

Некоторые темы просят вас не редактировать файл style.css, а использовать файл custom.css. Если вы напишите код в custom.css, он перезапишет тот же стиль элемента в style.css. Я думаю, что это сделано для того, чтобы предотвратить потерю пользовательских стилей при обновлении темы, так ли это?

Как это работает? Они уже включают файл custom.css в свою тему? Но как этот файл включен в тему, чтобы тема сначала выглядела для стиля в custom.css? Благодарю.

11
jay

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

лучшая практика - использовать функцию wp_enqueue_style() в functions.php.

Пример :

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));
24
Fil Joseph

Активируйте дочернюю тему и добавьте следующий пример кода в файл function.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}
2
Abhishek K R

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

2
p.a.

Чтобы предотвратить перезапись основной темы CSS или других файлов, вы должны ВСЕГДА использовать дочернюю тему в WordPress ... в противном случае это вызовет у вас большие головные боли и проблемы в будущем.

https://codex.wordpress.org/Child_Themes

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

Использование дочерней темы позволит вам затем переопределить любой из основных файлов родительской темы, просто скопировав его из родительского в ваш дочерний или создав новый файл с тем же именем.

Что касается файла custom.css, существует множество способов, которыми разработчики тем справляются с этим ... многие из них делают это просто для того, чтобы клиенты, которые не хотят использовать дочернюю тему, не могли редактировать основной файл style.css ....

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

0
sMyles

Перейдите в Внешний вид> Редактировать CSS из вашей панели WordPress.  enter image description here 

Вот экран с базовым редактором CSS.  enter image description here 

Теперь вставьте ваш CSS прямо в текст по умолчанию. Вы можете удалить текст по умолчанию, чтобы ваш CSS отображался только в редакторе. Затем сохраните таблицу стилей, и ваш CSS будет активен.

0
suthanalley

Лучший способ - объединить все стили в очереди в одну функцию а затем вызвать их, используя действие wp_enqueue_scripts. Добавьте определенную функцию в файл functions.php вашей темы где-то ниже начальной настройки.

Блок кода:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Пожалуйста, обратите внимание :

3-й параметр - это массив зависимостей, который указывает, зависит ли эта таблица стилей от другой таблицы стилей. Итак, в приведенном выше коде custom.css зависит от style.css

|
Дополнительный Базовый:
wp_enqueue_style() функция может иметь 5 параметров: вот так - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
В реальном мире кодирования WP обычно мы также добавляем файлы javascript/библиотеки jQuery в эту функцию следующим образом:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

5-й параметр true/false является необязательным (2-й, 3-й и 4-й параметры также необязательны), но очень важен, он позволяет нам помещать наши сценарии в нижний колонтитул, когда мы используем логический параметр как true.

0
perfectionist1

Если вы хотите оставить свой HTML вместе. Вы можете добавить это в свой файл CSS. Я думаю, что это лучше.

@import url("../mycustomstyle.css");

также в зависимости от вашей темы он будет работать с дочерними и родительскими темами.

- имейте в виду, что css работает последовательно (при использовании идентичного уровня идентификатора, который уже использовался), поэтому последнее в вашем файле будет перезаписано. поэтому поместите свой импорт нестандартного стиля внизу, если вы хотите переопределить материал.

0
woony