워드프레스 2024 무료테마 Twenty Twenty-Four 설명

무료테마 Twenty Twenty-Four 설명

워드프레스 설치를 하면 기본으로 설치가 되는 테마가 있습니다. 바로 무료테마 Twenty Twenty-Four 입니다. 2024년을 영어로 표현한 이름입니다. 최신 버전에 기본으로 설치가 되는 테마입니다. 워드프레스는 해마다 하나의 기본 테마를 만들어 출시를 하고 있습니다. (무료테마 확인)

무료 인기 테마를 보시면 상위 6개의 테마에서 4개의 기본 테마가 상위에 랭크가 되어 있는 것을 확인하실 수 있습니다. 그만큼 가장 기본이 되는 테마이면서도 워드프레스 최신 버전이 나오면서 무료테마도 계속해서 발전하고 있다고 보시면 됩니다.

무료 인기 테마 리스트

해마다 나오는 무료테마는 기본으로 워드프레스에 설치가 되어 있고 최신 버전의 기능들이 적용이 되어 있기 때문에 무료테마로 기능을 이해하고 직접 테스트 해보는 것을 추천을 드립니다.


템플릿 활용을 위한 글,카테고리 작성

무료테마 Twenty Twenty-Four을 활성화한 상태에서 설명을 드리는 것입니다. 글을 작성하기 전에 카테고리를 먼저 추가를 합니다. 글의 분류라고 생각하시면 됩니다.

[글] > [카테고리], 이름은 분류명이고 슬러그는 URL에 표시되는 문자이기에 소문자,문자,숫자,’-‘으로 표시를 합니다.

image 18

카테고리 총3개를 추가하도록 하겠습니다. 내용은 아래와 같습니다.

image 19

이번에는 글을 작성하도록 하겠습니다. [글] > [새 글 추가], 총3개의 글을 작성하고 각 글을 카테고리 지정을 하도록 하겠습니다. 카테고리 지정하는 방법은 각 글의 편집으로 들어가면 우측 하단에 카테고리를 선택할 수 있게 되어 있습니다.

카테고리 설정
image 21

글,카테고리 페이지에 넣기

1개의 카테고리에 1개의 글이 적용이 되어 있습니다. 페이지에 글을 넣어보도록 하겠습니다.

ex) cate1-글1, cate2-글2, cate3-글3

[페이지] > [새 페이지 추가], 카테고리 및 글과 마찬가지로 페이지도 3개를 만듭니다.

image 22

‘페이지1’에 ‘cate1’을 넣고, ‘페이지2’에 ‘cate2’을 넣는다는 전제입니다. 다시 말해서 페이지를 작성하는데 있어 카테고리별로 글을 보여주고 싶다는 가정하에 설명을 드리고 있는 것입니다.

‘페이지3’에 ‘cate3’을 넣어보도록 하겠습니다. 편집기에서 쿼리 반복문을 선택을 합니다.

image 23

쿼리 반복문을 가져오면 아래와 같이 카테고리 분류가 상관없이 최신글을 가져오게 되어 있습니다.

블록에디터 편집화면

우리가 원하는 것은 ‘페이지3’에는 cate3에 속한 ‘글3’을 보기 원합니다. 이럴때는 좌측 상단의 쿼리 반복문을 선택을 하면, 화면의 우측도 [페이지]와 [블록] 탭으로 나뉘는데, [블록] 탭의 하단에 보시면 필터 부분에 카테고리를 지정할 수 있게 되어 있습니다. 여기에 ‘cate3’을 적어주시면 해당 카테고리에 해당하는 글만 보여지게 할 수가 있습니다.

image 25
image 26
블록에디터 쿼리반복문

페이지를 메뉴화해서 홈페이지에 띄우기

[외모] > [테마] > 사용자 정의하기를 클릭을 하거나, [외모] > [편집기]를 클릭하셔도 됩니다.

무료테마 Twenty Twenty-Four
관리자 페이지 테마 디자인 메뉴

[내비게이션], [스타일], [페이지], [템플릿], [패턴] 메뉴가 나온다면 블록테마를 지원하는 테마라고 이해하시면 됩니다.

