Блог, для якого пишуть багато авторів — один із найпопулярніших сучасних форматів. Створення захоплюючого та унікального контенту – непросте завдання, якщо ви ведете блог поодинці. А з великою кількістю авторів вирішити це завдання набагато легше. Ви зможете охопити ширше коло тем і поєднати знання та навички різних людей. На сайтах на кшталт Wptuts+ ви можете читати статті від великої команди авторів / блогерів, у кожного з яких свій стиль і свої особисті уподобання. Подібно до того, як зроблено у Wptuts+, блог з великою кількістю авторів можна прикрасити бокс-бейджем з інформацією про автора. Сьогодні ми з вами розберемося в тому, як зробити такий блок з даними про автора.
| Завантажити вихідні |
WordPress спочатку створено для роботи з контентом від кількох авторів на одній платформі. Всі інструменти для цього ми маємо, треба тільки навчитися тому, як цими інструментами користуватися.
Все починається з профілю користувача
Всі користувачі мають доступ до посилання редагування свого профілю. Тут ви можете налаштувати ім'я автора, яке відображається, та змінити свій пароль та адресу електронної пошти. Тут також можна вказати такі розширені дані, як обліки в AIM, Yahoo IM та Google Talk. Зазвичай усі ігнорують ці поля. Ми у своєму настроюваному бейджі автора використовуємо ці поля, які вічно ніхто не заповнює, і вийдемо з них користь!
Додаткові поля
Досить легко можна прибрати непотрібні нам поля і використовувати їх зовсім інакше. Почнемо з того, що відкриємо файл теми functions.php, і перейдемо до роботи:
function wptuts_contact_methods( $contactmethods ) {
// Remove we what we don't want
unset( $contactmethods[ 'aim' ] );
unset( $contactmethods[ 'yim' ] );
unset( $contactmethods[ 'jabber' ] );
// Add some useful ones
$contactmethods[ 'twitter' ] = 'Twitter Username';
$contactmethods[ 'facebook' ] = 'Facebook Profile URL';
$contactmethods[ 'linkedin' ] = 'LinkedIn Public Profile URL';
$contactmethods[ 'googleplus' ] = 'Google+ Profile URL';
return $contactmethods;
}
add_filter( 'user_contactmethods', 'wptuts_contact_methods' );Видалимо непотрібні нам поля, а замість них додамо поля, які нам потрібні. Важливо використовувати унікальний текст для полів. Якщо ви знову зайдете у свій профіль після впровадження правок, побачите додаткові поля, які вам потрібні, а все непотрібне пропаде.
А тепер можемо внести додаткову інформацію і можна перейти до редагування даних, які будуть виводитися про автора на вашому сайті.
Виходимо "у світ"
Ми збираємося задати аватарку для автора, невеликий текст-опис, біографію та посилання на профілі в соц. мережах. WordPress працює з аватарками користувачів на основі Gravatar. Використовуємо для цього функцію WordPress get_avatar() для отримання аватарки з Gravatar для конкретного користувача ID та адреси e-mail.
<?php echo get_avatar( $id_or_email, $size, $default, $alt ); ?>
Тут можна вказати розмір картинки і що буде показуватись у випадку, якщо у вас немає аватарки / профілю Gravatar. Замість аватарки може бути, наприклад, текст. Для цього потрібно використовувати наступний код:
<?php echo get_avatar( get_the_author_meta( 'ID' ), '70' );?>
Цей код відображає зображення з Gravatar у розмірі. 70px на 70px і авторський ID користувача для автора поточного поста. Також ми хочемо вивести деякі дані про автора.
Найголовніше
<div class="media profile">
<?php echo get_avatar( get_the_author_meta( 'ID' ), '70' ); ?>
<div class="bd">
<h4><?php printf( esc_attr__( 'About %s', 'tuts_plus' ), get_the_author() );?></h4>
<?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?>
<div class="profile-links">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'tuts_plus' ), get_the_author() ); ?>
</a>
</div>
</div>
</div>
Наведений вище код дозволяє створити основний опис. Відкрийте файл single.php (для цієї мети я використовую тему оформлення Двадцять дванадцять) і додайте наведений вище код до циклу всередині шаблону коментарів (це 25-й рядок у шаблоні оформлення Twenty Twelve). Тепер поетапно розглянемо, що ми робимо.
Ми вже згадали про функцію get_avatar()але далі ми побачимо функцію get_the_author(). Вона просто "витягує" інформацію про автора посту. У нашому прикладі ім'я автора виводиться у верхній частині блоку, що настроюється. І відображатиметься ця інформація в тому випадку, якщо ви вибрали опцію "Відображати якВам потрібен наступний код:
<h4><?php echo get_the_author(); ?></h4>
Наступна функція - get_the_author_meta(). Ця функція показує мета-дані для конкретного користувача. Якщо ми використовуємо цю функцію в циклі, то нам не треба конкретизувати користувальницький ID; але можна використовувати цю функцію і поза циклом, щоб ігнорувати "витягування" ID користувача. З використанням цієї функції можна "витягнути" багато різної інформації, у наведеному прикладі ми "витягнемо" опис для блоку з біографією автора. А для авторського імені висновок я відключив, щоб автори самі туди чогось не "напхали".
І нарешті внизу ми маємо посилання на сторінку автора. Для простої адреси на сторінку автора потрібна функція get_author_posts_url(). WordPress автоматично створює сторінки авторів для всіх користувачів, які на нашому сайті опублікували хоча б 1 пост. Трохи додамо коду в CSS - І ось як це виглядатиме:
.media, .bd { overflow: hidden; _overflow: visible; zoom: 1; }
.media img, .media .img { float: left; margin-right: 10px; }
.media img { display: block; }
.media .imgExt { float: right; margin-left: 10px; }
.profile { margin-top: 10px; padding: 20px 10px; border: solid thin #c6c6c6; -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); }
.profile-links { padding: 5px 0; }
Трохи "соціальщини"
Основний блок із даними про автора у нас готовий, а що робити з додатковими полями, які ми додали? Скористаємося функцією get_the_author_meta() для заповнення полів даними. Разом давайте розберемося у наведеному прикладі:
<div class="profile-links">
<ul class="social-links">
<?php if ( get_the_author_meta( 'twitter' ) != '' ) { ?>
<li><a class="twitter-link" href="https://twitter.com/<?php echo wp_kses( get_the_author_meta( 'twitter' ), null ); ?>"><?php printf( esc_attr__( 'Follow %s on Twitter', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'facebook' ) != '' ) { ?>
<li><a class="facebook-link" href="<?php echo esc_url( get_the_author_meta( 'facebook' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Facebook', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'linkedin' ) != '' ) { ?>
<li><a class="linkedin-link" href="<?php echo esc_url( get_the_author_meta( 'linkedin' ) ); ?>"><?php printf( esc_attr__( 'Connect with %s on LinkedIn', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'googleplus' ) != '' ) { ?>
<li><a class="google-link" href="<?php echo esc_url( get_the_author_meta( 'googleplus' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Google+', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
</ul>
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'tuts_plus' ), get_the_author() ); ?>
</a>
</div>
Ми створили невпорядкований список із додатковими полями. Для початку треба перевірити, чи встановлено значення для кожного нового поля, щоб не було "порожніх" посилань. Далі ми створюємо посилання на основі інформації з профілю користувача. У нашому прикладі посилання формується на основі виконання функції get_the_author_meta()Але залежно від того, які дані ми хочемо вивести, ми отримаємо різні способи валідації. Для Twitter ми вводимо лише ім'я користувача, а інших сервісів ми вводимо повну адресу нашого профілю в соц. мережі із застосуванням функції esc_url(). Потім додаємо трохи "прикрас" CSS і все ок!
.social-links li { padding: 5px; display: inline; list-style: none; text-indent: -9999px; float: left; }
.social-links li a { background-position: 0 0; background-repeat: no-repeat; width: 16px; height: 16px; display: block; }
.twitter-link { background: url( images/twitter.png ) no-repeat; }
.facebook-link { background: url( images/facebook.png ) no-repeat; }
.linkedin-link { background: url( images/linkedin.png ) no-repeat; }
.google-link { background: url( images/google-plus.png ) no-repeat; }
Наводимо лиск
До блоку, що вийшов, можна додати деякі додаткові "фішки". Наприклад, можна створити динамічну картку LinkedIn Profile Card.
Для початку треба створити кілька функцій. Використовуємо бібліотеку LinkedIn JavaScript для постів та сторінок авторів:
function wptuts_linkedin_js() {
if ( is_single() || is_author() ) :
wp_enqueue_script( 'linkedin', '//platform.linkedin.com/in.js', null, null, true );
endif;
}
add_action( 'wp_enqueue_scripts', 'wptuts_linkedin_js' );Вище наведений код треба додати до файлу теми functions.php oдля зміни методів контакту з авторами. Так ми переконаємося в тому, що скрипт JavaScript завантажуватиметься на тих сторінках, де нам потрібно. Наступне - написання маленької функції для виведення даних про автора при наведенні курсору на профіль автора:
function wptuts_linkedin( $author ) {
$authorinfo = get_user_meta( $author );
$linkedin = $authorinfo['linkedin'][0];
if ( isset( $linkedin ) ) : ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22IN%2FMemberProfile%22%20data-id%3D%22%3C%3Fphp%20echo%20%24linkedin%3B%3F%3E%22%20data-format%3D%22hover%22%20data-related%3D%22false%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php endif;
}Для початку передаємо параметр до функції перед викликом. Ми передаємо значення ідентифікатор користувача кожному за автора, під якого створюється картка. Для цього ми отримуємо мета-дані за допомогою get_user_meta (), і ми "витягнемо" адресу LinkedIn (як у першій половині статті). Ось як виглядає оновлений файл single.php:
<div class="profile-links">
<ul class="social-links">
<?php if ( get_the_author_meta( 'twitter' ) != '' ) { ?>
<li><a class="twitter-link" href="https://twitter.com/<?php echo wp_kses( get_the_author_meta( 'twitter' ), null ); ?>"><?php printf( esc_attr__( 'Follow %s on Twitter', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'facebook' ) != '' ) { ?>
<li><a class="facebook-link" href="<?php echo esc_url( get_the_author_meta( 'facebook' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Facebook', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'linkedin' ) != '' ) { ?>
<li class="linkedin-link"><?php wptuts_linkedin( get_the_author_meta( 'ID' )); ?></li>
<?php } ?>
<?php if ( get_the_author_meta( 'googleplus' ) != '' ) { ?>
<li><a class="google-link" href="<?php echo esc_url( get_the_author_meta( 'googleplus' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Google+', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
</ul>
<div class="clear"></div>
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'tuts_plus' ), get_the_author() ); ?>
</a>
</div>
Як ви бачите, ми викликали функцію для LinkedIn із застосуванням wptuts_linkedin(get_the_author_meta( 'ID' )) - Ця функція передає значення ідентифікатор користувача до відповідного автора у межах нашої функції. Ну і трохи належного оформлення за допомогою CSS:
.linkedin-link { text-indent: 0 !important; }І ось у нас готовий блок із даними про автора, в якому при наведенні мишкою на блок висвічується інформація з вашого профілю в LinkedIn!
Сторінка автора
Ще непогано б створити блок із даними про автора у верхній частині сторінки з архівом попередніх публікацій. Щось у цьому напрямі вже зроблено у файлі теми Двадцять дванадцять під назвою автор.php. І сюди дещо можна додати:
<div class="author-info">
<div class="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentytwelve_author_bio_avatar_size', 60 ) ); ?>
</div>
<!-- .author-avatar -->
<div class="author-description">
<h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
<div class="profile-links">
<ul class="social-links">
<?php if ( get_the_author_meta( 'twitter' ) != '' ) { ?>
<li><a class="twitter-link" href="https://twitter.com/<?php echo wp_kses( get_the_author_meta( 'twitter' ), null ); ?>"><?php printf( esc_attr__( 'Follow %s on Twitter', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'facebook' ) != '' ) { ?>
<li><a class="facebook-link" href="<?php echo esc_url( get_the_author_meta( 'facebook' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Facebook', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
<?php if ( get_the_author_meta( 'linkedin' ) != '' ) { ?>
<li class="linkedin-link"><?php wptuts_linkedin( get_the_author_meta( 'ID' )); ?></li>
<?php } ?>
<?php if ( get_the_author_meta( 'googleplus' ) != '' ) { ?>
<li><a class="google-link" href="<?php echo esc_url( get_the_author_meta( 'googleplus' ) ); ?>"><?php printf( esc_attr__( 'Follow %s on Google+', 'tuts_plus'), get_the_author() ); ?></a></li>
<?php } ?>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- .author-description -->
</div>
<!-- .author-info -->
Висновок
І ось усе готове. Тепер ви знаєте, як створити блок, що настроюється з даними автора. Але блок можна розширити, наприклад, додавши свої останні твіти, додаткові посилання, історію правок в GitHub і т.д. - Купа варіантів, насправді.
Використані векторні іконки для соціальних. мереж від IconDock.com и Double-J Design
URL для скачування іконок: http://icondock.com/free/vector-social-media-icons
Джерело:WP.tutsplus.com
Коментарі до запису: 3
Питання здасться дещо профанським, але я все ж таки спитаю ))
Чи можна використовувати лише перераховані вище 4 соціальні мережі?
LinkedIn у нас не має особливої популярності. Краще прикрутити ВКонтакті.
На сайті блок автора підтримується темою. Проблема в наступному:
На сайті 1 адміністратор і 2 автори - разом 3 заповнених аватарками та інформацією профілю. Так ось в деякі статті в блок автора вордпрес підставляється правильна аватарка і інформація про автора, а в деякі - аватарка і інформація про автора з профілю адміністратора. Причому й у тому й іншому випадку ім'я автора — правильне. Не можу знайти причини, буду вдячний за допомогу.