Beiträge

WordPress Timeline Tutorial

WordPress Timeline
Die Blogübersicht in einer Timeline darstellen

Worum geht es in diesem Tutorial und für wen ist es?
In diesem WordPress Timeline Tutorial zeigen wir euch, wie ihr aus einem HTML/CSS Snippet eine automatisierte Funktion für WordPress macht.
Ihr solltet hierfür Vorkenntnisse in HTML, CSS und PHP haben, wovon wir aber ausgehen, da dieses Tutorial wahrscheinlich
nur für Leute interessant ist, die ihr eigenes Theme schreiben wollen. Des Weiteren basiert der hier gezeigte Code auf dem Framework
Bootstrap, euer Theme solltet ihr also mit Bootstrap entwickelt haben, um dieses WordPress Tutorial erfolgreich absolvieren zu können.

Wie fangen wir also an?

Zuerst brauchen wir die Datei, die in unserem Theme verantwortlich für die Blog-Übersicht ist.
Dies ist die “index.php”, welche ohne jegliche Inhalte ersteinmal so aussehen sollte:

1
2
3
4
<?php get_header();?>
<body <?php body_class($class);?>>
<?php $permalink=get_permalink($id,$leavename);?>
<?php get_footer();?>

Die 4 Code-Zeilen schnell erklärt:
Zeile 1: Wir includen unsere “header.php” in die Seite.
Zeile 2: Wir geben unserem Body-Tag eine Klasse.
Zeile 3: Wir holen uns unseren Permalink
Zeile 4: Wir includen unsere “footer.php” in die Seite.

Das Snippet

Wo bekomme ich eigentlich Snippets her?
Hierfür gibt es sehr viele Anlaufstellen im Internet. Google spuckt tausende von Ergebnissen aus. Mit der Zeit jedoch sammeln sich Seiten an, auf denen man bevorzugt schaut. Eine dieser Seiten ist bei uns bootsnip.com, von der wir für dieses Tutorial auch ein Snippet verwenden werden.

Das WordPress Timeline Tutorial Snippet:
Zigzag Timeline Layout” von “andrewnite
(Thank´s for this nice snippet andrew!)

wordpress tutorial timeline
OK, wir haben jetzt ein Snippet und wollen diese Timeline für WordPress umsetzen.
Wir verzichten allerdings auf die Überschrift und den Text über der Timeline.

Als Erstes kopieren wir den Snippet-CSS-Code in unsere CSS-Datei. Danach reduzieren wir den Snippet-Code ersteinmal auf das Wesentliche.

Der Snippet HTML-Code auf das Wesentliche reduziert sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step One</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

Diesen fügen wir nun in unsere index.php ein, um das Grundgerüst zu haben. Nun ist das Ganze aber noch statisch und bringt uns nicht viel. Bringen wir also unser Beitragsbild, den Titel, Post, Datum/Uhrzeit, etwas vom Content und natürlich den Link zum Blogbeitrag in´s Spiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
       <?php if(have_posts()):while(have_posts()):the_post();?>
        <li>
          <div class="timeline-image">
            <?php if(has_post_thumbnail()){?>
            <a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">
            <?php the_post_thumbnail('thumbnail',array('class'=>"img-circle img-responsive"));?>
            <?php }else{?>
            <a href="<?php the_permalink()?>">
            <img src="<?php echo get_template_directory_uri();?>/img/blog.jpg" class="img-circle img-responsive" />
            </a>
            <?php }?>
            </a>
          </div>
          <div class="timeline-panel">
            <div class="timeline-panel">
               <div class="timeline-heading">
                     <a href="<?php the_permalink()?>" style="color:#1e71b8" rel="bookmark" class="title">
                       <h3><?php the_title();?></h3>
                     </a>
                   <h4 class="subheading"><?php the_date();?> | <?php the_time();?></h4>
                 </div>
                 <div class="timeline-body">
                   <p class="text-muted"><?php the_excerpt();?></p>
                 </div>
               </div>
             <div class="line"></div>
        </li>
        <?php endwhile;endif;?>
      </ul>
    </div>
  </div>
</div>

Code-Erklärung:
Zeile 5: Der Standard WordPress Loop, welchen wir in Zeile 32 wieder schließen.

Zeile 8: Eine Bedingung stellen: Wenn der Beitrag ein Beitragsbild hat, dann….
Zeile 9:

1
<a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">

Wir erstellen einen Link zum Beitrag, inklusive des Titel-Tags, welcher den Blogbeitrags-Titel enthält.

Zeile 10:

1
<?php the_post_thumbnail('thumbnail',array('class'=>"img-circle img-responsive"));?>

