자신만의 스타일시트로 워드프레스 테마 수정하기

많은 워드프레스 사용자는 테마의 스타일시트를 변경하여 자신만의 커스텀테마를 사용하고 있습니다. 대다수는 테마의 스타일시트를 직접 수정하여 사용하죠. 테마의 스타일시트를 직접 수정하여 사용 할 경우 테마 업데이트 시 스타일시트 초기화의 가능성이 있고, 너무 많이 변경 할 경우 원래의 디자인을 알 수가 없다는 단점이 있습니다. 기존의 스타일시트와 분리하여 자신만의 스타일시트를 생성해 사용하면 이러한 단점을 극복하면서 자유롭게 테마의 디자인을 커스텀할 수 있습니다. 

저는 한번 게시글의 제목 색상을 바꿔보겠습니다. 제목 색상은 스타일시트에서 .fullscreen .post a .entry-title 라는 선택자를 이용해서 규정되고 있습니다. 

customcss1

위의 선택자를 본인만의 스타일시트를 생성해서 바꿔보겠습니다. 스타일시트는 테마의 root폴더에 만들어주시면 됩니다. 이 때 확장자는 .css로 지정해주셔야 합니다.

customcss2

스타일 시트를 생성한 후 제목 색상을 바꿔줍니다. 이 때 important를 사용해 우선권을 부여해 줍니다. 그리고 스타일시트를 저장한 후 나옵니다.

customcss3

다음은 스타일시트를 홈페이지에서 불러오게 해야 합니다. 여러 방법이 있는데 대다수 테마의 기본 스타일시트인 Style.css에서 새로 만든 스타일시트를 import할 경우 기본 스타일시트가 우선권을 갖기 때문에 아무리 important를 사용한다 하더라도 적용되지 않습니다. 따라서 테마의 header에서 바로 스타일시트를 불러와야 합니다. 대다수의 테마는 사용자정의하기에서 header를 수정할 수 있습니다. 아래의 식을 사용해 자신이 만든 스타일시트를 불러올 수 있도록 설정합니다. 참고로 당신 테마의 루트폴더의 위치는 다를 수 있기 때문에 위치를 확인 해 주셔야 합니다.

customcss4

자 이제 바꾼 스타일이 적용되었는지 확인할 때 입니다. 아래에 보시는 것 처럼 제가 넣은 색상으로 게시글 제목의 색상이 바뀐 것을 알 수 있습니다. 바뀌지 않았을 경우 important를 정확히 넣으셨는지, header에 넣은 link태그에서 스타일시트의 위치가 정확히 지정되었는지 확인해 보시기 바랍니다. 또한 cache로 인해 바뀌지 않은 것 처럼 보일 수도 있습니다. 이 경우 cache를 삭제 해 주시면 됩니다. 참고로 스타일시트 편집 작업을 할 때는 시크릿 모드에서 작업을 하면 캐시가 남지 않아 더 편하게 작업할 수 있습니다.

customcss6

이후 새로 만든 자신만의 스타일시트를 이용해 테마를 수정해 주시면 됩니다. 

끝.

 

Facebook Comments
« Previous Post
Next Post »

About Author

HEEJUNG

Matt 세상을 보고 무수한 장애물을 넘어 벽을 허물고 더 가까이 다가가 서로 알아가고 느끼는 것. 그것이 바로 제 인생의 목적입니다.