WordPress Block Theme

워드프레스 테마를 만들어보려고 찾아봤더니, “블록 테마” 라는 것이 새로 생겼네요. 예전에 작업할 때와는 구성/컨셉 자체가 다른 듯합니다.

운영하는 워드프레스 사이트에 맞춰 테마를 만들 계획인데, 이번 기회에 새로 “블록 테마”라는 녀석을 공부해야겠습니다.

블록 테마

간단히 말해서 웹 사이트의 한 화면을 여러 종류의 ‘블록’ 을 조립해서 만드는 개념인 것 같습니다.

이 ‘블록’은 다른 곳에서 재사용이 가능해서 한 번 잘 만들어 두면 효용성이 좋을 것 같네요.

자세한 내용은 공부해가면서 추가로 하나하나 정리를 하겠습니다.

테마 구조

블록 테마는 이전 클래식 테마와 다르게 아래의 디렉토리 구성을 따라야합니다.

  • parts/
    • footer.html
    • header.html
  • patterns/
    • example.php
  • styles/
    • example.json
  • templates/
    • 404.html
    • archive.html
    • index.html (필수)
    • singular.html
  • README.txt
  • functions.php
  • screenshot.png
  • style.css (필수)
  • theme.json

‘필수’라고 표시된 파일들만 있어도 워드프레스 테마로서의 기능을 할 수 있습니다.

templates/index.html 이 파일이 있으면 워드프레스는 이 테마를 블록 테마로 인식합니다.

테마를 구성하는 폴더의 최상위에 style.css 가 반드시 있어야하는데, 추가로 다른 css 파일도 사용이 가능합니다.

표준 폴더들

parts 폴더 안에는 footer, header, sidebar 같은 웹 페이지에서 하나의 섹션을 담당할 요소들을 표현하는 파일이 위치합니다.

patters 폴더 안에는 블록을 이용해서 만들어진 재사용 가능한 패턴들이 위치합니다.

styles 폴더 안에는 테마의 설정값들이 기록되는 json파일이 위치합니다.

templates 폴더 안에는 웹 사이트 화면을 나타내는 파일이 위치합니다. index.html은 웹 사이트에 접속하면 보이는 첫 화면입니다.

필수가 아닌 파일들

README.txt 는 테마를 만든 사람, 버전 등 테마에 관한 정보를 기록합니다.

functions.php 에는 워드프레스가 기본 제공하는 함수 외에 개발자가 작성한 함수들을 기록합니다.

screenshot.png 는 1200×900 사이즈의 테마를 대표하는 이미지입니다. .png, .jpg 파일이어야합니다.

theme.json 은 사이트 전체의 설정들이 기록되는 파일입니다.

워드프레스 블록 테마를 만들기 위해서 가장 먼저 해야할 것은 첫째, 폴더 구조를 만든다. 둘째, 필수 파일을 만들어 제자리에 저장한다…입니다.

앞으로 하나하나 내용을 추가해 나가겠습니다.

다음에 계속됩니다.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *