워드프레스 게시물에 author box 넣기

워드프레스 게시물에 author box 넣는 방법을 알아보자.

웹 서핑을 하다보면 author box를 표시해놓는 사람들이 많다.

굳이 이게 필요할까 싶긴하지만, 테마 만들면서 공부하고있으니 공부의 목적으로 만들어보자.

author box

모든 코드는 다 functions.php로 넣어서 작동하게한다.

functions.php 추가

function wpb_author_info_box( $content )
{
	global $post;

	if ( is_single() && isset( $post->post_author ) )
	{
		$display_name = get_the_author_meta( 'display_name', $post->post_author );

		if ( empty( $display_name ) )
		{
			$display_name = get_the_author_meta( 'nickname', $post->post_author );
			$user_description = get_the_author_meta( 'user_description', $post->post_author );
			$user_website = get_the_author_meta('url', $post->post_author);
			$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
		}

		if ( ! empty( $display_name ) )
		{
			$author_details = '<div class="author_name">' . $display_name . '</div>';
		}

		if ( ! empty( $user_website ) )
		{
			$author_details .= '<div class="author_homepage"><a href="' . $user_website . '" target="_blank" rel="nofollow noopener">' . $user_website . '</a></div>';
		}

		if ( ! empty( $user_description ) )
		{
			$author_details .= '<div class="author_details">' . get_avatar( get_the_author_meta('user_email') , 50 ) . nl2br( $user_description ) . '</div>';
			$author_details .= '<div class="author_links"><a href="'. $user_posts .'">모든 포스트 보기</a></div>';
		}

		else
		{ 
			$author_details .= '<div></div>'; 
		}

		$content = $content . '<div class="author_bio"><div class="author_bio_section">' . $author_details . '</div></div>';
	}
	return $content;
}
add_action( 'the_content', 'wpb_author_info_box' ); // 포스트 콘텐츠 필터에 함수 추가

remove_filter('pre_user_description', 'wp_filter_kses'); // 저자 설명 HTML 허용

사용된 코드 설명

if ( is_single() && isset( $post->post_author ) )

작성자가 있는지 확인

$display_name = get_the_author_meta( ‘display_name’, $post->post_author );

작성자 표시 이름 가져오기

$display_name = get_the_author_meta( ‘nickname’, $post->post_author );

표시 이름을 사용할 수 없는 경우 표시 이름으로 닉네임을 사용하기

웹 브라우져에 표기될 타이틀을 설정하는 태그.

<?php bloginfo( ‘name’ ); ?>

워드프레스에서 설정한 블로그 제목 불러오는 태그.

$user_description = get_the_author_meta( ‘user_description’, $post->post_author );

신상정보 가져오기

$user_website = get_the_author_meta(‘url’, $post->post_author);

작성자 웹사이트 가져오기

$user_posts = get_author_posts_url( get_the_author_meta( ‘ID’ , $post->post_author));

author archive 불러오기

if ( ! empty( $display_name ) )

표시 이름을 사용할 수 있는 경우 표시 이름 보여주기

if ( ! empty( $user_website ) )

프로필에 웹사이트가 있는경우

if ( ! empty( $user_description ) )

신상정보를 사용할 수 있는 경우

get_avatar( get_the_author_meta(‘user_email’) , 50 )

아바타 보여주기. 50은 width, height를 지정해준다.

nl2br( $user_description )

신상정보 표시해주기

모든 포스트 보기 링크

$content = $content . ‘<div class=”author_bio”><div class=”author_bio_section”>’ . $author_details . ‘</div></div>’;

이 정보들을 $author_details에 전달

style.css 추가

.author_bio{
	margin: var(--padding--huge);
}

.author_bio_section{
background-color: #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
height: 100px;
}
 
.author_name{
font-size: 30px;
font-weight: bold;
display: inline;
}

.author_homepage{
	float: right;
}

.author_details{
	margin: 7px 0 13px;
}

.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}

이런 방법으로 워드프레스에 추가하면 된다.

추가 완료시, 아래와 같은 화면이 표시된다.

기본 예시