Home테마 개발테마 제작#2. html 구조를 테마로 바꾸기

#2. html 구조를 테마로 바꾸기

먼저, 전 단계에서 디자인을 토대로 나눠진 퍼블리싱된 사이트 구조를 웹서버에 업로드를 해 봅니다. 그러면 루트 폴더 내 index.html 파일을 통해 사이트가 정상적으로 표시되는 것을 확인할 수 있습니다.

웹서버에서 퍼블리싱된 사이트가 정상 표시되는 것을 확인했다면, 이제 이 파일들을 토대로 테마로 전환해 보는 것을 진행합니다.

 

■ 퍼블리싱 된 사이트 구조를 테마로 전환하는 과정

※ 워드프레스에서 외부 사이트를 표시하려면 위 파일들이 테마의 형태로 존재를 하여야 하고, 루트 폴더가 아닌 테마의 위치로 이동을 해야 합니다.  테마가 위치해야 할 곳 : 웹 서버 root 폴더 > wp-comtent > themes > study-kopress  (테마 폴더)    >> 파일을 ftp를 이용해서 해당 위치로 업로드를 합니다.

① css 폴더 안에 있던 style.css 파일을 index.html 파일이 있는 위치로 이동시킨 후, css 스타일 정의가 나오기 전 맨 윗 부분에 테마에 대한 정의 및 설명 정보 등을 추가해 줍니다.

 

② index.html 파일의 확장자를 index.php로 바꿔줍니다.  (※ 테마의 가장 기본이 되는 파일 2개: style.css / index.php)

 

③ style이 정의돼 있는 경로를 수정해 줍니다.
하위 폴더에 연결이 돼 있었던 스타일쉬트를 워드프레스의 동적인 주소 연결로 전환 (코드에 의해서 테마의 style.css가 연결)

 

④ theme 작동을 위한 기본 탬플릿 태그를 추가합니다.  
– </head> 태그 바로 앞에   <?php wp_head(); ?>  코드 추가
– </body> 태그 바로 앞에   <?php wp_footer(); ?>  코드 추가

 

⑤ 어드민에서 테마를 활성화 해 보고, 처음 퍼블리싱 된 사이트와 같은 모습이 표시된다면 기본적인 테마로서의 구조 변경 작업은 완료입니다.


■ index.php 파일을 구조적인 탬플릿 파일들로 나누기

index.php 파일에 모든 테마 구조를 개발할 수도 있지만, 공통된 부분은 하나의 파일로 관리를 할 수 있다는 장점이 있도록 테마를 탬플릿 조각들로 나누어서 제작을 하면 좋습니다.

index.php 파일에는 사이트의 주요 컨텐츠 부분만 남기고, 나머지 부분들은 위에서부터 header.php / sidebar.php / footer.php 파일들을 추가로 만든 후 저장합니다. (  ※ 워드프레스는 간단한 탬플릿 태그를 통해 위 파일들을 연결시킬 수 있는 방법을 제공합니다.   >> get_XXXXXXX();     )

구조를 나눈 후의 index.php 파일의 모습은 아래와 같이 변경 됨

 

 

위와 같이 테마의 index.php 파일을 나눈 후 외부 사이트를 다시 열어 보았을 때, 최초 디자인을 퍼블리싱한 사이트의 모습이 그대로 표시가 된다면, 실습 따라하기는 성공입니다.

 

+ 다음 시간에는, functions.php 파일을 통해 테마의 기본 기능들을 설정하는 방법을 다뤄볼 예정입니다.

 

끝.

Was this article helpful to you? Yes No