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

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

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

Я обычно добавляю этот кусок кода, если я хочу добавить другой файл CSS

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

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

Использование @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'));

Активируйте дочернюю тему и добавьте следующий пример кода в 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());
}

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

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

https://codex.wordpress.org/Child_Themes

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

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

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

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

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

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

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

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

Лучший способ - объединить все стили, поставленные в очередь, в одну функцию, а затем вызывать их с помощью 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

|
Дополнительно Basic:
wp_enqueue_style() функция может иметь 5 параметров: вот так - wp_enqueue_style ( $ handle, $ src, $ deps, $ ver, $ media );
В реальном мире WP Coding обычно мы также добавляем файлы 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.

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

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

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

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

https://codex.wordpress.org/Child_Themes

Иди по этому маршруту, ты поблагодаришь себя позже.