Theme 적용한 뒤 CSS 파일 수정으로 Theme 수정

기존에 사용되던 inline code 스타일이 wordpress 업데이트 후 갑자기 변경되었다. 기존엔 회색 글자배경에 consolas 글씨체였는데 업데이트 후엔 그냥 아무 효과 없는 글자만 나타난 것이다.

inline code style

위 처럼 나와야하는데 일반글자처럼 나오고, editor 화면에서도 또한 이렇게 나타나서 글 포스팅에 문제가 있었다. 이를 해결하기 위해서 내 wordpress에서 크롬의 “검사” 기능으로 어떤 CSS 파일이 사용되는지를 확인했다.

확인 결과 외부 view 화면에서 보여지는 부분과, editor 부분에 대해서 각각 아래 CSS 파일을 수정하면 된다.

외부 View
./wp-content/themes/ashe/style.css

code {
    font-family: consolas;
    background: #00000012;
}

Editor View
./wp-includes/css/dist/editor/editor-styles.css

code {
    padding: 0;
    margin: 0;
    /* background: inherit; */
    font-size: inherit;
    /* font-family: monospace; */
}