Wordpress 편집기에서 HTML과 CSS를 추가 하시겠습니까?

Question

"freestore"라는 하위 테마를 사용하고 있습니다. (https://en-gb.wordpress.org/themes/freestore/)

간단한 HTML과 CSS를 사용하여 내 페이지 중 하나에 내용을 추가하려고합니다. 나는 style.css를 통해 테마에서 CSS 스타일을 성공적으로 변경할 수 있었지만, 나 자신의 HTML을 추가하고 스타일을 지정하기 위해 CSS를 추가하려고합니다.

'홈페이지'를 만들고 wordpress tinymce 텍스트 편집기를 통해 HTML을 잘 추가 할 수 있습니다. 내 style.css를 통해 CSS를 추가하려고하면 스타일이 적용되지 않습니다. 그러나 인라인 스타일을 추가 할 수는 있지만 스타일을 외부에 추가하고 싶습니다. 나는 줄을 추가 할 것 워드 프레스 텍스트 편집기에

:

예 내있는 style.css 파일에서

<div id="cssTest">TEXT</div>

을 나는 추가합니다 :

#cssTest { 
    background-color: red; 
} 

CSS의 스타일을 적용되지 않습니다. 그러나 추가 미세 작동합니다 HTML 편집기로 다음

<div id="cssTest" style="background-color: red;">TEXT</div> 

내 질문은 다음 중 하나

내가 외부 스타일 시트를 통해 내 스타일을 적용 할 수있는 방법을
1. ?
2. 해당 페이지에 대한 자체 템플릿을 만들고 거기에 HTML을 추가해야합니까?

Answer 1

자식 테마 style.css에 Text Domain: freestore-child parentthemename-child가 있는지 확인하십시오. 추가 한 모든 CSS ID/클래스 요소가 구현됩니다.

가장 좋은 방법은 custom.css 파일을 작성하여 wp_enqueue_style 기능을 통해 하위 테마의 functions.php에 대기열에 넣는 것입니다.

집과 같은 특정 페이지에 대한 페이지 템플릿을 만드는 것이 가장 좋습니다.

Answer 2

대부분의 경우 적용하려는 규칙보다 "구체적"인 원래 테마에 속한 CSS 규칙이 있습니다. 이를 확인하려면 브라우저 도구로 요소를 검사하고 해당 요소에 적용된 CSS 규칙을 확인하십시오.

그 규칙 예를 들어

.content main .section_1 .gxt1 { 
    background-color: black; 
} 

될 경우, 원래 규칙이 포함되어있는 경우가

.content main .section_1 .gxt1 #cssTest { 
    background-color: red; 
} 

처럼 높은 특이성이있는 규칙을 추가 덮어 쓰기해야 할 것 !important 인 경우 !important을 추가해야합니다. 그래서

.content main .section_1 .gxt1 { 
    background-color: black !important; 
} 

을 덮어, 당신은 조심 편집`style.css` 수)

.content main .section_1 .gxt1 #cssTest { 
    background-color: red !important; 
}