Hier lassen wir das Beitragsbild darstellen, fügen jedoch die CSS-Klassen “img-circle” und “img-repsonsive” hinzu.
Zeile 11: Wir schließen die if-Bedingung und geben mit else eine Anweisung, was passieren soll, wenn kein Bild vorhanden ist.

Zeile 12-15:

1
2
3
4
<a href="<?php the_permalink()?>" title="<?php the_title_attribute();?>">
            <img src="<?php echo get_template_directory_uri();?>/img/blog.jpg" class="img-circle img-responsive" />
            </a>
            <?php }?>

Ich denke zum Link muss ich nichts mehr sagen, da wir ihn bereits bei Zeile 9 besprochen haben. In Zeile 13 lassen wir nun ein Bild darstellen, welches wir uns selbst aussuchen und mit in unseren Themeordner legen. In unserem Fall haben wir im Themeordner noch einen Unterordner mit dem Titel “img” angelegt. In Zeile 15 schließen wir unsere Else-Bedingung.
Wenn wir dies jetzt aufrufen würden, würde das Beitragsbild vom vorhandenen Beitrag schon in unseren Kreisen sein. Sollte kein Beitragsbild im Backend definiert sein, erscheint unser ausgewähltes Standardbild.

Zeile 21-23:
Unser Beitragstitel als simple H3 Überschrift verlinkt mit dem Beitrag.

Zeile 24:
Ausgegeben wird eine H4-Überschrift, welche das Erstelldatum und Uhrzeit unseres Beitrages beinhaltet.

Zeile 27:
the_exerpt gibt den Beitragsinhalt aus. Achtung diesen müssen wir noch über unsere functions.php limitieren.

Zeile 32:
Wir schließen den WordPress Loop.

Die Länge des Beitragsausschnitts beeinflussen

Damit in unserer WordPress Timeline nicht der gesamte Inhalt unserer Blogbeiträge erscheint, müssen wir diesen limitieren. Am einfachsten machen wir das über die functions.php unseres Themes.
Der Quellcode hierfür sieht wie folgt aus:

1
2
3
4
5
6
<?php
function custom_excerpt_length( $length ) {
    return 30;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
?>

Nun haben wir unsere WordPress Inhalte in das statische Snippet gebracht und daraus eine dynamische Seite gemacht.
Dann ist das WordPress Timeline Tutorial hier wohl zu Ende, oder?

Nicht wirklich! Habt ihr euch eure Seite schon angeschaut?
Richtig, alle Beiträge sind auf der Linken Seite und nicht im ZigZag wie das Snippet verspricht.

Wir haben auch etwas ganz Entscheidendes weggelassen, denn wie im Snippet zu sehen ist, hat jedes zweite Timeline-Element eine zusätzliche CSS-Klasse.
Doch wie sollen wir Elementen, die wir in unserer index.php gar nicht geschrieben haben, sondern dynamisch erzeugen, eine zusätzliche CSS-Klasse geben?

Wir behelfen uns mit einem kleinen Trick!
Was wissen wir?
Wir wissen, dass jeder zweite Beitrag betroffen ist. Zusätzlich wissen wir, dass die Klasse “timeline-inverted” heißt.

Na dann lassen wir doch unsere Elemente erstmal zählen, teilen sie dann durch 2 und geben den Elementen die teilbar sind unsere CSS-Klasse.
Und wie geht das? 🙂

1
2
3
4
<ul class="timeline">
   <?php $i=0;?>
    <?php if(have_posts()):while(have_posts()):the_post();?>
     <li class="<?php $i++;if($i % 2!=1){echo "timeline-inverted";}?>">

Vor unserem Loop setzen wir unsere Variable i (die Beitragszahl), welche 0 beträgt. In unseren Timeline li-Elementen addieren wir dann jeweils unsere Variable um eins ($i++). Mit einer if-Abfrage fragen wir nun ob unsere Variable “i” durch 2 teilbar ist ($i % 2!=1) und geben nur wenn sie es ist “timeline-inverted” aus.

F5 oder Refresh!

Nachdem wir nun auch jedem zweiten Beitrag eine zusätzliche Klasse gegeben haben, funktioniert unsere “ZigZag-Timeline” wie gewünscht. Nun solltet ihr noch die Standard-Elemente einer Website einfügen, wie z.B. euer Seitenmenü und so weiter…
Ich hoffe wir konnten euch helfen und ihr habt ein bisschen was gelernt. Dies ist nun das erste Tutorial welches wir veröffentlichen und hoffen auf ein bisschen Feddback in den Kommentaren 😉

Schöne Grüße und Ahoi!