Jak dodać niestandardowy plik css w motywie?

Niektóre motywy wymagają, aby nie edytować pliku style.css, zamiast tego użyj pliku custom.css. Jeśli napiszesz kod na custom.css, nadpisze ten sam styl elementu w style.css. Myślę, że dzieje się tak, aby zapobiec utracie stylów użytkownika podczas aktualizacji motywu, prawda?

Jak to działa Czy zawierają już plik custom.css w swoim motywie? Ale jak ten plik jest zawarty w kompozycji, aby najpierw szukał stylu w custom.css? Dzięki.

Zazwyczaj dodaję ten fragment kodu, jeśli chcę dodać kolejny plik css

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

Wierzę, że twórcy motywu chcą zachować jak najwięcej projektu układu motywu. Tak więc niestandardowy plik css nie zaszkodzi zbytnio. Myślę, że to bardziej pytanie pomocnicze. Dzięki niestandardowemu plikowi css twórcy mogą pomóc tym, którzy używają swoich motywów łatwiej. Ponieważ oryginalny style.css jest niezmieniony, więc twórca motywów prawdopodobnie zajrzy do niestandardowego pliku css.

Używanie @import w WordPress do dodawania niestandardowego css nie jest już najlepszą praktyką, ale możesz to zrobić za pomocą tej metody.

najlepszą praktyką jest użycie funkcji wp_enqueue_style()w functions.php.

Przykład :

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

Aktywuj motyw potomny i dodaj następujący przykładowy kod do pliku 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());
}

Moją propozycją byłoby użycie motywów potomnych. Jest bardzo łatwy do wdrożenia, a wszystkie modyfikacje (w tym style) są całkowicie odizolowane od oryginalnego motywu.

Aby zapobiec zastąpieniu głównego motywu CSS lub innych plików, ZAWSZE należy używać motywu podrzędnego w WordPress ... nie zrobienie tego spowoduje tylko poważne bóle głowy i problemy na drodze.

https://codex.wordpress.org/Child_Themes

... a dzięki łatwości konfiguracji motywu podrzędnego nie ma powodu, dla którego nie powinieneś go używać.

Użycie motywu podrzędnego pozwoli wówczas zastąpić dowolny z głównych plików motywu nadrzędnego, po prostu kopiując z rodzica do dziecka lub tworząc nowy plik o tej samej nazwie.

Jeśli chodzi o custom.cssplik, twórcy motywów radzą sobie z tym na wiele sposobów ... wiele z nich robi to po prostu, aby uniemożliwić klientom, którzy nie chcą używać motywu potomnego, edytowanie głównego style.csspliku ...

Tak czy inaczej, nie powinieneś się tym martwić, dopóki używasz motywu potomnego, nie powinieneś martwić się o późniejszą aktualizację motywu i utratę zmian ... nałóż się, że zawsze używasz motywów potomnych, podziękuje mi później, obiecuję.

Jeśli chcesz zostawić swój HTML. możesz dodać to do swojego pliku css. Myślę, że tak jest lepiej.

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

również w zależności od motywu będzie działał z motywami podrzędnymi i nadrzędnymi.

- pamiętaj, że css działa sekwencyjnie (gdy używasz tego samego poziomu identyfikatora, który już został użyty), więc to, co ostatnie w twoim pliku, nadpisze. więc umieść import niestandardowego stylu na dole, jeśli chcesz zastąpić różne elementy.

Najlepszym sposobem jest połączenie wszystkich kolejkowanych stylów w jedną funkcję, a następnie wywołanie ich za pomocą wp_enqueue_scriptsakcji . Dodaj zdefiniowaną funkcję do funkcji motywu. Php gdzieś poniżej początkowej konfiguracji.

Blok kodu:

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

Proszę zanotować :

Trzeci parametr to tablica zależności, która odnosi się do tego, czy ten arkusz stylów jest zależny od innego arkusza stylów. Tak więc w naszym powyższym kodzie custom.css zależy od style.css

|
Dodatkowe podstawowe:
wp_enqueue_style() funkcja może mieć 5 parametrów: jak w ten sposób - wp_enqueue_style ( $ uchwyt, $ src, $ deps, $ ver, $ media );
W prawdziwym świecie kodowania WP zwykle dodajemy również pliki javascript / biblioteki jQuery wewnątrz tej funkcji w następujący sposób:

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

Piąty parametr prawda / fałsz jest opcjonalny (parametry 2, 3 i 4 są również opt.), Ale jest bardzo istotny, pozwala nam umieścić nasze skrypty w stopce, gdy użyjemy parametru boolean jako true.

Przejdź do Wygląd> Edytuj CSS z pulpitu WordPress.

Oto ekran z podstawowym edytorem CSS.

Teraz wklej CSS bezpośrednio do domyślnego tekstu. Możesz usunąć domyślny tekst, aby Twój CSS pojawił się tylko w edytorze. Następnie zapisz arkusz stylów, a Twój CSS będzie aktywny.

Użyj motywu podrzędnego. To twój najlepszy zakład. W ten sposób, jeśli motyw zostanie kiedykolwiek zaktualizowany, nie zastąpisz utworzonych arkuszy stylów.

https://codex.wordpress.org/Child_Themes

Idź tą trasą, później podziękujesz sobie.