Hur man visar en författarlista med foton pÄ WordPress

Hur man visar en författarlista med foton pÄ WordPress

Om du driver en WordPress-blogg med flera författare och vill markera dina författare genom att visa en lista över författare med sina foton, Àr du pÄ rÀtt plats. Tidigare visade vi dig hur du visar en författarlista i WordPress, men den hÀr metoden Àr mycket kodintensiv. Sedan visade vi dig hur du skapar en enkel personallista i WordPress, men det krÀver att du skapar författarprofiler i ett separat avsnitt. I den hÀr artikeln kommer vi att beskriva hur man visar en författarlista med bilder pÄ WordPress utan att skriva en enda kodrad.

Videohandledning

Prenumerera pÄ WPBeginner

Om du inte gillar videon eller behöver fler instruktioner, fortsÀtt lÀsa.

Det första du behöver göra Àr att installera och aktivera Author Avatars plugin. Efter att ha aktiverat plugin-programmet fÄr du en widget och tvÄ kortkoder som du kan anvÀnda för att visa författarlistan med sina foton.

Visa författarlista med foton med hjÀlp av en widget

Om du vill visa författarlistan i sidofÀltet eller i ett annat widgetomrÄde mÄste du anvÀnda widgetmetoden. GÄ till Utseende »Widgets och dra och slÀpp AuthorAvatars-widgeten till sidofÀltet. Denna widget har olika alternativ som lÄter dig anpassa din lista pÄ det sÀtt du vill.

FrÄn widgetens konfigurationsskÀrm kan du stÀlla in bildstorleken för författarens avatar, vÀlja vilken författarinformation som ska visas, stÀlla in ett minimum antal inlÀgg som krÀvs, vÀlja anvÀndarroller och mer.

Visa författarlista med foton med kortkod

Plugin kommer med tvÄ kortkoder. För att lÀgga till en författarlista med foton i ett inlÀgg eller en sida kan du anvÀnda kortkoden [authoravatars]. Att bara lÀgga till kortkoden ensam visar dock bara författarens avatarer. Den hÀr kortkoden har andra parametrar som du kan lÀgga till för att visa ytterligare information. Till exempel:

[authoravatars avatar_size=44 link_to_authorpage=true show_name=true show_biography=true]

Du kan ocksÄ Àndra utseendet pÄ din lista genom att ÄsidosÀtta stilarna i temat style.css-fil. Vi lade till den hÀr CSS i vÄr demo för att anpassa skÀrmen:


.shortcode-author-avatars .avatar { 
float:left;
text-align:left;
padding:3px;
margin:3px;
border: 1px solid #EEE;
}
.shortcode-author-avatars div.author-list .user {
text-align: left;
}

SÄ hÀr sÄg författarens lista ut efter att ha anvÀnt den anpassade CSS ovan:

Författarlista med foton pÄ WordPress

Visa oregistrerad författare med foto pÄ WordPress

Detta plugin lÄter dig ocksÄ visa oregistrerade anvÀndare genom att anvÀnda deras e-postadress. Detta Àr sÀrskilt anvÀndbart för gÀstförfattare som kanske inte har ett anvÀndarkonto pÄ din webbplats. Du kan ocksÄ anvÀnda den hÀr metoden för att markera alla anvÀndare pÄ din webbplats genom att anvÀnda deras anvÀndar-id eller e-postadress. Kortkoden för att visa enanvÀndaravatar Àr [show_avatar]. Det har ocksÄ parametrar som kan anvÀndas sÄ hÀr:

[show_avatar email=mail@address.com avatar_size=25 align=left]

Du kan ocksÄ Àndra utseendet pÄ avataren genom att ÄsidosÀtta plugins stilark i temat style.css-fil.


.shortcode-show-avatar {
  padding: 3px;
  border: 2px solid #EEE;
}

TillÄt författare att ladda upp profilfoto i WordPress

Som standard anvÀnder detta plugin gravatar, men i vissa fall kanske dina författare inte vill visa sin gravatar. I sÄ fall kan du lÄta dem ladda upp sin egen profilbild pÄ WordPress.

Det första du behöver göra Àr att installera och aktivera Simple Local Avatars plugin. Efter aktivering lÀgger plugin till ett Avatar-uppladdningsavsnitt pÄ anvÀndarprofilsidan. AnvÀndare kan gÄ till AnvÀndare »Din profil sida för att ladda upp sitt eget foto för att anvÀndas som avatar pÄ din webbplats.

LÀgga till anvÀndarprofilfoto som lokal avatar pÄ WordPress

Om författaren har en anpassad avatar, sÄ visar författaravatarer helt enkelt den anpassade bilden snarare Àn att visa gravataren.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till en författarlista med foton pÄ din WordPress-webbplats. Om du har nÄgra frÄgor och feedback, vÀnligen lÀmna en kommentar nedan. Glöm inte att följa oss pÄ Twitter.