Beiträge

WP-CLI – Ein Einblick in das Profi-Tool

Sie wollten schon immer wissen, wie Profis ihre WordPress Installationen pflegen und wie man mit möglichst wenig Aufwand, mehrere Installationen auf einem Server pflegt?
Dann sollte das Kommandozeilen-Interface WP-CLI genau das Richtige für Sie sein.

 

 

Was ist WP-CLI?

WP-CLI ist ein kostenloses Tool, mit dem Sie, über das Terminal deines Betriebssystems, WordPress installieren, pflegen und verwalten können.
Hier eine kleine Auflistung von Funktionen, die möglich sind:

  • WordPress installieren
  • Plugins installieren, de-/aktivieren
  • Themes installieren, de-/aktivieren
  • Seiten und Posts verwalten/erstellen
  • Kommentare verwalten/erstellen
  • Updates installieren
  • Benutzer erstellen
  • und viele mehr…

Mit diesem Tool können Sie also ab WordPress 3.7 alle Standardfunktionen des Backend’s in einer Kommandozeile ausführen. Sollten Sie eine Funktion vermissen, besteht sogar die Möglichkeit, selbst Befehle zu entwickeln.

Systemvorraussetzungen

Um WP-CLI zu nutzen, müssen bestimmte Vorraussetzungen erfüllt sein, leider bringt das Betriebssystem Windows nicht alle Vorraussetzungen ab Werk mit, im Gegensatz zu Apples OSX sowie Linux, und müssen im Vorraus installiert werden.

Folgendes muss vorhanden sein:

  • PHP 5.3.29 oder höher
  • WordPress 3.7 oder höher
  • Webserver mit SSH-Zugang

Vorbereitungen nur für Windows

Sind Sie Nutzer von Windows 10, können Sie ihnen das Ubuntu Modul installieren. Das finden Sie ganz einfach und kostenlos in der Windows Store App. Nach der Installation haben Sie ein vollwertiges Ubuntu zur Verfügung und können die Installation ohne Weiteres nach der Linux-Anleitung durchführen.

Installation der WP-CLI unter OSX, Linux
oder Windows 10 mit Ubuntu Modul

Wie installiere ich WordPress CLI?

  • Loggen Sie sich mit dem Terminal über SSH auf Ihren Server ein
  • Laden Sie die “wp-cli.phar” Datei mittels wget oder curl herunter
  • Starten Sie die WordPress CLI

Das war der Schnelldurchgang, genauer möchte ich es Ihnen natürlich auch erklären, legen wir also los.

Schritt 1:
Loggen Sie sich mit Ihrem Terminal über SSH auf Ihren Server ein.
Beispiel des Login Befehls:

1 ssh deine_server_adresse.com -l dein_benutzername

Anschließend müssen Sie ihr Passwort eingeben und Enter drücken.

Schritt 2:
Herunterladen der “wp-cli.phar” über SSH auf Ihren Server mit dem Terminal.
Mit folgendem Befehl können Sie den Download starten, beachten Sie aber das Sie sich im Root-Verzeichnis befinden:

1 curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Schritt 3:
Prüfen Sie, ob die heruntergeladene Datei funktioniert, indem Sie sie mit folgendem Befehl aufrufen:

1 php wp-cli.phar –info

Nach dem Ausführen der WP-CLI mit dem Zusatz “–info” sollten Sie folgende Ausgabe, mit Ihrem Serverdaten, sehen:

1

2

3

4

5

6

7

8

9

10

PHP binary: /usr/bin/php70

PHP version: 7.0.20-nmm1

php.ini used: /etc/php70/cli/php.ini

WP-CLI root dir: phar://wp-cli.phar

WP-CLI vendor dir: phar://wp-cli.phar/vendor

WP_CLI phar path: /www/htdocs/einordner

WP-CLI packages dir:

WP-CLI global config:

WP-CLI project config:

WP-CLI version: 1.4.0

Schritt 4:
Um nicht immer den Dateinamen eingeben zu müssen und spätere Befehle kürzer zu halten, spendieren wir der WP-CLI nun noch einen neuen Namen und andere Dateirechte.
Befehl für Dateirechte:

1 chmod +x wp-cli.phar

Nachdem die Datei nun ausführbar ist , benennen wir sie noch mit folgendem Befehl um:

1 mv wp-cli.phar /www/htdocs/einordner/wp

