Beiträge

SEO: 6 SEO-Trends für 2017

Das Jahr 2017 ist nun fast rum, schaut euch unsere SEO-Trends 2018 an!

Wie jedes Jahr rätseln auch dieses Jahr wieder alle SEO-Menschen, was wohl im kommenden Jahr ausschlaggebend für gute Rankings sein wird. Auch wir haben uns natürlich schon Gedanken darüber gemacht und wollen unsere Favoriten nun mit euch teilen.

Strukturierte Daten / schema.org

Google hat eine mächtige Aufgabe, sie müssen bzw. wollen alle relevanten Inhalte im World Wide Web crawlen und den Nutzern bereit stellen. Dafür gehen viele Ressourcen drauf, nicht umsonst hat Google so viele Rechenzentren auf der ganzen Welt.

Um Google zu helfen, weniger Ressource zu verbrauchen und deine Website besser zu verstehen, können Sie ihre Seite strukturieren. Hierfür steht Ihnen schema.org zur Verfügung.

Welche Daten kann ich bei Google strukturiert ausgeben?

Das zeigen wir euch anhand von unserem Blog, denn wir geben unsere Beiträge schon seit ein paar Monaten strukturiert aus.

Ein paar Beispiel-Daten sind:

  • Type (Artikel)
  • Headline
  • Veröffentlichung (Datum)
  • Beschreibung
  • Author
  • Beitragsbild

Alle möglichen Daten-Attribute kann man auf schema.org nachlesen und wir werden Anfang des Jahres auch ein Tutorial für selbst erstellte WordPress Themes veröffentlichen (No-Plugin-Lösung).

Wir sind uns einig, dass Webseiten, die diese Technik in 2017 verwenden, mit großer Wahrscheinlichkeit anderen Wettbewerbern, die diese Technik nicht verwenden, bevorzugt werden.

2. Einzigartiger Content mit Mehrwert!

Um gleich noch ein Buzzword hinterher zu hauen
-> Keyworddichte war Gestern, oder Vorgestern!

User Experience ist Heute!
Google ist schlau geworden, Google kann Ihre Inhalte analysieren und wird das auch tun. Aber das wird Sie nicht stören, denn Sie produzieren ja Content mit Mehrwert für deine User, richtig?

Erstelle Artikel, die Ihrem User helfen, sei es

  • bei einem Problem
  • mehr Informationen zu deinem Produkt
  • oder alltäglichen Dingen

Mach es übersichtlich aber detailliert!
Sehr wichtig für deine User ist die Lesbarkeit deiner Inhalte. Diese müssen ohne Probleme, schnell und einfach konsumiert werden können. Hierfür gibt es eine passende, sehr komplexe, mathematische Formel, die den Lesbarkeits-Index-Score berechnet.

Doch eigentlich können Sie es auch ohne diese Formel herausfinden. Hierfür öffnen Sie einfach deinen Blogartikel in einem Browser und schauen, ob Ihr Text gut lesbar ist, oder ob Sie eine Lupe brauchen um es gut lesen zu können.
Sollten Sie nun Augenschmerzen haben, empfehlen wir dir, die Schriftgröße zu vergrößern und somit Ihnen und ihren Usern einen Gefallen zu tun.

Nutzen Sie Auflistungen, Absätze, Bilder und Videos, um Ihren Content etwas aufzulockern und zu strukturieren.

Auch klar ist, dass man ein kompliziertes Thema nicht auf 500—600 Wörter beschränken kann. Also machen Sie sich die Mühe und schreiben alle Informationen, die Sie haben und ihrem User kostenlos zur Verfügung stellen möchten, auch in Ihren Artikel.
Denn Google mag Details, oder was meinen Sie, warum Wikipedia meistens auf Platz 1 ist?

3. Mobile Mobile Mobile! SEO!

Muss man das Ende 2016 noch erwähnen?
Ja, denn sehr viele Unternehmen haben es noch immer nicht verstanden. 56% der deutschen Internetnutzer nutzen mobile Geräte um sich im Internet zu bewegen.
Durch eine nicht Mobile optimierte Seite verschlechtert sich also extrem die Usability, daraus ergibt sich dann sehr wahrscheinlich eine schlechtere Absprungrate und wird sich wie ein roter Faden durch unsere SEO-Faktoren durchziehen.

