Если у блога много авторов, иногда бывает недостаточно просто ставить разные подписи в конце каждого материала. Иногда нужно добавить какую-то информацию об авторе.
Как это сделать?
В WordPress есть штука, которая называется Author box, которую можно выводить после каждого материала. Если автор у блога один, это не всегда нужно, а вот если несколько — то бывает полезно.
У дефолтного author box функционал узкий — можно вывести только имя и описание. А хочется и фотографию, и ссылки на соцсети..
Существует много плагинов, которые позволят усовершенствовать author box. Но каждый новый плагин — тормоза для блога, поэтому какие-то вещи спокойно можно сделать и руками.
Например, кастомную аватарку руками делать сложно, поэтому тут можно пойти на компромисс и поставить плагин WP User avatar. Он небольшой и удобный — просто позволяет админу и юзерам самостоятельно загрузить аватару, а не брать картинку Gravatar.
Дальнейшее опирается на то, что плагин Yoast SEO уже установлен — без него сейчас жить нельзя, поэтому все более или менее серьезные блоги на WordPress используют его. Этот плагин, среди прочего, расширяет количество полей при редактировании author box — например, увеличивает количество полей для социальных сетей.
Чтобы это заработало, следует в настройках Yoast в разделе «Отображение в поисковой выдаче» — «Архивы» включить «архивы авторов».
А вот дальше уже можно работать только руками.
1. В functions.php добавляем код для вывода кастомного author box:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
//* Custom author box // Make Font Awesome available. add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); function enqueue_font_awesome() { wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' ); } add_filter( 'user_contactmethods', 'modify_user_contact_methods', 10, 1 ); /** * Add custom social fields in User Profile page in WP admin. * * @param array $user_contact An associative array keyed by form field ids with human-readable text as values. * @return array Updated array of user contact informaton fields. */ function modify_user_contact_methods( $user_contact ) { $user_contact['twitter'] = 'Twitter (w/o the @)'; $user_contact['facebook'] = 'Facebook URL'; $user_contact['pinterest'] = 'Pinterest URL'; $user_contact['instagram'] = 'Instagram URL'; $user_contact['youtube'] = 'Youtube URL'; $user_contact['rss'] = 'RSS Feed URL'; return $user_contact; } add_filter( 'genesis_author_box', 'custom_genesis_author_box', 10, 6 ); /** * Filter the full output of the author box. * * @param string $output Assembled output. * @param string $context Context. * @param string $pattern (s)printf pattern. * @param string $context Gravatar. * @param string $context Title. * @param string $context Description. * * @return string Modified HTML output of author box. */ function custom_genesis_author_box( $output, $context, $pattern, $gravatar, $title, $description ) { esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ), get_the_author_meta( 'user_nicename' ) ), esc_attr( sprintf( __( 'Posts by %s' ), get_the_author() ) ), $gravatar ); esc_url( get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ) ), /* translators: %s: author's display name */ esc_attr( sprintf( __( 'Posts by %s' ), get_the_author() ) ), get_the_author() ); $email_address = get_the_author_meta( 'email' ); $website_url = get_the_author_meta( 'url' ); $twitter_handle = ltrim( get_the_author_meta( 'twitter' ), '@' ); $facebook_url = get_the_author_meta( 'facebook' ); $pinterest_url = get_the_author_meta( 'pinterest' ); $instagram_url = get_the_author_meta( 'instagram' ); $youtube_url = get_the_author_meta( 'youtube' ); $rss_url = get_the_author_meta( 'rss' ); $author_display_name = get_the_author_meta( 'display_name', (int) get_query_var( 'author' ) ); $email = sprintf( ', ' esc_url( $email_address ), $author_display_name ); if ( !empty( $website_url ) ) { $website_link = sprintf( ', ' esc_url( $website_url ), $author_display_name ); } if ( !empty( $twitter_handle ) ) { $twitter_link = sprintf( ', ' esc_url( 'https://twitter.com/' . $twitter_handle ), $author_display_name ); } if ( !empty( $facebook_url ) ) { $facebook_link = sprintf( ', ' esc_url( $facebook_url ), $author_display_name ); } if ( !empty( $pinterest_url ) ) { $pinterest_link = sprintf( ', ' esc_url( $pinterest_url ), $author_display_name ); } if ( !empty( $instagram_url ) ) { $instagram_link = sprintf( ', ' esc_url( $instagram_url ), $author_display_name ); } if ( !empty( $youtube_url ) ) { $youtube_link = sprintf( ', ' esc_url( $youtube_url ), $author_display_name ); } if ( !empty( $rss_url ) ) { $rss_link = sprintf( ', ' esc_url( $rss_url ), $author_display_name ); } $description .= ' . $email . $website_link . $twitter_link . $facebook_link . $pinterest_link . $instagram_link . $youtube_link . $rss_link . ''; $output = sprintf( $pattern, $gravatar, $title, $description ); return $output; } |
2. Если мы хотим, чтобы при расшаривании списка статей автора на фейсбуке или в Telegram в качестве картинки использовался не логотип сайта, а фотография автора, вот так:

Хотим, чтобы при расшаривании списка статей автора на фейсбуке или в Telegram в качестве картинки использовался не логотип сайта, а фотография автора
тогда добавляем в functions.php еще небольшой кусок кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//* og-image for author page add_action('wpseo_head', 'add_fb_og', 5); function add_fb_og() { if ( is_author ( ) ) { $my_custom_avatar = get_avatar(get_the_author_meta( 'ID' ), 200 ); $document = new DOMDocument(); @$document->loadHTML($my_custom_avatar); $nodes = $document->getElementsByTagName('img'); ?> <meta property="og:image" content=" echo $nodes->item(0)->getAttribute('src'); ?>" /> <?php } } |
2. Оформляем вывод нашей кастомной информации об авторе. Добавляем в style.css следующее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/* Custom author box ---------------------------------------------------------------------------------------------------- */ .author-box-content { margin-top: 20px; } .author-box-content p { margin-bottom: 10px; } .author-box-social { display: inline-block; line-height: 1; margin-top: 10px; margin-right: 6px; } .author-box-social a { text-decoration: none; padding: 0 4px; font-size: 16px; } .author-box-social.email a { color: #7e317b; } .author-box-social.website a { color: #df4a32; } .author-box-social.twitter a { color: #00abf0; } .author-box-social.facebook a { color: #3a579a; } .author-box-social.pinterest a { color: #bd081c; } .author-box-social.instagram a { color: #003569; } .author-box-social.youtube a { color: #459dfd; } .author-box-social.rss a { color: #f8991d; } |
И все. Теперь не забудем добавить дополнительную информацию в соответствующие поля, и author box будет выглядеть так, как на картинке в начале статьи.
А, еще — при выводе всех статей автора картинка не показывается. Поэтому, если мы хотим, чтобы фотография автора была перед списком статей, можно в настройках автора поставить галочки на пунктах
Включить Author Box на записях этого пользователя?
Включить Author Box на архиве этого пользователя?
И не заполнять поле «Текст пользовательского описания», предварительно заполнив поле «биография». Тогда author box в конце статьи будет с фоткой и описанием, а при выводе списка статей будет выводиться все тот же author box с фотографией и описанием.
Теперь точно все.