최근 워드프레스는 기본테마가 블록단위로 만들어진 블록테마 유형이고, 블록테마로 만들어진 테마는 전체 사이트 편집(Full Site Editing)을 지원합니다. FSE 블록 테마라고도 합니다. 워드프레스 사이트에서 테마 메뉴를 보시면 하나의 메뉴로 자리 잡았습니다. (Block Themes) 내장 편집기인 구텐베르크 편집기로 블록화된 테마를 자유자재로 편집해서 사용하게 하려는 취지입니다. 앞으로 무료 테마도 더 좋아지지 않을까요?

image 29 1

다시 본론으로 들어와서, 내비게이션을 클릭을 하고 연필 아이콘을 클릭합니다.

image 30

홈페이지에 띄울 메뉴를 설정합니다. 페이지 총3개를 만들었으니, 페이지 이름으로 메뉴3개를 만들어서 페이지를 불러오도록 하겠습니다. 메뉴명은 커서를 클릭해서 수정도 가능합니다.

내비게이션 메뉴

그럼, 적용이 잘 되었는지 메인 홈페이지를 보도록 하겠습니다. 적응이 잘 되었네요.

image 32

페이지 템플릿 설명

페이지(Page)에는 템플릿이 적용이 되어 있습니다. 홈페이지 메뉴의 [페이지1], [페이지2]에는 기본 템플릿이 적용이 되어 있습니다. 확인하는 방법으로는 각 페이지의 편집 화면의 우측 패널에서 확인이 가능합니다. 템플릿명은 ‘페이지’이고 기본템플릿으로 지정이 되어 있습니다.

image 35
템플릿 리스트

페이지(Page)를 작성시에 템플릿 ‘페이지’가 기본 템플릿으로 적용이 된다는 것이고 현재 템플릿을 수정 또는 새로운 유형의 템플릿 추가도 가능합니다. 페이지(Page)별로 다른 템플릿으로 변형은 ‘+’ 아이콘을 클릭하면 새롭게 추가가 가능합니다. 템플릿을 추가할때 어느 유형에 적용할지 선택을 할 수 있습니다. 프론트 페이지는 메인화면 템플릿을 말하며, 단일 아이템은 글(Post) 유형을 의미합니다. 페이지 유형은 말 그대로 페이지(Page)를 뜻합니다.

image 38

페이지 유형의 템플릿을 추가하여 홈페이지 메뉴의 [페이지3]을 새롭게 수정해 보도록 하겠습니다.

[페이지3]을 클릭하면 새로운 창에서 열리면서 페이지 상단에는 배너이미지가 있고 하단에 페이지 내용이 있는 템플릿을 추가하겠습니다. 관리자 페이지에서 [외모] > [편집기] > [내비게이션]을 수정하여 아래와 같이 ‘새 탭에서 열기’를 적용합니다.

image 34

템플릿에 ‘+’ 버튼을 클릭하여 템플릿 추가를 페이지 유형으로 선택을 합니다.

템플릿 추가

새로운 템플릿을 적용할 페이지를 선택을 합니다. (페이지3 선택)

image 40

페이지3에 적용할 템플릿을 아래와 같이 적용을 했습니다. 기존 템플릿에 커버 이미지가 추가된 템플릿을 적용을 하였습니다.

image 43

그럼 적용이 잘 되었는지 확인을 해보겠습니다. 홈페이지의 메뉴에서 페이지3을 클릭을 하면 새 창으로 열리면서 커버 사진이 기본으로 적용이 되어 있는것을 확인할 수가 있습니다. 직접 사진을 업로드 하시면 됩니다. 아래와 같이 기본 템플릿이 바뀐 것을 볼 수가 있습니다.

image 44

템플릿에 패턴 적용

기본 테마에서 제공하는 패턴도 적용해 보도록 하겠습니다. 페이지3에서 사용하는 템플릿에 커버 사진 밑에 배너 패턴을 추가해 보겠습니다. 방법은 위와 동일합니다. 페이지:페이지3 템플릿에 배너 패턴을 삽입하시면 됩니다.

템플릿 패턴 배너 추가
image 44 2


마치며

무료테마인 Twenty Twenty 를 활용하여 글, 카테고리를 작성하고 카테고리별로 페이지를 메뉴화 하였습니다. 그리고 하나의 페이지를 새로운 템플릿으로 변형하고 패턴도 추가하는 시간도 가졌습니다. 템플릿과 패턴을 추가하여 본인만의 새로운 유형의 글 혹은 페이지를 만들어 보시길 바랍니다.

워드프레스 전체 목록

Leave a Comment