Twenty Twenty-Four custom 기초 작업
이번 시간에는 [무료테마 템플릿,패턴 활용 4강] 에 이어 메뉴 하나를 커스텀하는 방법에 대해서 알아보겠습니다. 홈페이지 상단 메뉴를 하나 만들어 새로운 템플릿에 페이지를 추가하여 카테고리별 글을 가지고 온 후 상단 배너를 넣고 헤더(header)와 풋터(footer)를 커스터마이징 하려고 합니다. 시작해보겠습니다.
‘Custom Page’ 제목으로 페이지(Page)를 추가합니다.
[외모] > [편집기] > [디자인] > [내비게이션]에 방금 만든 페이지를 내비게이션에 추가합니다.
페이지를 만들면 기본템플릿이 적용이 됩니다. 기본템플릿을 수정하면 해당 템플릿이 적용된 모든 페이지가 적용이 되기 때문에 우리는 새로운 템플릿을 추가해 보도록 하겠습니다.
Custom Page 를 선택합니다.
홈페이지의 ‘Custom Page’ 메뉴를 클릭하면 빈 blank로 나옵니다. 템플릿에 지정된 요소가 없기 때문입니다.
커스텀 템플릿 추가(쿼리)
템플릿에서 ‘페이지: Custom Page’를 수정해 보도록 하겠습니다. 패턴에서 배너를 넣고, 배너를 수정하여 상단 배너를 만듭니다.
블록편집기에서 ‘최신 글’을 선택하고 복제를 하여 총3개의 ‘최신 글’을 추가합니다.
최신 글 각각 ‘격자보기’, ‘특성 이미지 활성화’, ‘해상도 보통’, 정렬기준은 ‘새로운 순’, 카테고리는 ‘cate1’, ‘cate2’, ‘cate3’ 로 지정하고 아이템 수와 컬럼 수는 동일하게 3개로 지정을 합니다.
각각 적용해보면 아래와 같이 나옵니다.
위에 ‘최신 글’ 요소 3개를 상위 그룹으로 묶고, 이미지 정렬이 안 맞는 경우에 특성 이미지 해상도를 최대 크기로 적용을 합니다. 최신 글 밑으로는 전체글 리스트를 보여주도록 하겠습니다.
그룹안에 제목과 쿼리 반복문을 블록편집기에서 추가합니다.
패턴에서 가져오는데 ‘작은 이미지와 타이틀’ 패턴을 선택을 합니다.
쿼리 반복문 하위로 [글 템플릿]이 생겼고 그 아래로 [여백도구]와 [페이지 처리], [쿼리 결과 없음] 을 가져옵니다. [여백도구]는 빈 공간을 만들어주고 [페이지 처리]는 페이지 내비게이션을 만들어 주고 [쿼리 결과 없음]은 쿼리 반복문 데이터가 없을 경우 데이터가 없다는 문구를 넣어줍니다.
글 리스트가 정상적으로 안 보여지면, [쿼리 반복문]에서 ‘템플릿에서 쿼리 상속’ 활성화를 비활성화 시켜 줍니다.
커스텀 템플릿 추가(header,footer)
지금까지 페이지의 글 상단에 배너 이미지와 글 중앙에 카테고리별 최신글을 3개씩 보여주었고 글 하단에 전체글 리스트를 설정하였습니다. 이제는 헤더와 풋터를 추가해 보도록 하겠습니다. 기본 무료 테마에 있는 헤더,푸터를 사용하지 않고 커스텀 패턴을 활용해 보도록 하겠습니다.
기본 템플릿 파트로 Header, Sidebar, Footer, Post Meat가 있는데 새 탬플릿 파트를 추가해 보도록 하겠습니다.
새로 만든 템플릿 파트에 헤더 패턴을 추가하였습니다.
다시 커스텀 템플릿으로 돌아와서 방금 만든 헤더를 최상단에 추가해 보도록 하겠습니다. 블록 탭의 테마 분류에 커스텀 헤더가 보입니다. 선택을 합니다.
상단에 추가된 내비게이션을 스크롤을 내려도 상단에 고정되게 해보도록 하겠습니다. 내비게이션 그룹을 선택한 다음 위치를 붙박이로 변경을 합니다. 헤더가 상단에 고정이 안되면 커스텀 헤더를 ‘템플릿 파트에서 블록 헤제하기’를 진행을 합니다.
내비게이션이 상단에 고정된 모습을 확인해 볼 수 있습니다.
이번에는 푸터를 추가해 보도록 하겠습니다. 앞전에 헤더는 템플릿 파트로 새롭게 추가해서 진행했지만 다른 방법으로는 무료테마에서 기본으로 만들어놓은 푸터 패턴을 직접 가져와서 적용을 하겠습니다.
푸터를 가져와 본인의 입맛에 맞게 수정을 진행을 합니다. 그리고 푸터를 다른 페이지에서 적용하기를 원한다면 해당 푸터를 ‘템플릿 파트 생성’ 클릭하여 새롭게 저장을 합니다.
[디자인] > [패턴[ > [모든 템플릿 파트 관리하기]에 들어가보면 무료 테마에서 제공하는 템플릿 파트와 추가로 만든 템플릿 파트를 확인할 수 있습니다.
홈페이지로 들어가보면, 메인 페이지에서 상단의 Custom Page를 클릭을 하면 지금까지 적용한 부분인 Header, Banner, Category, List, Footer로 구성된 간단한 페이지를 확인하실 수 있습니다.
스크롤을 내렸을 때 홈페이지 하단의 모습입니다.
마치며
템플릿을 새롭게 추가하여 자주 사용되는 양식을 미리 작성해 놓으면 새로운 페이지에 적용할 때 보다 빠르게 적용이 가능합니다. 템플릿 뿐만 아니라 디자인 패턴도 저장해 놓으면 여러 페이지에서 활용이 가능합니다. 워드프레스에서 제공하는 무료테마는 Full Site Editing 기능을 제공하는 블록테마이기 때문에 모든 영역을 블록화시켜 재사용 할 수 있습니다.
워드프레스 사이트에서 제공하는 Block Themes는 디자인 템플릿, 패턴이 동일하게 적용이 되어 있습니다. 무료테마 버전인 Twenty Twenty-Four 와 동일하게 수정이 가능한 부분입니다. 이 사이트에서 본인이 원하는 테마를 가져와서 입맛에 맞게 수정을 하면 작업이 더 수월해 집니다.
2018년 워드프레스 5.0 버전에서 “Gutenberg”이라는 이름의 블록 에디터가 도입되었습니다. 이는 이전의 클래식 에디터 대신 새로운 블록 기반 에디터로서, 콘텐츠를 블록 단위로 구성하여 작성하고 편집할 수 있도록 제공하는 도구입니다. 이와 함께, 워드프레스의 블록 테마 개발도 확장되었습니다.
Gutenberg 에디터의 도입 이후, 워드프레스 커뮤니티에서는 블록 기반의 테마 개발을 촉진하기 위한 노력을 기울이고 있습니다. 이로 인해 많은 블록 테마가 개발되었으며, 이러한 테마는 블록 에디터와의 통합을 강조하고 다양한 블록 요소를 활용하여 웹사이트를 구성할 수 있도록 도와줍니다.
현재 워드프레스의 블록 테마는 사용자가 더욱 직관적이고 유연한 방식으로 웹사이트를 디자인하고 구축할 수 있도록 다양한 기능과 옵션을 제공합니다. 또한, 워드프레스 커뮤니티에서는 계속해서 새로운 블록 테마를 개발하고 업데이트하여 사용자들에게 다양한 선택지를 제공하고 있습니다.