Главная › Wordpress › Вывод автора WordPress поста без плагинов (2 варианта кода)

Вывод автора WordPress поста без плагинов (2 варианта кода)

Вывод автора WordPress поста без плагинов (2 варианта кода)Вывод автора WordPress поста без плагинов (2 варианта кода). На сайтах, куда пишут контент сразу несколько человек, вы могли видеть специальный блок автора поста, отображаемый после текста. Как правило, там имеется краткая его биография, фото, ссылки на соц.профили и т.п. Это хорошая возможность наладить связь со своей аудиторией. А если у вас получилось создать яркий броский дизайн элемента, то сможете дополнительно заинтересовать посетителей переходить на другие статьи. Штука, короче говоря, полезная, поэтому сегодня разберем как вывести авторов в WordPress, и сделать это без плагинов.

По сути, текущая задача состоит их 2 этапов:

  • заполнение контактной и другой информации в админке;
  • внедрение специального HTML/CSS кода в макет.

    • Ввод данных о пользователе

    Сначала переходим в учетную запись того или иного юзера. Все они находятся в разделе «Пользователи»:

    • Если вы будете редактировать свою инфу, выбирайте пункт «Ваш профиль»;
    • Когда нужно найти какого-то человека, открывайте меню «Все пользователи», где в списке или с помощью поиска ищете соответствующий профайл. При наведении на него появится ссылка «Изменить».

    Вывод автора WordPress поста без плагинов (2 варианта кода)Вывод автора WordPress поста без плагинов (2 варианта кода)

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

    Вывод автора WordPress поста без плагинов (2 варианта кода)Вывод автора WordPress поста без плагинов (2 варианта кода)

    Вы можете использовать и заполнять только те поля, которые считаете нужным. По моему мнению, самый минимум это: имя (либо никнейм), пару строк о вас + аватар. Кто-то предлагает добавлять почту, дабы иметь контакты человека, другие рекомендуют ставить линки на персональный блог/сайт или социальные сети. Тут уж все зависит от владельца веб-проекта, какие позиции он посчитает важными.

    Вывод автора в WordPress

    Что бы вы не выбрали не предыдущем этапе, отображение данных задает именно второй шаг — какие пункты прописаны в шаблоне, такие и будут показаны. Разработчики могут убирать/добавлять некоторые из них по желанию.

    Для редактирования выбираете файл единичной записи — single.php (или с другим названием, но тем же смыслом). Есть 3 метода правки:

    • непосредственно в файле шаблона;
    • через создание дочерней темы;
    • в functions.php.

    1. В первых двух случаях вы просто открываете/создаете single.php, где в после текста/контента добавляете требуемый код. Соответствующий исходный пост по теме найден тут. Разработчик приводит вариант, поддерживающий разметку Schema.

    <h4 class="about-the-author">About The Author</h4>
 
<div class="postauthor-wrap">
 <span itemscope itemprop="image" alt="Photo of <?php the_author_meta( 'display_name' ); ?>">
 <?php if(function_exists('get_avatar')) { echo get_avatar( get_the_author_meta('email'), '100' ); } ?>
 </span>
 
