워드프레스 아스트라 테마에서 카테고리 페이지 레이아웃 feat. 아스트라


워드프레스의 테마와 플러그인들이 각각 영역에서 발전해서 전체적인 흐름을 파악하기는 쉽지 않다.
  1. 가장 크게 결정해야 할 부분은 테마. 테마를 위주로 편집기와 플러그인이 선택된다 – 그냥 아스트라로 선택
  2. 아스트라 내에서 Home 과 같이 비교적 정적인 페이지들을 편집할 때 엘레멘터 편집기를 선택할 수 있다
  3. 엘레멘터는 좀 무겁다는 단점이 있다. 그래서 글을 쓸때, 포스팅을 할때는 워드프레스 기본편집기에서 사용 가능한 스펙트라를 사용한다.
  4. 무료 엘레멘터는 기본적으로 정적인 편집기이므로 동적으로 꾸미기 위해 Elementor 지원 가능한 플러그인들을 선택할 수 있다 – Essential Blocks 따위 등이다. 스펙트라와 엘레멘터를 동시 지원하는 플러그인도 있고, 엘레멘터만 지원하는 플러그인도 있다.
  5. 아스트라에서 기본 설정되어 있는 카테고리 페이지가 사진이 너무 크다. 외모(Appearance) > 사용자 정의하기(Customize) > 블로그(Blog) > 블로그 / 아카이브(Blog / Archive) 이동 해서 카테고리 페이지 중 마음에 드는 레이아웃을 선택할 수 있다.

1. 아스트라 테마의 사용자 정의 기능 활용 (기본 설정)

아스트라 테마는 워드프레스 사용자 정의하기(Customizer)를 통해 카테고리(아카이브) 페이지의 기본적인 레이아웃과 스타일을 설정할 수 있습니다.

  1. 워드프레스 대시보드 로그인: [도메인]/wp-admin으로 접속하여 로그인합니다.
  2. 외모(Appearance) > 사용자 정의하기(Customize) 이동: 왼쪽 메뉴에서 외모를 클릭한 후 사용자 정의하기를 선택합니다.
  3. 블로그(Blog) > 블로그 / 아카이브(Blog / Archive) 이동: 사용자 정의하기 사이드바에서 블로그를 찾아서 클릭하고, 이어서 블로그 / 아카이브를 클릭합니다.
  4. 레이아웃 설정:
    • 레이아웃(Layout): 게시물 목록의 전체적인 레이아웃을 선택할 수 있습니다. (예: 1단, 2단 그리드, 목록 등)
    • 콘텐츠 너비(Content Width): 게시물 내용이 표시될 영역의 너비를 조정합니다.
    • 사이드바 레이아웃(Sidebar Layout): 카테고리 페이지에 사이드바를 표시할지 여부와 위치(왼쪽, 오른쪽, 없음)를 설정합니다.
    • 게시물 구조(Post Structure): 게시물 제목, 메타 정보(작성자, 날짜, 카테고리 등), 썸네일 이미지 등을 표시할지 여부와 순서를 조정할 수 있습니다.
    • 게시물 내용(Post Content): 전체 내용을 표시할지, 요약(Excerpt)만 표시할지 선택하고, 요약의 단어 수를 설정할 수 있습니다.
    • 페이지네이션(Pagination): 페이지 번호 매기기 스타일(숫자, 무한 스크롤 등)을 설정합니다.
  5. 색상 및 타이포그래피(Colors & Typography): 전역(Global) 또는 블로그(Blog) 섹션에서 카테고리 페이지의 글꼴, 색상 등을 설정할 수 있습니다.
  6. 발행(Publish): 모든 설정을 완료한 후 상단의 발행 버튼을 클릭하여 변경 사항을 저장합니다.

2. 아스트라 프로(Astra Pro)의 블로그 프로 모듈 활용

