Haben Sie mehrere Autoren, die Artikel in Ihrem WordPress Blog schreiben? Wenn ja, wäre es eine gute Idee, ein Autorenfeld in das Theme Ihres Blogs einzufügen, anstatt die Autoren-Byline in jedem einzelnen Artikel manuell hinzuzufügen. WordPress erlaubt so viele Anpassungen, dass Sie schnell ein einfaches Autorenfeld für das Thema Ihres Blogs codieren können.

Bevor wir weiter gehen, schauen wir uns einige Beispiele an:

1. Smashing Magazin Autor Box

So sieht die Autorenbox im beliebten Design-Blog Smashing Magazine aus. Die Beitragszeile eines Artikels zeigt den Namen des Autors, Profilbild, Beschreibung, Blog-URL und einen Link zum Twitter-Account des Autors.

2. ProBlogDesign Autorenbox

Die Autorenbox bei Problogdesign sieht sehr beeindruckend aus. Der Autor Gravatar und Beschreibung wird in der linken Spalte angezeigt, während die rechte Spalte Social Bookmarking-Schaltflächen zeigt.

Erstellen Sie eine Autorenbox für das Thema Ihres Blogs

1. Lassen Sie zuerst alle Autoren ihr Autorenprofil über den "Profillink" im WordPress-Administrationsbereich aktualisieren. Der Autor sollte den Vornamen, Nachnamen und eine benutzerdefinierte Bio im Beschreibungsfeld hinzufügen. Es wird auch empfohlen, den Link der Website des Autors in das entsprechende Feld wie folgt einzufügen:

Dies sind die grundlegenden Parameter, die wir im Abschnitt "Autoren-Byline" anzeigen. Wir werden später die anderen Parameter hinzufügen (falls erforderlich).

2. Öffnen Sie Ihre single.php- Datei und erstellen Sie ein eindeutiges HTML-Div, in das die Autorenbox eingefügt wird. Beispielsweise

Dieses div wird erstellt, damit wir CSS-Regeln hinzufügen und den Abschnitt entsprechend formatieren können. Sie können diesen Code an der Stelle platzieren, an der die Verfasser-Byline angezeigt werden soll.
3. Nun müssen Sie entscheiden, welche Elemente im Author-Byline-Bereich angezeigt werden sollen. Einige der Parameter und ihre jeweiligen Codes sind unten angegeben:
1. Vorname des Autors:
Wenn Sie nur den Vornamen des Autors anzeigen möchten, verwenden Sie
2. Name des Autors:
Um den Nachnamen des Autors anzuzeigen, verwenden Sie
3. Zeigen Sie sowohl den Vor- als auch den Nachnamen an:
Es ist einfach, die obigen Codes zu kombinieren und den vollständigen Namen des Autors anzuzeigen. Um den vollständigen Namen anzuzeigen, verwenden Sie
4. Autorenname mit einem Link zu seiner Website anzeigen :
Sie können den vollständigen Namen des Autors anzeigen und gleichzeitig den Namen mit der Website des Autors verknüpfen. Benutzen
5. Autor Beschreibung:
Um die Beschreibung des Autors bio anzuzeigen, verwenden Sie
6. Link zum Website-Link des Autors anzeigen:
Um die Website-URL des Autors anzuzeigen, verwenden Sie
Alle oben genannten Codes können an Ihren Stil angepasst werden. Sie können die oben genannten Codes in HTML-Tags wie folgt einschließen:
7. Autor Gravatar:
Um den Gravatar-Gebrauch des Autors anzuzeigen
Die im obigen Code verwendete Zahl "80" steht für die Größe des Bildes. Sie können es weiter anpassen, je nachdem, wie groß oder wie klein der Avatar angezeigt werden soll.
Ich denke, Sie bekommen die Idee, wie Sie die Codes anpassen können, was ganz davon abhängt, wie Sie die Sektion aussehen lassen wollen.
8. E-Mail-Adresse des Autors:
Um die E-Mail-Adresse des Autors anzuzeigen, verwenden Sie
9. Link zum Twitter-Konto:
Dieser ist etwas knifflig, da WordPress standardmäßig kein Feld zur Anzeige der URL von Twitter-Profil hat. Es gibt jedoch eine intelligente Problemumgehung, die verwendet werden kann, um einen benutzerdefinierten Link oder Text wie vom Autor bereitgestellt anzuzeigen.
Bitten Sie die Autoren Ihres Blogs, den Link ihres Twitter-Kontos im AIM-Feld unter "Profile" im WordPress-Administrationsbereich hinzuzufügen.
Gehe nun zurück zur single.php Datei und füge sie ein
um den Twitter-Profillink anzuzeigen. Auch hier kommt es darauf an, wie Sie das Aussehen und die Ausgabe anpassen. Hier ist ein Beispielcode:
Style Die Author Section mit CSS 
Sobald der Codierjob beendet ist, ist es Zeit, den Abschnitt zu verschönern und die Elemente richtig auszurichten. Hier ist ein Beispiel css-Code
 // enthält den Gravatar // Rest des Codes // Die Autorenbox endet 
Die obige Struktur kann durch das folgende Diagramm veranschaulicht werden
In der obigen CSS-Struktur erstellen wir drei div-Tags. Das äußere div-Tag enthält die zwei inneren div-Tags, die als "links" bzw. "rechts" bezeichnet werden. Das "linke" div enthält den Autor gravatar, während das rechte div den Namen des Autors, bio und den Twitter-Profillink enthält. Wir werden das "linke" Div nach links und das "rechte" Div nach rechts ausrichten. Hier ist der gesamte Code und CSS, die Sie verwenden müssen
Code
Fügen Sie den folgenden Code in Ihre single.php-Datei ein, in der der Abschnitt mit den Autoreninformationen angezeigt werden soll:
Geschrieben von

CSS
Fügen Sie den folgenden Code in das CSS-Stylesheet ein
 .authorbox {width: 590px; height: 140px; hintergrund: #CCC; font-familie: verdana; font-size: 13px; hintergrundfarbe: #FAFAFA; border: 1px einfarbig # F0F0F0;} .left {float: left; Breite: 100px; Höhe: 100px; Rand: 25px;} .right {float: links; Rand oben: 25px; Breite: 425px;} 
Hinweis: Es empfiehlt sich, die Klassennamen zu ändern, indem Sie sie mit vorhandenen Klassen Ihres Themas vergleichen, um Konflikte zu vermeiden.
Und hier ist die Ausgabe der obigen Codes
Damit ist das Tutorial abgeschlossen. Haben Sie in Ihrem WordPress Theme einen Autor Info Bereich erstellt? Lassen Sie uns Ihre Gedanken und Ideen im Kommentarbereich hören.