wordpress-development-tutorial

WordPress Development Tutorial

Diese Seite soll dich dabei unterstützen, WordPress Development zu lernen. Du kannst entweder direkt bestimmte Themen, die dich interessieren, aufrufen oder du kannst die Seite einfach von oben nach unten durcharbeiten. Unser WordPress Development Tutorial wird laufend erweitert, hat aber nicht den Anspruch, vollständig zu sein. Die Code-Snippets sind Beispiele, mit denen die einzelnen Themen besser dargestellt werden sollen.

WordPress Development Tutorial Inhalt:

Um dem User am Ende der Seite ältere und jüngere Posts anzuzeigen benötigt man die Funktionen previous_post_link() und next_post_link().

Diese sollten nicht verwechselt werden mit previous_posts_link() und next_posts_link(). Die Singular-Version nutzt man für die Anzeige älterer/jüngerer Posts für einen Einzelnen Post. Die Plural-Version ist für Seiten mit mehreren Posts vorgesehen.

Beispiel-Snippet:

<!-- Post Navigation -->
    <div class="post-navigation">
        <div class="col">
            <?php previous_post_link(); ?>
        </div>
        <div class="col">
            <?php next_post_link(); ?>
        </div>
    </div>
<!-- .post-navigation end -->

WordPress Development Tutorial: Kommentare einbinden

  1. Template erstellen
  2. In single.php einbinden
  3. Kommentar Formular in WordPress anzeigen
  4. Kommentare anzeigen

1. Template erstellen

Wenn man Kommentare in WordPress einbinden möchte, bietet es sich an, im Theme-Ordner ein Template dafür zu erstellen. Dafür erstellen wir die Datei ‘comments.php’.

2. In single.php einbinden

Jetzt können wir die Kommentare in unsere single.php einbinden. Dabei arbeiten wir mit einem if-statement, um 1. zu überprüfen, ob die Kommentarfunktion in WordPress aktiviert ist und 2. falls es bereits Kommentare gibt, wollen wir diese anzeigen.

In unserem Beispiel verwenden wir dafür die WordPress-Funktionen comments_open() sowie get_comments_number():

<?php
  if( comments_open() || get_comments_number() ){
    comments_template();
  }
?>

3. Kommentar Formular in WordPress anzeigen

Um im Kommentar-Template, das Kommentar-Formular zu anzuzeigen, verwenden wir die Funktion comment_form(). Wir können dabei mit einer Reihe an Parametern arbeiten, um die Kommentare anzupassen. In unserem Beispiel packen wir das Ganze in einen Array, in dem wir angeben, welche Felder wir anzeigen wollen und welches Markup diese bekommen sollen.

<?php comment_form( [ 
  'comment_field'   => '<div> 
      <label>Comment</label>
      <textarea name="comment" cols="60" rows="7"></textarea>
    </div>', 
      'fields'     => [ 
      'author'   => 
          '<div class="comment-form-name">
             <label>Name</label> 
             <input type="text" name="author" />
           </div>'
      'email'   =>  
          '<div class="comment-form-email">
             <label>E-Mail</label>
             <input type="text" name="email" />
           </div>'
       ]
?>

Wichtig: WordPress erwartet, dass wir immer die Tags mit den Feldnamen verwenden.

Wir sollten auch überprüfen, ob der aktuelle Post passwort-geschützt ist. Dafür können wir an den Anfang des Kommentar-Templates folgenden Code einfügen:

<?php 
    if( post_password_required() ){
        return;
    }
?>

4. Kommentare anzeigen

Jetzt wollen wir die User-Kommentar natürlich auch in WP anzeigen. Dafür erstellen wir in der comments.php einen ordered list und für einen foreach-Loop darin ein. Innerhalb des foreach-Loops erstellen wir unsere li-Tags, in denen wir die Kommentare angzeigen werden.

Im Loop greifen wir auf eine globale Variable namens ‘$comments’ zurück, die WordPress automatisch erstellt und in der sich die Post-Kommentare befinden. Innerhalb der li-Tags greifen wir auf die WordPress-Funktionen get_avatar()‘, comment_author(), comment_date(), comment_text() und the_comments_pagination();

Die get_avatar() Funktion benötigt in diesem Fall die $comment Variabel, weil sie sich in einem Loop innerhalb eines Loops befindet. Die anderen Funktionen benötigen keine Variable.

<ol class="comments-list">
<?php
  foreach( $comments as $comment ) {
    ?>
    <li class="comment">
      <div class="comment-avatar">
        <?php echo get_avatar( $comment, 60, '', ''); ?>
      </div>
      <div class="comment-author">
        <?php comment_author(); ?>
      </div>
      <div class="comment-date">
        <?php comment_date(); ?>
      </div>
        <?php comment_text(); ?>
     </li>
     <?php
  }
  the_comments_pagination();
?>
</ol>

Will man das Kommentar-Template nur anzeigen, wenn auch wirklich schon Kommentare vorhanden sind, kann man dafür ein if-statement und die Funkion have_comments() nutzen:

<?php
  if( have_comments() ) {
    ?>
    <ol class="comments-list">
      [...]
    </ol>  
    <?php
  }
?>

 

WordPress Development Tutorial: WP Autoren Informationen dynamisch einfügen

WordPress Autoren-URL und -Name

Die Informationen über den Autor eines Blogbeitrags kann man relativ einfach in WordPress einbinden. Den Namen des Autoren fügen wir über the_author() ein. Für die Autoren-URL können wir auf get_author_posts_url() in Verbindung mit get_the_author_meta() zurückgreifen. Innerhalb der get_the_author_meta() Funktion verwenden wir den Parameter ID, um den richtigen Autoren auszuwählen. Das Ganze kommt dann in get_author_posts_url() hinein. 

Autoren-Bild

Das Autorenbild können wir mithilfe der Funktion get_avatar() in WordPress einfügen. Die Funktion akzeptiert einige Parameter: Für die ID des Autors arebiten wir mit einer Variable, die man sich anlegen kann. Der zweite Parameter ist die Größe des Bildes, dann kann man eine URL zu einem Standard-Avatar angeben. Lässt man das einfach leer, verwendet WordPress sein eigenes Standard-Bild. Danach kann man noch ein Alt-Attribut angeben, was wir hier aber nicht machen. Wir schreiben daher einfach ‘false’. 

Autoren-Beschreibung

Für die Autoren-Beschreibung nutzen wir wieder get_the_author_meta() und geben als Parameter ‘description’ an. Die Funktion rufen wir innerhalb einer weiteren Funktion namens nl2br auf. Das ist eine Standard-PHP Funktion, mit der automatisch Line-Breaks eingebunden werden, um Textblöcke übersichtlicher zu machen. 

<div class="author">
    Verfasst von
    <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ; ?>"><?php the_author(); ?> </a>
 </div>
<div class="author-image">
    <?php echo get_avatar( $author_ID, 70, '', false ) ?>
</div>
<?php echo nl2br(get_the_author_meta( 'description' ) ); ?>
 </div>

 

dgtworx.com