테마에 사용자 지정 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.

WordPress에서 @import를 사용하여 사용자 지정 CSS를 추가하는 것은 더 이상 모범 사례가 아니지만 해당 방법으로 수행 할 수 있습니다.

가장 좋은 방법은functions.php에서 wp_enqueue_style() 함수를 사용하는 것입니다.

예 :

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

참고 :

|
추가 기본 :
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로 사용할 때 바닥 글에 스크립트를 배치 할 수 있습니다.

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.

WordPress 대시 보드에서 모양> CSS 편집으로 이동합니다.

다음은 기본 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'));
 

이 경우 마지막 수정 날짜를 unixtime으로 쿼리 매개 변수로 작성합니다.

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.