테마에 사용자 정의 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 파일을 살펴볼 수 있습니다.

사용자 정의 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'));

자식 테마를 활성화하고 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는 순차적으로 작동합니다 (동일한 수준의 식별자를 사용하는 경우 이미 사용됨). 파일의 마지막 내용을 덮어 씁니다. 항목을 재정의하려면 사용자 정의 스타일 가져 오기를 맨 아래에 두십시오.

가장 좋은 방법은 모든 대기열 스타일을 단일 함수로 결합한 다음 action을 사용하여 호출하는 것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 코딩의 실제 환경에서는 일반적으로 다음과 같이 해당 함수 내에 javascript 파일 / jQuery 라이브러리도 추가합니다.

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

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

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

다음은 기본 CSS 편집기가있는 화면입니다.

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

어린이 테마를 사용하십시오. 최선의 방법입니다. 이렇게하면 테마가 업데이트 된 경우 만든 스타일 시트를 재정의하지 않습니다.

https://codex.wordpress.org/Child_Themes

이 길로 가면 나중에 고마워 할 것입니다.