Tilføj en Forfatter Information Box til dit WordPress Theme

Har du flere forfattere, der skriver artikler i din WordPress-blog? Hvis ja, så ville det være en god ide at tilføje en forfatterboks i din blogs tema i stedet for at tilføje forfatterbogen manuelt i hver enkelt artikel. WordPress tillader så mange tilpasninger, at du hurtigt kan kode en simpel forfatterboks til din blogs tema.

Før vi går videre, lad os se på nogle eksempler:

1. Smashing Magazine Author Box

Sådan ser forfatterboksen ud i den populære designblog Smashing Magazine. Overskriften til en artikel viser navnet på forfatteren, profilbillede, beskrivelse, blog-URL og et link til forfatterens Twitter-konto.

2. ProBlogDesign Forfatterboks

Forfatterboksen på Problogdesign ser meget imponerende ud. Forfatteren Gravatar og beskrivelse vises i den venstre kolonne, mens den højre kolonne viser sociale bogmærker.

Opret en forfatterboks til din blogs tema

1. Først får alle forfatterne til at opdatere deres forfatterprofil fra "Profillink", der leveres i WordPress administrationsområdet. Forfatteren skal udfylde fornavnet, efternavnet og tilføje et brugerdefineret bio i beskrivelsesfeltet. Det anbefales også at tilføje linket til Forfatterens hjemmeside i det tilsvarende felt som vist nedenfor:

Dette er de grundlæggende parametre, som vi vil vise i forfatteren byline sektionen. Vi vil tilføje de andre parametre senere (hvis det er nødvendigt).

2. For at vise forfatterboksen skal du åbne din single.php- fil og oprette en unik HTML-div, inden for hvilken forfatterboksen vedlægges. For eksempel

Denne div er oprettet, så vi kan tilføje CSS-regler og style sektionen i overensstemmelse hermed. Du kan placere denne kode, hvor du vil have forfatteren byline at vise.

3. Nu skal du bestemme, hvad er de elementer, som du vil vise i forfatterafsnittet. Nogle af parametrene og deres respektive koder er angivet nedenfor:

1. Forfatterens fornavn:

Hvis du kun vil vise forfatterens fornavn, skal du bruge

2. Forfatterens efternavn:

For at vise forfatterens efternavn skal du bruge

3. Vis både fornavnet og efternavnet:

Det er nemt at kombinere begge ovennævnte koder og vise forfatterens fulde navn. For at vise det fulde navn skal du bruge

4. Vis forfatternavn med et link til hans hjemmeside :

Du kan vise forfatterens fulde navn og samtidig linke navnet til forfatterens hjemmeside. Brug

5. Forfatter Beskrivelse:

For at vise beskrivelsen af forfatteren bio, brug

6. Skærmforfatterens hjemmeside-link:

For at vise forfatterens webadresse, brug

Alle ovenstående koder kan tilpasses efter din stil. Du kan yderligere vedhæfte ovennævnte koder i HTML-tags som vist nedenfor:

7. Forfatter Gravatar:

For at vise forfatterens Gravatar brug

Nummeret "80", der anvendes i ovenstående kode, står for billedets størrelse. Du kan tilpasse det yderligere, hvilket afhænger af hvor stor eller hvor lille du vil have avataren til at blive vist.

Jeg tror, du får ideen om at tilpasse koderne, hvilket helt afhænger af, hvordan du vil have sektionen til at ligne.

8. Forfatterens email adresse:

For at vise forfatterens e-mail-adresse skal du bruge

9. Link til Twitter-konto:

Denne er lidt vanskelig, fordi WordPress ikke har noget felt til at vise URL-adressen til Twitter-profil som standard. Der er dog en smart løsning, som kan bruges til at vise et brugerdefineret link eller en tekst som forfatteren har angivet.

Bed ophavsmændene til din blog for at tilføje linket til deres Twitter-konto i AIM-feltet under "Profiler" i WordPress-administrationsområdet.

Gå nu tilbage til single.php-filen og indsæt

for at vise Twitter profil linket. Igen afhænger det helt af, hvordan du tilpasser udseende og udgang. Her er et eksempelkode:

Style Forfatterafsnittet bruger CSS

Når det kodende job er overstået, er det tid til at forskønne sektionen og justere emnerne korrekt. Her er et eksempel css kode

 // indeholder gravatar // resten af koden // forfatteren slutter

Ovennævnte struktur kan illustreres ved hjælp af følgende diagram

I ovenstående CSS struktur opretter vi tre div-tags. Den yderste div-tag vil indeholde de to indre div-tags, der er navngivet som henholdsvis "venstre" og "højre". "Venstre" div vil indeholde forfatterens gravatar, mens den rigtige div vil indeholde forfatterens navn, bio og Twitter profil link. Vi vil justere "venstre" div til venstre og "højre" div til højre. Her er hele koden og CSS, som du skal bruge

Kode

Medtag følgende kode i din single.php-fil, hvor du vil have sektionen for forfatteroplysninger vist:

Skrevet af

CSS

Inkluder følgende kode i CSS stilark

 .authorbox {width: 590px; height: 140px; background: #CCC; font-family: verdana; fontstørrelse: 13px; baggrundsfarve: #FAFAFA; border: 1px solid # F0F0F0;} .left {float: left; bredde: 100px; højde: 100px; margin: 25px;} .right {float: left; margin-top: 25px; bredde: 425px;}

Bemærk: Det er tilrådeligt at ændre klassenavne ved at sammenligne med eksisterende klasser af dit tema for at undgå konflikter.

Og her er udgangen af ovennævnte koder