So fügen Sie eine Autorenbox im GeneratePress-Design hinzu. [2021]

Wissen Sie, dass Sie eine Autorenbox im Generatepress-Design hinzufügen können, ohne ein zusätzliches Plugin zu installieren?

Um Bloggern zu helfen, habe ich eine detaillierte Anleitung zum Hinzufügen einer Autorenbox mit der Element-Funktion des Generatepress-Themas vorbereitet.

Ich weiß, dass viele von Ihnen fragen, warum Sie nicht ein Autorenbox-Plugin in WordPress hinzufügen und die Arbeit einfacher machen können. Weil die Installation eines zusätzlichen Plugins die Geschwindigkeit Ihrer Website beeinträchtigen kann. Es ist besser, benutzerdefinierten HTML- und CSS-Code zu verwenden, um das Autorenfeld mit der nativen Generatepress-Elementfunktion zu generieren.

Hinweis: Sie können diesen Trick nur anwenden, wenn Sie das Generatepress-Premium-Plugin auf Ihrer WordPress-Website installiert haben.

Warum brauchen Sie ein Autorenfeld auf Ihrer Website?

Das Hinzufügen einer Autorenbox am Ende des Blogbeitrags hilft Ihrem Leser und Ihrer Suchmaschine wie Google, Bing, den Mann hinter dem Artikel zu erkennen.

Es baut eine gute Beziehung und Vertrauen zwischen dem Leser und dem Autor auf und hilft auch, Autorität in der Internet-Community aufzubauen.

Kennen Sie den EAT-Algorithmus ? Um bei Google einen guten Rang einzunehmen, müssen Sie eine Marke aufbauen, indem Sie deren Fachwissen, Autorität und Vertrauenswürdigkeit aufbauen – und genau dafür steht EAT. Author Box ist der erste Schritt, um dies zu erreichen.

Schritte zum Hinzufügen eines Autorenfelds im GeneratePress-Design.

Bevor Sie die Autorenbox in Ihrem Generatepress-Theme hinzufügen, müssen Sie einige grundlegende Einstellungen in WordPress vornehmen.

1. Fügen Sie ein Profilfoto und eine Autorenbeschreibung hinzu

Gehen Sie zum WordPress-Dashboard und klicken Sie auf den Abschnitt Benutzer . Klicken Sie nun auf die Schaltfläche Bearbeiten direkt unter dem Benutzernamen.

Scrollen Sie nun nach unten und Sie sehen eine Option namens „ Über mich“. Schreiben Sie hier in die „ Biografischen Informationen “ Ihre Autorenbeschreibung und setzen Sie Ihr Profilbild direkt darunter.

Hinweis: Sie können mit einem einfachen Trick auch einen Link zu Ihrer „Über uns“-Seite im Feld „Autor“ hinzufügen. Fügen Sie in den biografischen Informationen den Link in diesem Format ein.

<a href="https://key2blogging.co/about-us/">Über-uns-Seite</a>

Auf diese Weise, Sie können ganz einfach Ankertext mit einem Link im Feld „Autor“ der hinzufügen GeneratePress-Thema.

Wenn Sie den Gravatar noch nicht hinzugefügt haben, können Sie dies tun, indem Sie auf den untenstehenden Link klicken, wie hier gezeigt.

Es leitet Sie auf die Gravatar-Website weiter, wo Sie ein Konto mit Ihrer in WordPress genannten E-Mail-Adresse erstellen und dann dort Ihr Profilbild hochladen müssen. Das Profilfoto wird automatisch in Ihr WordPress-Konto geladen.

2. Elementmodul aktivieren

Um das Element-Modul zu aktivieren, gehen Sie zu Aussehen > GeneratePress > Elemente > Aktivieren

Wenn Sie das bereits getan haben, können Sie mit dem dritten Schritt fortfahren.

3. Erstellen Sie ein neues Hook-Element

Klicken Sie nun auf den Abschnitt Aussehen und Sie sehen eine Option namens „ Element “, klicken Sie darauf. Klicken Sie nun auf „ Neues Element hinzufügen “ und wählen Sie Hook aus.

4. Legen Sie den Titel als „Author Box“ fest und fügen Sie den HTML-Code ein

Sie müssen den Titel als Autorenfeld festlegen und den folgenden HTML-Code in den Code-Editor einfügen.

Kopieren Sie den folgenden Code

 <div class="author-box"> <div class="avatar"> <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?> </div> <div class="author-info"> <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span> </h5> <div class="author-summary"> <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div> <div class="author-links"> <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more"></a> </div> </div> </div>

5. Hook-Einstellung einrichten

Nach dem Einfügen des Codes müssen Sie die Hook-Einstellung einrichten. Wählen Sie in der Hook-Option „ Generate After Content “ und klicken Sie dann auf „ Execute PHP “ und setzen Sie die Priorität auf „ 20 “.

6. Anzeigeregel einrichten

Klicken Sie nun rechts neben den Einstellungen auf die Anzeigeregel. Wählen Sie nun unter Standort „ All singular “ und auf der Registerkarte „Exclude“ „ Frontpage “ aus.

Jetzt haben Sie die Hook-Einstellungen abgeschlossen. Klicken Sie also auf die Schaltfläche „ Veröffentlichen “.

7. CSS-Code hinzufügen

Jetzt müssen Sie Ihre Autorenbox mit CSS-Code entwerfen. Gehen Sie dazu zu Aussehen >> Anpassen >> Zusätzliches CSS , fügen Sie den folgenden Code ein und klicken Sie auf die Schaltfläche „Veröffentlichen“.

Kopieren Sie den CSS-Code:

 .author-box { padding: 3%; padding-bottom: 10px; margin-top: 30px; font-size: 0.9em; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .author-box .avatar { width: 450px; height: auto; border-radius: 100%; margin-right: 30px; } h5.author-title { margin-bottom: 0.1em; font-weight: 800; } .author-description { line-height: 1.6em } .author-links a { margin-top: -1.5em; font-size: 2em; line-height: 2em; float: left; } @media (max-width: 768px) { .author-box { padding: 20px; padding-bottom: 25px; margin-top: 60px; flex-direction: column; text-align: center; } .author-box .avatar { margin-right: 0; width: 100%; margin-top: -25px; } .author-box .avatar img { max-width: 100px; } .author-links a { float: none; align-self: center; } .author-description { margin-bottom: -0.1em; } }

Herzlichen Glückwunsch , Sie haben das Feld „Autor“ erfolgreich in Ihrem Generatepress-Theme ohne Plugin hinzugefügt.

Videoanleitung:

Hinweis : Wenn Sie die kostenlose Version des Generatepress-Themes verwenden, müssen Sie die Autorenbox mithilfe eines Plugins hinzufügen.

Fazit

Jetzt haben wir den Schritt-für-Schritt-Prozess zum Hinzufügen des Autorenfelds im Generatepress-Design in WordPress behandelt. Wenn Sie Zweifel haben, fragen Sie mich im Kommentarbereich oder verbinden Sie mich auf Twitter .

Wenn Ihnen dieser Leitfaden gefällt, teilen Sie ihn mit Ihrer Blogging-Community und schätzen Sie die Bemühungen. Vielen Dank.

Lesen Sie auch : Top 10 nützlicher Chrome-Erweiterungen für Blogger