Окт

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

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

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

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

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

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

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

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

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

Вывод автора в 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;
 }

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

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

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

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 поста без плагинов (2 варианта кода)

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

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

Похожие статьи:

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