Wobei “/www/htdocs/einordner/” ihr Ordner-Pfad ist und “wp” der neue Name. 

Ob es funktioniert, können Sie mit dem gleichen Info Befehl testen, nur dass Sie jetzt “wp” anstatt von “wp-cli.phar” benutzen.

1 php wp –info

Schritt 5:
Zu guter Letzt sollten Sie noch überprüfen, ob die geladene WP-CLI Version aktuell ist. Diesen Befehl können Sie sich  auch gleich gut merken, denn wie bei WordPress Plugins/Themes gilt auch hier eine regelmäßige Update Periode.

1 php wp cli update

 

Beispiele zur Ausführung von Befehlen

Im folgenden Abschnitt zeige ich Ihnen ein paar Beispiele zu WP-CLI Befehlen und deren Ausgabe, eine komplette Liste der vorhandenen Befehle finden Sie hier: https://developer.wordpress.org/cli/commands/

Wichtig: Wenn Sie WP-CLI im Root-Verzeichnis installiert haben und Ihre WordPress Installation in einem Subverzeichnis liegt, müssen Sie den Pfad mit Angeben. Dies macht man mit folgendem Zusatz:

1 –path=’ordner_meiner_WordPress_Installation‘

Beispiel #1 – Alle installierten Plugins/Themes anzeigen

Um nicht blind einfach alle Updates über die WP-CLI zu erledigen, können wir uns eine Liste aller installierten Plugins/Themes anzeigen lassen. Die Ausgabe der Liste beinhaltet den Namen des Plugins/Themes, den Status (aktiv/inaktiv), die Version und ob es ein Update gibt.
Hier ein Beispiel Befehl:

1 php wp plugin list

oder auch mit Pfad-Angabe, wenn die WordPress Installation im Ordner “tutorial” liegt:

1 php wp –path=’tutorial‘ plugin list

Die Antwort auf den Befehl sieht wie folgt aus:

1

2

3

4

5

6

7

8

9

+——————–+———-+———–+———+

| name               | status   | update    | version |

+——————–+———-+———–+———+

| debug-bar          | active   | none      | 0.9     |

| cron_test          | inactive | none      |         |

| wp-nerd-toolkit    | active   | none      | 1.1     |

| wp-rocket          | active   | available | 2.7.4   |

| advanced-cache.php | dropin   | none      |         |

+——————–+———-+———–+———+

Den gleichen Befehl nur mit “theme” anstatt von “plugin” zeigt eine Liste der vorhandenen Themes.

Beispiel #2 – Plugins updaten

Nachdem wir nun wissen welche Plugins installiert sind und für welche es ein Update gibt, haben wir 3 Möglichkeiten.

Möglichkeit 1 – Plugin einzeln updaten

1 php wp plugin update name_des_plugins

Möglichkeit 2 – Alle Plugins mit vorhandenen Updates aktualisieren

1 php wp plugin update -all

Möglichkeit 3 – Alle Plugins mit Updates, außer Plugin X aktualisieren

1 php wp update –all –exclude=name_des_plugins

Beispiel #3 – WordPress Core updaten

Selbstverständlich können wir nicht nur Plugins und Themes aktuell halten, sondern können uns auch um den WordPress Core kümmern. Mit den folgenden 2 Befehlen aktualisieren Sie also WordPress:

Befehl 1

1 php wp core update

Rückmeldung der WP-CLI nach einem erfolgreichen Update:

1

2

3

4

5

6

Updating to version 4.8.3 (de_DE)…

Herunterladen der Aktualisierung von https://downloads.wordpress.org/release/de_DE/wordpress-4.8.3.zip …

 

Entpacken der aktualisierten Version …

 

Success: WordPress updated successfully.

Befehl 2

1 php wp core update-db

Mögliche Rückmeldung der WP-CLI zu Befehl 2

1 Success: WordPress database already at latest db version 38590.

 

Schlusswort zur WP-CLI

Die WordPress CLI kann ein sehr mächtiges und nützliches Tool sein, um seine Arbeitszeit, bei vielen WordPress Installationen, effizienter zu nutzen. Des Weiteren können bestimmte Aktionen ohne zusätzliche Plugins erledigt werden. Ein echtes Muss für jeden der professionell mit WordPress arbeitet und seine Zeit effizienter nutzen möchte. Aber auch Nutzer die Spaß an der Konsole haben, werden mit der WP-CLI voll auf Ihre Kosten kommen.

