Lägg till en författarinformation Box till ditt WordPress Theme

Har du flera författare som skriver artiklar i ditt WordPress-blogg? Om ja, skulle det vara en bra idé att lägga till en författarefält i din bloggtema istället för att lägga till författarens bylin manuellt i varje enskild artikel. WordPress tillåter så många anpassningar att du snabbt kan koda en enkel författarbox för bloggens tema.

Innan vi går vidare, låt oss ta en titt på några exempel:

1. Smashing Magazine Författare Box

Så här ser författarfältet ut i den populära designbloggen Smashing Magazine. Sidan av en artikel visar namnet på författaren, profilbilden, beskrivningen, bloggadressen och en länk till författarens Twitter-konto.

2. ProBlogDesign Författarboks

Författarboxen på Problogdesign ser väldigt imponerande ut. Författaren Gravatar och beskrivning visas i den vänstra kolumnen medan den högra kolumnen visar sociala bokmärken.

Skapa en författarboks för din bloggs tema

1. Först får alla författare att uppdatera sin författarprofil från "Profil-länken" som tillhandahålls inom administrationsområdet för WordPress. Författaren ska fylla i förnamn, efternamn och lägga till en anpassad bio i beskrivningsfältet. Det rekommenderas också att lägga till länken till författarens webbplats i motsvarande fält som visas nedan:

Dessa är de grundläggande parametrar som vi kommer att visa i författarens byline avsnitt. Vi lägger till de andra parametrarna senare (om det behövs.)

2. För att visa författarlådan, öppna din single.php- fil och skapa en unik HTML-div inom vilken författarfältet kommer att bifogas. Till exempel

Denna div är skapad så att vi kan lägga till CSS-regler och utforma avsnittet i enlighet därmed. Du kan placera den här koden där du vill att författaren byline ska visas.

3. Nu måste du bestämma vilka element som du vill visa i avsnittet för författare byline. Några av parametrarna och deras respektive koder anges nedan:

1. Författarens förnamn:

Om du bara vill visa författarens förnamn, använd

2. Författarens efternamn:

För att visa författarens efternamn, använd

3. Visa både förnamn och efternamn:

Det är lätt att kombinera båda ovanstående koder och visa författarens fullständiga namn. För att visa hela namnet, använd

4. Visa författarnamn med en länk till hans hemsida :

Du kan visa författarens fullständiga namn och länka samtidigt namnet till författarens hemsida. Använda sig av

5. Författare Beskrivning:

För att visa beskrivningen av författarens bio, använd

6. Visa författarens hemsida länk:

För att visa författarens webbplatsadress, använd

Alla ovanstående koder kan anpassas efter din stil. Du kan vidare bifoga ovanstående koder i HTML-taggar som visas nedan:

7. Författare Gravatar:

För att visa författarens Gravatar-användning

Numret "80" som används i ovanstående kod står för bildens storlek. Du kan anpassa det vidare vilket beror på hur stor eller hur liten du vill att avataren ska visas.

Jag tror att du får tanken på hur du anpassar koderna, vilket helt beror på hur du vill att sektionen ska se ut.

8. Författarens e-postadress:

För att visa författarens e-postadress, använd

9. Länk till Twitter-konto:

Det här är lite knepigt, eftersom WordPress inte har något fält för att visa webbadressen för Twitter-profil som standard. Det finns dock en smart lösning som kan användas för att visa vilken anpassad länk eller text som tillhandahålls av författaren.

Be författarna till din blogg att lägga till länken till deras Twitter-konto i fältet AIM under "Profiler" i WordPress-administrationsområdet.

Gå nu tillbaka till single.php-filen och sätt in

för att visa Twitter-profillänken. Återigen beror det helt på hur du anpassar utseendet och utseendet. Här är en exempelkod:

Stil Författarens avsnitt använder CSS

När det kodande jobbet är slut är det dags att försköna sektionen och justera objekten ordentligt. Här är ett exempel css-kod

 // innehåller gravatar // resten av koden // författarboxen slutar

Ovanstående struktur kan illustreras med följande diagram

I ovanstående CSS-struktur skapar vi tre div-taggar. Den yttre div-taggen innehåller de två inre div-taggarna som heter "vänster" respektive "höger". "Vänster" div kommer att innehålla författarens gravatar medan rätt div kommer att innehålla författarens namn, bio och Twitter profil länk. Vi kommer att justera "vänster" div till vänster och "right" div till höger. Här är hela koden och CSS som du behöver använda

Koda

Inkludera följande kod i din single.php-fil där du vill att rubriken för författarinformation ska visas:

Skriven av

CSS

Inkludera följande kod i CSS-stilarket

 .authorbox {width: 590px; height: 140px; background: #CCC; font-family: verdana; fontstorlek: 13px; bakgrundsfärg: #FAFAFA; border: 1px solid # F0F0F0;} .left {float: left; bredd: 100px; höjd: 100px; marginal: 25px;} .right {float: left; margin-top: 25px; bredd: 425px;}

Obs! Det är lämpligt att ändra klassnamnen genom att jämföra med befintliga klasser av ditt tema för att undvika konflikter.

Och här är resultatet av ovanstående koder