Wer also hier nicht langsam aufwacht und sich um ein responsive Webdesign kümmert, wird im Jahr 2017 einiges an Boden verlieren.

Noch wissen wir ja überhaupt nicht was in der Zukunft alles kommt. Neue Endgeräte wie z.B. VR-Brillen, Smart Watches oder auch Google Glasses sind im kommen und werden uns vor neue Herausforderungen im Webdesign stellen.

Jetzt kostenlos anfordern!
Inhouse-SEO-Workshop-Angebot

4. Voice Search (?)

Apple´s Siri, Microsoft´s Cortana, Google´s Assistant und Amazon´s Echo!
Diese Geräte sollen dem Menschen das Leben leichter machen, sie sollen uns das Licht auf Befehl ausschalten, uns sagen, ob noch Butter im Kühlschrank ist und auf welche Temperatur die Heizung gestellt ist. Doch viel wichtiger ist für uns Webmaster, dass via Sprachsteuerung auch Suchanfragen im Internet getätigt werden können. Was bedeutet das für uns?
Suchanfragen die via Sprachsteuerung getätigt werden, werden meistens viel länger sein. Also sollten wir wohl stark auf Longtail Keywords/Phrasen optimieren, oder?

Es werden wohl auch viele W-Fragen vorkommen, also ist es wahrscheinlich schlau „Direct Answers“ zu erschaffen.
voice-search
Quelle: blog.google

Allerdings sind dies wirklich nur Mutmaßungen und wir wissen nicht ob es bereits 2017 so weit kommen wird. Die Bewegungen in diesem Bereich sollte jeder Webmaster allerdings im Auge behalten!

Denn wie hier zu sehen, können diese Geräte schon jetzt sehr viel.

Amazon Alexa vs. Google Assistant: Wie die Voice Search bereits jetzt funktioniert

Wir sind auf eure Meinung zu diesem Thema, in den Kommentaren, sehr gespannt!

5. Page Speed | Seitengeschwindigkeit

Welcher User wartet schon gerne bis eine Seite sich aufgebaut hat?
Keiner. Genau das hat auch Google sich auf die Fahne geschrieben und schenkt dem Pagespeed noch mehr Bedeutung.
Denn Personen, die nach speziellen Informationen suchen und auf eine Website stoßen, die im Durchschnitt länger lädt als 2 Sekunden, wird diese sehr schnell wieder verlassen bzw. der Seitenaufbau wird durch den User abgebrochen. Speziell im Mobilen Bereich, bei wohlmöglich schlechtem Empfang, werden Ladezeiten um ein vielfaches erhöht und somit zum absoluten No-Go!

Tools um deine Website zu testen:

Seit dem 24.02.2016 hat Google auch sein AMP Projekt gelauncht.
Mit dieser Methode sollen Webseiten bis zu vier mal schneller als herkömmliche responsive Webseiten geladen werden. Die Daten werden dann allerdings vom User nicht mehr direkt von eurem Server abgerufen, sondern Google speichert die Daten auf ihrem CDN (Content Delivery Network).
Für Google nicht wichtig scheinende Elemente der Webseite werden nicht mehr angezeigt. Sollten Sie also ihre Website durch Werbeanzeigen finanzieren, haben Sie ein Problem, denn diese werden bei AMP-Seiten nicht mehr angezeigt.

Grundsätzlich bewertet Google eure Seite besser, wenn ihr eine flotte Webseite habt.

6. Linkbuilding

Ist Linkbuilding, also die Generierung von Backlinks im Jahre 2017 noch wichtig?
Wir denken, ja! Zwar werden Backlinks nicht mehr einen so hohen Stellenwert wie in den vergangenen Jahren haben, ganz weglassen sollte man diese aber nicht.

Auf diese Punkte sollten Sie allerdings achten:

  • Natürlicher Backlinkaufbau
  • DoFollow sowie NoFollow Links aufbauen
  • Themenrelevante Links aufbauen
  • Keine Links von Spam-Seiten

Wie bekommt man gute Backlinks?
Die typische Speaker Antwort hierauf lautet: Durch guten Content mit Mehrwert! Siehe Tip Nr. 2 Einzigartiger Content.
Weitere Möglichkeiten wären Gastartikel in anderen Blogs, News Portalen und Webseiten.

