워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

테마는 워드프레스 웹 사이트 디자인입니다. 보통 워드프레스 홈페이지에서 제공하는 무료/유료 테마 중에서 하나를 골라 자신의 웹 사이트 디자인으로 정합니다. 하지만 아무리 마음에 드는 디자인이라도 완벽할 수는 없습니다. 시간이 지날수록 사이트에 자신만의 개성을 담고 싶어 집니다. 완성된 테마를 적용한 이후 수정하는 방법은 2가지입니다. 첫 번째는 테마 디자인을 통한 수정입니다. 테마 디자인은 수정 가능한 항목들을 메뉴로 제공합니다. 웹 페이지 설정 화면으로 쉽게 수정할 수 있습니다. 두 번째는 테마 편집기를 이용한 CSS 수정입니다. CSS 코드값을 직접 수정하는 것입니다. 이 방법은 CSS 문법을 알아야 하기 때문에 초보자들이 접근하기에는 쉽지 않습니다.

 

 

◎ 테마 디자인을 통한 수정

 

 

▼ 자신이 적용한 테마의 디자인을 수정하기 위한 첫 번째 방법은 워드프레스에서 제공하는 테마 디자인 메뉴를 이용하는 것입니다. 테마 디자인 > 사용자 정의하기 선택해서 테마 수정 메뉴 페이지로 이동합니다.

 

▼ 해당 페이지의 왼쪽에 테마 수정을 위한 메뉴들을 제공하고 있습니다. 테마에 따라 제공하는 메뉴가 다르게 나타날 수도 있습니다. 왼쪽 메뉴들을 이용해 테마를 수정하면 오른쪽 화면에 적용된 디자인이 나타납니다. 

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 워드프레스(Wordpress) 모든 자료, 글, 데이터, 사이트 옮기는 방법 ▶ 워드프레스(WordPress) 게시판 플러그인 Mangboard 추가하기 ▶ 워드프레스 테마 설치 및 변경하기 ▶ 워드프레스 Wordpress 사용자 관리하기 ▶ 워드프레스 Wordpress 구글 애널리틱스와 연동하기 위한 플러그인 설치

 

 

 

 

◎ CSS 소스 직접 수정하기

 

 

▼ 두 번째 방법은 테마 전체에 적용된 CSS 파일을 적용하는 것입니다. 직접 디자인 코드를 수정하는 것이므로 초보자들은 쉽지 않습니다. 하지만 디테일한 수정이 가능하기 때문에 자유도가 높습니다. 테마 디자인 > 테마 편집기 메뉴를 선택합니다. 

 

▼ 테마 편집기 화면에서 스타일시트(style.css) 란으로 갑니다. 아래에 에디터에는 테마에 적용된 CSS 코드가 들어가 있습니다. 해당 코드를 수정하면 테마에 적용된 디자인이 변경되겠죠. 

 

▼ 수정이 끝나면 에디터 아래에 있는 파일 업데이트 버튼을 클릭합니다. 그래야 에디터에서 수정한 내용이 반영됩니다. 

 

▼ 테마와 관련된 전체 파일 목록을 오른쪽에서 볼 수 있습니다. CSS 가 아닌 자바스크립트를 고치고 싶다면 오른쪽 파일 목록에서 찾아서 선택합니다. 왼쪽 에디터 화면에 소스를 띄우고 수정합니다. 

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 워드프레스(Wordpress) 모든 자료, 글, 데이터, 사이트 옮기는 방법 ▶ 워드프레스(WordPress) 게시판 플러그인 Mangboard 추가하기 ▶ 워드프레스 테마 설치 및 변경하기 ▶ 워드프레스 Wordpress 사용자 관리하기 ▶ 워드프레스 Wordpress 구글 애널리틱스와 연동하기 위한 플러그인 설치