자식(child) 테마를 활용한 레이아웃 및 색상 변경

자식 테마 활용 방법

  1. 우선 자식 테마를 만들어서 웹사이트의 기본 테마로 설정한다 (설정 방법은 별도 자료를 참조해야 한다).
  2. 자식 테마는 부모 테마의 모든 속성을 물려 받으면서, CSS를 조금만 수정하면 웹 사이트의 레이아웃 및 색상등을 변경할 수 있다.
  3. 아래 그림으로 변경전·후의 레이아웃을 비교해 보자. 사이드 바의 폭을 줄이고, 본문의 폭을 넓혔고, 사이트 제목의 색상을 빨간색으로 변경하였다.
    [pe2-image src=”http://lh6.ggpht.com/-ipm0MU5gnQk/UYNpUPW2jiI/AAAAAAAAAOI/TDs2r_U9P8c/s144-c-o/%2525EC%25259E%252590%2525EC%25258B%25259D%2525ED%252585%25258C%2525EB%2525A7%252588_%2525EB%2525B3%252580%2525EA%2525B2%2525BD%2525EC%2525A0%252584.png” href=”https://picasaweb.google.com/114978849290694301670/WordPress#5873654135461940770″ caption=”” type=”image” alt=”자식테마_변경전.png” ]

    [pe2-image src=”http://lh6.ggpht.com/-FmvcA1SiKQk/UYNpUl0gwtI/AAAAAAAAAOI/5gid2wWV4Eo/s144-c-o/%2525EC%25259E%252590%2525EC%25258B%25259D%2525ED%252585%25258C%2525EB%2525A7%252588_%2525EB%2525B3%252580%2525EA%2525B2%2525BD%2525ED%25259B%252584.png” href=”https://picasaweb.google.com/114978849290694301670/WordPress#5873654141491921618″ caption=”” type=”image” alt=”자식테마_변경후.png” ]

  4. 적용한 CSS 코드는 아래와 같다.
  5. 이러한 이유로 부모 테마보다는 자식 테마를 사용하는 것이 향후 레이아웃 변경 등이 필요한 경우 매우 유용하게 활용할 수 있다.
    [pe2-image src=”http://lh4.ggpht.com/-Nt9UgtUmHlU/UYNpUD6g1fI/AAAAAAAAAOI/kQdCjb3CDEs/s144-c-o/%2525EC%25259E%252590%2525EC%25258B%25259D%2525ED%252585%25258C%2525EB%2525A7%252588_CSS%2525EC%2525BD%252594%2525EB%252593%25259C.png” href=”https://picasaweb.google.com/114978849290694301670/WordPress#5873654132390286834″ caption=”” type=”image” alt=”자식테마_CSS코드.png” ]

답글 남기기