Как добавить панель с информацией об авторе в посты WordPress?

Панель с биографией автора это небольшая область, в которой вы можете отобразить информацию об авторе поста с ссылками на ваш сайт и профилями в соцсетях. В этой статье мы покажем вам как это можно сделать.

Когда и зачем нужна панель с биографией автора

Возможность видеть, кто стоит за статьями, помогает повысить доверие и авторитет к сайту среди других пользователей. Для сайтов с одним автором вы можете просто добавить страницу «О себе». Однако для блогов с несколькими авторами вам потребуется добавить панель с информацией об авторе под каждым постом. Эта панель подстегивает авторов взаимодействовать со своими читателями и предлагает авторам дополнительную инициативу по созданию круга подписчиков. Если вы принимаете посты от гостей, то панель с информацией об авторе сможет притянуть вам больше людей.

Существует множество способов как добавить инфо-панель об авторах и мы покажем вам два способа, чтобы вы могли выбрать, что лучше подойдет для вашего сайта.

Способ первый: авторская панель в постах с помощью плагина

Многие владельцы сайтов желают отображать информацию об авторах в конце поста. Сперва установите и активируйте плагин Guerilla`s Author Box. Каждый автор на вашем сайте должен будет добавить свою информацию и ссылки на профили. Они могут это сделать, зайдя в аккаунт WordPress и щелкнув по ссылке Profile из админки Вордпресс.

Будучи администратором сайта, вы можете заполнить эту информацию лично, редактируя каждый профиль пользователя. Для этого вам надо будет зайти на страницу Users > All User и щелкнуть по ссылке edit под каждым пользователем, чей профиль вы желаете отредактировать.

Теперь можете зайти в любой пост WordPress у себя на сайте и вы увидите авторскую инфо-панель внизу поста.

Плагин использует стандартную систему аватаров под названием Gravatar. Вашим авторам надо будет добавить их фото на сайт Gravatar.

Настройка отображения панель с инофрмацией об авторе

В плагине присутствует очень простой CSS, который взаимодействует с ссылкой и цветами текста из вашего шаблона. Однако, если вы хотите его немного подрихтовать, и чувствуете себя уверенно в работе с CSS, то можете скопировать стандартный код плагина и вставить его в таблицу стилей вашего дочернего шаблона. Вот пример CSS, который вы можете использовать для начала. Мы поменяли цвет фона и сделали фото автора круглым вместо квадратного.

.guerrillawrap {
    background: #ECECEC;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    border: 1px solid #d0d0d0;
    float: left;
    padding: 2%;
    width: 100%;
}

.guerrillagravatar {
    float: left;
    margin: 0 10px 0 0;
    width: 10%;
}

.guerrillagravatar img { 
border-radius:50%;
border:1 px solid #eee;
}

.guerrillatext {
    float: left;
    width: 84%;
}

.guerrillatext h4 {
    font-size: 20px;
    line-height: 20px;
    margin: 0 0 0 0;
    padding: 0;
}

.guerrillatext p {
    margin: 10px 0 15px 0;
    font-style: italic;
}

.guerrillasocial {
    float: left;
    width: 100%;
}

.guerrillasocial a {
    border: 0;
    margin-right: 10px;
}

Вот как панель с информацией об авторе выглядела на нашем демо-сайте после применения CSS-кода выше. В вашем случае это может выглядеть иначе в зависимости от шрифтов и цветов, которые использует ваш шаблон WordPress.

Способ второй: информация об авторе в виджете сайдбара для единичных постов

Способ выше неплох, если вы хотите, чтобы информация об авторе отображалась под постами. Однако кому-то из вас может захотеться, чтобы биография автора отображалась в сайдбаре или любой области виджетов. Сперва вам понадобится установить и активировать плагин Meks Smart Author Widgets. После его активации зайдите на страницу Appearance – Widgets. Вы увидите Meks Smart Author в списке доступных виджетов. Добавьте его в сайдбар, где вы хотите отображать информацию об авторе.

У виджета есть куча настроек. Самая важная из них, возле которой вам необходимо отметить ячейку это возле Automatically detect author.

Сохраните настройки и зайдите на сайт, чтобы увидеть работу плагина в действии. Этот плагин также собирает информацию из профилей авторов, поэтому вашим авторам также понадобится заполнить свою биографию.

Способ третий: добавляем инфо-панель авторов при помощи кода

Оба из приведенных выше способов основывались на использовании плагинов. Если по каким-то причинам вам надо добавить инфо-панель об авторе вручную, то вот как вы можете это сделать. Сперва вам потребуется добавить код в файл functions.php:

function wpb_author_info_box( $content ) {

global $post;

// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {

// Get author's display name 
$display_name = get_the_author_meta( 'display_name', $post->post_author );

// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );

// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );

// Get author's website URL 
$user_website = get_the_author_meta('url', $post->post_author);

// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
 
if ( ! empty( $display_name ) )

$author_details = '

About ' . $display_name . '

';

if ( ! empty( $user_description ) )
// Author avatar and bio

$author_details .= '

' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '

';

$author_details .= '

<a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  

// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {

// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a>

';

} else { 
// if there is no author website then just close the paragraph
$author_details .= '

';
}

// Pass all this info to post content  
$content = $content . '

<footer class="author_bio_section" >' . $author_details . '</footer>


';
}
return $content;
}

// Add our function to the post content filter 
add_action( 'the_content', 'wpb_author_info_box' );

// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

Этот код просто собирает информацию об авторе и отображает ее внизу под постами WordPress. Вам надо привести инфо-панель в порядок, чтобы она выглядела должным образом и соответствовала вашему шаблону. Вы можете использовать этот CSS в вашем шаблоне или таблице стилей. Можете менять его как угодно в зависимости от своих потребностей.

.author_bio_section{
background: none repeat scroll 0 0 #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}

.author_name{
font-size:16px;
font-weight: bold;
}

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

Вот как панель с информацией об авторе выглядела на нашем демо-сайте.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520