Вы здесь:   Главная » Вебмастеру    »    Создаём виджет «Об Авторе» на WordPress

Создаём виджет «Об Авторе» на WordPress

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

Альтернативой станет добавление авторских элементов в каждой публикации: аватарка, ссылка на записи, блок «О себе» и т.п. Благодаря этому набору можно создать интересный виджет «Об авторе», подчёркивающий индивидуальность каждого из участников блога.

Как создать виджет об авторе на WordPress без плагинов

Как создать виджет «Об Авторе»?

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

Для начала перечислим требующиеся функции для отображения личных данных из профиля автора:

  • Во первых, это аватарка пользователя. Об этом мы писали в прошлой статье, но напоминаю код для вывода изображения:
    <?php echo get_avatar( get_the_author_meta( ‘user_email’ ), 80 ); ?>
  • Не менее важно вывести биографическую информацию, которую автор указал в своём профиле WordPress. В системе этот пункт зовётся «О себе»:
    <?php the_author_meta( ‘description’ ); ?>
  • Ну и ещё один немаловажный элемент оформления – ссылка на авторские публикации. Это автоматически генерируемая страница с выводом полного списка записей одного из пользователей:
    <?php the_author_posts_link(‘namefl’); ?> <?php get_the_author(); ?>

После следует за компоновать перечисленные функции, воспользовавшись стилями CSS. Например, аватарку располагаем с левого края страницы (float: left;), сверху помещаем подзаголовок (<h3> или <h4>), для текста «О себе» можно добавить размер шрифта и цвет (font-size: 12px; color: #333333;), ну и в конце добавить ссылку на все авторские публикации.

Примечание!   Код полученного виджета размещаем в файле «single.php» — шаблон одной записи (или «content-single.php в зависимости от темы оформления»). Вставляем сразу за выводом основного контента (<?php the_content(); ?>), либо после приоритетных элементов дизайна!

Пример кода виджета «Об авторе»

Вставить в single.php:

<div id="authorarea">
<h3>Об Авторе: <?php the_author_posts_link('namefl'); ?> <?php get_the_author(); ?></h3>
<?php echo get_avatar( get_the_author_meta( 'user_email' ), 80 ); ?>
<div class="authorinfo">
<?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">Просмотреть все записи автора <?php get_the_author(); ?> <span class="meta-nav">&rarr;</span></a>
</div>
</div>

Вставить в style.css:

#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width: 540px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 20px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 80px;
height: 100%;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
}

P.S.

Таким образом, можно создать не только блок «об авторе», но и придать индивидуальности установленной теме WP. Благодаря использованию только внутренних функций системы, удалось исключить инсталляцию плагина, а применённые Вами стили помогут настроить отображение в соответствии с цветовой схемой и положением в шаблоне!

поделиться с друзьями:

обновлено: 9.08.2017

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

Подписаться на почтовую рассылку*
*политика конфиденциальности Google

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

Авторизоваться через: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ознакомиться с пользовательским соглашением

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: