Отправляет email-рассылки с помощью сервиса Sendsay
Компьютеры и интернет → Обучение

Wordpress от "А" до "Я" 6077

Открытая группа
1936 участников
Администратор casham

Важные темы:

Последние откомментированные темы:

20251119220610

←  Предыдущая тема Все темы Следующая тема →
casham
пишет:

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

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

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

  1. заполнение контактной и другой информации в админке;
  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 разметки, во втором имеется проверка пустых значений (иногда это важно). Когда будете создавать свой код, можете скомбинировать оба метода и получить идеальный результат.
Это интересно
0

casham
30.10.2018
Пожаловаться Просмотров: 506  
Комментарии 0
←  Предыдущая тема Все темы Следующая тема →


Комментарии временно отключены