Für Sie tiefer in dieses Thema einsteigen wollen, hier noch einmal der Link zur offiziellen Dokumentation der WP-CLI.

WordPress Hosting – So findest du den richtigen Anbieter!

Sucht man einen guten Anbieter für das Hosting einer Website, wird man von Angeboten geradezu überflutet. Zig Anbieter findet man bei Google, jeder schreibt, dass er das beste Hosting anbietet und die Affiliate-Seiten machen alles, um eine Provision abzugreifen. Doch worauf sollte man wirklich achten und wie teuer sollte es sein? Darauf gehe ich im folgenden Artikel genauer ein und möchte ein wenig Licht in’s Dunkel bringen.

WordPress Hosting
Warum ist es wichtig, einen guten Hoster zu haben?

Na ganz einfach, Sie müssen sich auf Ihren Hoster verlassen können.
Nur der Hoster hat die Möglichkeit auf technische Störungen zu reagieren, Server Konfigurationen zu aktualisieren und zu verwalten. Ein weiterer wichtiger Punkt ist der angebotene Support vom Hosting-Unternehmen, reagiert er schnell auf Probleme und zu welchen Uhrzeiten und Wochentagen ist er erreichbar?

Worauf Sie bei WordPress Hosting achten sollten

Im folgenden finden Sie einzelne Punkte, die ich persönlich für ziemlich wichtig halte und sich in meinen 6 Jahren Erfahrung mit WordPress immer gut geschlagen haben.

Kostenlose SSL-Zertifikate

Um Ihren Projekten einen kleinen Ranking Boost zu geben sollten Sie HTTPS verwenden. Aber auch datenschutzrechtlich ist ein solches Zertifikat mittlerweile von großer Bedeutung. Möchten Sie einen Shop erstellen oder auch nur Daten via Kontaktformular übertragen, sind Sie mit einem SSL-Zertifikat auf der sicheren Seite. Seit Ende 2015 besteht die Möglichkeit, kostenlose Zertifikate über Let’s Encrypt zu erstellen. Ihr Hoster sollte dies anbieten, denn warum viel Geld dafür ausgeben wenn es auch kostenlos möglich ist?

Geheimtipp HTTP/2

HTTP/2 ist die “neue” Version des Verbindungsprotokolls HTTP (Hypertext Transfer Protocol) welches im Jahr 2015 veröffentlicht wurde. Was? 2015? Das ist doch nicht mehr neu? Leider bieten es noch immer nicht alle Hoster an, was auch daran liegt das die Benutzung von HTTP/2 nur in Verbindung eines SSL-Zertifikates möglich ist.

Wichtige neue Möglichkeiten mit HTTP/2:

  • Zusammenfassen mehrerer Anfragen
  • weitergehende Datenkompressionsmöglichkeit
  • binär kodierte Übertragung von Inhalten
  • Server-initiierte Datenübertragung (push-Verfahren)

Ok, ok, genug Fach-Chinesisch, im Endeffekt können Sie also mit HTTP/2 schnellere Ladezeiten Ihrer Website erreichen!

Aktuelle PHP-Version

Ihr neuer Hoster sollte seine Software aktuell halten, dazu gehört natürlich auch die PHP-Version. Mit PHP 7 läuft WordPress fast doppelt so schnell und Sie bekommen in Zukunft keine kompatibilitäts Probleme.

Ebenso wichtig sind PHP-Einstellungen, die vom Anbieter angeboten werden. Speziell für WordPress sollten Sie darauf achten, dass “mod_rewrite” eingeschaltet ist und das “memory_limit” mindestens auf 128M gestellt ist (optimal wären 256M).

Was ist mod_rewrite?
mod_rewrite ist ein Modul für die Server-Software “Apache”, welches die Definition von sogenannten Rewrite-Regeln ermöglicht. WordPress verwendet dieses Modul um “schöne”, benutzerfreundliche URL’s zu generieren. Ist diese Einstellung nicht vorhanden, können Sie nur die sogenannten “Messy”-URL’s verwenden.
Beispiel einer schönen URL: https://ib-it.com/wordpress-hosting
Beispiel einer Messy-URL: https://ib-it.com/?p=1391

Die richtige Festplatte und genügend Speicher

Die meisten kennen sie von ihrem eigenem PC, die SSD-Fesplatte. Sie ermöglichen schnellere Zugriffszeiten und können mehr Ein-/Ausgaben pro Sekunde handeln. Genau das, was wir für unsere Datenbank brauchen, also schaut, dass zumindest eure Datenbank auf einer SSD-Festplatte liegt.

