블로그에 네임카드를 설정하면 방문자에게 운영자와 블로그 정보를 소개할 수 있는 장점이 있다. 물론 설정이 필수는 아니지만 필요에 따라 블로그 이미지와 소개, SNS 링크 등을 걸어두면 유용하다.
예로 티스토리 블로그라면 본문 글 아래쪽에서 이런 카드를 본 적 있을 것이다. 워드프레스는 테마에 따라 네임카드 유무가 다르지만, 제너레이트프레스 테마를 적용했다면 쉽게 네임카드를 만들 수 있다.
아래 소개하는 방법은 GenerateBlock을 활용한 방법인데, 백지 상태에서 시작하는 게 아니라 샘플 양식을 복사 붙여넣기하면 돼서 무척 간단하다. 진행은 서브 도메인으로 만든 테스트 블로그 활용을 추천한다.
관련 글
워드프레스 서브 도메인 연습 블로그 만드는 방법
GeneratePress GenerateBlock 설치 이유와 방법
1. 샘플 테마 설치
대시보드 – Generatepress – 화면 위쪽 Site Library로 오면 다수의 샘플 테마가 나온다.
(기존 테마 초기화 메시지가 나오면 ‘아니오’ 선택)
이제 이곳에서 네임카드를 포함한 테마를 설치해야 하는데 GenerateBlock 프로 버전을 요구하는 테마도 일부 존재한다. 무료 버전에서는 ‘Search’라는 테마를 선택하면 된다.
샘플 테마의 메뉴 중에서 Blog를 선택하고 아무 글이나 클릭하면 위와 같은 네임카드를 볼 수 있다.
이후 화면 오른쪽에서 시작, 적용 버튼을 순서대로 클릭하면 샘플 테마 설치가 완료된다.
2. 네임카드 디자인
대시보드 – Appearance – Elements로 오면 새 요소가 설치되어 있는데 Author Bio를 클릭하자.
(Elements와 Pages 항목에 샘플 요소가 생성되었는데 필요 없는 건 삭제하면 된다)
다음 화면으로 오면 Container부터 아이콘까지 네임카드의 모든 설정 요소를 볼 수 있다. 디자인을 마치면 그대로 저장해도 되는데 기존에 본문 글에 적용한 Elements 요소가 이미 있다면, 네임카드 맨 위 컨테이너를 Ctrl+C 했다가 해당 요소에 Ctrl+V하면 된다. (아래 자세히 설명)
이제 네임카드의 개별 요소를 클릭하고 디자인을 진행하면 된다. 화면 위쪽 저장 버튼 왼쪽에 보이는 Settings 버튼을 클릭하면 상세하게 설정할 수 있다.
네임카드 위에 마우스를 가져가면 개별 요소 박스가 나타나는데 클릭하면 선택이 된다. 만약 어렵다면 화면 왼쪽에서 요소 별로 클릭해도 상관없다.
배경 색깔과 모서리 둥글기, 사진, 작성자 이름과 설명, 아이콘 등을 변경하여 위의 네임카드를 완성하였다. 이제 블로그 내 원하는 위치에 지정해 보자.
3. 블로그에 네임카드 적용
설정 화면 맨 아래를 보면 해당 Element 요소를 지정할 Location이 보인다. 기본 설정이 Post로 되어 있어서 그대로 저장해도 블로그에 적용할 수 있다.
만약 원하는 특정 적용/제외 글이나 페이지가 있다면 위 화면에서 설정하면 된다.
이 블로그에는 Post Navigation (이전 다음 글 버튼)을 설정했는데 네임카드를 이곳에 가져오면 관리 면에서 편할 수 있다.
조금 전 네임카드 맨 위의 컨테이너를 복사해 둔 다음, Navigation 엘리먼트 페이지를 열어보자. 이후 맨 위 컨테이너 점 세 개 – Add before를 클릭하면 기존 Navigation 버튼 위에 Paragraph(단락)가 생기는데 한 번 클릭하고 바로 붙여 넣기를 하면 된다.
그럼 이런 모습이 나올 텐데 화면 폭도 안 맞고 아래 글 버튼과 붙어 있어서 보기에 좋지 않다.
샘플 테마의 네임카드 컨테이너 너비는 기본이 800px로 되어 있다. 화면 오른쪽 Max Width에서 숫자 800을 지우면 지구본 모양이 나오는데 클릭하면 현재 블로그 콘텐츠 최대 너비로 설정된다. (아니면 원하는 숫자 입력)
그리고 네임카드 컨테이너의 Margin-bottom에 숫자를 넣은 만큼 아래 버튼과 거리도 띄울 수 있다.
간격을 조정해서 위처럼 설정을 마친 후 글 페이지로 오면 결과도 확인할 수 있다. 물론 블로그에 네임카드가 필수 요소는 아니지만, 필요하다면 샘플 테마 복사 붙여넣기로 간단하게 설정하면 된다.
관련 글
Site Library로 블로그 디자인 쉽게 하는 방법
Post Navigation으로 이전글 다음글 버튼 만드는 방법
GeneratePress 푸터 디자인 쉽게 하는 방법
