GeneratePress 푸터 디자인 쉽게 하는 방법

GP 테마에서 제공하는 기본 푸터 디자인은 저작권 정보 한 줄을 표기하는 단일 영역 스타일이다. 여기에 추가로 간단한 설정을 하면 사이트/블로그 내 카테고리나 공지 글 등 다른 요소를 더할 수 있다.

예로 wordpress.com 사이트의 푸터를 가져왔는데 현재 블로그 콘텐츠, 카테고리 요소가 많다면 위처럼 푸터에 링크를 추가하는 것도 좋다.

이 글에서는 위젯과 GeneratePress 테마의 Site Library 페이지를 활용하는 두 가지 방법을 소개하고자 한다. 테스트 블로그가 있다면 메인 블로그 적용 전에 시험할 수 있으니 같이 준비하는 것을 추천한다.

워드프레스 서브 도메인 연습 블로그 만드는 방법

설치형 워드프레스를 처음 만들면 기본 메뉴부터 테마, 플러그인 등 설정이 필요한 부분이 많다. 콘텐츠를 올리는 메인 블로그에 바로 설정을 진행해도 되지만, 기능과 디자인 등을 따로 테스트해보고 싶다면 연습 블로그를 만드는 것을 추천한다. 연습 블로그는 새로운 도메인을 구매해서 연결해도 된다. (연결 방법은 위 글 참고) .xyz 같은 이벤트 도메인은 첫 해 가격이 저렴해서 딱 1년만 연습용으로 쓰기 좋은데 번거롭다면 메인 도메인에 속하는 서브 도메인을 생성해주면 된다. 서브 도메인 이름은 기존 주소 이름이 abc.com이라면 sub1.abc.com, sub2.abc.com처럼 자유롭게 설정할 수 있다. 어차피 공개용이 아니니 아무 이름이나 편하게 붙여서 사용하면 된다. 서브 도메인 연결 방법 패스트코멧 공유 호스팅 기준으로 먼저 사이트 로그인 후 C … 더 보기

* 일부 내용은 GP 프리미엄 테마에서 적용될 수 있습니다.

1. 위젯으로 추가

대시보드 – 위젯으로 오면 Footer Widget 목록을 1~5까지 볼 수 있는데 원하는 요소를 넣으면, 1~5 위젯이 차례로 푸터 Copyright 영역 위에 가로로 정렬된다. 만약 Footer Bar에만 요소를 넣으면 푸터 영역을 2등분해서 Copyright 오른쪽에 나타난다.

요소를 추가하고 색깔, 글씨 크기 등 설정이 필요하면 List View에서 블록 선택 – 화면 오른쪽 위의 Setting 아이콘 클릭 후 수정할 수 있다.

대시보드 디자인 – Customize – Layout – Footer로 오면 Footer Widgets 메뉴가 보이는데 설정하는 숫자만큼 위젯 요소를 보이게 할 수 있다. 만약 위젯이 5개면 5를 선택하면 된다.

설정 창 위의 발행 버튼을 클릭하면 블로그 푸터 영역에 적용되는 것을 볼 수 있다. 그런데 이렇게 위젯으로 진행하는 것도 가능하지만, 디자인 편집/수정을 생각했을 때, 아래 소개하는 Site Library 활용 방법을 추천한다.

2. Site Library로 추가

대시보드 디자인 – GeneratePress – Site Library로 오면 많은 기존 테마 목록을 볼 수 있다. 여기서 목록을 하나씩 보면서 푸터가 마음에 드는 테마를 찾아보자.

예로 Arborist라는 테마의 푸터 요소는 위와 같은데 블로그에 적용하면 이 디자인 그대로 사용할 수 있다.

화면 그대로 오른쪽을 보면 테마 적용 메뉴가 있을 텐데 Import 항목에서 Demo content – Confirm Import – I understand 버튼 활성화 후 Begin Import를 진행하면 된다.

이후 푸터를 포함한 해당 테마의 모든 요소(헤더, 페이지..)가 블로그에 바로 적용되므로 메인 대신 테스트 블로그에 적용하는 것이 좋다.

대시보드 디자인 – Element로 오면 Footer 요소가 생긴 것을 볼 수 있는데 클릭해 보자.

* Element가 아닌 위젯으로 푸터 요소가 Import 되는 테마도 있습니다.
* 테마에 따라 Element 말고도 대시보드 페이지에도 Import된 요소가 있을 수 있습니다. (Aborist 테마 포함)

푸터 요소가 보이면 필요한 블록을 선택해서 삭제/수정하거나 오른쪽 Block 탭에서 글씨체, 간격, 사이즈, 색깔 등을 조정하면 된다.

바로가기 링크를 연결하려면 필요한 문구 선택 후 나오는 메뉴 바에서 링크 아이콘 클릭 – 목록을 선택하거나 빈칸에 직접 블로그 url을 입력하면 된다. (공지 글, 카테고리 아카이브 또는 특정 글 등)

또한 푸터 요소의 전체 색깔은 대시보드 디자인 – Customize – Colors 맨 위의 Global Colors의 영향을 받는다. 필요한 경우 이곳에서 아이콘 색깔을 변경하면 된다.

3. 메인 블로그에 복사

테스트 블로그에서 푸터 디자인 편집을 마쳤다면, 왼쪽 블록 목록에서 가장 위에 있는 컨테이너 목록을 Ctrl + C 복사해 두자.

다음으로 메인 블로그를 열고 대시보드 디자인 – Element – Add New Element – Block 선택 후 생성 버튼을 누르면 된다.

화면의 ‘Type / to choose a block’ 빈칸 영역을 마우스 왼쪽 클릭 후 Ctrl +V를 하면 조금 전 복사한 푸터 요소 전체가 그대로 복제된다.

메인 블로그 적용을 위해 먼저 화면 오른쪽 Element 탭에서 Element Type을 Site Footer로 선택해야 한다.

그리고 화면 맨 아래 보이는 Display Rules – Location을 Entire Site(사이트 내 모든 페이지)로 선택하면 된다. 만약 원하는/원하지 않는 특정 위치가 있다면 Location과 Exclude(제외)에서 지정하면 된다.

Element 화면 위의 발행 버튼을 클릭하고 블로그 페이지로 오면 푸터 요소가 잘 적용된 것을 볼 수 있다.

만약 테스트 블로그에 적용한 다른 요소를 한 번에 삭제하려면 Site Library – Remove Imported site를 적용하면 된다.

GeneratePress 기존 테마와 테스트 블로그를 활용하면 필요한 요소를 복사 붙여 넣기로 손쉽게 메인 블로그에 적용 가능하다. 백지상태에서 디자인하는 것보다 시간과 노력을 아낄 수 있으니 필요할 때 사용하면 도움 될 것이다.

Site Library로 블로그 디자인 쉽게 하는 방법

블로그/사이트는 크게 헤더와 본문, 사이드바, 푸터 등의 구조로 이루어져 있다. 운영자의 성향에 따라 사이드바를 미적용하거나 푸터를 간소화하는 등 차이는 있겠지만, 필요한 요소는 적절하게 디자인하고 배치해야 전체 화면을 잘 구성할 수 있다. 제너레이트 프레스 테마에서 페이지나 요소를 추가하려면 Elements – Block 생성을 통해서 가능하다. 위는 관련 글 목록을 만드는 예시인데 관련 글 헤드라인과 Query Loop 요소 등을 넣고 세부 조정 후 완성하면 된다. 하지만 테마 사용이 처음이면 직접 모든 페이지와 요소를 만지려면 아무래도 시간도 들고 어려워서 비효율적일 것이다. 대신 테마에 포함된 사이트 라이브러리를 사용하면 전체 진행 과정이 무척 쉬워진다. 막 돌려도 되는 테스트 블로그가 있다면 준비는 끝이다. * 이 글에서는 제너레이트프레스 … 더 보기