<h5 class="vcard author" itemprop="url" rel="author">
 <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" class="fn" itemprop="name">
 <span itemprop="author" itemscope itemtype="https://schema.org/Person">
 <?php the_author_meta( 'display_name' ); ?>
 </span>
 </a>
 <span class="author-aka"> a.k.a
 <span class="author-aka-name">
 <?php echo get_the_author_meta('twitter'); ?>
 </span>
 </span>
 </h5>
 
 <?php the_author_meta('description') ?>
 <span class="post-author-links">
 <?php if (get_the_author_meta('facebook') != ''): ?>
 <a class="author-link f" title="Follow on Facebook" href="<?php echo get_the_author_meta('facebook'); ?>" target="_blank">
 <i class="fa fa-facebook">
 </i>
 </a>
 <?php endif; ?>
 <?php if (get_the_author_meta('twitter') != ''): ?>
 <a class="author-link t" title="Follow on Twitter" href="https://twitter.com/<?php echo get_the_author_meta('twitter'); ?>" target="_blank">
 <i class="fa fa-twitter">
 </i>
 </a>
 <?php endif; ?>
 <?php if (get_the_author_meta('googleplus') != ''): ?>
 <a class="author-link g" title="Follow on Google+" href="<?php echo get_the_author_meta('googleplus'); ?>" target="_blank">
 <i class="fa fa-google-plus">
 </i>
 </a>
 <?php endif; ?>
 </span>
 </div>

    Дополнительно надо будет в style.css прописать оформление:

     /*-Author Box---------------------------*/
 .postauthor-wrap {
 float: left;
 width: 100%;
 clear: both;
 padding: 30px;
 background: #fff;
 box-sizing: border-box;
 border-radius: 2px;
 -webkit-box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
 -moz-box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
 box-shadow: 0 3px 5px 0 rgba(0,1,1,.1);
 }
 .postauthor-wrap .fn {
 font-size: 24px;
 }
 .postauthor img {
 float: right;
 margin-left: 10px;
 margin-right: 0px;
 margin-bottom: 20px;
 border-radius: 50%;
 }
 .author-aka {
 font-size: 16px;
 text-transform: lowercase;
 font-weight: normal;
 color: #5e5e5e;
 }
 .author-aka-name {
 font-size: 17px;
 text-transform: lowercase;
 font-weight: normal;
 color: #111111;
 }
 .post-author-links {
 display: inline-block;
 }
 a.author-link {
 background: #cc0000;
 color: #fff;
 width: 30px;
 text-align: center;
 line-height: 1;
 height: 30px;
 font-size: 12px;
 padding: 10px 0;
 box-sizing: border-box;
 border-radius: 100%;
 margin: 0 7px 0 0;
 float: left;
 }
 a.author-link.f {
 background: #3b5998;
 }
 a.author-link.t {
 background: #2DA8D2;
 }
 a.author-link.w {
 background: #e64522;
 }

    В итоге должно получится что-то вроде этого:

    Вывод автора WordPress поста без плагинов (2 варианта кода)Вывод автора WordPress поста без плагинов (2 варианта кода)

    2. Если делать все через 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 = '<p class="author_name">About ' . $display_name . '</p>';
 
if ( ! empty( $user_description ) )
// Author avatar and bio
 
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
 
$author_details .= '<p class="author_links"><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></p>';
 
} else { 
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
 
// 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');


    Далее в стилях style.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 автора поста приблизительно такой:

    Вывод автора WordPress поста без плагинов (2 варианта кода)Вывод автора WordPress поста без плагинов (2 варианта кода)

    Как видите, этот вариант имеет меньше полей при отображении — как минимум, там нет соц.сетей. Чтобы его подправить пригодятся функции:

    • get_the_author_meta() — считывает значение определенной характеристики юзера (имя, ник, почту);
    • the_author_meta() — не просто получает эту информацию, а сразу ее выводит.

    В примерах выше для них использовались переменные:

    • display_name — имя;
    • nickname — ник;
    • description — биография;
    • ID;
    • email;
    • url — личный сайт;
    • twitter — аккаунт твиттера;
    • facebook — ФБ страница;
    • googleplus — гугло+ соц.сеть.

    Итого. Конечно, чтобы вывести авторов WordPress постов через шаблон нужны определенные базовые навыки работы с системой. Применять в этом случае специальные модули куда проще, однако с ручной правкой вы на 100% будете уверены, что зададите отображение элементов именно так, как вам надо. В первом примере прикольно, что внедрена поддержка Schema разметки, во втором имеется проверка пустых значений (иногда это важно). Когда будете создавать свой код, можете скомбинировать оба метода и получить идеальный результат.

    Если есть вопросы/дополнения по теме, пишите их ниже. Дальше я разберусь с плагинами и тоже об этом напишу.
    Просмотров:

    Добавить комментарий

    ➤