it-swarm-ko.tech

테마에 사용자 정의 CSS 파일을 추가하는 방법?

일부 테마는 style.css 파일을 편집하지 말고 custom.css 파일을 사용하도록 요청합니다. custom.css에 코드를 작성하면 style.css에서 같은 요소 스타일을 덮어 씁니다. 나는 이것이 테마 업데이트에서 사용자 스타일의 손실을 막기 위해 수행 된 것인가?

사용 방법 이미 테마에 custom.css 파일이 포함되어 있습니까? 하지만이 파일이 테마에 포함되어 어떻게 테마가 custom.css의 스타일을 먼저 찾습니다. 감사.

11
jay

사용자 정의 CSS를 추가하기 위해 WordPress에서 @import를 사용하는 것이 더 이상 권장 사항이 아니지만 해당 방법으로 수행 할 수 있습니다.

가장 좋은 방법은 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'));
24
Fil Joseph

하위 테마를 활성화하고 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());
}
2
Abhishek K R

내 제안은 어린이 테마를 사용하는 것입니다. 구현하기가 매우 쉽고 스타일을 포함한 모든 수정 작업은 원래 테마와 완전히 분리되어 있습니다.

2
p.a.

메인 테마 CSS 또는 다른 파일의 덮어 쓰기를 방지하려면 WordPress에서 항상 하위 테마를 사용해야합니다. 그렇게하지 않으면 큰 두통과 문제가 발생합니다.

https://codex.wordpress.org/Child_Themes

... 그리고 하위 테마를 설정하는 것이 얼마나 쉬운 지에 따라 하나의 테마를 사용하지 않아야 할 이유가 없습니다.

하위 테마를 사용하면 부모로부터 자녀에게 복사하거나 이름이 같은 새 파일을 작성하여 원하는 기본 부모 테마 파일을 무시할 수 있습니다.

custom.css 파일에 관해서는 테마 개발자가 이것을 처리하는 수많은 방법이 있습니다 ... 많은 사람들이 자식 테마를 사용하지 않으려는 클라이언트를 방지하고 기본 style.css 파일을 편집하지 못하도록하려고 시도합니다.

어느 쪽이든 걱정하지 않아도됩니다. 어린이 테마를 사용하는 한 나중에 테마를 업데이트하고 변경 사항을 잃어 버릴 염려가 없어야합니다. 항상 자녀 테마를 사용하는 습관을 가지면, 나 한테 고맙다, 약속 해.

0
sMyles

모양> WordPress 대시 보드에서 CSS 편집으로 이동하십시오.  enter image description here 

다음은 기본 CSS 편집기 화면입니다.  enter image description here 

이제 CSS를 기본 텍스트에 직접 붙여 넣으십시오. CSS가 편집기에만 표시되도록 기본 텍스트를 삭제할 수 있습니다. 그런 다음 스타일 시트를 저장하면 CSS가 게재됩니다.

0
suthanalley

가장 좋은 방법은 인큐 된 모든 스타일을 단일 함수로 결합 그리고 wp_enqueue_scripts action을 사용하여 호출입니다. 정의 된 함수를 테마의 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 코딩에서는 일반적으로 다음과 같이 해당 함수 내에 javascript 파일/jQuery 라이브러리도 추가합니다.

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

다섯 번째 매개 변수 true/false는 선택 사항이지만 (두 번째, 세 번째 및 네 번째 매개 변수도 선택됨) 매우 중요하므로 부울 매개 변수를 true로 사용할 때 스크립트를 바닥 글에 배치 할 수 있습니다.

0
perfectionist1

당신이 당신의 html을 떠나고 싶다면. 이 내용을 CSS 파일에 추가 할 수 있습니다. 나는 이것이 더 낫다고 생각한다.

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

또한 테마에 따라 하위 테마 및 상위 테마에서도 작동합니다.

- css는 순차적으로 작동합니다 (이미 사용 된 동일한 수준의 식별자를 사용하는 경우). 따라서 파일의 마지막 부분이 덮어 씁니다. 그래서 물건을 덮어 쓰고 싶다면 하단에 customstyle 가져 오기를 놓으십시오.

0
woony