Окт
25
13

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

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

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

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

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

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

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

Выбор пользователя

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

Информация об авторе постов в WordPress

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

Вывод автора в 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. Если делать все через 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

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

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

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

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 5, средний балл: 6,80 из 7)
Загрузка...

категория Категории: Возможности; Хаки и секреты;
теги Теги: , , , .

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

  • Снежа   28.10.2018

    Что-то коды как-то неправильно отображаются в статье.. ничего непонятно.

  • Tod   28.10.2018

    Снежа, ого действительно где-то закралась ошибка. Все исправил. Спасибо, что маякнули!

  • Андрей   30.10.2018

    Очень славно получается. Видел уже такие подписи на просторах интернета. Спасибо за подробный разбор!

  • Андрей   05.12.2018

    В ожидании аналогичного поста, но с плагинами — они попроще для внедрения)

  • Tod   05.12.2018

    Андрей, все будет, но чуть позже…

  • Виктор   25.10.2019

    Здравствуйте. Подскажите, пожалуйста, по какой причине могут не срабатывать коды css. Все сделал правильно все выводится, только автор не выделяется цветом, нет кружочка, В общем идет как кусок текста ниже. Стили перекрываются теми, что прописаны в body Может перед выводом стилей автора есть функция тотального обнуления всего дозагруженного перед этим и вывод именно стилей для отображения автора? Не силен в этом, к сожалению. Так же пытался изменить отображение списков и сносок, получилось не все. Что-то меняется, а , допустим цвет остается, хоть что напиши. Либо меняй все на всех элементах одинаково, либо забудь и прости. Вообще не срабатываю классы, подклассы. Возможно как-то задается родитель на элемент без права изменения и тут хоть сдохни ничего не выйдет пока не отменишь эту установку.

  • Tod   25.10.2019

    Виктор, теоретически тут есть несколько вариантов: 1) во разделе «Внешний вид» — «Настроить» для шаблона имеется вкладка «Дополнительные стили» — они пишутся прямо в код, поверх всех остальных. 2) Если не срабатывает здесь или в отдельном CSS-файле, всегда можно дописать для конкретного стиля … !important; (что перекрывает всякие наследования). 3) Если же все это не срабатывает, то тут только править исходные файлы стилей/шаблона и искать где прописаны нужные вам правила по стилям.

  • Виктор   26.10.2019

    Спасибо, почти получилось. Не выводится вторая рамка, взял вариант 2, но это не принципиально. Более важный вопрос, как вывести соцсеть, например, ВК. Это реально? Или не морочиться, а переделать все как в первом примере?

  • Tod   26.10.2019

    Виктор, можно использовать для этого строку любой соц.сети: 1) вводите ссылку на ВК в какую-то из соц.сетей, 2) в коде в функции get_the_author_meta подставляеет название соц.сети, 3) а для отображения иконки вместо например class=»fa fa-facebook» указываете значение шрифта fontawesome — class=»fab fa-vk»

  • Виктор   27.10.2019

    Вы рассматриваете первый пример, а в случае со вторым, я так понимаю, вывести соцсеть нельзя? У меня в файле function 6 раз встречается get_the_author_meta, но про соцсеть там ни слова. В основном юзер, автор, пост, display_name

  • Tod   27.10.2019

    Виктор, смотрите первый вариант — там с помощью этой функции get_the_author_meta как раз выводятся соц.сети. Используйте этот подход для второго варианта.

  • Максим   22.11.2019

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

  • Tod   22.11.2019

    Максим, на вашем сайте, кстати, видел аватарку, получилось или нет сделать? (так и не понял). Если одним методом не вышло, я бы изначально попробовал второй. Если их сравнивать, то через single.php больше шансов получить результат, т.к. вы непосредственно задаете вывод конкретных элементов в файле темы, хотя в сложных шаблонах единичная запись может состоять из нескольких файлов или как-то «хитро» выводиться. В таком случае я бы сначала пытался отобразить информацию попроще через the_author_meta, например, имя — и если все ок, приступил бы к выводу аватара (то есть пошагово все сделать и смотреть на каком этапе возникает проблема).

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости