여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 워드프레스 게시물에 author box 넣기
워드프레스 게시물에 author box 넣기
5개월전 작성
5개월전 수정

워드프레스 게시물에 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 );
:
표시 이름을 사용할 수 없는 경우 표시 이름으로 닉네임을 사용하기
<title></title>
:
웹 브라우져에 표기될 타이틀을 설정하는 태그.
<?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 )
:
신상정보 표시해주기
<a href=”‘. $user_posts .'”>모든 포스트 보기</a>
:
모든 포스트 보기 링크
$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;
}

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

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

기본 예시

참고
Mingg`s Diary
밍구
공부 목적 블로그