Добавете информационна кутия автор към вашата WordPress Тема

Имате ли няколко автори, които пишат статии в блога ви в WordPress? Ако отговорът е "да", тогава би било добра идея да добавите авторска кутия в темата на вашия блог, а не да добавите ръчно ръчния автор във всяка отделна статия. WordPress позволява толкова много персонализации, че можете бързо да кодирате обикновена авторска кутия за темата на вашия блог.

Преди да продължим, нека да разгледаме някои примери:

1. Списание за смачкване Автор

Така изглежда авторската кутия в популярния дизайн блог Smashing Magazine. В библиотеката на една статия се показват името на автора, изображение на потребителския профил, описание, URL адрес на блог и връзка към авторския профил в Twitter.

2. ProBlogDesign Author Box

Авторската кутия в Problogdesign изглежда много впечатляваща. Авторът "Граватор" и описание се показват в лявата колона, а в дясната колона се показват бутони за социални маркери.

Създайте авторка за темата на вашия блог

1. Първо, кажете на всички автори да актуализират авторския си профил от връзката "Профил", предоставена в зоната за управление на WordPress. Авторът трябва да попълните първото име, фамилното име и да добави персонализирано био в полето за описание. Също така се препоръчва да добавите линка на уебсайта на автора в съответното поле, както е показано по-долу:

Това са основните параметри, които ще покажем в секцията за автора. Ще добавим и останалите параметри по-късно (ако е необходимо.)

2. За да покажете полето за автор, отворете вашия single.php файл и създайте уникален HTML div, в който ще бъде приложена кутията за автора. Например

Това div е създадено, за да можем да добавим правилата за CSS и да подредим съответната секция. Можете да поставите този код, където искате да се показва автора.

3. Сега трябва да решите какви са елементите, които искате да покажете в секцията за автора по byline. Някои от параметрите и съответните им кодове са дадени по-долу:

1. Името на автора:

Ако искате да изведете само името на автора, използвайте

2. Фамилно име на автора:

За да видите последното име на автора, използвайте

3. Покажете както първото име, така и фамилията:

Лесно е да комбинирате двата горни кода и да видите пълното име на автора. За да се покаже пълното име, използвайте

4. Показване на името на автора с връзка към неговия уебсайт :

Можете да покажете пълното име на автора и в същото време да свържете името с уебсайта на автора. употреба

5. Автор Описание:

За да покажете описанието на автора био, използвайте

6. Показване на връзката към уебсайта на автора:

За да покажете URL адреса на уеб сайта на автора, използвайте

Всички горепосочени кодове могат да бъдат персонализирани според вашия стил. Освен това можете да прикрепите горните кодове в HTML таговете, както е показано по-долу:

7. Автор Gravatar:

Показване на употребата на автора на Gravatar

Номерът "80", използван в горния код, означава размера на изображението. Можете да го персонализирате допълнително, което зависи от това колко голям или колко малък искате аватарът да се показва.

Мисля, че получавате идеята как да персонализирате кодовете, което изцяло зависи от това как искате да изглежда секцията.

8. Имейл адрес на автора:

За да видите имейл адреса на автора, използвайте

9. Връзка към профила в Twitter:

Това е малко трудно, защото WordPress няма поле за показване на URL адреса на профила в Twitter по подразбиране. Има обаче интелигентно решение, което може да се използва за показване на персонализирана връзка или текст, предоставени от автора.

Помолете авторите на блога ви да добавят линка към своя Twitter акаунт в полето AIM под "Профили" в областта на администрацията на WordPress.

Сега се върнете към single.php файл и поставете

за показване на връзката в потребителския профил в Twitter. Отново зависи изцяло от това как персонализирате вида и изхода. Ето примерният код:

Стилът на автора секция използва CSS

След приключването на кодиращата задача, е време да разкрасите секцията и да подредите елементите правилно. Ето пример за CSS код

 // съдържа гравитатора // останалата част от кода // полето на автора завършва

Горната структура може да бъде илюстрирана със следната диаграма

В горната структура на CSS създаваме три div маркера. Външният маркер div ще съдържа двата вътрешни div tag, които са наречени съответно "ляво" и "дясно". "Ляво" div ще съдържа автора gravatar, а дясната div ще съдържа име на автора, био и Twitter профил. Ние ще приведем "лявата" div към лявата и "дясната" div на дясно. Ето целия код и CSS, които трябва да използвате

код

Включете следния код във вашия single.php файл, където искате да се появи секцията с информация за автора:

Написано от

CSS

Включете следния код в стиловата таблица на CSS

 .authorbox {width: 590px; height: 140px; background: #CCC; font-family: verdana; шрифт: 13px; background-color: #FAFAFA; граница: 1px solid # F0F0F0; ширина: 100px; височина: 100px; margin: 25px;} .right {float: left; margin-top: 25px; width: 425px;}

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

И тук е изходът от горните кодове