Fazit:

Im Großen und Ganzen haben wir den Grundstein für das nächste Jahr bereits in den vergangenen Jahren gelegt und haben Webseiten erschaffen die auf Desktop sowie Mobilen Endgeräten funktionieren. Absetzen wird sich derjenige, der den besseren Content bringt und diesen schnell und stabil ausliefern kann. Eventuelle neue Geschichten, wie Voice Search, werden uns vor neue Herausforderungen stellen.

Zum Schluss würden wir gerne noch von euch erfahren, was eure Trends für 2017 im Bereich SEO sind. Was wird wichtig? Wo geht die Reise eurer Meinung nach hin?

Wie schreibe ich gute SEO-Texte?

Suchmaschinenoptimierung (SEO) spielt eine signifikante Rolle bei der Kundengewinnung im Internet.

Um Kunden auf Ihre Website zu ziehen, muss Ihre Website erstmal gefunden werden. Dafür sollten Ihre Texte stets für Suchmaschinen optimiert werden. Suchmaschinenoptimierte Texte fördern ein gutes Ranking bei den Suchmaschinen.
Demzufolge sind sie sichtbarer und führen Kunden direkt zu Ihnen. Allerdings muss die Textqualität stimmen, denn trotz dem Einsatz von Keywords, muss der Content dem Kunden einen Mehrwert bieten.

Beim Erstellen von SEO-Texten gilt es also Schlüsselbegriffe (Keywords) geschickt zu platzieren, aber ohne den Text damit zu überfrachten. Zu viele Keywords oder eine zu hohe Dichte von Schlüsselbegriffen wirkt kontraproduktiv. Auch die Lesbarkeit des Textes leidet darunter. Weitaus sinnvoller ist es, zunächst einen schlüssigen Text für den Kunden zu erstellen und diesen anschließend einer Optimierung zu unterziehen. So gelingt es viel leichter attraktiven Content zu erstellen, für Ihre Kunden und den Suchmaschinen.

Wie SEO-Texte in mehrfacher Hinsicht für ein besseres Ranking sorgen

Alles beginnt mit gutem Content, der systematisch für Suchmaschinen aufbereitet wird. Die Auswahl und Platzierung von den wichtigsten Keywords, sorgt dafür, dass Besucher Ihren Text mithilfe von Suchmaschinen finden. Je hochwertiger Ihr Content von Suchmaschinen eingestuft wird, desto besser ist die Platzierung wiederum bei den Suchergebnissen. Entsprechend mehr Traffic bekommen Sie. Und wenn Ihr Text oft gefunden und gelesen wird, umso mehr werden es Besucher bewerten, teilen, weiterempfehlen oder verlinken. Das steigert wiederum Ihr Traffic. Umsichtig geschriebene SEO-Texte erreichen demzufolge Ihre Leserschaft und Sie bilden die beste Voraussetzung für die Kundengewinnung. Sind Ihre Text- und Bildbeiträge fundiert und nützlich, profitieren Sie in mehrfacher Hinsicht davon. Deshalb sollten Sie immer zuerst den Leser berücksichtigen bei der Content Erstellung. Danach optimieren Sie die Texte für die Suchmaschinen, ohne dass die Qualität darunter leidet. Denn was die Leser schätzen, wird bei den Suchmaschinen ebenso positiv bewertet.

Die wichtigsten Kriterien für SEO-Texte

Konzentrieren Sie sich auf Ihre Kundschaft und fertigen Sie hochwertigen und nützlichen Content an. Kunden möchten erfahren, welche Vorteile Sie Ihnen zu bieten haben. Bieten Sie ihren Kunden fundierte Informationen an und streichen Sie die Vorzüge von Ihren Produkten oder Dienstleistungen heraus. Geben Sie konkrete und nützliche Informationen. Überzeugen Sie durch Fachkenntnis und ausgezeichneten Service. Achten Sie auf die Auswahl der Keywords beziehungsweise entscheiden Sie sich für ein Haupt-Keyword. Verwenden Sie das Haupt-Keyword in der Überschrift und mehrmals im Text. Achten Sie dabei auf Ausgewogenheit und die Verwendung von Einzahl und Mehrzahl, wie auch ähnliche Begriffe oder Umschreibungen. Das Haupt-Keyword gehört ebenfalls in die Kurzbeschreibung (Meta-Description). Die Lesbarkeit des Textes behalten Sie natürlich stets im Auge und achten auf die Keyword-Dichte. Geben Sie Ihrem Text das richtige Format durch die Aufteilung in mehreren Absätzen mit Zwischenüberschriften. Das Haupt-Keyword verwenden Sie möglichst auch in den Zwischenüberschriften. Gestalten Sie informative Überschriften, die nicht nur das Keyword beinhalten, sondern auch zum Lesen animieren. Überprüfen Sie den Text auf Lesbarkeit und Informationsgehalt und korrigieren Sie wenn nötig die Keyword-Dichte.

