Вывод автора 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 разметки, во втором имеется проверка пустых значений (иногда это важно). Когда будете создавать свой код, можете скомбинировать оба метода и получить идеальный результат.
Если есть вопросы/дополнения по теме, пишите их ниже. Дальше я разберусь с плагинами и тоже об этом напишу.
комментариев 13 к статье “Вывод автора WordPress поста без плагинов (2 варианта кода)”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Записи и посты wordpress, оформление записи (5,91 из 7, голосов - 47)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress (3,93 из 7, голосов - 44)
- Умный копирайт в footer.php для wordpress (5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений (5,19 из 7, голосов - 31)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress (4,42 из 7, голосов - 31)
- Плагин TinyMCE Advanced – wordpress текстовый редактор (6,35 из 7, голосов - 20)
- Рубрики и категории wordpress, функция wp_list_categories (6,05 из 7, голосов - 20)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
Что-то коды как-то неправильно отображаются в статье.. ничего непонятно.
Снежа, ого действительно где-то закралась ошибка. Все исправил. Спасибо, что маякнули!
Очень славно получается. Видел уже такие подписи на просторах интернета. Спасибо за подробный разбор!
В ожидании аналогичного поста, но с плагинами — они попроще для внедрения)
Андрей, все будет, но чуть позже…
Здравствуйте. Подскажите, пожалуйста, по какой причине могут не срабатывать коды css. Все сделал правильно все выводится, только автор не выделяется цветом, нет кружочка, В общем идет как кусок текста ниже. Стили перекрываются теми, что прописаны в body Может перед выводом стилей автора есть функция тотального обнуления всего дозагруженного перед этим и вывод именно стилей для отображения автора? Не силен в этом, к сожалению. Так же пытался изменить отображение списков и сносок, получилось не все. Что-то меняется, а , допустим цвет остается, хоть что напиши. Либо меняй все на всех элементах одинаково, либо забудь и прости. Вообще не срабатываю классы, подклассы. Возможно как-то задается родитель на элемент без права изменения и тут хоть сдохни ничего не выйдет пока не отменишь эту установку.
Виктор, теоретически тут есть несколько вариантов: 1) во разделе «Внешний вид» — «Настроить» для шаблона имеется вкладка «Дополнительные стили» — они пишутся прямо в код, поверх всех остальных. 2) Если не срабатывает здесь или в отдельном CSS-файле, всегда можно дописать для конкретного стиля … !important; (что перекрывает всякие наследования). 3) Если же все это не срабатывает, то тут только править исходные файлы стилей/шаблона и искать где прописаны нужные вам правила по стилям.
Спасибо, почти получилось. Не выводится вторая рамка, взял вариант 2, но это не принципиально. Более важный вопрос, как вывести соцсеть, например, ВК. Это реально? Или не морочиться, а переделать все как в первом примере?
Виктор, можно использовать для этого строку любой соц.сети: 1) вводите ссылку на ВК в какую-то из соц.сетей, 2) в коде в функции get_the_author_meta подставляеет название соц.сети, 3) а для отображения иконки вместо например class=»fa fa-facebook» указываете значение шрифта fontawesome — class=»fab fa-vk»
Вы рассматриваете первый пример, а в случае со вторым, я так понимаю, вывести соцсеть нельзя? У меня в файле function 6 раз встречается get_the_author_meta, но про соцсеть там ни слова. В основном юзер, автор, пост, display_name
Виктор, смотрите первый вариант — там с помощью этой функции get_the_author_meta как раз выводятся соц.сети. Используйте этот подход для второго варианта.
Сделал через функцию темы, всё нормально только автарка не появляется автора, у самого же пользователя есть аватарка в настройках
Максим, на вашем сайте, кстати, видел аватарку, получилось или нет сделать? (так и не понял). Если одним методом не вышло, я бы изначально попробовал второй. Если их сравнивать, то через single.php больше шансов получить результат, т.к. вы непосредственно задаете вывод конкретных элементов в файле темы, хотя в сложных шаблонах единичная запись может состоять из нескольких файлов или как-то «хитро» выводиться. В таком случае я бы сначала пытался отобразить информацию попроще через the_author_meta, например, имя — и если все ок, приступил бы к выводу аватара (то есть пошагово все сделать и смотреть на каком этапе возникает проблема).