블로그 디자인에 너무 많이 신경 쓸 필요는 없겠지만, 방문자에게 유용한 브레드 크럼을 추가하는 것도 괜찮은 선택이다.
브레드 크럼(Bread Crum : 빵 부스러기)은 방문자에게 현재 위치를 보여줄 수 있는 문자이다. 헨젤과 그레텔이 숲에 빵 부스러기를 뿌려서 길을 찾은 것처럼 브레드 크럼 역시 방문자에게 지금 위치를 보여준다.
Home » Cartegory (예시)
GeneratePress 마케터 테마의 글 본문은 위처럼 워드프레스 기본 화면이 설정되어 있다. 브레드 크럼을 적용하려면 글 영역에 해당하는 Post 페이지를 만들어야 하는데 이번 글에서는 아래처럼 간단한 구성으로 진행해 보려고 한다.
– 브레드 크럼
– 글 제목
– 작성자/날짜
– 본문
– 태그
작업에 앞서 GenerateBlock 플러그인을 설치가 필요한데 관련 내용은 아래를 참고하면 된다.
관련 글
GeneratePress GenerateBlock 설치 이유와 방법
* GeneratePress가 아니라도 페이지 빌더를 사용하는 테마라면 비슷하게 적용할 수 있습니다.
* 만드는 과정과 진행 방법은 어렵지 않습니다.
* 일부 기능은 GeneratePress 프리미엄 버전에서 적용될 수 있습니다.
1. 브레드 크럼 만들기
먼저 페이지 생성은 GP 테마의 Element 기능을 활용해야 한다.
대시보드 – Appearance – Elements로 이동 – ‘Add New Element’ 버튼 클릭 – ‘Block’ 타입 선택 및 ‘Create’ 버튼을 클릭하면 된다.
설정 화면에 아무 것도 없으면 위의 세 줄 아이콘을 클릭하면 옵션 창이 나온다. 화면 빈 곳에 ‘Type / to choose a block’란 클릭 – ‘/container’ 입력 후 선택하면 컨테이너가 소환된다.
참고로 각 요소는 바로 만들어도 되지만, 컨테이너로 감싸면 나중에 같이 묶은 요소 편집이 쉬워서 컨테이너부터 만들면 좋다.
소환된 컨테이너의 + 버튼을 누른 뒤 Headline을 선택하면 된다.
Headline에 마우스 커서를 놓고 ‘Home »’ 문자를 작성해 보자. 특수문자는 인터넷에 검색해서 », • 등을 선택하면 된다. 이후 입력한 문자 선택 – 링크 아이콘 클릭 – 빈 칸에 자신의 도메인 주소를 넣고 링크를 클릭하면 방문자가 이 버튼을 눌렀을 때 도메인 메인 화면으로 이동한다.
이제 카테고리 이름 표시를 위해 왼쪽 창에서 Home 선택 – 점 세 개 클릭 후 Add after로 똑같이 Headline을 만들어 보자. (위의 Paragraph는 무시)
새로 만든 헤드라인을 선택한 다음, 원통 모양의 Dynamic Option 아이콘을 클릭해서 위처럼 설정하면 된다. (Term = 카테고리 이름)
위에서 세 번 째 Term Separator는 카테고리가 2개 이상일 때 구분하는 기호인데 특수 문자 양쪽으로 스페이스바를 한 칸씩 띄워도 좋다.
* 화면의 Post Element 문구는 지금 만드는 글 페이지 엘리먼트의 이름인데, 아무 이름을 입력해도 상관 없음
두 개 요소는 완성했는데 위 아래에서 수평으로 정렬하려면 추가 설정이 필요하다.
컨테이너 선택 – 오른쪽 설청 창 (저장 버튼 왼쪽 버튼) – Layout의 Display 값을 Inline Flex로 설정하면 위처럼 두 요소가 수평으로 나오는데 추가 CSS 설정을 하면 완료이다. 설정은 Home, Term 클릭 후 오른쪽 설정 창에서 각각 진행하면 된다.
예시)
– Font-size : 17px
– Font-Weight : Normal
– ‘Home’ padding right : 5px (카테고리와의 간격)
– ‘Home’ 색깔 : Colors – Link에서 선택
– ‘Home’ 특수 문자 색깔 : Colors – Text에서 선택
– ‘Term’ 색깔 : Colors – Text에서 선택
* 색깔은 같은 색으로 맞추는 것 추천
2. 글 제목 만들기
글 제목도 Headline으로 만드는데 브레드 크럼 컨테이너 옆의 점 세 개 – Add after를 선택해서 만들면 된다. 이때 새로운 Headline이 브레드 크럼 컨테이너에 종속되지 않게 위처럼 같은 열로 만들어야 한다.
Headline을 선택하고 화면 오른쪽 창을 맨 아래로 내려서 Dynamic Data를 위처럼 설정해 보자.
그러면 글 제목이 잘 생성된 것을 볼 수 있다. 이제 작성자, 날짜를 만들기 위해 제목 옆 점 세 개를 눌러서 새 컨테이너 – Headline을 2개 추가하면 된다.
3. 작성자 날짜 만들기
먼저 작성자 이름을 만들어 볼 텐데, 위의 Headline을 클릭해서 스크린샷처럼 Dynamic Option을 설정해야 한다.
만약 아이콘이 필요하면 작성자 Headline의 ‘Post’ 문구 왼쪽을 클릭해서 마우스 커서를 놓은 다음, 오른쪽 설정 창의 Icon에서 원하는 모양을 선택하면 된다.
이어서 다음 Headline을 선택하고 Dynamic Option을 Post date로 설정하면 날짜가 나타난다. 작성자 이름과 마찬가지로 Post 문구 앞을 클릭 후 아이콘을 추가해도 된다.
앞서 브러드 크럼 설정처럼, 작성자와 날짜의 상위 컨테이너 선택 – Layout의 Display 값을 Inline Flex로 하면 두 요소가 나란히 배치된다. 이후 취향에 따라 CSS를 설정하면 완료이다. (작성자, 날짜 각각 진행)
예시)
– Font-size : 17px
– Font-Weight : Normal
– 작성자 Padding-right: 12px (날짜와의 간격)
– 작성자 색깔 : Colors – Link, Text에서 선택
– 날짜 색깔 : Colors – Text에서 선택
4. 본문 글 만들기
다음으로 포스팅 본문 글을 만들어 보자. 작성자/날짜 컨테이너 점 세 개 – Add after – 새 컨테이너를 만들고 + 버튼을 눌러서 Daynamic Content – Post content를 선택하면 된다.
화면에 본문 글이 나오면 성공인데 마지막으로 태그를 추가해 보자.
5. 태그 만들기
화면에 새 컨테이너를 만들었다면 버튼 두 개가 필요하다. (왼쪽은 아이콘, 오른쪽은 태그 글자)
버튼은 컨테이너의 + 클릭 후 ‘Button’ 문구를 입력하고 선택하면 된다. (GP 테마 버튼 타입이 두 개 있을 텐데 위처럼 아이콘 1개짜리로 2개 생성)
먼저 앞의 버튼 선택 후 화면 오른쪽 설정 창에서 취향대로 태그 아이콘을 고르면 된다. 이때 아이콘 아래 보이는 ‘Remove Text’ 옵션을 활성화해야 아이콘 옆의 Button 문구를 없앨 수 있다.
이후 배경/Text 색깔을 위처럼 설정하면 태그 아이콘 이미지만 보이게 할 수 있다. 여기서 아이콘 배경색은 글 본문 바탕과 같은 흰색으로 하면 되는데, 취향에 따라 다른 색 설정도 상관은 없다.
* 추가 Padding (예시) : 상하 5px, 좌우 10px
이어서 두 번째 버튼 Headline 클릭 후 오른쪽 창에서 위처럼 Dynamic Data를 설정하면 된다.
끝으로 태그 CSS를 설정하면 작업을 마칠 수 있다.
예시)
– Font-size : 15px
– Font-weight : Normal이나 500 Medium
– Border-radius (모서리 둥글기) : All 2px
– Padding : 상하 4px, 좌우 10px
– Margin-right : 10px (태그끼리의 간격)
– 태그 상위 컨테이너 Padding-top : 30px (글 본문과의 간격)
6. 추가 필수 설정
화면 디자인 구성을 마쳤다면 꼭 필요한 설정 몇 가지가 있다.
먼저 화면 오른쪽 창의 Element 탭 Element Type을 Hook → Content Template로 선택해야 블로그에 적용할 수 있다.
다음으로 전체 화면 맨 아래 해당 엘리먼트 위치를 지정하는 옵션 창이 있는데 Location의 ‘Add Loacation Rule’ 버튼 클릭 후 Post, All Post를 설정해야 한다.
혹은 특정 페이지에 게시/제외를 원하면 자유롭게 설정해도 된다.
여기까지 마쳤다면 위처럼 본문 전체 색깔이 나올 수 있는데 GP 마케터 테마 배경색으로 보면 된다. 이제 글 본문 영역만 흰색으로 지정하면 된다.
* 배경색 변경 : Appearance – Customize – Colors – Body Background 색깔 선택
먼저 기존 맨 위 컨테이너 선택 – 점 세 개 – Add before 후 새 컨테이너를 만들어 주자. 그리고 나머지 요소를 마우스 드래그&드롭으로 상위 컨테이너에 종속시키면 된다.
다음으로 상위 컨테이너를 선택하고 오른쪽 설정 창에서 CSS를 설정하면 끝이다.
예시)
– 본문 영역 색깔 : Colors – Background 흰색
– 본문 테두리 둥글기 : Border-radius All 10px
– 본문 Padding : All 30px (박스 안 콘텐츠 여백)
* 모바일 화면은 Padding All 20px 추천
설정 창 화면의 저장 버튼을 누르고 블로그 글 화면으로 오면 잘 적용된 것을 볼 수 있다. 이후 Customize 화면에서 기기별 글 본문 모습을 확인하고 부족한 곳은 추가 조정하면 된다.
관련 글
GeneratePress 마케터 테마 선택 이유와 설치 방법
워드프레스 꼭 비싼 테마를 사는 것이 좋을까
