Как добавить собственный файл 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.

I usually add this piece of code if I want to add another css file

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

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

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

Using @import in WordPress for adding custom css is no longer the best practice, yet you can do it with that method.

the best practice is using the function wp_enqueue_style() in functions.php.

Example:

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());
}
 

Activate the child theme and add the following example code in the 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());
}

Я предлагаю использовать дочерние темы. Его очень легко реализовать,и все изменения,которые вы делаете (включая стили),полностью изолированы от исходной темы.

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.

Если вы хотите оставить свой HTML-код. вы можете добавить это в свой файл css.Думаю,так лучше.

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

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

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

If you want to leave your html along. you can add this to your css file. I think this is better.

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

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential (when using the same level of identifier, already used ) , so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

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

https://codex.wordpress.org/Child_Themes

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

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

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

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

To prevent overwritting of main theme CSS or other files, you should ALWAYS use a child theme in WordPress ... not doing so will only cause you major headaches and problems down the road.

https://codex.wordpress.org/Child_Themes

... and with how easy it is to setup a child theme, there is no reason you shouldn't be using one.

Using a child theme will then allow you to override any of the main parent theme files you want, simply by copying from parent into your child, or by creating a new file with the same name.

Regarding the custom.css file there's numerous ways that theme developers handle this ... a lot of them do this simply to try and prevent clients who don't want to use a child theme, from editing the main style.css file ....

Either way you shouldn't be worried about that, as long as you use a child theme you shouldn't have to worry about updating your theme later on and losing your changes ... get in the habit of always using child themes, you will thank me later, i promise.

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

Обратите внимание:

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

|
Дополнительная базовая:
Функция 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);
 

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

The best way is to combine all enqueued styles into a single function and then call them using wp_enqueue_scripts action. Add the defined function to your theme's functions.php somewhere below the initial setup.

Code Block:

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' );

Please Note :

3rd parameter is the dependency array which refers to whether or not this stylesheet is dependent on another stylesheet. So, in our above code custom.css is dependent on style.css

|
Additional Basic:
wp_enqueue_style() function may have 5 parameters: like this way - wp_enqueue_style( $handle, $src, $deps, $ver, $media );
In real world of WP Coding, usually we also add javascript files/jQuery libraries inside that function like this way:

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

The 5th parameter true/false is optional (2nd, 3rd and 4th params are also opt.) but very essential, it allows us to place our scripts in footer when we use the boolean parameter as true.

Перейдите в «Внешний вид»> «Редактировать CSS» на панели инструментов WordPress.

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

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

Go to Appearance > Edit CSS from your WordPress Dashboard.

Here is the screen with basic CSS editor.

Now paste your CSS directly to the default text. You can delete the default text so that your CSS only appears in the editor. Then save the stylesheet and your CSS will be live.

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

 wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));
 

В этом случае я указываю дату последней модификации во времени unix в качестве параметра запроса.

If you want to avoid web browser cache problems, you need include the file version, like in this example is shown.

wp_enqueue_style ('theme-style', get_template_directory_uri().'/path/to/css/style.css?v=' . filemtime(get_template_directory() . '/path/to/css/style.css'));

In this case, I write the last modification date in unix time as a query param.

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

https://codex.wordpress.org/Child_Themes

Пройдите по этому пути,поблагодарите себя позже.

Use a child theme. It's your best bet. This way if the theme is ever updated, you won't override the stylesheets you've created.

https://codex.wordpress.org/Child_Themes

Go this route, you'll thank yourself later.