Fragen oder Anregungen zu diesem Thema?
Schreiben Sie einen Kommentar!

Sicher im Netz – WordPress Security leicht gemacht

WordPress Sicherheit
Die Lebensversicherung für Ihre Website

Wer sollte meine Website schon hacken wollen? Wir sind doch nur ein regionales Unternehmen und haben keine Feinde. Solche oder ähnliche Aussagen hört man oft, wenn es um die optimale WordPress Sicherheit des eigenen Internetauftritts geht. Das Problem daran: Nur in den allerseltensten Fällen werden Websites gezielt angegriffen. Der Mammutanteil der Opfer wird automatisiert und damit völlig zufällig ausgewählt. Wenn Ihre Website also Schwachstellen hat, dann ist sie gefährdet, ganz gleich, ob Sie nur einen Besucher im Monat aufweist oder eine Million. Lösung des Problems? Klar, einfach keine Schwachstellen zulassen.

Noch ganz dicht?
Die Schwimmflügel der WordPress Security

Die gigantischste Festung nutzt nichts, wenn der Haupteingang offen steht. Klingt logisch, ist für viele Internetnutzer aber eine Herausforderung, weil die Einrichtung von Content‐Management‐Systemen wie WordPress zwar immer einfacher wird, dafür allerdings serverseitige Sicherheitsaspekte in den Hintergrund geraten. Dabei bilden Dateiberechtigungen, ein effektiver htaccess‐Schutz der sensiblen wp‐admin‐php‐Seite sowie SSL‐Verschlüsselungen den Grundstein für die gesamte WordPress Sicherheit.

Immer up to date?
Der Lückenschließer am Puls der Zeit

WordPress verlangt schon wieder ein Update, um Sicherheitslücken zu schließen? Es stimmt, Updates können nerven, besonders dann, wenn viele Plugins verwendet werden, von denen jedes Einzelne zusätzlich ständig aktualisiert werden muss. Allerdings führt an den Updates kein Weg vorbei: Nur wenn alle Komponenten auf dem neuesten Stand sind, ist die WordPress Sicherheit gewährleistet.

Ist weniger mehr?
Wordpress Security Plugins meist nicht mehr als schicker Ballast

WordPress bietet mit seinen Plugins eine unglaubliche Vielfalt – auch für die Sicherheit. Allerdings kostet jedes weitere Plugin Serverperformance und kann seinerseits zum zusätzlichen Schwachpunkt für Angreifer werden. Entsprechend sollten die Erweiterungen sorgfältig auf den tatsächlichen Nutzen hin überprüft werden. Mit den zuvor genannten, korrekten Sicherheitseinstellungen sind viele WordPress Security‐Plugins schlicht und ergreifend überflüssig.

Und wenn’s mal kracht?
Backups können Leben retten… oder den Job des Admins

Falls trotz größter Vorsicht einmal etwas schief gehen sollte, brauchen Sie sich keine Sorgen machen, sondern können Ihre Daten ganz einfach aus Ihren Backups wieder einspielen. Die haben Sie doch, oder? Die Backups. Nein? Dann wird es aber allerhöchste Zeit, ganz ehrlich jetzt. Und falls Sie nicht so genau wissen, wie Sie das anstellen sollen mit den Backups, dann rufen Sie uns doch einfach an. Wir machen das schon.

WordPress Sicherheit vom Profi
Unsere Leistungen im Überblick:

  •   Korrekte Vergabe der Dateirechte auf dem Server
  •   Sichere Einrichtung von SSL‐Zertifikaten
  •   Serverseitiger htaccess‐Schutz der wp‐admin.php‐Seite
  •   Updates von WordPress und den genutzten Plugins schnellstmöglich nach Verfügbarkeit
  •   Regelmäßige Datensicherung durch monatliche Backups
