GeneratePress 워드프레스 테마에서 글쓴이 소개(Author Box)란 구현하기

Updated on 2020-08-09 by

여기에서는 GeneratePress 워드프레스 테마에서 글쓴이 소개(Author Box)란 구현 방법에 대해서 알아보도록 하겠습니다. 별도의 플로그인없이 GeneratePress 워드프레스 테마 기능만을 이용해 구현하는 방법입니다.

일반적으로 개인 블러그를 운영하는 경우 블로그 글 또는 아티클마다 글쓴이를 표시는 하지만 별도로 글쓴이를 소개하는 섹션을 만들지는 않습니다.

그러나 블로그 사이트가 점점 커지고, 여러 사람이 운영하는 경우는 별도 글쓴이를 소개하는 페이지를 만들기도 하고, 글마다 간략히 글쓴이를 소개하기도 합니다.

특히 공개도가 높아질수록 이러한 글쓴이 소개란이 중요해집니다. 특히 인터넷 언론사등에서는 글쓴이가 매우 중요하기 때문에 글쓴이 소개란은 필수적입니다.

블로그를 구글 뉴스에 등록하려면 필수 항목 중의 하나가 블로그 글에 글쓴이 소개가 있는지를 점검한다고 합니다.

이 글쓴이 소개란은 영어는 Author box라고 하는데요. 여기에서는 GeneratePress 워드프레스 테마를 기준으로 글쓴이 소개(Author box) 구현 방법을 살펴보도록 하겠습니다.

여기서는 GeneratePress 워드프레스 테마 프로 버젼을 기반으로 설명합니다.

1. 훅 엘리먼트(Hook Element) 만들기

GeneratePress 워프레스 테마는 아주 쉽게 워드프레스 Hook 기능을 활용해 다양한 기능을 추가할 수 있습니다.

GeneratePress 워프레스 테마를 설치하면 테마 디자인 메뉴 아래에 GeneratePress, Elements라는 두개의 하위 메뉴가 생깁니다.

새로운 훅 엘리먼트(Hook Element) 생성

이 중 Element를 클릭해 훅 타입을 선택해 새로운 Elements를 만듭니다. 이는 Add New Element 버튼을 누르면 아래 이미지와 같이 새로 만들려는 Element 타입을 선택할 수 있습니다.

여기서는 엘리먼트(Element)요소로 훅(Hook)을 선택합니다.

GeneratePress 테마에서 Author Box 만들기_Element 타입 선택

훅 엘리먼트에 PHP 코드 입력

위의 작업으로 새로운 훅 엘리먼트(Hook Element) 생성되면 여기에 여러가지 코드를 입력할 수 있습니다.

글쓴이 소개(Author box) 구현을 위해서는 아래와 같은 php 코드를 추가합니다.

<div class="author-box"> <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ));?></div> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"> 글쓴이 글 더 찾아보기 ... </a> </div> </div> </div>

훅훅 엘리먼트(Hook Element) 세팅

훅 엘리먼트(Hook Element) 세팅에는 아래 이미지와 같이 Hook 등을 세팅해 줍니다.

  • Hook : generate_after_content
  • Executive PHP에 체크
  • Priority : 기본은 10으로 되어 있는데 저는 20으로 약간 낮춤, 이는 대세에 아무런 영향을 주지 않는 듯
GeneratePress 테마에서 Author Box 만들기_hook setting

훅 엘리먼트(Hook Element) 디스플레이 룰 세팅

훅 엘리먼트(Hook Element) 디스플레이 룰에는 아래와 같이 모든 글에 적용하는 것으로 설정합니다.

GeneratePress 테마에서 Author Box 만들기_Display Rules

CSS 코드 추가

글쓴이 소개(Author box)를 조금 더 멋지게 만들기 위해서 개인 기호에 따라 CSS코드를 추가합니다.

아래는 제가 적용한 CSS 코드입니다.

.author-links a { font-size: 0.9em; line-height: 0.5em; float: right; } .author-box { padding: 4%; margin-top: 10px; margin-bottom: 0.5em; font-size: 0.9em; font-style:italic; display: flex; flex-wrap: wrap; background-color: #fff; box-shadow: -19px -22px 49px -19px rgba(0,0,0,0.1); border: 1px solid #e9e5e5 } .author-box .avatar { width: 40px; border-radius: 100%; margin-right: 20px; } h5.author-title { margin-bottom: 0.5em; }

또한 저의 경우 GeneratePress 워드프레스 테마 포스트 글의 가독성을 고려해 폭을 750mm 정도로 제한했는데요.

이러면 나머지 항목들은 사이트 전체 폭 1200mm에 맞추어 세팅되어 보기가 흉하고 통일감이 적어집니다.

그래서 글쓴이 소개(Author box)도 가독성 및 다른 요소들과 균형을 고려해 아래 CSS 코드를 추가했습니다.

.author-box { max-width: 650px; margin-left: auto; margin-right: auto; }

최종 구현 모습

위와같으 프로세스를 통해서 최종 구현된 글쓴이 소개(Author box) 모습입니다.

GeneratePress 테마에서 Author Box 만들기_최종 구현 모습

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

오랬동안 FMCG 마케팅과 전자제품 상품기획 경험을 기반으로 다양한 분야의 마케팅 및 경영 사례 분석에 관심을 가지고 있습니다. 아울러 IT 등 트렌드 분석과 빠르게 변화하는 뉴스에서 얻을 수 있는 인사이트를 분석해 나누고 있습니다.. 개인적으로 사진에 관심에 많아 소소한 일상의 따뜻함을 담고 있습니다. 혹 연락이 필요하시면 ihappist@gmail.com으로 연락해 주세요

0 Comments
Inline Feedbacks
View all comments