아스트라 프로 버전에는 블로그 프로(Blog Pro) 모듈이 포함되어 있어, 카테고리 페이지(아카이브 페이지)를 더욱 세밀하게 제어할 수 있습니다.

  1. 아스트라 프로 활성화: 워드프레스 대시보드 > 외모 > Astra 옵션에서 블로그 프로 모듈이 활성화되어 있는지 확인합니다.
  2. 사용자 정의하기 이동: 위 1단계와 동일하게 외모 > 사용자 정의하기로 이동합니다.
  3. 블로그 > 블로그 / 아카이브 이동: 블로그 섹션에서 블로그 / 아카이브를 클릭합니다.
  4. 추가 옵션 활용: 블로그 프로 모듈이 활성화되면, 무료 버전보다 더 많은 레이아웃 옵션, 메타 정보 제어, 이미지 크기 조절, 날짜 상자 표시 등 다양한 고급 설정이 추가됩니다. 특히 그리드 레이아웃에서 열 개수를 더 유연하게 조절할 수 있습니다.

3. 엘레멘터 프로(Elementor Pro)의 테마 빌더 활용 (가장 강력한 방법)

아스트라 테마는 엘레멘터와의 호환성이 매우 뛰어나기 때문에, 엘레멘터 프로의 테마 빌더 기능을 사용하여 카테고리 페이지를 완전히 맞춤형으로 디자인할 수 있습니다. 이 방법은 코딩 없이도 원하는 모든 레이아웃과 디자인 요소를 적용할 수 있다는 장점이 있습니다.

  1. 엘레멘터 프로 설치 및 활성화: 엘레멘터 프로 플러그인이 설치 및 활성화되어 있는지 확인합니다.
  2. 템플릿(Templates) > 테마 빌더(Theme Builder) 이동: 워드프레스 대시보드에서 템플릿을 클릭한 후 테마 빌더를 선택합니다.
  3. 새 아카이브 템플릿 추가:
    • 새로 추가(Add New) 버튼을 클릭합니다.
    • 템플릿 유형으로 아카이브(Archive)를 선택하고 이름을 지정한 후 템플릿 생성(Create Template)을 클릭합니다.
  4. 엘레멘터 편집기에서 디자인:
    • 엘레멘터 편집기가 열리면, 미리 디자인된 블록을 선택하거나 직접 빈 캔버스에서 디자인을 시작할 수 있습니다.
    • 게시물(Posts) 위젯: 가장 중요한 위젯으로, 해당 카테고리에 속한 게시물들을 동적으로 불러와 표시합니다. 그리드, 목록 등 다양한 레이아웃 옵션을 제공합니다.
    • 아카이브 제목(Archive Title) 위젯: 현재 카테고리 이름을 표시합니다.
    • 아카이브 설명(Archive Description) 위젯: 카테고리 설명을 표시합니다.
    • 사이드바 위젯: 원하는 위젯을 추가하여 사이드바를 구성할 수 있습니다.
    • 엘레멘터의 다른 모든 위젯(이미지, 텍스트 편집기, 섹션, 열 등)을 사용하여 원하는 대로 디자인합니다.
  5. 조건 설정(Display Conditions):
    • 디자인을 완료한 후 발행(Publish) 버튼을 클릭합니다.
    • 조건 추가(Add Condition)를 클릭하여 이 템플릿이 적용될 페이지를 설정합니다.
    • 모든 아카이브(All Archives)를 선택하면 모든 카테고리, 태그, 날짜별 아카이브 페이지에 적용됩니다.
    • 특정 카테고리에만 적용하려면 카테고리 아카이브(Category Archives)를 선택한 후 특정 카테고리를 지정할 수 있습니다.
    • 조건 저장 및 닫기(Save & Close)를 클릭합니다.

이렇게 설정하면 아스트라 테마의 기본 카테고리 레이아웃 대신 엘레멘터로 디자인한 맞춤형 카테고리 페이지가 표시됩니다.

요약:

  • 간단한 변경: 아스트라 테마의 사용자 정의하기를 통해 기본적인 레이아웃과 스타일을 조절합니다.
  • 고급 설정: 아스트라 프로의 블로그 프로 모듈을 활성화하여 사용자 정의하기에서 더 많은 옵션을 활용합니다.
  • 완전한 맞춤 디자인: 엘레멘터 프로의 테마 빌더를 사용하여 코딩 없이 드래그 앤 드롭으로 카테고리 페이지 전체를 디자인합니다.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다