Добавяне на информация за автора в WordPress

Информация за автора е малка секция или блок, разположен обикновено след основното съдържание на публикацията. В този блок се показва информация за автора на статията – името, снимка, кратко описание и връзки към акаунти в социални мрежи.

Някои теми показват блока на автора, като използват вградената функционалност на WordPress. Други теми не добавят автоматично информация за автора към публикацията. В някои случаи може да желаете да промените начина, по който се визуализира секцията с информацията.

Защо информацията за автора е полезна?

Публикуването на информация за автора добавя автентичност на Вашия блог и изгражда доверие сред Вашите читатели. Голяма част от читателите ще бъдат скептично настроени към информация от анонимен източник, тъй като естественото желание е да свържат съдържанието с действителен човек.

За WordPress сайт с един автор на съдържание е по-удачно да се добави профилна страница About us, но за WordPress сайтове с много автори трябва да добавите информационно поле за автор под всяка публикация.

Публикуването на информация за авторите, особено с възможност за добавяне на линк към техните сайтове и социални акаунти, е сериозен стимул за много автори, които търсят експозиция и нова аудитория, да желаят да публикуват свои уникални статии във Вашия сайт.

А това е полезно и за двете страни – сайтът се превръща в авторитет в дадена област и съдържанието получава по-висок рейтинг от търсещите машини, а авторите увеличават своята популярност.

Освен всички други ползи, публикуването на информация за автора ще доведе трафик към Вашия сайт от читателите, които харесват и следват този автор.

В статията ще разгледаме различни начини за добавяне на информация за автор в WordPress с помощта на:

• WordPress тема;
• плъгин;
• widget в страничната лента;
• допълнителен код.

Добавяне на информация за автора в WordPress тема

Както споменахме в началото, някои WordPress теми автоматично добавят секция с информация за автора след съдържанието. Като пример може да посочим темата по подразбиране Twenty Twenty-One:

За да въведете информация за главния администратор на сайта, отворете Users » Profile от главното меню:

Профилът на всеки допълнително създаден потребител може да отворите през Users » Username » Edit:

Скролирайте докато достигнете секция About Yourself. В полето Biographical Info въведете кратка информация за автора. По желание може да въведете като HTML код връзка към сайта на автора или връзки към негови/нейни акаунти в социални мрежи.

Ако контактният имейл на потребителя е асоцииран с акаунт в Gravatar, WordPress автоматично ще зареди съответното изображение. В противен случай ще се зареди изображението по подразбиране, което се настройва в секция Default Avatar на панела Discussion Settings (Settings » Discussion):

Ако Вашата WordPress тема не добавя информацията за автора към публикациите, може да използвате един от следващите методи за добавяне на информационно поле на автора.

Добавяне на информация за автора чрез плъгина Simple Author Box

Simple Author Box добавя адаптивна секция с информация за автора в края на Вашите публикации, с името на автора, gravatar изображение/икона на автора и кратка информация за автора.

Плъгинът също така може да добави над 30 полета за социални профили в настройките на потребителския профил на WordPress, което позволява да се показват връзки към социалните акаунти на автора.

Инсталирайте Simple Author Box по добре познатия начин – отворете Plugins » Add New, въведете в полето за търсене ключовата дума author и инсталирайте/активирайте плъгина през бутона Install Now/Activate:

До настройките на плъгина може да достигнете по два начина:

1. През линка Settings срещу името на плъгина в таблицата с инсталираните плъгини:

2. Като изберете Simple Author » Simple Author от главното меню:

Панелът с настройки Simple Author Box съдържа две основни секции.

През линковете в първата секция имате достъп в нов прозорец на браузъра до:

• профилната страница на логнатия потребител (през Edit Author Profile);
• до секция Custom User Profile Image (през Change Author Avatar), където може да смените изображението/аватара на автора;
• до секция Social Media Links (през Add/Edit Social Media Icons), където може да добавите/редактирате достъпа до социалните акаунти на автора.

При инсталиране на плъгина, към обикновеното текстово поле Biographical Info в секция About Yourself е добавен текстов редактор с минимални функции, достатъчни за форматиране на информацията за автора:

Simple Author Box позволява зареждане на изображение от Media Library през бутона Upload Image:

За да редактирате съществуващ акаунт към социална мрежа, трябва да кликнете в менюто с името на социалния сайт (например Twitter) и да изберете друга социална мрежа. След това трябва да редактирате адреса на новия акаунт и да запазите промените като натиснете бутона Update Profile:

За да добавите връзка към акаунт в социална мрежа, натиснете бутона +Add new social platform, изберете социалната мрежа от менюто Add This, въведете адреса на акаунта в полето и натиснете бутона Update Profile:

За да изтриете връзка към социална мрежа, натиснете иконата със символ кошче отдясно на съответното поле.

Настройки на Simple Author Box

Втората секция съдържа няколко раздела с настройки, които ще разгледаме:

Настройки в раздел Settings

Manually insert the Simple Author Box (ръчно вмъкване на Simple Author Box) – ако включите бутона (On), трябва ръчно да добавите Simple Author Box към публикациите – като копирате кода от първото поле и го поставите в темплейт файла single.php или като поставите краткия код [simple-author-box] в края на съответната статия в редактора.

• Hide the author box if author description is empty – скрива секцията информация за автора ако полето за информация е празно.
• Show author email – показва имейл адреса на автора (най-краткия път до спам базите данни, в никакъв случай не препоръчаме да се активира настройката).
• Open social icon links in a new tab – добре е да се активира опцията, тъй като посетителите ще разгледат акаунта без да се затвори страницата от Вашия сайт.
• Hide the social icons on author box – скриване на иконите към социалните мрежи;
• Hide the author box on archives – скриване на информацията за автора в архивните страници (препоръчаме опцията да не се активира).

Настройки в раздел Appearance

Настройки в първите две полета Top margin of author box и Bottom margin of author box определят разстоянието отгоре и отдолу до съседните външни елементи в дизайна на публикацията.

Следващите две настройки Padding top and bottom of author box и Padding left and right of author box дефинират разстоянията отгоре и отдолу, както и отляво и отдясно на вътрешните елементи до границата на информационната секция.

Border Width – определя ширината на границата.

Author avatar image style – от опциите в менюто може да изберете дали изображението да бъде квадратно или кръгло.

Show author website – това е цената на ‘безплатните‘ статии в интернет маркетинга – линк към сайта на автора.

Social icons type – от менюто може да променяте типа на социалните икони – в един цвят (Symbols) или цветни (Colored).

Настройки в раздел Colors

В този раздел може да персонализирате цветовете на елементите в секция информация за автора.

• Author name color – цвят на името на автора;
• Border color – цвят на границата;
• Background color of social icons bar – фонов цвят на лентата със социалните икони;
• Background color of author box – фонов цвят на секцията с информацията за автора;
• Color of author box paragraphs – цвят на текста в информацията за автора;
• Color of author box links – цвят на линковете в информацията за автора;
• Social icons color (for symbols only) – цвят на социалните икони ако е избран тип symbols.

Настройки в раздел Typography

В раздела Typography може да дефинирате шрифтове и големина на текст за елементите на секция информация за автора. Ако не изберете шрифт или цвят от настройките на плъгина, WordPress ще ползва настройките на активната тема.

• Google font characters subset – категория на шрифтове от Google (например – Cyrillic, кирилица);
• Author name font family – шрифт на името на автора;
• Author description font family – шрифт на информацията за автора;
• Author name font size – големина на текста на името на автора;
• Author description font size – големина на текста на описанието за автора;
• Size of social icons – големина на социалните икони;
• Author description font style – стил на текста на описанието за автора.

Настройки в раздел Misc

Load generated inline style to footer – препоръчаме опцията да не се активира, тъй като footer-ът е различен елемент от структурата на сайта със свои собствени дизайн и предназначение, които са много различни от функциите на информацията за автора.

Ако WordPress темата показва информация за автора, но Вие желаете да ползвате по-големите възможности на плъгина Simple Author Box, трябва да изключите опцията от настройките на темата в WordPress Customize или да скриете полето с персонализиран CSS код (display:none).

Разработчиците на Simple Author Box доставят плъгина с прецизни адаптивни (responsive) настройки – при десктоп и таблет резолюции елементите са разположени отляво:

След преминаване на breakpoint за смартфон резолюция (обикновено под 600px ширина на екрана), елементите автоматично се подреждат в средата на екрана един под друг:

Добавяне на информация за автора чрез widget в страничната лента

Интересна разновидност при създаване на секция с информацията за автора предоставят разработчиците на плъгина Meks Smart Author Widget.