Sie möchten bei der WordPress Sicherheit keine Experimente starten und lieber gleich auf erfahrene IT‐Profis vertrauen? Dann kontaktieren Sie uns gleich – wir unterstützen Sie gerne.

Mehr Besucher durch Content-Marketing 6 nützliche Tipps

Content-Marketing ist das Hauptthema beim Online-Marketing. Das liegt daran, dass gut geschriebene Texte viele Vorteile bringen: Sie bringen Ihnen mehr Traffic, steigern Ihre Bekanntheit enorm und erhöhen zudem die Conversion Rate (Konversionsrate). Content-Marketing ist ein fortlaufender Prozess und verlangt von Ihnen eine professionelle Umsetzung, damit Sie kurz- und langfristig Ihre Marketing-Ziele erreichen.

1.Erstklassige Texte bilden die Basis beim Content-Marketing

Ihre Artikel müssen einiges leisten, um Besucher zu überzeugen. Sie müssen lesenswert sein, die richtigen Stichworte enthalten und dann noch zum jeweiligen Medium passen. Dabei sollten Sie sich auf Ihre Zielgruppe und deren Interessen und Wünsche konzentrieren. Die Textart und der Verwendungszweck gelten hier als Maßstab und Leitlinie bei der Texterstellung. Wollen Sie Ihre Leser über ein Produkt informieren oder gleich zum Kauf animieren? Oder möchten Sie sich zunächst eine Reputation aufbauen und hierfür informative Beiträge veröffentlichen? Fokussieren Sie sich bei jedem Text auf die wesentlichen Aspekte und bemühen Sie sich darum, stets lesenswerte Beiträge zu erstellen, ohne Ihr Anliegen aus den Augen zu verlieren.

2.Die Vielfalt als Erfolgsfaktor – Content wirkungsvoll aufbereiten

Erschaffen Sie mit Ihrem Content den nötigen Anreiz, damit Sie möglichst viele Besucher auf Ihre Website ziehen. Nutzen Sie dafür gute, zugkräftige Headlines, spannende Aussagen oder erwecken Sie die Neugierde. Sprechen Sie die Wünsche und Bedürfnisse der Zielgruppe so genau wie möglich an. Gliedern Sie die Texte leserfreundlich und nutzen Sie dazu Aufzählungen und Absätze, um den Text zu strukturieren. Betonen Sie die wichtigsten Punkte durch Markierungen, Unterstreichungen oder Hervorhebungen. Veranschaulichen Sie bedeutende Punkte in einer Info-Box oder schreiben Sie am Ende noch eine Zusammenfassung, wenn der Artikel sehr lang sein sollte. Obwohl Texte oft die Grundlage sind beim Content-Marketing, können und sollten andere Formate auf jeden Fall einbezogen werden. Bilder und Grafiken dienen hervorragend zur Veranschaulichung von komplexen Inhalten. Ihre besten Texte lassen sich aber auch für Podcasts, Slide Shares, Videos oder Webinare weiter verwenden. Eventuell müssen Sie den Text dann noch kürzen oder erweitern. Die Mühe lohnt sich, denn so können Sie das Maximum aus einem Text holen.

3.Content-Marketing für verschiedene Plattformen

Welche Textarten und welche Ansprache werden von Ihrer Zielgruppe bevorzugt? Berücksichtigen Sie hierbei ebenfalls das jeweilige Medium. Social Media Nutzer mögen vor allem kurze und unterhaltsame Postings. Auf der Website erwarten Besucher hingegen Fakten, Informationen und nützliche Fachartikel. Variieren Sie Ihren Content entsprechend der Zielgruppe und der Plattform. Ihre Fachartikel können demnach ruhig etwas länger ausfallen, während Sie Ihre Social Media Postings besser kurz und knackig halten. Social Media Plattformen eignen sich für Hinweise auf die Texte auf Ihrer Website , wie auch für Neuigkeiten oder besondere Aktionen oder Angebote. Posten Sie lieber öfters kleine Beiträge und gestalten diese aber so abwechslungsreich wie möglich. Auf Ihre Website oder auf Ihrem Blog werden Sie hingegen nicht ganz so oft neue Artikel veröffentlichen. Denn der Arbeitsaufwand für längere Artikel ist schon recht groß. Wenn Sie fundierten Inhalt für Blogposts erstellen, dann lassen Sie sich lieber etwas mehr Zeit und bereiten den Text optimal auf. Die Relevanz der Texte ist in diesem Fall wichtiger als die Anzahl von Artikeln.

