Як додати спеціальний файл 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()у function.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дії . Додайте визначену функцію до теми.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);

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

Перейдіть у розділ Зовнішній вигляд> Редагувати CSS на інформаційній панелі WordPress.

Ось екран з базовим редактором CSS.

Тепер вставте свій CSS безпосередньо до тексту за замовчуванням. Ви можете видалити текст за замовчуванням, щоб ваш CSS відображався лише в редакторі. Потім збережіть таблицю стилів, і ваш CSS з’явиться в реальному часі.

Використовуйте дочірню тему. Це ваша найкраща ставка. Таким чином, якщо тема буде коли-небудь оновлюватися, ви не будете замінювати створені вами таблиці стилів.

https://codex.wordpress.org/Child_Themes

Пройдіть цим маршрутом, ви подякуєте пізніше.