Този плъгин позволява да показвате информация за автора (потребителя) чрез WordPress widget (джаджа). Полезна характеристика на този плъгин е автоматичното откриване на автор (потребител), така той може да показва автора на текущата публикация в шаблони за единични публикации или в архив на конкретен автор в блог с множество регистрирани автори.

Отворете Plugins » Add New, въведете в полето за търсене meks author и инсталирайте/активирайте плъгина през бутона Install Now/Activate.

За да достъпите плъгина, отворете Appearance » Widgets:

Кликнете върху лентата Main Sidebar, за да видите наличните widget-и:

В примера премахнахме ненужните джаджи през Options » Remove block и оставихме само поле за търсене и Latest posts:

За да инсталирате Meks Smart Author, кликнете върху иконата със символ знак плюс след блока Latest posts, въведете в полето за търсене meks и кликнете линка Meks Smart Author:

Панелът с настройки е изключително лесен за конфигуриране. В първата секция въведете име на секцията (Title), менюто Choose author/user съдържа списък с всички регистрирани автори/потребители. Важно е да маркирате опцията Automatically detect author, за да активирате автоматичното разпознаване на авторите:

Настройки в секция Display Options

• Display author avatar – показване на изображение/аватар;
• Avatar size – размер на изображението;
• Display author name – показване име на автора;
• Display author description – показване информация за автора;
• Limit description – през тази опция може да ограничите броя на символите в информацията за автора;
• Link author name – при маркиране името на автора ще бъде линк към архив с неговите статии;
• Display author „all posts“ archive link – показване на линк към всички статии на автора;
• Link text – в полето може да промените името на линка View all posts;

Запазете избраните настройки като натиснете бутона Update в горния десен ъгъл на екрана.

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

Добавяне на информация за автора чрез допълнителен код

Този метод за добавяне на информация за автора не е препоръчителен и го споделяме само като възможност и насърчение към любителите на работа с PHP и CSS код.

Шаблонът в WordPress, който показва единичните публикации, се съдържа във файла single.php. За да добавите секция с информация за автора, трябва да отворите редактора на WordPress (Appearance » Theme Editor) и от менюто Theme Files в дясната лента да изберете single.php.

След това поставете Вашия код и запазете файла с бутона Update File. WordPress ще Ви отговори със съобщението: File edited successfully.

Ако желаете да добавите CSS код, с който да персонализирате изгледа на секцията, може да добавите през Appearance » Customize този код в панела Additional CSS.

В примера ще използваме шаблона от WordPress темата по подразбиране Twenty Twenty-One, който се намира във файла template-parts/post/author-bio.php.

Премахваме всички коментари, изтриваме slug името twentytwentyone от кода като запазваме кавичките, и получаваме следния изчистен код:

<?php if ( get_the_author_meta( 'description' ) && post_type_supports( get_post_type(), 'author' ) ) : ?>
<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
   <?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>
   <div class="author-bio-content">
   <h2 class="author-title"><?php printf( esc_html__( 'By %s', '' ), get_the_author() ); ?></h2>
   <p class="author-description"> <?php the_author_meta( 'description' ); ?></p>
     <?php
      printf(
      '<a class="author-link" href="%1$s" rel="author"-->' . esc_html__( 'View all of %2$s\'s posts.', '' ) . '',
      esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
      get_the_author()
          );
     ?>;
   </div>
</div>
<?php endif; ?>

Поставяме този код във файла single.php:

преди функциите за зареждане на страничната лента (sidebar) и/или footer, в зависимост от структурата на темата:

get_sidebar();
get_footer();

Запазваме файла и добавяме следния код в Appearance » Customize » Additional CSS, за да направим малки корекции в изгледа на секцията:

.author-bio {
    margin: 30px 0;
    padding: 20px 50px;
    border: 1px solid #ccc;
}
.author-bio-content h2.author-title {
    margin: 12px 0;
}

Запазваме промените с натискане на бутона Publish в горния ляв ъгъл. Така изглежда секцията с информация за автора на десктоп резолюция:

Ако решите да следвате този начин на добавяне на секция с информация за автора, не забравяйте да добавите CSS код поне за две стандартни резолюции (таблет и смартфон), за да бъде новата секция напълно адаптивна. Без допълнителен код секцията с информация за автора изглежда така на смартфон (430 пиксела ширина):