Home테마 개발테마 제작테마 만들기 기본

테마 만들기 기본

개요 : html로 구성된 사이트를 가지고 WordPress Theme으로 만들어 가는 과정을 확인

■ 기본 테마 만들기

워드프레스 기본 테마인 Twentyseventeen Theme을 활성화 후 외부 사이트에서 보여지는 페이지 소스를 확인해 보면 아래와 같은 모습을 볼 수 있습니다.

Cap 2017-04-03 15-38-06-652이 구성 요소들을 가지고, 워드프레스가 약손해 놓은 탬플릿 파일들로 하나씩 나누게 되면, 기본적인 Theme이 만들어질 것이라는 가정하에 실습을 진행해 보았습니다.

참고> https://developer.wordpress.org/themes/basics/template-files/

● 실습 진행 순서 :::

  1. Twentyseventeen 테마의 Html 구조를 파악하여 나눌 부분을 확인합니다.
  2. Index.php 파일을 만들고 위의 html 구조를 복사하여 입력합니다.
    이 중 각 탬플릿 파일로 구분이 가능한 부분들을 잘라내어 각각 header.php / sidebar.php / footer.php 파일로 저장합니다.
  3. 잘라내어 이동된 후 남은 컨텐츠에 해당되는 구조는, Twentyseventeen 테마의 index.php를 참고하여 워드프레스 루프문으로 교체합니다.
  4. style.css에 새로 만들고 있는 Theme의 정보들을 기재합니다. (테마 이름, 버전, 태그, 개발자 정보 등등)
  5. 만들어진 테마를 서버에 업로드 후 활성화 한 다음, 외부 사이트의 모습을 확인해 봅니다.
    (디자인 적용이 안 되어 다 깨진 모습이지만, 구조적으로는 하나의 사이트 구조로 html이 표시되는 것을 확인할 수 있음)
  6. (테스트를 위해) Twentyseventeen 테마에서 기타 필요한 파일들은 임시로 복사하여 새로 만들어진 테마 폴더에 붙여넣기 합니다.
    Cap 2017-04-03 16-49-23-970
  7. 첫 페이지가 Twentyseventeen 테마와 똑같이 나오면 실습이 정상적으로 완료된 것입니다.

 

■ Twentyfifteen 테마의 functions.php 파일 중 주요 함수 살펴보기

1. 테마에 메뉴 넣기 (외모 > 메뉴) 설정 연결

ex) 두 개의 메뉴를 사용한다고 설정하기  -> 이후 탬플릿 파일 중 메뉴 출력을 하고 싶은 곳에 출력용 태그를 사용

2. 사이드바 만들기 (위젯 영역을 만들고, 어드민에서 관리할 수 있도록 하기)

ex) sidebar-1 이라는 이름의 위젯 영역을 등록 -> 테마의 탬플릿 파일 중 위젯 영역을 표시하고 싶은 곳에 출력용 태그를 사용

3. 스타일 및 스크립트의 연결 – enqueue_scripts(style)

ex) 테마에 필요한 각종 스타일시트 및 스크립트 파일을 연결하는 방법.
조건 태그를 이용해서 연결이 될 경우를 지정하여 해당 조건일 때만 스타일이나, 스크립트를 적용할 수도 있고, 선 실행이 되어야 하는 파일을 지정하는 의존적 형태의 파일 연결도 가능합니다.
(※ 예전 자식 테마에서 다루었던 내용 참조 -> 관련 내용 )


이상, 테마 제작 시의 주요 과정에 대한 전체적인 개요를 알아본 시간이었습니다.

– 끝.

Was this article helpful to you? Yes 1 No