Aus Erfahrung kann ich euch sagen, dass der Speicherplatz nicht zu knapp gewählt werden sollte. Ein Blog z.B. wird schnell ziemlich groß. Beitragsbilder, Bilder in den Artikeln, automatisch erstellte Thumbnails und vielleicht auch eine Kopie der Seite auf einer Subdomain um Änderungen zu testen, fressen viel Speicherplatz. Da Speicherplatz nun wirklich kein großer Kostenfaktor sein sollte, empfehle ich mind. 10GB Speicherplatz.

 

So richtig guter Support

wordpress hosting support

Ihr neuer Hoster sollte wirklich guten Support anbieten. OK, und was ist guter Support? Hier eine Checkliste für Sie:

  • Supportzeiten: 24h / 7 Tage
  • Schnelle Reaktionszeit auf Anfragen
  • kompetente Support-Mitarbeiter

Wie Sie das, ohne Kunde zu sein, heraus bekommen?
Ganz einfach, nehmen Sie die einzelnen Punkte aus diesem Artikel heraus und suchen die    E-Mail Adresse des Supportes auf der Website des potenziellen Hosters heraus. Schreiben Sie ihm eine Mail mit all Ihren Fragen und schauen wie schnell sie antworten und ob sie Ihre Fragen beantworten konnten. Kommt eine Mail innerhalb von 2-4 Stunden zurück, vollständig beantwortet? Gut, ein erster Hinweis auf guten Support.

Der Serverstandort

Ihr neuer Hosting Anbieter sollte sein Rechenzentrum in dem Land haben wo sich Ihre potenziellen Besucher aufhalten, zur Not gehen auch die Nachbarländer. Dieser Punkt ist eher weniger für SEO wichtig, bis auf eventuell längere Ladezeiten, sollten Sie sich vor allem Gedanken über den Datenschutz machen. Entscheiden Sie sich z.B. für einen Hoster mit Rechenzentrum in den USA, sollten Sie überlegen, wie dort mit den Daten umgegangen wird, halten die Anbieter sich dort an gewissen Standards? Wenn Probleme auftreten sollten, ist Ihr Englisch dann gut genug, um dich mit dem Support zu verständigen?

Wie viele Kunden kommen auf einen Server?

Wenn Sie diesen Artikel lesen, gehe ich davon aus, dass Sie noch nicht viele Erfahrung mit dem Hosten einer WordPress Website haben, Ihre Website noch nicht viel Traffic hat und Sie noch keinen Root-Server brauchen. Deswegen sollten Sie bei den “normalen” Webspace-Paketen, auch Shared Hosting genannt, unbedingt darauf achten wie viele Kunden auf einen Server kommen. Um das kurz zu erklären: Bei einem Shared Hosting Paket werden mehrere Kunden auf einen (Hardware-)Server gepackt, das heißt, Sie haben keine eigene Hardware, sondern teilen sie mit anderen Kunden des Hosting Unternehmens.

Dieses kann unter Umständen zu großen Performance-Problemen führen. Gute Beispiele dafür sind Hoster wie z.B. 1u1 und Strato, hier teilen sich gefühlt hunderte von Kunden einen Server, der verständlicherweise dann gut zu kämpfen hat.

Achten Sie also darauf, ob der Hoster in seiner Paket-Übersicht offen schreibt, wie viele Kunden sich einen Server teilen. Ich empfehle einen Hoster bzw. ein Hosting-Paket zu wählen mit maximal 50 Kunden je Server.

Mein Fazit:

Wenn Sie meine Tipps beachten, sollten Sie einen guten WordPress Hosting Anbieter finden, denn davon gibt es viele da draußen im World Wide Web. Wenn Sie Ihrer Meinung nach einen guten Anbieter gefunden haben, lesen Sie im Internet noch ein paar Kundenbewertungen durch und überprüfen was andere dazu sagen. Ihre Nerven werden es Ihnen später danken. Wenn Sie jetzt noch eine konkrete Empfehlung von mir erhofft haben, möchte ich Sie nicht enttäuschen. Meine Projekte bekommen meistens ein Hosting-Paket von All-Inkl spendiert, manchmal auch eins von Mittwald und gute Erfahrungen habe ich durch Kundenprojekte auch mit Webgo gemacht.

 

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!