워드프레스에서 패턴(서식)을 생성하는 방법, 저장한 패턴을 불러오는 방법 및 저장한 패턴을 삭제하거나 수정하는 방법을 알아보겠습니다. 워드프레스에서는 ‘서식’이라는 명칭의 기능은 따로 없으며, 이와 비슷한 기능인 패턴(재사용 가능 블록)이 있습니다.
워드프레스 패턴과 재사용 가능 블록 차이
패턴과 재사용 가능 블록 모두 똑같은 기능입니다. 워드프레스 6.3으로 업데이트 이후, 기존의 재사용 가능 블록 기능이 패턴으로 통합되었습니다. 이전에 생성된 재사용 가능 블록들은 그대로 유지되며, 6.3 버전 이후 생성하는 블록은 모두 패턴 형식으로 생성됩니다.
워드프레스 패턴 블록 생성 방법
워드프레스에서 패턴을 생성하려면 우선 글 작성 페이지(텍스트 에디터)로 이동해야 합니다. 워드프레스 관리자 페이지에서 글 메뉴로 이동한 후, + 새로 추가를 클릭합니다.
변경 사항
워드프레스 업데이트로 이제 관리자 페이지 > 디자인 > Patterns에서 패턴을 관리하실 수 있습니다.
예시로 버튼을 생성해 보겠습니다. 글 에디터 페이지로 이동한 후, 입력란에 마우스를 올려 블록 추가 버튼을 클릭합니다. 검색창이 팝업 되면, 버튼을 검색한 후 버튼 블록을 클릭해서 불러옵니다.
버튼을 클릭한 후, 제일 앞에 아이콘을 클릭해서 블록 전체를 선택합니다. 블록 전체가 선택되면 테두리가 파란색으로 표시됩니다.
선택한 블록의 도구 창에서 더 보기를 클릭한 후, 패턴/재사용 가능 블록 생성을 클릭합니다.
패턴 생성 창이 팝업 되면, 생성할 패턴의 ①이름을 입력합니다. 패턴 이름은 블록을 라이브러리에서 불러올 때 검색하기 편한 이름으로 설정하시는 게 좋습니다. ②동기화됨은 패턴 블록들을 모두 동기화 시켜주는 기능입니다. 쉽게 말해 동기화된 블록들을 수정할 시 모두 똑같은 수정 사항이 적용됩니다.
동기화됨 기능을 예시로 더 자세하게 알아보겠습니다. 동기화 기능이 활성화된 패턴은 아래처럼 보라색 테두리가 표시됩니다. 사전에 생성한 동기화된 여백 블록을 두개 불러왔습니다. 현재 여백 높이 값은 둘 다 100px으로 설정되어 있습니다.
밑에 있는 여백 블록만 선택해서 높이를 150px로 변경해 보겠습니다. 값 변경 후, 위의 여백 블록도 값이 자동으로 150px로 변경된 걸 확인할 수 있습니다. 패턴 생성 시, 동기화 기능을 비활성화한 후 패턴을 생성하시는 것을 추천드립니다. 동기화된 패턴은 개별 수정이 불가능하기 때문에 일반적인 블록에 적합하지 않고, 여백 블록 같은 개별 수정이 필요하지 않은 블록에서 유용하게 사용하실 수 있는 기능입니다.
동기화됨 해제 방법
동기화된 패턴을 일반 블록으로 변환하는 방법도 있습니다. 다만 매번 패턴 분리를 해줘야 되기 때문에, 동기화된 패턴이 필요하지 않으신 경우 패턴을 새로 생성하시는 게 좋습니다.
워드프레스 패턴 블록 불러오기 방법
생성한 패턴을 불러오는 방법은 간단합니다. 블록 추가 버튼을 클릭한 후, 패턴 이름을 검색하면, 결과창에 표시됩니다. 검색 결과에 표시된 패턴을 클릭해서 글에 추가하면 끝입니다.
*추가 – 워드프레스 6.5.2로 업데이트 되면서 이제 블록 추가 버튼으로 검색하지 않아도 패턴을 간편하게 불어올 수 있게 빠른 불러오기 기능이 롤백 되었습니다.
- ‘/’를 입력한 후 사전에 설정한 패턴 이름 검색
워드프레스 패턴 수정 및 삭제하는 방법
패턴 관리 페이지로 진입해서 생성된 패턴을 삭제하거나 수정하는 방법을 알아보겠습니다. 글 편집기 화면에서 우측 상단의 더 보기 버튼을 클릭한 후, 아래 패턴 관리 메뉴로 이동합니다. (또는 관리자 페이지 > 디자인 > Patterns로 이동)
패턴 관리 페이지로 진입하면, 생성한 모든 패턴 블록들을 확인하실 수 있습니다. 또한 패턴을 선택해서 수정하거나 삭제를 할 수 있습니다.
워드프레스 패턴 블록 백업하는 방법
패턴 관리 페이지에 내보내기(Export) 및 가져오기(Import) 기능을 활용하면, 생성한 패턴을 백업해서 PC에 저장하거나 백업한 파일을 사이트로 불러올 수도 있습니다. 또한 운영 중인 다른 사이트가 있는 경우 패턴을 내보내기 한 후 해당 사이트에서 가져오기로 불러올 수 있습니다.
- JSON으로 내보내기: 패턴 파일 백업 생성
- JSON에서 가져오기: 백업 파일 불러오기
마치며
워드프레스에서 서식, 패턴을 만드는 방법과 사용하는 방법에 대해서 알아봤습니다. 재사용가능 블록이 패턴으로 통합되기 이전 버전에서는 “/링크 버튼1″을 입력하면 패턴 블록을 바로 불러올 수 있었습니다. 업데이트 이후에는, 블록 추가 버튼을 클릭하고 패턴 명을 검색해야 불러올 수 있게 변경이 된 거 같은데, 이와 관련해서 해결책을 찾게 되면 포스팅으로 공유하도록 하겠습니다.