4.Content-Marketing braucht eine umfassende Vermarktungs­strategie

Auch gute Inhalte verbreiten sich nicht immer von alleine. Sie müssen Ihren Content entsprechend vermarkten und verbreiten. Sie müssen mit SEO-Maßnahmen und Traffic-Strategien auf Ihre Postings, Podcasts, Videos etc. aufmerksam machen, immer wieder. Wenn es Ihr Budget erlaubt, werden Sie sowohl auf SEO (Suchmaschinenoptimierung). als auch auf SEA (Search Engine Advertising = Suchmaschinenwerbung) setzen. Häufig werden Sie erstmal die Suchmaschinenoptimierung nutzen. Bei allen SEO-Maßnahmen spielen die Keywords zwar eine wesentliche Rolle, aber auch die Qualität von Beiträgen und deren Beliebtheit. Damit die Beliebtheit von Ihren Postings steigt, benötigen Sie wiederum dauerhaft viel Traffic. Ihre Postings verbreiten Sie natürlich über Social Media Kanäle. Darüber hinaus können Sie generell mehr Besucher auf Ihre Website ziehen, indem Sie Ihre Bekanntheit nach und nach steigern, sich einen Expertenstatus erarbeiten und eine Kultur des Gebens und Nehmens pflegen. Werden Sie aktiv und empfehlen Sie zunächst Postings von anderen. Kommentieren Sie immer wieder einmal interessante Beiträge mit wertvollen Hinweisen. Schreiben Sie gelegentlich Gastartikel für andere Sites, falls es Ihre Zeit erlaubt. Seien Sie selbst großzügig mit Links und Hinweisen auf andere Beiträge. Andere werden es Ihnen langfristig danken und ebenfalls auf Ihre Artikel verweisen und verlinken.

5.Erfolgskontrollen beim Content-Marketing

Erfolgskontrollen sind beim Online-Marketing sehr wichtig, damit sich Ihr Einsatz auszahlt. Anhand von Webanalyse-Tools lassen sich verschiedene Kennzahlen für die Conversion Rate, Lead Generierung, Traffic usw. ablesen und auswerten. Daneben bieten sich Umfragen an. Selbstverständlich können Sie an mehreren Faktoren erkennen, ob Ihr Content gut ankommt und wie oft ein Posting angeklickt oder geteilt wird. Sie werden schnell merken welche Artikel am besten bei Ihrer Zielgruppe ankommen. Das liefert Ihnen wertvolle Hinweise und Anregungen für neue Inhalte, die auf Ihre Zielgruppe zugeschnitten werden.

6. Überzeugenden Content produzieren – die Kernbotschaft

Ihre Texte, Grafiken, Bilder oder andere Content-Formate brauchen unbedingt eine klare Botschaft. Welche Kernbotschaft soll enthalten sein? Arbeiten Sie um diese Kernbotschaft herum. Ergänzen Sie die Hauptbotschaft durch hilfreiche Details, Aussagen, Thesen, Erläuterungen und anschaulichen Beispielen. Recherchieren Sie besonders sorgfältig, damit Sie Ihre Aussagen schlüssig untermauern können. Legen Sie sich dazu auch ein Quellenverzeichnis an.
Benennen Sie diese Quellen und beachten Sie unbedingt das Urheberrecht von Bildern und Texten. Geben Sie Ihren Lesern weiterführende Informationen in Form von Links und nützlichen Hinweisen. Bemühen Sie sich verschiedene Textarten zu erstellen, zum Beispiel Artikel mit Ratgebercharakter, ein Interview oder ein Wechsel der Perspektive. Bieten Sie Ihren Lesern öfters Abwechslung.

 

IB-IT/Grips.Art bedankt sich bei Schreiber01 für diesen Gastbeitrag.
Sollten Sie Fragen zum Thema Content-Marketing haben, stehen wir Ihnen gerne zur Verfügung.
IB-IT/Grips.Art

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!