Kategorien
E-Business Plugins SEO & Online-Marketing Tipps, Tricks & Tutorials WordPress

Leserbindung mit WordPress: So bleiben Ihnen Ihre Besucher treu

Für den Aufbau eines erfolgreichen Blogs oder einer erfolgreichen Webseite gibt es nichts wichtigeres als Leserbindung. Denn wenn ein Besucher nur einmal auf die Webseite kommt und dann niemals wieder, ist etwas richtig schief gelaufen. Spätestens dann besteht Handlungsbedarf. Das gewünschte Szenario ist, dass aus dem Besucher ein Stammkunde wird – ein Fan, sozusagen. Jemand, der immer wieder auf die Website kommt. Wie kann dieser Zustand erreicht werden? Heute beleuchten wir die Antworten auf diese Frage, damit Sie in Zukunft mehr wiederkehrende Besucher auf Ihrer Webseite haben.

leserbindung-mit-wordpress

Einfaches, klares und durchdachtes Webdesign

Webdesign hat einen großen Einfluss auf die Besucher und kann entscheidend zu der Frage beitragen, ob Ihre Besucher zu wiederkehrenden Besuchern werden oder nicht. Gutes Webdesign ist klar und einfach strukturiert, man sollte sich sofort zurechtfinden. Eine verständliche Navigation ist wichtig, Kontaktformulare müssen schnell erreichbar sein und es sollte auch eine Sitemap geben, damit Ihre Besucher einen Überblick über alle Unterseiten Ihrer Webseite erhalten.

Die richtige Farbgebung ist extrem wichtig. Die Farben sollten nicht nur zueinander, sondern auch zum Thema der Webseite passen. Generell gilt: weniger ist mehr. Zum Thema optimale Farbgebung im Webdesign-Prozess wird es demnächst noch einen eingehenden Artikel geben. Doch auch und gerade der Aufbau einer Webseite kann über den Erfolg entscheiden.

Beispiele für optimalen Aufbau einer Artikelseite

Hier geht es darum, dass der Besucher so lange wie möglich auf der Website gehalten werden soll und sich so viele Artikel wie möglich durchlesen soll. Denn ein Besucher, der viel Zeit auf einer Webseite verbringt, kommt in der Regel gerne wieder.

Focus.de

focus-online

Der Focus macht in seiner Online-Präsenz schon mal viel richtig. Auf der linken Seite wird mehr zum Thema angeboten, auf der rechten Seite gibt es die meistgelesenen Artikel verlinkt. Inhaltlich will ich das jetzt natürlich nicht bewerten ;-)

Spiegel.de

Spiegel.de

Auch die linke Seite von Spiegel-Online neben dem eigentlichen Artikel lädt zu einem längeren Verweilen auf der Webseite ein. Auch hier gilt: keine inhaltliche Wertung.

Newsletter-Marketing

Sehr viele Blogs leben heute nicht mehr von der konventionellen Banner-Werbung, sondern zu beachtlichen Teilen vom E-Mail-Marketing. Newsletter können jedoch nicht nur eingesetzt werden zum Verkauf von Produkten und Dienstleistungen, sondern auch zur Kundenbindung. Wenn Ihnen ein Besucher seine E-Mail-Adresse gibt, heißt das, dass er bereits sehr viel Vertrauen in Ihre Webseite oder Ihr Unternehmen setzt. Newsletter sind ein perfektes Instrument zur Leserbindung, daher sollten Sie Ihre Newsletter professionell und mit dem erforderlichen Aufwand vorbereiten. Die Formulare zum Abonnieren sollten stets an prominenter Stelle platziert werden und sich deutlich vom Rest der Website abheben. Wir stellen Ihnen heute zwei WordPress-Plugins für diesen Bereich vor:

Mailchimp

Mailchimp

Mailchimp dürfte der bekannteste Dienst sein, wenn es um Newsletter-Marketing geht. Mailchimp ist kostenlos, so lange man nicht mehr als 2.000 Abonnenten hat. Im Kern ist es ein Webservice, der den Kundenstamm bei sich verwaltet, dabei sehr schöne E-Mail-Vorlagen liefert und beim Anlegen neuer Kampagnen mit einem verständlichen Schritt-für-Schritt-System arbeitet. Er bietet Im- und Export-Funktionen und umfangreichen Online-Support. Ein offizielles WordPress-Plugin wird nicht angeboten, jedoch unterhalten Drittanbieter einige Plugins im WordPress-Verzeichnis. Die Plugins lassen Sie jedoch nur die Anmeldeformulare erstellen. Sollte man mehr als 2.000 Abonnenten haben, wird Mailchimp kostenpflichtig, die Lizenzen kosten dann ab $ 30.- monatlich. Der nützliche Preiskalkulator hilft, „das Risiko“ berechenbar zu machen.

MailPoet Newsletters

MailPoet Newsletters für WordPress

MailPoet geht einen anderen Weg, denn MailPoet (vormals Wysija) wurde gleich als WordPress-Plugin konzipiert. Es verwaltet nicht nur die Abonnenten, sondern kann auch aus den Blogbeiträgen per Drag & Drop direkt einen Newsletter zusammenstellen. Dazu bietet es über 20 verschiedene Themes. MailPoet ist ebenfalls kostenlos für bis zu 2.000 Abonnenten. Ab 2.000 Abonnenten kostet MailPoet dann zwischen $ 99.- bis hin zu $ 399.- jährlich.

MailPoet im Video

http://vimeo.com/mailpoet/v-1

  • Entwickler: MailPoet Staff
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 14.01.2015
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  MailPoet
  • Download von WordPress.org

Nützliche WordPress-Plugins zur Leserbindung

Nachfolgend stellen wir Ihnen eine Auswahl nützlicher WordPress-Plugins zur Leserbindung vor. Es sollte für jedermann etwas dabei sein.

Yet Another Related Posts Plugin (YARPP)

Yet Another Related Posts Plugin

Related Posts (ähnliche Artikel) sind eine wirkungsvolle „Waffe“ für die Bindung von Lesern. Es werden unter dem eigentlichen Artikel noch einige ähnliche Artikel angezeigt, die das Interesse des Lesers wecken sollen, weiter auf dem Blog zu verweilen. Yet Another Related Posts Plugin (YARPP) zeigt ähnliche Beiträge basierend auf Artikeln, Seiten und Custom Post Types an und bietet Ihren Besuchern zusätzlichen, relevanten Inhalt von Ihrer Website. Es können bis zu 5 Artikel entweder in Form einer Liste oder mit Vorschaubildern angezeigt werden. Zur Kalkulation des angezeigten Contents werden die Überschriften, der Text und die Tags herangezogen. Es existiert eine Pro-Version des Plugins, die ebenfalls kostenlos ist, jedoch einen Account auf der YARPP Homepage erfordert. In der Pro-Version kann unter anderem noch Werbung eingebunden werden.

  • Entwickler: Jeff Parker
  • Wird ständig weiter entwickelt: eher unregelmäßig
  • Letzte Version vom: 23.09.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE und spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  YARPP Homepage
  • Download von WordPress.org

Popular Widget

popular-widget-wordpress

Das Popular Widget zeigt die am meisten kommentierten oder meist angesehenden Beiträge Ihres Blogs in einem sogenannten Tab-Widget an. Hier ein Screenshot des Widgets:

popular-widget-screenshots

  • Entwickler: Hax
  • Wird ständig weiter entwickelt: eher unregelmäßig
  • Letzte Version vom: 16.10.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Mashshare – Social Media Icons SEO Share Buttons for Facebook, Twitter and more

Mashshare

Mashshare ist eines der umfassendsten und professionellsten Share-Plugins überhaupt. So ziemlich jeder denkbare Dienst wird angeboten. Wirklich gut sind die Anpassbarkeit des Plugins, die Buttons und die Möglichkeit zum Abonnieren von Feed und Newsletter, Leztere sind mit vielen verschiedenen Designs ausgerüstet. Pfiffig ist die Anzeige der bisherigen Shares und die Anzahl der Seiten-Aufrufe. Da es eine Adaption der auf der berühmten Webseite mashable.com eingesetzten Share-Möglichkeiten ist, sind ebenfalls alle dort genutzten Layouts möglich. Das Plugin wird vom Hamburger René Hermenau entwickelt. Nachfolgend einige Screenshots:

Screenshot Mashshare Plugin für WordPress

Screenshot Mashshare Plugin für WordPress

Screenshot Mashshare Plugin für WordPress

Interessant ist, dass es für dieses Plugin auch eine Demo-Seite gibt, auf der man das Plugin testen kann.

  • Entwickler: René Hermenau
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 15.01.2015
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Polldaddy Polls & Ratings

Polldaddy

Umfragen und Bewertungen sind ein gut erprobter Weg, Leser zu binden und länger auf der Website zu halten. Mit diesem Plugin können die Funktionen des bekannten Dienstes polldaddy.com direkt im WordPress-Dashboard verwendet werden. Mit nur wenigen Klicks ist eine Umfrage erstellt. Dabei kann zwischen 20 verschiedenen Designs gewählt werden. Das Plugin beherrscht auch Multiple-Choice Fragen und kann ein Ablaufdatum für die Umfragen setzen. Bewertungen können überall eingebaut werden, wo man möchte. Egal ob auf einer Seite oder einem Beitrag, ebenso sind Bewertungen auch in den Kommentaren möglich.

Sehr interessant ist das Top-Rated Widget, welches in der Sidebar platziert werden kann. Sie können mit diesem Widget die am besten bewerteten Artikel, Seiten oder Kommentare anzeigen – dies entweder auf die Woche oder den Monat bezogen. Gut zu wissen ist ebenfalls, dass dieses Plugin aus dem Hause Automattic stammt, der Firma hinter WordPress.

  • Entwickler: Automattic
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 26.11.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  Polldaddy
  • Download von WordPress.org

Disqus Comment System

Der Kommentar-Bereich einer Website ist eines der wichtigsten und stärksten Elemente eines Blogs. Hier bekommen Sie direktes Feedback, Meinungen, Verbesserungsvorschläge und Tipps zum Beitrag. Zudem bietet der Kommentar-Bereich eine gute Plattform für den direkten Austausch zwischen den Lesern und dem Autoren eines Artikels. Die Möglichkeit zum Austausch zwischen den Kommentierenden sollte auch nicht außer Acht gelassen werden. Aus diesem Grund ist es vorteilhaft, dem Kommentar-Bereich einige Aufmerksamkeit zu schenken.

disqus-comment-system

Das Disqus Kommentar-System ersetzt die WordPress-Kommentare und bietet dem Besucher und potentiell kommentierendem Nutzer eine Menge Vorteile. Die Vorteile im Überblick:

  • Echtzeit-Diskussionen
  • Auf mobile Geräte optimierte Kommentare
  • E-Mail Benachrichtigung bei nachfolgenden Kommentaren
  • Kommentar-Voting
  • Den Kommentatoren kann gefolgt werden
  • Kommentare können auch nach dem Absenden noch bearbeitet werden
  • Bilder und Videos sind in den Kommentaren möglich
  • Das Design passt sich der Webseite an
  • Es entsteht mit der Zeit eine echte Community
  • Kommentatoren bleiben nicht anonym, ihre Aktivitäten innerhalb Disqus können gesehen werden, da diese ein Profil ähnlich Twitter und Co. haben – siehe Screenshot Nummer 2

Hier 2 Screenshots von Disqus im Einsatz:

disqus-beispiel-1

disqus-beispiel-2

  • Entwickler: Disqus
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 09.12.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  Disqus
  • Download von WordPress.org

Legen Sie einen Bereich nur für Mitglieder an

Ein weiterer wirkungsvoller Weg, um Leser an die eigene Webseite zu binden, ist die Einrichtung eines Bereiches nur für Mitglieder. In diesem Bereich können dann spezielle Inhalte nur für registrierte und angemeldete Mitglieder bereitgestellt werden. Dies muss nicht zwangsläufig auch ein Bereich mit bezahltem Inhalt sein, gerade auch hochwertiger, kostenloser Inhalt dürfte ein gutes Zugpferd sein. Konzentrieren Sie sich bei dieser Art von Inhalt am besten nur auf hochwertigen Content, der ein Problem des Besuchers löst. Eine Problemlösung kann hierbei vielfältig sein, doch wenn Sie Ihre Zielgruppe kennen, wissen Sie mit Sicherheit auch, welche Probleme Ihrer Besucher Sie lösen können.

Das Plugin, welches wir Ihnen nun vorstellen wollen, kann Ihnen bei der Umsetzung eines Mitgliederbereichs helfen, da es auf einfache Art und Weise alle benötigten Komponenten bereit stellt.

WP-Members

Das WP-Members Plugin für WordPress

WP-Members stellt ein Registrier- und Anmelde-Formular zur Verfügung, und bietet den angemeldeten Benutzern (Rolle Abonnent/Subscriber) die Möglichkeit, Änderungen am Profil vorzunehmen. Das Anmeldeformular lässt sich auch mit Hilfe eines eigenen Widgets in die Seitenleiste oder einen anderen Widget-Bereich legen. Das Plugin legt die Mitglieder als WordPress Benutzer an, und stellt dabei zusätzliche Felder für die Benutzer zur Verfügung. Darüber hinaus können eigene Felder definiert werden. WP-Members schränkt die Nutzung bestimmter Inhalte auf registrierte und angemeldete User ein. Das verwendete WordPress-Theme muss nicht abgeändert werden. Sehr gut ist, dass der Registrier-Prozess nicht auf der WordPress-Registrierseite stattfinden muss, sondern direkt im Inhalt geschehen kann. Einige Features im Überblick:

  • blockiert Beiträge und Seiten, auch individuell
  • Login/Registration findet im eigentlichen Inhalt statt
  • Die User-Registrierung und das Profil wird in das WordPress-Theme integriert
  • SidebarLogin-Widget
  • Benutzerdefinierte Felder zur Registration und Profile sind möglich
  • Benachrichtigung des Admins, wenn sich neue Benutzer registrieren
  • Neue Registrierungen können zurückgehalten werden, bis der Admin sie freischaltet
  • Anreissertexte für Beiträge werden automatisch generiert
  • CAPTCHA für Registrierungen möglich
  • Mehr als 80 Action und Filter Hooks für Erweiterungen vorhanden

Nachfolgend einige Screenshots und ein Video:

WP-Members Screenshot

WP-Members Screenshot

WP-Members Screenshot

Das Video zum Plugin – WP-Members Basic Demo

http://youtu.be/x4MEoRLSY_U

Fazit

Wie Sie sehen, kann man eine ganze Menge unternehmen, um seine Leser an die eigene Webseite zu binden. Es erscheint sinnvoll, gerade diesem Bereich etwas mehr Aufmerksamkeit zu schenken, um seinen Blog noch erfolgreicher zu machen und eine Verbindung zwischen der Webseite und dem Besucher zu gestalten. Jede vorgestellte Möglichkeit, jedes vorgestellte Plugin ist dabei hilfreich und schafft eine gute Basis, auf der durch einzigartigen Inhalt aufgebaut werden kann. Dieses wichtige Element, den wertigen Content, kann Ihnen (noch) kein Plugin liefern…

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress und Social Media: Statische Teilen-Buttons sorgen für mehr Geschwindigkeit

Eine Webseite kann in der heutigen Zeit gar nicht schnell genug sein. Besonders im Hinblick darauf, dass die Ladegeschwindigkeit mittlerweile ein Rankingfaktor für Google darstellt, ist die Optimierung der Performance eine wichtige Aufgabe. Performance-Bremsen gibt es einige. Eine der größeren Art sind oftmals die beliebten “Teilen-Buttons” der großen sozialen Netzwerke. Diese laden meistens nicht unerhebliche Mengen JavaScript von ihren heimatlichen Servern nach und blähen eine Webseite damit unnötig auf. Häufiger als es uns lieb sein kann, kommt es dazu, dass die Buttons “hängen”, weil der benötigte Code nicht schnell genug vom Server nachgeladen werden kann. Das kann den Seitenaufbau der eigenen Webseite sehr verzögern. Doch es geht auch anders. In diesem Artikel zeigen wir Ihnen, wie sie die Buttons für die wichtigsten sozialen Netzwerke als statische Elemente ganz ohne den Einsatz von JavaScript realisieren und in Ihre WordPress-Website einbinden können.

Statische Share-Buttons für mehr Performance

 Statische Share-Buttons in zwei Varianten

Wir stellen Ihnen die Buttons heute in zwei Varianten vor, einmal ohne und einmal mit Zähler. Des Weiteren zeigen wir Ihnen, wie man die Buttons am geschicktesten in das eigene WordPress-Theme einfügt. Hierfür erstellen wir eine WordPress-Funktion, die in die functions.php des betreffenden WordPress-Themes eingefügt wird. So können Sie die Buttons mit einem einfachen kleinen PHP-Tag an jeder gewünschten Stelle des Themes anzeigen lassen.

Das nötige CSS

Bitte fügen Sie das für die Buttons nötige CSS zu der style.css Datei Ihres Themes hinzu (wp-content/themes/ihr theme).

.share-buttons { border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin: 10px 0; padding: 20px 0; position: relative; line-height: 1;}
.share-buttons a { text-decoration: none; margin-right: 20px; border-radius: 3px; text-align: center; color: #fff; padding: 5px 15px 5px 15px;}
.share-buttons a:hover { text-decoration: none; }
.share-buttons a.twitter {background: #5DB5DE;} 
.share-buttons a.facebook {background: #3D62B3;} 
.share-buttons a.googleplus {background: #D34836;} 
.share-buttons a.googleplus:hover {background: #f75b44}
.share-buttons a.facebook:hover {background: #4273c8} 
.share-buttons a.twitter:hover {background: #32bbf5}

Der benötigte Code für die Zähler

Um die Theme-Dateien sauber und übersichtlich zu halten, benötigen wir 2 einfache PHP-Funktionen, die mit einem Einzeiler an PHP-Code im Anschluss an die gewünschte Stelle im Theme eingebracht werden können.

Statische Share-Buttons

Öffnen Sie die functions.php Ihres WordPress-Themes und fügen Sie den folgenden Code am Ende der Datei ein:

/**
* Statische Teilen Buttons ohne Zähler
*
*/
function ah_share_buttons() {
?>
<div class="share-buttons">
<a class="twitter" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twitter</span></a>
<a class="facebook" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Facebook</span></a>
<a class="googleplus" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a>
</div>
<?php }
/**
* Statische Teilen Buttons mit Zähler
*
*/
function ah_share_buttons_zaehler() {
?>
<div class="share-buttons">
<a class="facebook" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Facebook <?php $URL = get_permalink();function get_shares($URL) { $json_string = file_get_contents('http://graph.facebook.com/?ids=' . $URL); $json = json_decode($json_string, true); return intval( $json[$URL]['shares'] );} ?><?php echo get_shares($URL); ?></span></a>
<a class="twitter" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> ➨ <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twitter <?php $URL = get_permalink();function get_retweets($URL) { $SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $URL); $SBarray = json_decode($SBstring, true); return intval( $SBarray['count'] );} ?><?php echo get_retweets($URL);?></span></a>
<a class="googleplus" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+ <?php $URL = get_permalink();function get_plusone($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc"); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json')); $curl_results = curl_exec ($curl); curl_close ($curl); $json = json_decode($curl_results, true); return intval( $json[0]['result']['metadata']['globalCounts']['count'] );} ?><?php echo get_plusone($URL); ?></span></a>
</div>
<?php }

Das Ergebnis: So sehen die statischen Share-Buttons aus

Die Buttons ohne Zähler

Die statischen Share-Buttons ohne Zähler

Die Buttons mit Zähler

Statische Share-Buttons mit Zähler

Der Code mit der oben angegebenen CSS-Formatierung schafft schöne, auffällige Buttons, die rasant laden und bestens Ihren Job erledigen. Im Gegensatz zu den Original-Buttons werden Sie nicht mehr so leicht übersehen und daher vermutlich öfter genutzt, als es bei den Original-Buttons der Fall ist. Natürlich kann die Optik ganz leicht angepasst werden. Wenn man das Design der originalen Share-Buttons der sozialen Netzwerke vorzieht, können hier (anzufertigende oder zu besorgende) Grafiken der Buttons hinterlegt werden, so dass sich zu den offiziellen Buttons kein visueller Unterschied ergibt. Allerdings funktioniert das nur mit den Buttons ohne Zähler.

Sicherlich kann man die CSS-Formatierung auch weglassen und die Buttons als reinen Textlink nutzen, jedoch bringt man sich dann um den Vorteil der visuellen Auffälligkeit. Nur das, was der Leser sieht, kann er anklicken.

Der Einsatz im WordPress-Theme

Zu guter Letzt müssen die Teilen-Buttons noch in das eigene WordPress-Theme an die gewünschte Stelle eingefügt werden. Dazu erstellen wir 2 kleine PHP-Tags, wovon der gewünschte im Anschluss nur noch an die passende Stelle kopiert werden muss.

Es existieren weitere, optimalere Wege, die Buttons in das Theme zu integrieren, so dass die Änderungen auch nach einem Theme-Update erhalten bleiben. Der eine Weg wäre das Schreiben eines Plugins, der andere Weg die Erstellung eines Child-Themes. Beides genauer zu beleuchten würde allerdings diesen Artikel sprengen, daher stelle ich nur die Integration mit PHP-Tag direkt im Theme vor. Die Vorgehensweise bei einem Child-Theme wäre identisch, nur müsste es halt erst einmal das Child-Theme geben.

Integration mittels PHP-Tag

Öffnen Sie die single.php Ihres WordPress-Themes und suchen sie folgende Stelle:

Die Stelle zum Einfügen des Share-Button Codes in der single.php

Fügen Sie nun unter- oder oberhalb der markierten Stelle folgenden Tag für die Anzeige der Buttons ohne Zähler ein:

<?php echo ah_share_buttons(); ?>

Für die Anzeige der Share-Buttons mit Zähler benötigen Sie folgenden PHP-Tag:

<?php echo ah_share_buttons_zaehler(); ?>

Oberhalb von the_content() werden die Buttons oberhalb des Inhalts angezeigt, unter dem Content-Tag erfolgt die Anzeige unterhalb des Inhalts. Nicht immer befindet sich in der single.php auch direkt der the_content()-Aufruf. Es kann in Ihrem Theme durchaus möglich sein, dass noch eine andere Datei in die single.php geladen wird und sich in dieser dann the_content() befindet.

Links zum Beitrag

Fazit

Die statischen Buttons sind auffällig, ansprechend gestaltet und funktionieren hervorragend. Die Ladegeschwindigkeit Ihrer Webseite wird es Ihnen danken, da mit Einsatz dieser Buttons wieder einiges an bremsendem JavaScript eingespart wurde. Der Unterschied lässt sich mit einem Speed-Test-Tool wie den Pingdom-Tools messen, wenn Sie nicht vorher noch weitere nennenswerte Hemmnisse aus der Welt zu schaffen haben.

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Fitness-Schema für Google – Rich Snippets für Ihr WordPress-Theme

Schema.org wurde als gemeinsames Projekt von Google, Microsoft und Yahoo! entwickelt, um den Inhalt von Webseiten durch Suchmaschinen leichter strukturieren und erfassen zu können. Das Markup hilft den Suchmaschinen dabei, den Inhalt von Webseiten leichter erfassen und indexieren zu können. Dieses Prinzip erleichtert die Arbeit von Webmastern ungemein, da sie sich auf ein einziges Verfahren konzentrieren und möglichst viele Vorteile daraus ziehen können. Daher ist Schema.org auch für die Suchmaschinenoptimierung von großer Relevanz. Zudem kann Google aus dem Schema.org Markup Rich Snippets erstellen, was sich durchaus positiv auf die Klickten und Besucherzahlen einer Webseite auswirken kann, weil die betreffenden Suchergebnisse auffälliger sind. Bisher benutzt Google die Rich Snippets leerdings (noch) nicht als Ranking-Faktor.

Fitness für Google - Schema.org Markup für Ihr WordPress-Theme

Was mit Schema.org ausgezeichnet werden kann

Mit Schema.org lassen sich etliche Elemente einer Website auszeichnen, hier ein kleiner Auszug dessen, was möglich ist:

  • Personen
  • Orte, Geschäfte, Restaurants
  • Gesundheit und Medizin
  • Events und Veranstaltungen
  • Kreativität: kreative Arbeit, Buch, Film, Musik, Rezept, TV-Serie
  • Organisation
  • Testbericht, Rating/Bewertung
  • Produkt, Angebot

Eine vollständige Liste mit allen Möglichkeiten, allen auszuzeichnenden Elementen und kompletter Dokumentation erhalten Sie auf der Website von Schema.org. Hier bei Dr. Web hat Kollege Dieter Petereit vor einiger Zeit einen ausführlichen Beitrag zum Thema Rich Snippets veröffentlicht.

Rich Snippets

Das Schema.org Markup wird hauptsächlich dazu genutzt, um sogenannte Rich Snippets zu erstellen. Diese Snippets werden direkt auf den Suchergebnisseiten (auch “SERPs” genannt) angezeigt und sollen dem Suchenden einen Mehrwert bieten. Wird zum Beispiel nach einem Rezept gesucht (das mit Infos zum Rich Snippet seitens des Betreibers versehen wurde), werden direkt Rezeptvorschläge mit Zubereitungsdauer und Kalorienangabe ausgegeben. So unterscheiden sich die normalen Suchergebnisse von den Rich Snippets erheblich, erzeugen mehr Aufmerksamkeit und dementsprechend mehr Klicks. Hier zwei Beispiele der Darstellung von Rich Snippets:

Die Auszeichnung eines Kochrezepts

Rezept-Darstellung in den Rich Snippets von Google
Die Auszeichnung eines Pop-Stars mit dargestellten Songs

Rich Snippet Darstellung eines Musikers mit seinen Songs

Eine kurze Video-Einführung in die Rich Snippets

Wie Sie Schema.org nutzen können

Um Schema.org zu nutzen, müssen Sie nur etwas zusätzliches HTML-Markup Ihrer Webseite hinzufügen. Dies geschieht, damit die Suchmaschine weiß, worum es bei Ihrer Webseite geht und welche speziellen Elemente auf der einzelnen Seite zu finden sind. Wenn Ihre Seite ein Video enthält, würde man damit beginnen, den äußeren Container zu finden und ihn mit den Attributen itemscope und itemtype versehen. Siehe Code-Beispiel:

<div itemscope itemtype="http://schema.org/Movie">

</div>

Jedes Element im Video kann durch die Nutzung des Attributs itemprop definiert werden. Um den Namen des Videos zu definieren, muss lediglich die Überschrift etwas modifiziert werden:

<h1 itemprop="name">Avatar</h1>

Auch innerhalb des Videos kann jedes einzelne Element so für Suchmaschinen verständlich ausgezeichnet werden. Hier ein Beispiel einer vollständigen Auszeichnung:

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div> 

Schema.org mit WordPress nutzen

Die Nutzung mit WordPress ist relativ einfach, dass genutzte Theme muss nur ein wenig modifiziert werden. Vorteilhaft wäre es, wenn Sie sich für die Modifizierungen ein Child-Theme erstellen, damit beim nächsten Theme-Update nicht alle Änderungen wieder verschwunden sind. Fügen Sie nun als Erstes folgende Funktion der functions.php Ihres genutzten Themes hinzu:

<?php
function html_tag_schema() {
    $schema = 'http://schema.org/';

    // Is single post
    if(is_single()) {
        $type = "Article";
    }

    // Is author page
    elseif( is_author() ) {
        $type = 'ProfilePage';
    }

    // Contact form page ID
    elseif( is_page(1) )
    {
        $type = 'ContactPage';
    }
    
    // Is search results page
    elseif( is_search() ) {
        $type = 'SearchResultsPage';
    }

    else {
        $type = 'WebPage';
    }

    echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';
}

Diese Funktion definiert automatisch das richtige Schema für die einzelnen WordPress-Seiten. Damit die Kontaktseite allerdings korrekt ausgezeichnet wird, stellen Sie bitte die betreffende WordPress-ID der Kontakt-Seite fest und ändern dann is_page(1) auf die korrekte ID um. Die Funktion kann noch beliebig erweitert werden, gerade mit Custom Post Types funktioniert die Auszeichnung perfekt.

Suchen Sie nun den HTML-Tag Ihres Themes (zumeist in der header.php zu finden) und ändern ihn folgendermaßen ab:

<html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>

Haben sie dies erledigt, wird von nun an jede Seite korrekt ausgezeichnet. Als nächstes suchen Sie nach dem Title-Tag, dieser befindet sich ebenfalls in der header.php. Ändern Sie den Tag wie folgt um:

<title itemprop="name"><?php wp_title(''); ?></title>

Als nächstes muss der Bereich des Hauptinhalts ausgezeichnet werden. Hierzu suchen Sie in der single.php nach dem Div, dass die the_Content() Funktion umschliesst. Ergänzen Sie das Div mit folgenden Informationen:

<div id="content" itemprop="mainContentOfPage">
<?php the_content();?>
</div>

Es ist immer eine gute Idee, Google und andere Suchmaschinen wissen zu lassen, wann ein Beitrag publiziert oder modifiziert wurde. Schließlich kann man daran auch seine Aktualität erkennen. Meist werden Sie in der single.php fündig, wenn Sie nach Datums-Tags suchen. Ergänzen Sie es bitte folgendermaßen:

<time class="entry-date" datetime="<?php the_date('c'); ?>" itemprop="datePublished" pubdate><?php  the_time( get_option( 'date_format' ) ); ?></time>

WordPress Beitragsbilder korrekt auszeichnen

Als vorerst letzte Arbeit am Theme bleibt noch die Auszeichnung der Post-Thumbnails übrig. Öffnen Sie dazu die functions.php Ihres WordPress-Themes und suchen nach der Funktion the_post_thumbnail(). Zu dieser Funktion fügen wir ein weiteres Attribut hinzu, nämlich “itemprob => image”. Dieses Attribut zeigt den Suchmaschinen, dass hier ein Beitragsbild mit direktem Bezug auf den kompletten Artikel verwendet wurde. So sollte die Funktion im Anschluss aussehen:

<?php the_post_thumbnail('thumbnail', array('itemprop' => 'image')); ?>

Sollte es bereits ein Array in der Funktion geben, so trennen Sie die Arrays einfach mit einem Komma und fügen Sie sie hintereinander ein.

Fazit

Sich mit solchen, recht einfach umzusetzenden On-Page SEO Maßnahmen zu beschäftigen, kann unter Umständen sehr viel mehr Besucher auf die eigene Webseite bringen und diese auch zu Kunden umwandeln. Auch wenn man für das private „Internettagebuch“ um diese Schritte noch herumkommt, so sind sie für Besitzer einer Website, die Geld verdienen muss, absolute Pflicht. Denn sich von der Konkurrenz abzuheben, bedeutet mehr Besucherzahlen und das wiederum ist die Voraussetzung für mehr Umsatz.

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Die Wahrheit über WordPress-Performance [#2/2]

Im ersten Artikel dieser Serie habe ich alle Punkte für eine perfekte On-Page Performance-Optimierung angesprochen. Daher wissen Sie jetzt, an welchen Stellschrauben Sie drehen müssen, um Ihre WordPress-Webseite so richtig schnell zu machen. Allerdings ist es in der Praxis nicht ganz so leicht, wie es sich in der Theorie anhört. Aus diesem Grund werden wir in diesem Beitrag alle Punkte zusammen abarbeiten, damit Sie die Gewissheit haben, das Gelernte auch mit Ihrer eigenen Webseite umsetzen zu können. Damit wir uns richtig verstehen: In diesem Beitrag wird es darum gehen, eine WordPress-Website richtig schnell zu machen und eine exorbitant hohe Google PageSpeed-Bewertung zu bekommen.

Die Wahrheit über WordPress Performance - [#2]

Feststellen des Ausgangszustands

Ich wähle für den Test eine frische WordPress-Installation mit importierten Theme Unit Test Daten, um einen gut gefüllten Blog zu simulieren. Das WordPress-Theme meiner Wahl ist das Baskerville von Anders Norén, weil es relativ viel CSS und JavaScript benötigt. Ebenfalls habe ich jedem Artikel ein Artikelbild zugewiesen. Damit habe ich einen länger existierenden und geflegten Blog simuliert. Von mir installiert wird auch das Jetpack-Plugin und ich aktiviere genau die Punkte, die auch auf meiner eigenen Webseite aktiviert sind (TechNick – hat 93 von 100 Google Page Speed Punkte). Das hat den Vorteil, dass wir eine Webseite optimieren werden, die einer normalen Installation gleichkommt, weil mehr CSS- und mehr JavaScript-Dateien im HTML-Quelltext zu finden sind. Die Optimierung soll ja nicht zu leicht sein.

Folgendes ist bei Jetpack aktiviert:

  • Photon
  • Publizieren
  • Sharing
  • Shortcodes einbetten
  • Site Verification
  • Subcriptions
  • WP.me Kurz-URLs
  • WordPress.com-Statistiken

1. Bevor es losgeht: Erstellen Sie ein Child-Theme

Bevor wir die Arbeiten starten, legen Sie bitte ein Child-Theme an und aktivieren es dann. Änderungen am Theme direkt zu machen macht nur Sinn, wenn Sie es selbst erstellt haben und somit keine Updates erfolgen. Bei allen anderen Themes ist es jedoch unabänderlich, nur mit Child-Themes zu arbeiten, weil ansonsten alle Änderungen nach einem Theme-Update verloren wären und nichts mehr läuft, wie es sollte. Im WordPress Codex ist eine tolle Anleitung zu finden, wie man ein Child-Theme erstellt. Wichtig hierbei ist, die CSS-Datei des Parent-Theme nicht über die CSS-Datei des Child-Themes per @import zu laden. Das ist nicht nur äußerst schlechter Stil und entspricht nicht den WordPress-Richtlinien, es verursacht auch einen HTTP-Request mehr – genau das aber wollen wir vermeiden.

Das CSS wird korrekt über die functions.php des Child-Themes geladen, so geht es:


function enqueue_parent_theme_style() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style');

Auch das CSS Stylesheet des Child-Themes muss korrekt geladen werden und auf keinen Fall direkt im Header verlinkt sein. Fügen Sie es so dem Header hinzu, der Code muss in die functions.php des Child-Themes eingebaut werden.

/**
 * Proper way to enqueue styles and scripts
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Im Child-Theme-Ordner enthalten sein muss eine CSS-Datei namens style.css und eine Datei namens functions.php. Ein Screenshot wäre auch klasse, dann lässt sich unser Child-Theme leichter auffinden. Laden Sie jetzt Ihr frisch ersteltes Child-Theme per (S)FTP auf den Server in den Ordner wp-content/themes. Wechseln Sie in die WordPress-Administrationsoberfläche und aktivieren Sie nun Ihr Child-Theme. Wenn Sie alles richtig gemacht haben, sollte Ihr HTML-Quellcode nun drei CSS-Dateien enthalten:

  • parent-style-css
  • style-css
  • jetpack_css-css

2. Testen Sie die Geschwindigkeit und die Google PageSpeed-Punkte

Damit festgestellt werden kann, wieviel die Optimierungen bringen, muss der Ausgangszustand in Erfahrung gebracht werden. Testen Sie daher die nicht optimierte Webseite mit den Pingdom Tools und Google PageSpeed Insights. Bei Pingdom ist es wichtig, bei den „Settings“ unter dem Feld für die URL noch schnell Amsterdam anzuklicken.

Ausgangszustand mit den Pingdom Tools:

Das Ergebnis der Messung mit den Pongdom Tools

Ausgangszustand mit Google PageSpeed Insights:

Das Google PageSpeed Insights Messergebnis

68 von 100 möglichen Punkten zu erreichen, ist ziemlich schlecht. Da haben wir nun also genügend Potenzial, dass Optimierungen wirklich ins Gewicht fallen.

1. „Tunen“ der .htaccess Datei

Bevor wir mit anderen Arbeiten beginnen, beschäftigen wir uns kurz mit der .htaccess Datei von WordPress und ergänzen sie um einige Zeilen Code. Die .htaccess Datei finden Sie im WordPress-Hauptordner auf dem Server, dort, wo auch die Ordner wp-content, wp-admin usw angezeigt werden. Laden Sie die .htaccess auf den Desktop und fügen Sie unter „End WordPress“ folgendes ein:

################### Kompression aktivieren ######
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

################# Browser Caching aktivieren ######
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"

Was diese beiden Einträge bereits ohne weitere Optimierungen bringen, zeigt der Test mit Google PageSpeed danach:

Ergebnis nach Kompression und Browser-Caching

Ob bei Ihnen die Gzip-Kompression funktioniert, können Sie mit diesem Tool testen. Das Tool REDBot wiederum testet, ob der von Ihnen eingerichtete Browser-Cache funktioniert.

2. CSS und JavaScript optimieren

Bevor man sich an größere Operationdn im Bereich CSS wagt, sollte zuallererst an den normalen Stellschrauben wie der Zusammenfassung und Komprimierung gedreht werden. Für mich fängt es dabei an, dass ich prüfe, ob sich jQuery weiterhin (wie meist normal aus Kompatibilitätsgründen) im Header befinden muss. Ich füge daher der functions.php des Child-Themes ein wenig Code hinzu, der alle JavaScript-Dateien in den Seitenfuss verschwinden lässt.

/**
*
* Verfrachtet alles JavaScript in den Footer
*
*/
add_action( 'wp_enqueue_scripts', 'evolution_print_jquery_in_footer' );

function evolution_print_jquery_in_footer() {

if ( ! is_admin() )

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}

Download und Installation von Autoptimize

Das Autoptimize Plugin für WordPress

Autoptimize ist ein kleines, sehr wirkungsvolles Plugin für die Komprimierung, Zusammenfassung und Minimierung von CSS- und JavaScript-Dateien. Weiterhin besitzt es eingebaute Funktionen für das sogenannte „CSS above the fold“, was wir etwas später noch benötigen werden. Nach der Installation und Aktivierung wechseln Sie im WordPress-Dashboard zu „Einstellungen => Autoptimize“ und klicken hier alle drei Punkte, also: HTML, CSS und JavaScript optimieren an. Ist das erledigt, sieht Ihr HTML-Quellcode bereits sehr komprimiert, aber auch aufgeräumt aus. Die Anzahl der eingebundenen Dateien haben sich extrem verringert. Ich finde im Quellcode des Baskerville-Child-Themes nur noch zwei CSS-Dateien (eine vom Theme und Google Fonts) und zwei JavaScript-Dateien vor (Theme und Jetpack).

Download Autoptimize von wordpress.org

Download und Installation von Cachify

Das Cachify Plugin für WordPress

Cachify ist ein hochwirksames Caching-Plugin für WordPress mit nur wenigen Einstellungsmöglichkeiten, das jedoch trotzdem hervorragende Arbeit leistet. Cachify generiert aus den dynamischen PHP-Seiten statische HTML-Seiten, die so schneller an den Browser ausgeliefert werden können, weil nicht bei jedem Aufruf einer Seite der PHP-Interpreter gestartet werden muss. Cachify ist eines der besten Caching-Plugins auf dem Markt, weil es einfach zu bedienen ist und gute Ergebnisse liefert.

Als Cache-Aufbewahrungsort stellt man am besten „Festplatte“ ein, das ist die schnellere der beiden Varianten. Allerdings muss die .htaccess Datei hierzu noch angepasst und um einen Code-Block ergänzt werden. Sie finden den Code-Block und viele Tipps vom Entwickler Sergej Müller auf der Cachify Seite.

Download Cachify von wordpress.org

Zwischentest

Ein Zwischentest mit den Pingdom Tools

Die Pingdom-Tools sind nett zu uns und geben bereits jetzt anständige Ergebnisse heraus. Google PageSpeed Insights wird nicht so optimistisch sein, wetten?

Der Zwischentest mit Google PageSpeed Insights

Google hat uns trotz der ganzen Mühe nur einen Punkt dazu gegeben, weil für das Test-Script noch drei Probleme existieren. Nur einer der angemerkten drei Punkte kann so ohne weiteres behoben werden. Warum? Sprechen wir die 3 Punkte mal kurz durch:

Punkt 1: JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen

Ganz klar lösbar. Hier geht es darum, aus dem CSS die Punkte rauszusuchen, die für die Darstellung des Bildschirminhalts ohne Scrollen nötig sind. Diese Teile des CSS werden dann komprimiert und inline in den Header eingefügt. Das dann noch übrige CSS wird wieder verlinkt – allerdings in den Footer, damit der Seitenaufbau nicht wieder gestört wird.

Punkt 2: Bilder optimieren. Wird bei dem verwendeten Theme ein kleines Problem, da muss der Code angefasst werden.

Stellen Sie zuerst fest, wie groß die Beitragsbilder auf der Startseite wirklich sein müssen. Wenn Ihr Browser Google Chrome ist, klicken Sie rechts auf das betreffende Bild und klicken dann auf „Element untersuchen“. Dann können Sie sehen, wie groß das Bild sein muss und wie groß es wirklich ist.

Das Bild im Original-Theme untersuchen

Wie Sie auf dem Screenshot erkennen können, ist das Bild 600 x 300 Pixel groß und wird vom HTML auf eine Größe von 359 x 180 Pixel skaliert. Wir brauchen also eine korrekte Bildgröße von 359 Pixel mal irgendwas.

Für die Darstellung der Startseite ist die Index.php zuständig. Wenn diese aus dem Parent-Theme-Ordner kopiert und mit einem Text-Editor geöffnet wird, stellen Sie schnell fest, dass von der index.php die content.php geladen wird. Kopieren Sie diese auch auf Ihren Desktop und  ändern folgende Zeile:

Die markierte Zeile ändern

Diese Zeile ersetzen Sie zum Beispiel mit:

<?php the_post_thumbnail( 'front-thumb' ); ?>

Zusätzlich müssen Sie dann noch in der functions.php Ihres Child-Themes folgende Notierungen machen:

/**
* Bildgroessen
*
*/
if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 945, 9999 );
add_image_size( 'post-thumbnail', 600, 9999 );

add_image_size( 'front-thumb', 359, 9999 );
}

Die abgeänderte content.php wird nun mit der functions.php des Child-Themes ebenfalls in den Child-Theme-Ordner auf den Server hochgeladen, damit bei einem Theme -Update keine Änderung verloren geht. Nun müssen die auf der Startseite befindlichen Beitragsbilder nochmal neu vergeben werden, damit WordPress die Post-Thumbnails auch korrekt zuschneidet. Jetzt testen wir unsere Webseite nochmals mit Google PageSpeed Insights. Nicht vergessen: Vorher den Cache von Cachify löschen (Mülleimer-Symbol ganz rechts oben im Dashboard).

So löschen Sie den Cache von Cachify

Das neue Google PageSpeed Insights Ergebnis

Ein weiterer Zwischentest mit Google PageSpeed Insights

Punkt 3: JavaScript reduzieren.

JavaScript reduzieren

Was soll man sagen? Diese Aufforderung ist Unsinn, da das JavaScript bereits hervorragend komprimiert ist. Sie dürfen sie deshalb getrost ignorieren, davon wird Ihre Website auch nicht schneller. Besonders nicht, wo das JavaScript erst am Ende geladen wird und zudem vom Plugin noch ein Defer-Attribut zugeordnet bekommen hat (auch wenn es keinen Sinn ergibt, weil es sich im Footer befindet).

Jetzt bleibt uns nur noch eine einzige Stellschraube, wenn wir mit den 93 Google PageSpeed Insights Punkten nicht zufrieden sind:

3. CSS-Ressourcen, die das Rendering blockieren – jetzt geht’s ans Eingemachte

Ich hoffe, Sie sind experimentierfreudig und haben eine Neigung zu Fummelarbeit, da jetzt viel rumprobiert werden muss, bis man die optimale Lösung gefunden hat. An diesem Punkt müssen nun alle CSS-Notierungen aus den Stylesheets heraus gesucht werden, die für die Darstellung des Bildschirminhalts sorgen, ohne das gescrollt werden muss. Laden Sie sich nun das Style.css aus dem Parent-Theme „Baskerville“ auf den Desktop und öffnen diese Datei wieder mit einem reinen Texteditor. Vergessen Sie bitte auch nicht das Google Fonts Stylesheet, die meisten Themes verwenden heute Google Fonts, um eine angenehme Typographie zu gewährleisten.

Legen Sie zudem noch eine neue CSS Datei namens „test.css“ oder ähnlich an. Sie wird nur für die herauskopierten CSS-Stücke aus der Google Font-Datei und der Baskerville Theme CSS-Datei benötigt.

Wichtig: Machen Sie vor jeder Arbeit an einer Original-Theme-Datei eine Kopie.

Probieren wir nun ein wenig rum und versuchen, nur das wirklich nötige CSS für die Darstellung ohne Srollen zu finden. Hierfür gibt es auch einen Generator, den man ausprobieren kann.

Ich habe mich für folgendes entschieden: Zuerst kopiere ich den Inhalt der Google Webfonts-Datei. Das ist wichtig, weil es sonst zu Rucklern in der Fontdarstellung kommen wird. Aus der style.css des Baskerville-Themes kopiere ich die CSS Punkte 0 bis 7 heraus. Das entspricht Zeilennummer 37 bis 1240. Dieses CSS (Google Webfonts und das style.css von 0 bis 7) wird nun mit einem CSS Kompressor auf stärkster Stufe komprimiert.

Die CSS Komprimierung

Das nun stark komprimierte CSS wird in das dafür vorgesehene Feld in Autoptimize eingefügt und abgespeichert. Wenn Sie in den Einstellungen von Autoptimize die „Erweiterten Einstellungen“ aktivieren, bekommen Sie unter dem Punkt „CSS“ noch den Unterpunkt „Inline und Defer CSS“. Klicken Sie ihn an und fügen dort das komprimierte CSS ein und speichern alles.

Das Google Webfonts-Stylesheet aus dem Header nehmen

Die Google Webfonts brauchen wir nun nicht mehr im Header, schliesslich haben wir Sie ja soeben mit dem restlichen, für die Darstellung ohne Scrollen nötigen CSS, komprimiert und inline in unseren Header eingefügt. Mit einigen Zeilen Code in der functions.php des Child-Themes bekommen wir das Google-Stylesheet wieder komplett entfernt:

/**
* Deregister und Dequeue Google Webfonts
* Diese Fonts befinden sich nun im Inline CSS
*
*/
function baskerville_remove_scripts() {

wp_deregister_style( 'baskerville_googleFonts' );
wp_dequeue_script( 'baskerville_googleFonts' );

}
add_action( 'wp_print_styles', 'baskerville_remove_scripts', 20 );

Nun ist der Moment gekommen, in dem der Elefant das Wasser lässt: der abschliessende Test mit Google PageSpeed Insights.

Das Endergebnis der Testseite

Wie sich herausgestellt hat, lande ich mit meinen Optimierungen nur einen einzigen Punkt unter dem Smashing Magazine, welches unglaubliche 100 von 100 möglichen Punkten aufweist. Da kann man schon mal stolz sein.

Das Endergebnis unserer Google PageSpeed Bemüungen

Gleichzeitig hat sich auch die Mobil-Ansicht dramatisch verbessert, obwohl wir nicht direkt darauf optimierten.

Das Endergebnis der mobilen Ansicht unserer optimierten Webssite

Fazit

Der einzige Punkt, an den wir noch drehen könnten, wäre eine bessere Komprimierung des JavaScripts, um letztendlich nur eine Ersparnis von 673 Byte (1 %) zu erreichen. Geschwindigkeitsrelevant ist dieser Wert absolut nicht mehr. Jetzt weiter zu machen, hieße nur das eigene Ego zu befriedigen. Bei Desktop und Mobil eine Punktanzahl von 99 von 100 möglichen zu erreichen, ist bereits exorbitant gut. So gut, dass eine solchermaßen optimierte Webseite die absolute Ausnahme darstellt. Wer das erreicht, darf sich zu den wirklichen Könnern zählen. Ich hoffe, dass mein Artikel Ihnen die Möglichkeit eröffnet hat, zu einem wirklichen Könner zu werden und eine Top-Speed-Webseite Ihr eigen nennen zu dürfen.

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Die Wahrheit über WordPress-Performance [#1/2]

Seitdem die Ladegeschwindigkeit einer Website Rankingfaktor bei Google ist, gehört die Optimierung der Performance zu den wichtigsten Dingen, mit denen Sie sich beschäftigen sollten. Doch nicht nur Google machen Sie mit einer schnellen WordPress-Website glücklich, sondern auch und sogar in erster Linie Ihre Leser. Und auf die kommt es letztendlich an. Denn bei einer Ladegeschwindigkeit von ca. 4 Sekunden verlassen bereits 25% der Besucher Ihre Webseite wieder, wie Untersuchungen ergeben haben. Doch es herrschen unterschiedliche Meinungen dazu, was eine Webseite nun schneller macht und was nicht. Daher beschäftigen wir uns heute mit der Wahrheit über WordPress-Performance.

Die Wahrheit über WordPress Performance

Ein Einstieg – was dieser Beitrag behandelt

Dieser Artikel wird sich mit der On-Page Optimierung beschäftigen, also alle Dinge ansprechen, die nicht den Webserver selbst betreffen. Wie man einen Webserver optimal aufsetzt, ist ein völlig anderes Thema und würde den Beitrag sprengen. Ich gehe von einer WordPress-Website auf einem normalen Webhosting-Paket aus, richtig konfiguriert liefert eine Webseite auch auf einem Hosting-Paket hervorragende Werte ab.

Hier im ersten Teil der zweiteiligen Serie stelle ich Ihnen die wichtigen Stellschrauben der Ladegeschwindigkeit vor und im nächsten Beitrag zum Thema werden wir zusammen umsetzen, was wir hier behandelt haben. Hierzu werde ich ein Theme wählen, dass etliche CSS- und JavaScript-Dateien referenziert. Wer ein solches Theme schnell zu machen vermag, kann das mit jedem anderen Theme auch.

Wichtig: Dieser Beitrag wird nur die Optimierung der Desktop-Version einer Website behandeln, da die Optimierung für eine mobile Darstellung ungleich schwieriger ist.

Infografik: Warum Ladezeit so extrem wichtig ist

Infografik: Warum Ladezeit so wichtig ist

Zwei Beispiele für hervorragend optimierte und schnelle Webseiten

1. Der Überflieger: Smashingmagazine.com

Das Smashing Magazine - 100 von 100 Page Speed Punkten

An der Performance des Smashing Magazines arbeitet ein ganzes Team und dieses Team hat wirklich an jeder Stellschraube gedreht, denn die Mobil- und die Desktop-Punkte liegen bei 100. 100 Punkte – die absolute Perfektion. Gratulation an Euch, da habt Ihr einen echt tollen Job gemacht. Der Quelltext der Webseite ist ein wunderbares Medium zum Lernen, wie man es richtig macht.

Link zur Webseite: SmashingMagazine.com

2. Eine „normale“ Webseite – TechNick

TechNick - hechtmediaarts.com

Meine Webseite TechNick ist bis jetzt nur auf die Desktop-Version optimiert. 93 von 100 möglichen Punkten sind jedoch ein absolut hervorragender Wert, obwohl ich mir sicher bin, dass da noch Luft nach oben ist. Die Mobil-Version müsste ich noch angehen, da ist der Punktewert momentan zu vernachlässigen.

Rasante Ladegeschwindigkeit – Optimierung für Google Page Speed

Google Page Speed ist das Maß aller Dinge und sämtliche empfohlenen Optimierungen meistens – jedoch nicht immer – verständlich. Daher arbeiten wir uns nun Punkt für Punkt durch und setzen diese Punkte in nächsten Beitrag dieser kleinen Serie zusammen um. Damit auch Ihre Webseite rasant lädt und Besucher wie auch Google ihre helle Freude daran haben.

Übrigens: Der Google Page Speed Score startet bei 1 (unterirdisch schlecht und langsam) bis hin zu 100 Punkten (der Jackpot).

1. Verringern oder verkürzen Sie HTTP-Requests

Jeder Aufruf einer im HTML-Dokument verlinkten Datei (CSS, Bilder und JavaScript) verursacht einen HTTP-Request, oder übersetzt: Je mehr CSS und JavaScript-Dateien in der einzelnen Seite einer Website verlinkt sind, umso langsamer wird die Webseite laden. Daher hat die Verringerung der zu ladenden Dateien oberste Priorität.

2. Nur eine JavaScript- und eine CSS-Datei verwenden

Es sollte nicht mehr als eine CSS- und eine JavaScript-Datei geladen werden müssen, da jede zusätzliche Datei einen weiteren HTTP-Request und damit eine längere Ladedauer bedeutet.

Wichtig: CSS gehört in den Kopfbereich und JavaScript in den Fußbereich (Header und Footer).

Aber: Inline-JavaScript, welches zum Beispiel oft für externe Spielereien wie einer Facebook-Like-Box oder aber Share-Buttons verwendet wird, sollte entweder in den Seitenfuss ausgelagert werden oder aber mit dem „Async“ Attribut eingebunden werden. Auf diese Weise blockiert es nicht die zügige Darstellung einer Webseite, sondern kann geladen werden, wenn es der Browser für angemessen hält.

Größere, externe und verlinkte JavaScript-Dateien können auch durchaus im Header verbleiben, wenn ihnen ein „Defer„-Attribut zugewiesen wird. Dann wird das JavaScript vom Browser erst geladen, wenn das Dokument fertig geladen ist. Das JavaScript wird praktisch an das hintere Ende der Warteschleife befördert und als letztes geladen.

3. Optimieren Sie Ihre Bilder und Grafiken

Wenn Ihr Theme für das Design viele Grafiken nutzt, sollten sie diese in CSS-Sprites zusammenfassen. Damit findet dann nur noch ein Aufruf für die Grafik-Datei statt. Bilder sollten immer für das Web optimiert sein, was heisst, dass sie auf die richtige Größe zugeschnitten und in der Dateigröße reduziert worden sind. Es gibt einige gute Plugins, die diesen Job für sie erledigen können. Ansonsten helfen Programme, wie zum Beispiel Photoshop oder Gimp weiter.

Optimal wäre nun noch, wenn die Bilder und alle anderen statischen Ressourcen von einem Content Delivery Network (CDN) ausgeliefert würden. Hier gäbe es einige gute Anbieter wie MAXCDN, welche sich aber erst ab einem gewissen Traffic auf der Seite lohnen. Kostenfrei kann das Jetpack-Plugin diesen Job übernehmen, der Punkt in den Einstellungen heisst dann „Proton„. Bei Aktivierung werden sämtliche Artikelbilder dann von den ziemlich schnellen WordPress-Servern ausgeliefert, was die Webseite auch bereits spürbar schneller werden lässt.

Doch auch im Umgang mit Bildern auf der Webseite heißt es, wie bei vielen anderen Dingen im Leben: weniger ist mehr. Weniger Bilder gleich schnellere Ladegeschwindigkeit.

4. .htaccess Einstellungen: Nutzen Sie Komprimierung (Gzip oder Deflate)

Komprimierung bedeutet, dass die Dateigröße Ihrer Seiten zum Teil extrem verringert wird. Oftmals können hier bis zu 70% an Dateigröße eingespart werden. Das macht sich deutlich in der Auslieferungsgeschwindigkeit Ihrer Webseite bemerkbar. Allerdings lohnt sich der Aufwand nur, wenn auf Ihrer Website ein gewisser Anteil an Inhalt vorhanden ist. Denn der Browser muss die komprimierte Webseite vor der Auslieferung ja erstmal dekomprimieren, was ebenfalls eine gewisse Zeit in Anspruch nimmt.

Bereits bei einem Blog oder einer Webseite mit mehr als einem Absatz an Inhalt wird sich die Komprimierung extrem bemerkbar machen.

5. .htaccess Einstellungen: Aktivieren Sie Browser-Caching

Browser-Caching zu aktivieren ist nicht nur wichtig, weil Google Page Speed Online sonst wieder mal rum meckert, sondern weil etliche Komponenten der Webseite dann nur einmal bei dem ersten Aufruf geladen werden – Bilder, CSS und JavaScript. Bei jedem weiteren Aufruf der betreffenden Webseite befinden sich diese Komponenten im Cache des Browsers und die Webseite kann wesentlich schneller geladen werden.

6. CSS Bereitstellung optimieren – „Above The Fold“

Die „above the fold“ (ohne Scrollen sichtbar) Nachricht wird ausgegeben, wenn Google Page Speed Online festgestellt hat, dass ein oder mehrere Dateien das Rendern Ihrer Website blockieren und damit die Darstellung von Inhalten auf dem Bildschirmen verzögern. Browser werden von externen CSS-Dateien blockiert, bevor Inhalte auf dem Bildschirm dargestellt werden.

Diese Nachricht erhalten Sie immer, wenn im Kopfbereich Ihres Themes CSS-Dateien verlinkt sind, da der Browser dann erst einmal die Darstellung der Webseite stoppen muss, um das Stylesheet zu laden.

7. Größe des ohne Scrollen sichtbaren Inhalts verringern – CSS Bereitstellung Teil 2

Hier geht es darum, den auf dem Bildschirm ohne Scrollen sichtbaren Bereich Ihrer Webseite zu optimieren. Das soll dadurch erreicht werden, dass das für die Darstellung des sichtbaren Bereichs nötige CSS inline eingefügt wird, anstatt es über eine externe, verlinkte Datei zu tun. Um noch präziser zu werden: der Teil Ihres CSS, der für die Darstellung des ohne Scrollen sichtbaren Bildschirms nötig ist, wird inline im Kopfbereich der Webseite eingefügt.

Die dann um diesen Teil verringerte CSS-Datei wird – statt wie normal im Kopfbereich – in den Seitenfuss ausgelagert.

Bedenken Sie jedoch eines: Es sollte nicht zuviel CSS inline in das HTML-Dokument gebracht werden, denn das könnte die Website auch wieder verlangsamen. Also bitte nur dasjenige CSS einbringen, welches existenziell für die Darstellung des Bildschirminhalts ohne Scrollen notwendig ist.

Prüfen Sie trotzdem im Anschluss mit beiden Varianten (CSS verlinkt und inline) die Ladegeschwindigkeit. Es bringt nichts, wenn Google Page Speed nicht mehr meckert, dafür die Webseite aber langsamer geworden ist.

8. Nutzen Sie ein Caching-Plugin

Ein gutes Caching-Plugin generiert aus den dynamischen (PHP) Seiten Ihrer Webseite statische HTML Seiten. Diese können dann wesentlich schneller geladen werden, weil nicht bei jedem Seitenaufruf der PHP-Interpreter die betreffende Seite generieren muss. Es gibt eine ganze Menge Plugins für diesen Job, wovon einige wenige gut, weitere sehr gut und mindestens eins hervorragend ist – mit einigen Tricks.

Zu empfehlende Caching-Plugins:

  • W3 Total Cache – sehr umfangreich, nichts für Anfänger
  • Wp Super Cache – auch für Anfänger geeignet
  • Cachify – Sehr geeignet für Anfänger und kleinere Projekte
  • Wp Rocket – nicht kostenfrei, aber das Beste, was ich je im Einsatz hatte

9. Keine 301 Weiterleitungen nutzen

301er Weiterleitungen bremsen den Browser aus, weil er dann auf eine neue URL zugreifen muss. Achten Sie daher darauf, solcherlei Weiterleitungen zu vermeiden.

10. Verwenden Sie einen guten Webhosting-Anbieter

Webhosting-Anbieter gibt es wie Sand am Meer, einige davon haben auch ihre Webhosting-Pakete so optimiert, dass eine blitzschnelle Auslieferung der Webseite garantiert ist. Wichtig zu wissen: Ein Webhosting-Paket ist ein sogenanntes Shared-Hosting, Ihre Webseite teilt sich also mit dutzenden – wenn nicht gar hunderten – anderen Webseiten ihren Platz auf dem Server.

Bei den meisten Webhosting-Paket Anbietern resultiert das in langsamere Ladegeschwindigkeiten. Ich persönlich setze auf den Hoster Alfahosting. Dessen Webhosting-Pakete sind auf Geschwindigkeit optimiert, bleiben dabei preisgünstig und bieten viele Einstellungsmöglichkeiten. Natürlich gibt es eine ganze Reihe weiterer empfehlenswerter Anbieter aus deutschen Landen.

Weitere Gründe für eine gute Webseiten-Geschwindigkeit

Die großen Webseiten wie zum Beispiel Google, Amazon und Yahoo haben den Einfluss der Ladegeschwindigkeit auf das Nutzerverhalten sehr genau getestet. Mit folgenden Resultaten:

Testergebnisse des Geschwindigkeits-Tests von Google, Amazon und Yahoo

Fazit

Für eine wirklich schnelle Webseite gilt es, eine ganze Reihe wichtiger Punkte abzuarbeiten. Jedoch lohnt es sich auf jeden Fall, mal einen Tag Arbeit in seine eigene Website zu investieren, um danach die Besucher der Webseite und nicht zuletzt auch Google ein wenig glücklicher zu machen. Sie erhalten als Lohn für Ihre Arbeit, wenn Sie sie richtig erledigt haben, mehr wiederkehrende Leser und ein besseres Ranking bei Google.

 Links zum Beitrag

(dpe)

Kategorien
Themes Tipps, Tricks & Tutorials WordPress

So finden Sie das perfekte kostenlose WordPress-Theme

Die schiere Anzahl der freien, auf WordPress.org erhältlichen Themes kann schon verwirren. Fast 3000 Themes werden in mal besserer und mal schlechterer Qualität angeboten. Hier liegt das Dilemma: Wie soll man den (geringen) Satz hochqualitativer Themes vom „Rest“ trennen? Der „Rest“ ist qualitativ nicht gut, bisweilen gar eine designtechnische Katastrophe. Daher möchten wir Ihnen in diesem Artikel zeigen, wie Sie die Spreu vom Weizen trennen und jeden Aspekt ansprechen, der wichtig für die Auswahl des optimalen Themes für Ihre Website ist.

Wie Sie das richtige WordPress Theme finden

Warum sollten Sie ein freies Theme einem Premium-Theme vorziehen?

In diesem Artikel richten wir unseren Fokus auf kostenfreie Themes, und doch möchte ich noch kurz ansprechen, dass es gute Gründe für den Einsatz eines Premium-Themes gibt. Ein Premium-Theme ist in den allermeisten Fällen hochwertiger, von besserer Code-Qualität und meistens auch optisch ansprechender. Allerdings gibt es natürlich die Ausnahmen, nämlich kostenfreie Themes, die den schlechteren Premium-Themes überlegen sind. Denn nicht alle Premium-Themes sind automatisch, quasi per Definition hochwertiger.

Nicht in allen Fällen brauchen Sie ein Premium-Theme. Ein qualitativ hochwertiges, kostenfreies Theme kann ebenfalls wunderbar seinen Job verrichten. Auch wenn einem freien Theme häufig der Funktionsumfang der Premium-Themes fehlt, so hat das auch seinen Vorteil: fehlende Funktionen können mit Plugins nachgerüstet werden. Das verschafft Ihnen zusätzlich die Sicherheit, dass diese Funktionen bei einem Theme-Wechsel immer noch vorhanden sind. Premium-Themes hingegen bringen häufig sogar mehr Funktionalität mit, als man braucht.

Hier ist eine kleine Auswahl von kostenfreien, aber dennoch extrem hochwertigen Themes:

Das Make-Theme zum Beispiel ist – obwohl es kostenfrei ist – von bedeutend hochwertigerer Qualität als viele Premium-Themes. Es verfügt über so viele Möglichkeiten und Funktionen, dass es kein Problem ist, innerhalb weniger Minuten eine völlig neu gestaltete Website zu haben. Das liegt im Wesentlichen an dem integrierten Drag-and-Drop-Page-Builder und damit einer Funktion, die Sie ansonsten nur bei sehr teuren Premium-Themes finden können.

Selbsterständlich ist die obige Liste nicht vollständig, es gibt noch etliche hochqualitative freie Themes mehr und mit ein wenig Recherche wird man auch fündig. Was Sie bei dieser Recherche beachten sollten, erfahren Sie hier.

Theme Anpassungen: Was Sie beachten sollten

Bevor Sie ein Theme suchen, sollten Sie sich Gedanken darüber machen, ob Sie ein hübsches Theme genauso verwenden möchten, wie es ist, oder ob Sie optische Anpassungen vornehmen wollen. Qualitativ hochwertige Themes sollten möglichst nicht zu stark angepasst werden, weil einfach alles „passt“. Wenn Sie ein solches Theme deutlich anpassen, bringt dies die Gefahr mit sich, dass Sie die Harmonie des Designs zerstören und so aus einem wirklich guten Theme ein eher schlechtes machen. Das muss doch nicht sein. Ich empfehle daher dringend: Wenn Ihnen ein Theme optisch gefällt, bearbeiten Sie es nicht mehr als unbedingt erforderlich.

Ein nachträgliches Eingreifen in das Design hat zudem zur Folge, dass die Änderungen bei einem Theme-Update wieder verschwunden sind, wenn Sie nicht mit einem Child-Theme gearbeitet haben. Änderungen am Design oder im Code sollten wirklich immer mit einem Child-Theme realisiert werden, dann sind sie auch nach einem Theme-Update noch vorhanden.

WordPress Codex: Child Themes

Der einfachste und beste Weg ist es also immer, ein Theme zu finden, das Ihnen wirklich umfassend gefällt. Suchen Sie also nach einem schicken Theme, welches Sie nur noch installieren müssen, um dann loslegen zu können mit dem, was wirklich wichtig ist: dem Produzieren von Inhalten und der Vermarktung Ihrer Website. Übrigens: ein perfektes Theme gibt es nicht. Irgendetwas wird ihnen immer missfallen. Suchen Sie daher nicht nach der Perfektion, dass führt nur zu angeschlagenen Nerven und verschwendet unnötigerweise viele Stunden.

Ein kostenloses WordPress-Theme finden: die Basics

Die Auswahl eines kostenfreien Themes wird erheblich einfacher, wenn Sie sich an ein paar Grundsätze halten und danach handeln.

1. kostenlose Themes (fast) ausschliesslich von WordPress.org herunterladen

Oftmals finden Sie kostenfreie Themes ausserhalb von WordPress.org und den bekannten Premium-Theme-Providern. Diese jedoch verwenden zu wollen, kann einem russischen Roulette gleichen. Häufig sind solche Themes von der Code-Qualität so schlecht, dass die Theme-Autoren die betreffenden Themes nicht bei WordPress.org unterbringen konnten, oder aber die Themes können mit Malware und Schadsoftware verseucht sein.

Bedenken Sie: es gibt wirklich keinen Grund für einen Theme-Entwickler, ein freies Theme nicht bei WordPress.org hochzuladen. Seien Sie daher immer skeptisch, wenn Sie ein freies Theme ausserhalb von WordPress.org entdecken.

2. Gratis Themes von namhaften Entwicklern bzw. Premium-Theme-Providern

Der einzige Weg, der ausserhalb von WordPress.org noch qualitativ äußerst hochwertige Themes verspricht, sind die namhaften Premium-Theme Provider. Diese stellen von Zeit zu Zeit einige Ihrer Themes kostenfrei zum Download zur Verfügung. Hier können Sie bedenkenlos zugreifen, es erwarten Sie zumeist qualitativ hochwertige Themes mit hohem Funktionsumfang.

Einer der bekanntesten Provider mit etlichen freien Themes ist WooThemes.com.

woothemes.com
WooThemes.com

Es gibt natürlich noch viele andere Premium-Theme-Provider, die allesamt ebenfalls einen Blick wert sind.

Die Liste der 25 bekanntesten WordPress Premium Theme Provider

Hier finden Sie eine Liste der 25 bekanntesten Premium-Theme-Entwickler.

Auch diese, mit 120 Themes extrem umfangreiche, Liste mit kostenfreien Premium-WordPress-Themes ist einen Blick wert.

Eine Liste mit den (angeblich) besten 20 kostenfreien Themes für Blogs finden Sie hier.

3. Vor dem Theme-Download von WordPress.org die wichtigen Schlüssel-Daten checken

Das Make Theme für WordPress

Es gibt einen weiteren Grund, warum Sie nur Themes bei WordPress.org herunterladen sollten: Hier bekommen Sie Informationen, die Sie woanders so leicht nicht bekommen. Schlüsseln wir mal die wichtigsten Informationen aus dem obigen Screenshot auf:

  • Last updated: Nutzen Sie nur Themes, die innerhalb des letzten halben Jahres auf dem neuesten Stand gehalten wurden. Dies kann zum Beispiel auch die Anpassung an eine neue WordPress-Version beinhalten, oder ein Sicherheits-Update sein.
  • Downloads: Als grobe Faustregel zu verstehen. Je mehr Downloads ein Theme hat, desto beliebter und besser könnte (!) es sein.
  • Ratings: Die Bewertungen sind mehr als eine grobe Richtlinie zu verstehen. Klicken Sie daher die Bewertungen mal an und checken, warum wie bewertet wurde. Gehen Sie besonders bei 1 bis 2 Stern-Bewertungen so vor. Die heißen nicht automatisch, dass das Theme schlecht ist.
  • Support: Support bei kostenlosen Themes ist ein sehr rares Gut. Das Verhältnis von gelösten und ungelösten Support-Einträgen lässt Rückschlüsse auf die Bereitschaft des Entwicklers zur Problemlösungsbereitschaft zu. Ein rühriger Support kann ein wichtiger Entscheidungsgrund für ein Theme sein.

Ein kostenfreies WordPress-Theme auf Herz und Nieren checken

Ein schönes Theme muss nicht zwangsläufig auch ein gutes Theme sein. Deswegen ist es vor dem Einsatz ganz hilfreich, wenn man es kurz durchcheckt, ob es den eigenen Bedürfnissen wirklich entspricht. Sehr wichtig ist hier eine gute Live-Demo. Die Vorschaufunktion von WordPress.org ist nicht sonderlich hilfreich, dazu ist sie einfach zu rudimentär. Die Vorschau bringt nur eine begrenzte Menge an Text und Konfiguration zu Gesicht. Daher ist das Ergebnis nicht wirklich repräsentativ. Aus diesem Grund sind wir auf die Entwickler-Homepage angewiesen, auf der der Entwickler hoffentlich eine Live-Demo seines Themes laufen hat.

Wenn es keine Live-Demo-Seite des Themes gibt, sollten Sie die Finger vom betreffenden Theme lassen.

Der Links zur Homepage des Entwicklers

Der „Theme-Homepage“ Link leitet Sie weiter zur Homepage des Entwicklers, wo Sie hoffentlich sofort einen Link zur Live-Demo des Themes finden.

Der Link zur Live-Demo des Themes

Andres Norén hat seine Theme-Homepage wirklich vorbildlich gestaltet und bietet liebevoll aufgesetzte Live-Demos seiner kostenfreien Themes.

Eine optimale Live-Demo. Das Wilson Theme von Anders Norén.
Eine optimale Live-Demo. Das Wilson-Theme von Anders Norén.

Nach meiner Erfahrung macht sich ein ernsthafter Entwickler auch die Mühe, eine Live-Demo seines Themes aufzusetzen. Denn nach Fertigstellung und Veröffentlichung seines Themes möchte er eine große Verbreitung seiner Arbeit sicherstellen. Nochmal: existiert keine Live-Demo, lassen Sie die Finger vom Theme.

Checken Sie das Theme auf responsives Design

Responsives Design heisst, dass sich das Theme auf jedes Ausgabemedium anpasst, so dass immer eine optimale Lesbarkeit des Inhalts gegeben ist. Ein responsives Design ist heute ein Must-Have, denn immer mehr Menschen lesen Webseiten nicht am heimischen Rechner, sondern mit Smartphones, Tablets usw. Diesen großen Prozentsatz an Besuchern sollte man nicht ausschliessen durch ein zu statisches Design. Dementsprechend sollte ein nicht-responsives Design ein Ausschlussgrund für ein Theme sein.

Ob ein Theme responsiv ist oder nicht, können sie ganz leicht testen, in dem Sie die URL der Live-Demo bei Am I Responsive? eingeben. Ist das Theme responsiv, bietet sich Ihnen folgendes Bild:

Am I Responsiv? Website

Abschliessende Tests

Ein gut entwickeltes Theme ist auch unoptimiert keine lahme Krücke. Da die Seitenladegeschwindigkeit mittlerweile ein Rankingfaktor bei Google ist, sollten Sie darauf achten, dass das von Ihnen ausgewählte Theme mit ein wenig Optimierung ein echter „Renner“ wird. Testen Sie also bereits vor dem Entschluss ein Theme zu nutzen, wie schnell oder langsam das betreffende Theme lädt. Hierzu gibt es viele verschiedene Tools, ich persönlich empfehle die Pingdom Tools.

Geben Sie also im Adressfeld der Pingdom Tools die URL der Demo ein, erweitern Sie unterhalb der Adresszeile die „Settings“ und geben dort „Amsterdam“ ein. Anschliessend auf „Test Now“ klicken.

Die Einstellungen der Pingdom Tools

Nach kurzer Zeit können Sie dann sehen, wie schnell oder langsam die betreffende Webseite lädt.

Das Ergebnis des Pingdom Tools Tests

Selbstverständlich kann es mal vorkommen, das Entwickler Ihre Demo-Seiten sehr auf Ladegeschwindigkeit optimieren. Dann empfiehlt sich ein Test auf dem heimischen Rechner. Hierzu gibt es hervorragende Tools wie Mamp oder Xampp, um eine Entwicklungsumgebung auf dem heimischen Rechner einzurichten. Doch dies soll kein Teil unseres heutigen Artikels sein.

Im Fall des hier getesteten Themes „Wilson“ von Andres Norén liegt die exorbitant langsame Ladezeit an seinem Server. Mit etwas Optimierung lädt das Theme locker unter 2 Sekunden.

Die folgende Infografik zeigt sehr anschaulich auf, warum die Ladegeschwindigkeit einer Webseite heute so entscheident ist:

Infografik Ladegeschwindigkeit von Webseiten
© KISSmetrics

Trau, schau, wem: Der abschliessende Sicherheitscheck

Sicherheit ist das wichtigste Gut und sollte sehr ernst genommen werden. Überprüfen Sie daher jedes Theme bereits vor dem Einsatz auf gravierende Sicherheitsmängel oder gar versteckte Schadsoftware. Das können Sie ganz leicht mit dem Sucuri Tool oder Sucuri-WordPress-Plugin überprüfen.

1. Das Sucuri Online Tool

Das Sucuri Online Tool

Geben Sie hier die URL zur Webseite ein und klicken auf „Scan Website“. Bringen Sie ein klein wenig Geduld mit, bis zum Ergebnis kann es einige Minuten dauern:

Das Scan-Ergebnis von Sucuri

2. Das Sucuri-WordPress-Plugin

Eine weitere Möglichkeit stellt das kostenfreie WordPress-Plugin von Sucuri dar.

Das Sucuri WordPress Plugin

Umfangreiches Sicherheits-Plugin mit Scanner und Lösung zum Schliessen der eventuell aufgefundenen Sicherheitslücken. Sehr empfehlenswert!

  • Entwickler: Daniel Cid
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 10.10.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Sucuri.net

Fazit

Eine narrensichere Vorgehensweise zur Auswahl des perfekten, kostenlosen Theme gibt es nicht. Aber Anhaltspunkte, die helfen, das passende Theme auszuwählen haben wir in diesem Artikel beleuchtet. Informationen sammeln ist immer ein guter Weg und ich hoffe, Ihnen die richtigen Werkzeuge an die Hand gegeben zu haben. Falls Sie noch Fragen oder Anmerkungen haben, scheuen Sie sich nicht, einen Kommentar zu verfassen.

Links zum Beitrag

Kostenfreie Themes:

Info

 

Kategorien
Tipps, Tricks & Tutorials WordPress

Nützlich: Die 10 interessantesten Widgets für Ihre WordPress-Webseite

Es ist nicht zuletzt die Wandlungsfähigkeit, die die Faszination an WordPress ausmacht. Keine WordPress-Website sieht wie die andere aus, wenn man nicht will. Doch wieviel Individualität und Funktionalität man bereits mit dem Einsatz der richtigen, nützlichen Widgets für die Sidebar erreichen kann, wird leicht vergessen. Dabei machen die richtigen Widgets das Salz in der Suppe aus und geben einer Webseite den letzten Schliff. Aus diesem Grund möchten wir Ihnen heute die 10 interessantesten Widgets für Ihre WordPress-Webseite vorstellen. Räumen Sie schon mal die Sidebar frei…

Die nützlichsten WordPress Widgets

WordPress Widgets – los geht`s!

1. Recent Posts Widget With Thumbnails

Das Recent Post Widget with Thumbnails

Das Recent Posts Widget With Thumbnails ist ein einfaches und doch sehr nützliches Plugin. Es zeigt die neuesten Beiträge kombiniert mit einem Vorschaubild, welches sich entweder aus dem Beitragsbild oder aber dem ersten Bild eines Beitrags generiert. Außerdem zeigt es den auf die Beiträge verlinkten Titel an. Es gibt nur wenige Einstellungen, die selbsterklärend sind. Das Endergebnis ist eine hübsche und nützliche Ergänzung Ihrer Webseite, das Ihre Besucher anregt, weitere Artikel Ihrer WordPress-Webseite zu lesen.

Das fertige Widget und die Einstellungen
Das fertige Widget und die Einstellungen – © Recent Posts Widget With Thumbnails

  • Entwickler: Hinjiriyo
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 06.09.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

2. Simple Social Icons

Das Simple Social Icons Widget Plugin für WordPress

Das Simple Social Icons Plugin von dem renommierten WordPress-Theme-Provider Studiopress erzeugt ein in jeden Widgetbereich einfügbares Widget mit hübsch anzusehenden Icons der sozialen Netzwerke. Farbe und Größe der Icons kann hier völlig frei bestimmt werden, ebenso, wo die Icons anliegen sollen (Ausrichtung links, rechts oder mittig). Das ist einfach zu nutzen und bringt ein tolles Ergebnis! Auf meiner eigenen Website sieht das Endergebnis so aus:

Das Ergebnis nach Nutzung der Simple Social Icons

  • Entwickler: Studiopress, Brian Gardner
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 23.04.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Studiopress.com

 3. Google Maps Widget

Das Google Maps Widget

Dieses Tool erzeugt eine völlig frei anpassbare Google Map in einem Widget, dass man in jeden Widgetbereich einer WordPress-Website einbinden kann. Ein Klick auf die erzeugte Karte öffnet eine größere Karte in einer Lightbox. Zu beachten ist, dass das Google Maps Widget wirklich nur ein Widget ist und daher nicht mittels Shortcode in andere Bereiche als explizit ausgewiesene Widgetbereiche hinzugefügt werden kann. Trotz umfangreicher Möglichkeiten zur Anpassung ist das Widget leicht zu handhaben. Hier die möglichen Optionen:

Die Kartenoptionen

  • map size – width & height
  • map type – road, satellite, map or hybrid
  • pin color
  • pin size
  • zoom level
  • link type – lightbox, custom URL or disable link
  • map color scheme – new & old
  • text above map
  • text below map

Die Lightbox Map Optionen

  • map size – width & height
  • map type – road, satellite, map or hybrid
  • zoom level
  • skin – light & dark
  • show/hide address bubble
  • show/hide map title
  • header text
  • footer text

Die Google Map in einer Lightbox
Die Google Map in einer Lightbox – © Google Maps Widget

  • Entwickler: WebFactory
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 22.09.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Google Maps Widget Homepage

4. Image Widget

Das Image Widget für WordPress

Hiermit erhalten Fotofreunde Futter, es bietet aber auch eine schnelle Lösung, um zum Beispiel ein einfaches „Über mich“ Widget zu erstellen. Das Widget ist sehr einfach in der Benutzung und im Großen und Ganzen selbsterklärend. Es nutzt den WordPress-eigenen Media-Manager, um Bilder hinzuzufügen und/oder auszuwählen. Größe und Ausrichtung des Bildes lassen sich frei bestimmen und die Bildbeschreibung akzeptiert auch einfaches HTML, wie zum Beispiel einen hinzugefügten Link.

Screenshot 1 des Image Widget
Einstellungen Image Widget – © Image Widget

Screenshot 2 des Image Widget
Die Image Widget Ausgabe – © Image Widget

  • Entwickler: Modern Tribe Inc., Peter Chester
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 05.05.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

 5. Authors Widget

Das Authors Widget für WordPress

Das Authors Widget zeigt eine Liste oder Tag-Cloud der Autoren einer Website in der Sidebar an. Websites mit mehr als nur einem Autor profitieren von diesem Widget, weil sich zum Beispiel neben dem Namen noch Dinge wie der Link zum jeweiligen Feed des Autors darstellen lassen, was recht praktisch und benutzerfreundlich ist.

Screenshot Authors Widget
Authors Widget Einstellungen – © Authors Widget

  • Entwickler: flocsy
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 10.06.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

6. Youtube Channel Gallery

Youtube Channel Gallery Widget

Dieses Widget zeigt eine kleine YouTube-Video-Galerie in der Sidebar an. Hiervon ist ein Video sofort abspielbar und der Rest der Galerie besteht aus Screenshots der einzelnen Videos. Damit ist das Widget besonders für Betreiber eines YouTube-Kanals sehr nützlich. Es bietet zudem einen wirklichen Mehrwert für die Besucher einer Website. Wenn einer der Screenshots angeklickt wird, spielt das angewählte Video oberhalb der Bilder-Galerie ab.

Youtube Channel Gallery Widget Screenshot 1
Die Einstellungen der Youtube Channel Gallery – © Youtube Channel Gallery

Youtube Channel Gallery Screenshot 3
Ein mögliches Design – © Youtube Channel Gallery

  • Entwickler: PoseLab
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 13.03.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

7. OptinMonster – Premium

Das OptinMonster Premium Widget für WordPress

Obwohl es sich bei OptinMonster in erster Linie um ein Premium Plugin handelt, dem lediglich Widgets beigegeben sind, so gehört es trotzdem in diesen Beitrag, weil es eines der nützlichsten Widgets überhaupt bereitstellt. Wer mit seinem Blog Geld verdienen möchte oder muss, für den ist ein solches Plugin fast schon Pflicht. OptinMonster hilft dabei, Besucher in Abonnenten und Kunden zu konvertieren, je nachdem, worauf die mit OptinMonster erstellten Formulare abzielen. Es geht also hauptsächlich darum, Abonnenten für Newsletter zu gewinnen oder Besucher zum Kauf eines Produktes zu veranlassen. Da erfahrungsgemäß circa 70% der Besucher einer Webseite nicht wiederkehren, kann dies ein mächtiges Werkzeug sein, um die Besucherzahlen zu erhöhen und seine Besucher an die Website zu binden.

Hierfür stehen nicht nur Widgets zur Verfügung, sondern auch Formulare, die sich nach einer vorgegebenen Zeit als Lightbox über dem Inhalt öffnen und daher die volle Aufmerksamkeit des Besuchers erfordern. Formulare oder Widgets zu entwerfen, geht dank des eingebauten Design-Builders einfach und schnell. Die Lizenzen beginnen ab 49.- USD für eine Website und gehen bis zu 349.- USD für eine unlimitierte Anzahl an zu nutzenden Websites. Die Preise verstehen sich als Einmalzahlung.

Die Preisübersicht des OptinMonster Plugins für WordPress

  • Entwickler: Retyp, LLC.
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: nicht bekannt
  • Kosten: von $ 49.- bis zu $ 349.-
  • Lizenz: Spezielle Premium Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  OptinMonster

8. Tabbed Login Widget

Das Tabbed Login Widget für WordPress

Das Tabbed Login Widget erlaubt Ihnen, ein Loginformular zur Sidebar Ihres Blogs oder Ihrer Website hinzuzufügen. Das durchdachte und hübsch aufgemachte Formular bringt noch zusätzliche Funktionalitäten, wie eine Registrierungsmöglichkeit, sowie die Möglichkeit der Anforderung eines vergessenen Passworts mit. So müssen Ihre Besucher nicht extra auf die Administrationsoberfläche Ihrer Website weitergeleitet werden, sondern können sich sehr benutzerfreundlich direkt auf der Hauptseite anmelden oder registrieren. Für Webseiten, denen es wichtig ist, dass sich Besucher einloggen, ist dieses Widget ein echter Gewinn.

Das Tabbed Login Widget für WordPress
Das Widget in der Login- und der Register-Ansicht – © Tabbed Login Widget

  • Entwickler: Vivec Maracana
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 04.03.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

9. Social Count Plus

Social Count Plus Widget für WordPress

Social Count Plus ist ein weiteres Plugin mit einem Fokus auf Soziale Netzwerke. Die Besonderheit ist hierbei, dass nicht nur die Icons der betreffenden Sozialen Netzwerke dargestellt, sondern auch die Anzahl der Follower, Abonnenten, Kommentare und Likes gezeigt werden. Folgende Dienste werden unterstützt: Twitter, Facebook, Google+, Youtube, Instagram, Steam und SoundCloud (Anzahl der Beiträge und Anzahl der Kommentare). Allerdings können die Funktionen nicht nur mit dem Widget genutzt werden, sondern per Shortcode und PHP-Tags überall, wo man gerade diese Funktionalität bieten möchte.

Screenshot Social Count Plus Einstellungen
Social Count Plus Einstellungen – © Social Count Plus

  • Entwickler: Claudio Sanchez, Felipe Santana
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 06.09.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

10. Google Calendar Events

Das Google Calendar Events Widget für WordPress

Dieses Plugin erstellt mittels des Google Kalender-Dienstes einen Event-Kalender. Dabei beherrscht das Plugin auch die Darstellung als Liste, was manchmal der verbesserten Übersicht dienlich sein dürfte. Neben der Verwendung in einem Widget, bietet das Plugin auch die Möglichkeit, den Event-Kalender in einem Beitrag oder einer Seite anzuzeigen, was eine gewisse gestalterische Freiheit bedeutet, da man nicht nur an eine Möglichkeit der Anzeige gebunden ist. Gerade für dieses Plugin ergibt sich eine Vielzahl von Anwendungsmöglichkeiten. Zum Beispiel Unternehmer, Ärzte und auch Immobilienmakler könnten von diesem Plugin erheblich profitieren.

Ein Screenshot von Google Clanedar Events
Ein Beispiel eines Event Kalenders – © Google Event Calendar

  • Entwickler: Phil Derksen, Nick Young, Ross Hanney
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 20.09.2014
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden
  • Dokumentation: Google Event Calendar Documentation

Fazit

Erst die richtigen Widgets machen eine WordPress-Website komplett und interessant. Sicherlich ist es schwierig, bei der Vielzahl von Widgets und Plugins im öffentlichen Plugin-Verzeichnis von WordPress das richtige zu finden. Doch die Mühe lohnt sich auf jeden Fall! Widgets machen eine Website schöner, benutzerfreundlicher, einzigartiger und durchdachter. Also, stöbern Sie doch selbst einmal im Verzeichnis…

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Unyson Framework Teil 2: So entwickeln Sie Ihr WordPress-Theme

Vor ein paar Tagen stellte ich das neue Unyson Drag and Drop WordPress-Theme-Framework vor und war ob der vielen neuen Möglichkeiten, die Unyson bietet, doch recht angetan. Im heutigen Beitrag schauen wir uns das Framework aus der Sicht des Entwicklers an. Wie schnell erschliesst sich das WordPress Framework dem Entwickler, und vor allem, lässt sich in einer vertretbaren Zeit damit ein Premium WordPress Theme erstellen? Oder sollte man für diesen Einsatzzweck doch auf andere Lösungen zurückgreifen? Werfen wir also einen kritischen Blick unter die Haube von Unyson und zeigen auf, wie gut es – in diesem Entwicklungsstadium – wirklich ist.

Das Unyson Theme Framework für WordPress

Die ersten Schritte mit dem Framework

Nach dem Download der Framework-Dateien vom GitHub-Repository gibt es grundsätzlich zwei Möglichkeiten. Zuerst einmal kann das heruntergeladene Archiv als Theme auf einer Testumgebung installiert werden, um sich mit Unyson vertraut zu machen. Entgegen der Erwartung heisst das Theme nicht Unyson, was ja nahe liegen würde, sondern Scratch. Hiervon gibt es ein Parent Theme, welches man installieren sollte, und ein Childtheme. Das Childtheme jedoch bringt keine Änderungen mit sich, sondern soll nur veranschaulichen, wie man ein Childtheme erstellt. Schnell wird man jedoch merken, dass die Installation des Scratch-Themes nicht wirklich hilfreich ist, denn bis auf den Design-Manager, die General-Settings und die SEO-Optionen funktioniert nichts weiter. Ein paar funktionierende Theme-Optionen wären sehr hilfreich gewesen, allein schon um zu schauen, wie man die Demo-Optionen im Theme abrufen kann.

Bleibt die zweite Möglichkeit: Wir beginnen direkt mit der Arbeit an einem Theme unserer Wahl.

Hinzufügen der Framework-Dateien in den Theme-Ordner

Wenn man nun genau nach der Entwickler-Dokumentation vorgeht, wird man schnell merken, dass vieles fehlt und nicht funktioniert. Die Dokumentation möchte, dass man den Ordner „framework“ in die oberste Ebene seines Theme-Ordners legt und das Framework aufruft. Doch das allein reicht nicht, denn dann fehlen die Demo-Optionen für jeden Bereich des Frameworks komplett. Folgende Ordner von Unyson müssen folglich tatsächlich in den Theme-Ordner hinein:

  • framework
  • framework-customizations
  • genericons
  • der Inhalt der Ordner css, js und images

Um das Unyson Framework aufzurufen, damit man damit arbeiten kann, muss folgender Code in die functions.php des Themes:

require dirname(__FILE__) .'/framework/bootstrap.php';

Nun sollte Unyson geladen werden und auch sämtliche Demo-Optionen sollten unter den einzelnen Menüpunkten vorhanden sein. Ab sofort kann die Lernphase der Entwicklung mit Unyson beginnen.

Was funktioniert sofort ohne größere Arbeiten?

Ohne jede Einstellung funktioniert der Drag and Drop Page-Builder, mit dem man sein eigenes Layout auf WordPress Seiten ganz einfach zusammenklicken kann. Dieses Feature stand bis jetzt nur teuren Premium-Themes zur Verfügung (wie zum Beispiel dem Enfold Theme von Kriesi), nun hat es – wenn auch in äußerst abgespeckter  Form – das Unyson Framework kostenfrei der Öffentlichkeit zugänglich gemacht. Erwähnenswert ist sicherlich die Tatsache, dass der Funktionsumfang des Drag & Drop Builders nicht einfach hingenommen werden muss. Die Entwickler-Dokumentation legt sehr anschaulich dar, wie man den Drag & Drop Builder fast beliebig erweitern kann. Falls Sie also eine Funktion vermissen sollten, so können Sie diese Funktion ohne weiteres selbst einfügen.

Der Drag and Drop Page-Builder des Unyson Frameworks für WordPress

Die einzige Arbeit, die Ihnen mit dem Drag & Drop Page-Builder noch bleibt, sind die passenden Notierungen im CSS Ihres Themes – oder noch besser: Gestalten Sie ein eigenes CSS für diesen Einsatzzweck und legen dieses im Framework-Ordner ab. Dies bringt eine Zeitersparnis bei der Entwicklung des nächsten Themes mit sich. Alternativ können Sie sich auch die nötigen Notierungen aus dem style.css des Scratch-Themes heraussuchen und anpassen. Ein eigenes Stylesheet für den Drag & Drop Manager existiert leider nicht.

Der Styling-Manager

Der Design-Manager des Unyson Frameworks

Die Settings für die Styling Seite erreicht man über den folgenden Pfade:

framework-customizations/extensions/styling/options => settings.php

framework-customizations/extensions/styling/options/includes => predefined-styles.php

In der Scratch-Theme-Datei sidebar-content.php kann man sehr schön ersehen, wie man die definierten Styles dann in der Theme-Datei umsetzen kann. Hier der Quelltext der sidebar-content.php:

Quelltext der Datei sidebar-content.php vom Unyson Framework

Die Theme Optionen des Unyson Frameworks für WordPress

Unyson bietet dem Entwickler eine Vielzahl an möglichen Theme-Optionen an. Hiermit sollte es möglich sein, ein Theme für jeden nur erdenklichen Einsatzzweck zu erstellen.

Die Theme Optionen des Unyson Frameworks für WordPress

Das Herausfinden der Options-Dateien war etwas „tricky“, denn die Demo-Options Seite zeigt die Demo-Optionen einmal mit weißer Box und einmal ohne diese Box an. Die Entwickler hinterlegten hier nicht eine Datei, wie man vielleicht annehmen könnte, sondern zwei (identische) Dateien für die Optionen. Das Warum erschliesst sich mir überhaupt nicht. Eine Datei hätte es auch getan. Geladen werden beide Dateien durch die Datei demo-box.php:

Die Datei demo-box.php lädt die Options-Seiten des Unyson Frameworks

Hier der Pfad zu den Options-Dateien:

framework-customizations/theme/options/  => demo-box.php

framework-customizations/theme/options/  => demo und demo2.php

Die Optionen im Theme ausgeben lassen

Die definierten Optionen lassen sich relativ leicht im Theme ausgeben. Gehen wir mal davon aus, dass es uns wichtig ist, den Inhalt einer Textarea-Box im Theme an einer bestimmten Stelle ausgeben zu lassen. Folgender einfacher Code löst das Problem:

<?php
$area = fw_get_db_settings_option('demo_textarea_2');
if( !empty( $area ) ) {
echo $area;
}
?>

Dieser recht einfache Code sorgt für die Anzeige des Inhalts der Options-Textarea. Ein solch einfach strukturierter Code sollte für die Anzeige der meisten Theme-Optionen ausreichend sein. Für andere – speziellere Aufgaben – sollte ein kurzer Blick in die überwiegend gute Entwickler-Dokumentation reichen.

General-Settings – Ausgabe des Favicons

Probleme machte mir auf der Options-Seite „General Settings“ die Ausgabe des Favicons. Es lies sich zwar hochladen, wurde aber nicht gespeichert und damit auch nicht im Header verlinkt und angezeigt. Wie ich herausfand, funktioniert der Options-Type „Upload“ nicht korrekt. Er muss auf „images_only‘ => false,“ gesetzt werden, dann verrichtet er seine Arbeit hervorragend. Wünschenswert wäre, dass vor dem Release eines so umfassenden Frameworks sämtliche Optionen und Funktionen auf einwandfreie Funktion getestet worden wären. Insbesondere auf einer Optionsseite, die mit echten Funktionen hinterlegt worden ist. Zu erreichen sind die „General Settings“ über die Datei general-settings.php. Der Pfad zur Datei lautet:

framework-customizations/theme/options/  => general-settings.php

Die General Settings des Unyson-Frameworks

Wie man sehen kann, funktioniert der Favicon-Uploader nun ganz hervorragend.

Die General Settings des Unyson Framework

Der in der header.php eingesetzte Code, um das Favicon anzeigen zu lassen:

<?php
$favicon = fw_get_db_settings_option('favicon');
if( !empty( $favicon ) ) :
?>
<link rel="icon" type="image/png" href="<?php echo $favicon['url'] ?>">
<?php endif ?>

Die im obigen Screenshot angezeigte Logo-Funktion kann wesentlich besser umgesetzt werden, da sind wir Entwickler gefragt. Ein Textfeld ist okay, wenn man nur das Textlogo einer Webseite ansprechen möchte. Für ein Logo in Form einer Grafik sollte man jedoch eine Upload-Funktion bereitstellen. Das wäre einfach benutzerfreundlicher und professioneller.

Die Custom Post Options – die Vorbereitung für umfassende Themes

Richtig gut gefällt mir am Unyson Framework, dass auch an Custom Post Options gedacht wurde. Denn vielfach müssen Themes entwickelt werden, bei denen es eben nicht ausreicht, dass Eingaben im Schreib-Editor gemacht werden. Gewisse Aufgaben können eben nur mit zusätzlichen Optionen gelöst werden. Schauen wir uns als Beispiel mal eine Theme-Übersichtsseite des bekannten WordPress-Theme-Providers WooThemes an. An den markierten Stellen werden Custom Post Options eingesetzt:

woothemes

Unyson lässt den Entwickler den kompletten Satz Optionen nutzen, den man auch als Theme-Optionen verwenden kann. Damit ist der Fantasie und dem Tatendrang beim Entwickeln von WordPress-Themes keinerlei Grenze gesetzt. Sehr nützlich sind übrigens die Tooltipps, die sich hinter jeder Option befinden. Hier können noch zusätzliche Erklärungen zu den einzelnen Optionen hinterlegt werden. Sehr interessant ist zudem die Möglichkeit, in diesen Tooltipps Videos hinterlegen zu können.

Die Custom Post Options des Unyson Framework für WordPress

Zu finden sind die Custom Post Options über folgenden Pfad:

framework-customizations/theme/options/posts/ => post.php

Über diese Datei lässt sich dann die nötige, angepasste Optionen-Datei laden.

Die post.php lädt die definierten Custom Post Options

Weitere Funktionen des Unyson Frameworks

Besonders interessant am neuen Unyson WP-Framework sind die leicht versteckten, aber umfangreichen Zusatzfunktionen, für die man ansonsten zusätzliche Plugins bemühen müsste. Hier wurde wirklich an alles gedacht. Gold wert dürfte die konfigurierbare Backup-Funktion sein, die wirklich gut ist und funktioniert.

Backups

Die Backup-Funktion des Unyson Frameworks

Das einzige, was ich an der Backup-Funktion aussetzen kann, ist der Speicherort der Backup-Datei. Gespeichert wird hier im WordPress-Ordner „uploads/backup“. Im Sinne der Sicherheit ist es jedoch nicht vorteilhaft, dass Backup auf demselben Server zu haben, wie die WordPress-Installation. Wenn die Website gehackt wird, und ein Angreifer auch Zugang zu den FTP-Daten bekommt, kann er nicht nur die Website an sich verändern, mit Viren und Trojanern verseuchen oder gar komplett löschen. Auch die Backups könnte ein Angreifer in diesem Fall gleich mit entsorgen. Ich rate daher dringend, hier ein Plugin einzusetzen, das das Backup zum Beispiel in die Dropbox oder zu einem anderen Cloud-Anbieter oder auf die lokale Festplatte befördert.

Sliders

Ansprechende Slide-Shows können mit nur wenigen Klicks generiert und über den Drag & Drop-Page-Builder in jede beliebige Seite eingefügt werden. Zusätzlich kann ein Slider mittels PHP-Code an jede gewünschte Stelle einer Theme-Datei platziert werden. Einen Shortcode zum Einsetzen in Beiträgen gibt es leider nicht, dieser müsste selbst erstellt werden.

Hinzufügen eines neuen Sliders

Das Mega-Menü

Die trendigen Mega-Menüs lassen sich extrem einfach erstellen, besonders nett ist die Möglichkeit, dem jeweiligen Menüpunkt ein Icon hinzuzufügen.

Die Mega-Menü Funktion von Unyson

So wird das Mega-Menü dann dargestellt:

Das Mega-Menü des Unyson Frameworks

Portfolio, Sidebars und SEO-Funktionen

Portfolio

Innerhalb kurzer Zeit kann man ein Portfolio zusammenstellen, aber wie man die Dinger anzeigen kann, erschliesst sich mir nicht. Man muss sie wohl erstmal in den Drag & Drop Builder mit etwas Code-Arbeit integrieren. Liebe Leute von Unyson, das gibt Abzüge in der B-Note.

Sidebar Manager

Der integrierte Sidebar-Manager hingegen funktioniert einwandfrei! Hier lassen sich zusätzliche Sidebars entweder für eine Gruppe von Seiten, Kategorien oder Blog-Artikeln erstellen, oder aber für eine ganz bestimmte Seite , einen ganz bestimmten Beitrag. Auch die Position der Sidebar lässt sich bestimmen.

Der Sidebar-Manager vom Unyson Framework

Die SEO Funktion

Die eingebauten SEO-Funktionen erinnern ein wenig an WordPress SEO by Yoast, es wird dieselbe Art von Platzhaltern verwendet. Dass man diese Aufgabenstellung wesentlich besser und benutzerfreundlicher lösen kann, wissen wir spätestens seit wpSEO, welches hier richtig gute Drag & Drop Elemente bietet. Das macht die Einstellungen meiner Meinung nach viel besser geeignet für unbedarfte User. Gut ist sicherlich, dass die Unyson SEO-Funktion bereits Out-of-the-Box arbeitet, ohne dass man in diesem Bereich als Entwickler tätig sein muss. Eine positive Rückmeldung nach dem Abspeichern der SEO-Einstellungen wäre auch ganz toll, dann wüsste man sofort, dass die soeben getätigten Einstellungen auch übernommen worden sind.

Die SEO Funktionen von Unyson

Unter dem Menüpunkt Sitemap gibt es einige Einstellungen zu einer Sitemap.xml, die Unyson kreieren sollte. Allerdings hat diese Funktion bei mir nur eine weiße Seite erzeugt, aber eben keine sitemap.xml. An diesem Punkt muss der Theme-Entwickler etwas tiefer in den Code eintauchen und das Problem beheben, oder auf eine aktualisierte Version des Frameworks warten. Themes mit dieser nicht funktionierenden Funktion auszuliefern geht jedenfalls nicht.

Fazit

Viel Licht, aber leider auch viel Schatten. Unyson begeistert auf der einen Seite, nervt aber auch auf der anderen. Der Funktionsumfang ist gigantisch, aber funktioniert zum Teil nicht. Möglicherweise hätte man mit dem Release noch einige Wochen warten sollen, um auch die offensichtlichen Fehler wie die nicht funktionierende Sitemap und einige nicht korrekt funktionierende Optionen beheben zu können. Auf der einen Seite bin ich begeistert vom Funktionsumfang, weil grundsätzlich alles möglich scheint, auf der anderen Seite denke ich, dass man das Framework noch etwas hätte durchdenken müssen.

Was mir überhaupt nicht gefällt, ist, dass sämtliche Funktionen verstreut unter verschiedenen Menüpunkten erreichbar sind. Ganz klar hätten sich die Entwickler des Frameworks dazu entscheiden müssen, sich bei einem solchen Funktionsumfang an geltende Konventionen zu halten. Das heisst: Man erstellt einen neuen Menüpunkt namens Unyson im WordPress Adminmenü und bündelt darunter sämtliche Funktionen wie Theme-Optionen, Styling, SEO und Backups. Der Slider hingegen hätte einen weiteren Menüpunkt verdient.

Dies ist die Art und Weise, wie die großen Theme-Entwickler (wie zum Beispiel Kriesi) die Sache angegangen haben – und das ist gut so. Denn ich persönlich bin der Meinung, dass eine Theme-Dokumentation eigentlich überflüssig ist, wenn der Entwickler seinen Job gut gemacht und alles so einfach wie möglich zusammengefasst und strukturiert hat. Wenn ich dem Kunden jedoch erst mal eine Doku mitgeben muss, damit er auch alle Einstellungen findet, dann ist was falsch gelaufen. Hier sollte ganz klar nachgebessert werden. Was im Übrigen total fehlt, ist eine automatische Update-Funktion für das Framework. Jedesmal nach einem Update alle Dateien händisch abgleichen zu müssen ist ziemlich nervtötend und heutzutage unnötig. Kriesi, woothemes und andere können das schliesslich auch.

Links zum Beitrag

Kategorien
Tipps, Tricks & Tutorials WordPress

Unyson, das Drag and Drop Framework für WordPress

Es kommt nicht alle Tage vor, dass ein neues WordPress Framework das Licht der Welt erblickt. Daher lohnt es sich für Entwickler immer, dass neue Produkt näher in Augenschein zu nehmen. Werfen wir heute also gemeinsam einen genauen Blick auf das Open-Source WordPress Framework Unyson. Zuerst Einmal: Unyson ist kostenlos und das wird laut den Entwicklern auch so bleiben. Interessant ist ein WordPress Framework für Entwickler jedoch nur, wenn es erstens viele Möglichkeiten bereits out of the box ohne viel zusätzliche Arbeit bietet und zweitens, wenn es sich sehr leicht in ein Projekt einbinden lässt. Im heutigen Artikel stellen wir Ihnen die Funktionen von Unyson vor. Ein weiterer Artikel wird sich mit der Frage beschäftigen, wie leicht sich das Framework in ein vorhandenes Theme integrieren lässt.

Das Unyson Framework für WordPress

Der Funktionsumfang des Unyson Framework für WordPress

Unyson bringt einen gigantischen Funktionsumfang mit sich, funktionstechnisch ist hier alles möglich. So viele mögliche Funktionen sind mir bisher noch nicht untergekommen – besonders nicht bei einem kostenfreien Framework. Wer alle Funktionen in seinem Theme umsetzen möchte, sollte für die Entwicklung desselben viel Zeit mitbringen. Besonders herausgestellt wird von themefuse (der Firma hinter Unyson) der Drag and Drop Page Builder, mit dem sich innerhalb kürzester Zeit eine individuelle und ansprechende Seite zusammenklicken lässt. Erweiterte SEO-Funktionen und ein Styling-Generator zum schnellen Anpassen von Farben, Schriftarten, Schriftgrößen und Hintergrundgrafiken stehen auch bereit.

Sidebars lassen sich über den Sidebar-Generator zusätzlich erstellen und in der Position beeinflussen. Auch sind Sidebars nur auf spezielle Seiten, Beiträge oder auf spezielle Kategorien beschränkbar. Sogar ein Mega-Menü kann mit Unyson kreiert werden. Eine Breadcrumb Navigation ist ebenfalls vorhanden. Am besten gehen wir die komplette Funktionalität einmal zusammen durch.

Der Drag and Drop Page Builder

Der Drag and Drop Page Builder des Unyson Frameworks

Ein Drag and Drop Page Builder ist eine hochpraktische Sache, da das Aussehen einer Seite (er funktioniert nur auf Seiten, nicht auf Beiträgen) innerhalb kürzester Zeit geändert werden kann. Man klickt einfach auf „Visual Layout Editor“ und zieht zuerst die gewünschte Spaltenanzahl in den Editor, gefolgt von den Inhalts- oder Media-Elementen, die dann in der jeweiligen Spalte bearbeitet werden können.

Der Page Builder von Unyson in Aktion

Im obigen Screenshot habe ich aus dem Bereich „Layout Elements“ zwei 1/2 Spalten in den Editor gezogen. Dies wird ein zweispaltiges Layout erzeugen. Nun kann man die „Content Elements“ seiner Wahl in die Spalten ziehen und bearbeiten. Mit Hilfe dieses Page Builders lassen sich in kürzester Zeit Ergebnisse erzielen, die ohne dessen Hilfe in so kurzer Zeit und mit so wenig Aufwand schlicht nicht möglich wären.

Die Option Types von Unyson – hieraus wird mal eine Optionen Seite

Die verschiedenen möglichen Optionen

Über 20 mögliche Arten von Optionen bietet Ihnen das Unyson Framework für WordPress. Mit Hilfe dieser möglichen Optionen entsteht dann eine moderne und ansprechende Optionsseite für ein Theme. So gut durchdacht, designed und umgesetzt habe ich mögliche Theme-Optionen in einem kostenfreien Framework noch nicht gesehen.

Ein Klick auf das Bild öffnet den vollständigen Screenshot der Theme Settings

Die Theme Settings des Unyson Frameworks für WordPress

 

Die Styling-Optionen von Unyson

Die Styling Optionen des Unyson Frameworks für WordPress

Elemente farblich anzupassen und Schriftarten auszuwählen, die angezeigt werden sollen, ist nun nichts wirklich außergewöhnliches. Die Live-Vorschau der Änderungen auf der rechten Seite hingegen schon! So kann der User auf einem Blick erkennen, wie sich seine Änderungen auswirken und aussehen. Das ist durchdacht und benutzerfreundlich. Leider gibt es bis jetzt keine Möglichkeit, zum Ausgangszustand zurückkehren zu können. Ein Zurücksetzen der Styling-Optionen wäre in manchem Fall recht hilfreich, wenn man das Layout total „verspielt“ hat.

Der Sidebar Manager

Der Sidebar Manager des Unyson Frameworks für WordPress

Eine sehr praktische – wenn auch nicht neue – Sache ist der Sidebar Manager. Dieser erlaubt nicht nur die freie Positionierung der Sidebar(s), sondern auch die Erstellung einer Sidebar für nur einen Artikel, eine Seite oder auch Kategorie. Auch eine spezielle Gruppe von Seiten, wie zum Beispiel Autoren-Profile können mit einer spezifischen Sidebar ausgerüstet werden.

Die Mega Menu Funktionalität

Die Mega Menü Funktionalität von Unyson

Menüs können nicht nur „normal“ dargestellt werden, sondern auch als hochmodernes und schickes Mega-Menü. Zudem kann man zu jedem Menüpunkt ein aussagekräftiges Icon hinzufügen. Das dürfte unter den kostenfreien WordPress Frameworks einzigartig sein und hebt das Unyson Framework stark von der Masse ab.

Die eingebaute Backup-Funktionalität

Die eingebaute Backup Funktionalität des Unyson Frameworks für WordPress

Grundsätzlich gibt es, wenn man eine Website besitzt, nichts wichtigeres als Backups. Damit für den Fall der Fälle, für den Super-Gau vorgesorgt ist, man also bei einer kaputten WordPress-Website einfach sein Backup wieder einspielen kann und alles ist gut. Die Backup-Funktionalität von Unyson umfasst nicht nur die Framework-Einstellungen, sondern die komplette Website (bei Bedarf auch nur die Datenbank). Das ist ein echtes, weiteres Alleinstellungsmerkmal!

Einfach zu erstellende und einzufügende Slider

slider-funktion-unyson-framework

Mit Unyson lassen sich verschiedene Slider erstellen und einfügen. Es werden auch Videos unterstützt. Eine Slider-Funktionalität ist nicht wirklich etwas besonderes, das bieten andere auch. Doch diese Funktionalität rundet das Gesamtbild ab.

Die erweiterten SEO-Einstellungen

Ein Klick auf das Bild öffnet den vollständigen Screenshot

Die erweiterten SEO Einstellungen des Unyson Frameworks für WordPress

Hier finden Sie für ein WordPress Theme-Framework recht umfangreiche Einstellungen, die allerdings besser gelöst sein könnten. % als Platzhalter kombiniert mit Tags, die man selbst einfügen muss, ist nicht wirklich das, was man sich wünscht. Das können andere Systeme viel besser und benutzerfreundlicher. Sehr gut ist allerdings die Anbindung an die Webmaster Tools von Google und Bing.

Die Portfolio-Funktion

Die Portfolio Funktion des Unyson Frameworks für WordPress

Nicht nur schicke Slider, sondern auch Portfolios können mit Unison erstellt werden. Das erweitert den Einsatzbereich nochmals und sorgt für gute Laune beim Entwickler, der diese Funktionalität in seinem Theme braucht.

Die Brotkrumen-Navigation

Die Breadcrumbs Navigation des Unyson Frameworks für WordPress

Auch an eine benutzer- und SEO-freundliche Breadcrumbs-Navigation haben die Entwickler von Unyson gedacht. Den Text für die wichtigsten Menüpunkte kann man selbst wählen, was ein großer Vorteil ist, wenn der Blog zum Beispiel Weblog heisst.

Custom Widgets

Die Widgets des Unyson Frameworks für WordPress

Unyson bringt auch einige Widgets mit, unter anderem ein Flickr- und ein „Blog Tab“-Widget, mit dem dynamisch zwischen den letzten Kommentaren und den letzten Beiträgen gewechselt werden kann. An ein Widget für die Sozialen Netzwerke wurde ebenfalls gedacht.

Fazit

Das Unyson Framework für WordPress bringt eine Funktionsvielfalt mit sich, die sich ansonsten nur im kostenpflichtigen Premium-Bereich finden lässt. Es ist außerordentlich umfangreich und es weckt den Eindruck, als ob in der Theme-Entwicklung mit Unyson nichts unmöglich wäre. Doch wo Licht ist, ist auch Schatten. Mir persönlich missfällt ziemlich stark, dass sich die einzelnen Funktionen wie Backup, SEO, Theme-Optionen, Styling unter verschiedenen Menüpunkten befinden. Ohne eine Dokumentation muss man schon kräftig suchen, um alle Funktionen zu finden. Das machen andere viel besser. Dabei wäre es überhaupt kein Problem, einen neuen Menüpunkt zu erstellen und darunter dann alle relevanten Funktionen als Unterpunkte auszuweisen. So würde sich auch der zukünftige Käufer eines Premium-Themes viel besser zurecht finden.

Ausblick auf den nächsten Teil

Im nächsten Teil zum Thema Unyson Framework werde ich mich mit der Integration des Frameworks in ein bestehendes Theme beschäftigen. Wie leicht wird das Framework in ein Theme zu integrieren und anzupassen sein? Ich statte zur Beantwortung dieser Frage ein kostenfreies Theme von WordPress.org mit dem Framework aus und baue die wichtigsten Funktionen ein. Bis dahin…

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress-Turbo II: Schneller durch Bildoptimierung

Seitdem die Ladegeschwindigkeit einer Webseite Rankingfaktor bei Google ist, kann es nicht schaden, sich näher mit den Möglichkeiten zu beschäftigen, eine WordPress-Webseite so schnell wie möglich zu machen. Ein wichtiger Punkt hierbei sind die Bilder, die oftmals recht umfangreich in Beiträgen und Seiten verteilt werden. Leider werden diese nur in den wenigsten Fällen auf die Breite des Inhalts zugeschnitten und vorher für die Nutzung im Internet optimiert. Dieser Beitrag stellt Ihnen einige WordPress Plugins vor, die bei der Bildoptimierung hilfreich sind.

WordPress Turbo durch Bildoptimierung

Die grundsätzliche Funktionsweise der Bildoptimierungs-Plugins

Durch die vorgestellten Plugins werden die Bilder bereits während des Uploads in die WordPress-Mediathek optimiert, wobei sich die Optimierung nicht nur auf das hochgeladene Bild beschränkt, sondern auch auf alle von WordPress zusätzlich beim Upload angelegten Dateiformate der Bilder. Die Optimierung der Bilder wird meistens durch die Entfernung überflüssiger Meta-Informationen wie zum Beispiel der Exif-Daten erreicht, da diese für die Anzeige der Bilder im Browser unnötig sind. Jedes der vorgestellten Plugins verspricht eine verlustfreie Reduktion der Dateigröße, sodass der Unterschied nicht mit dem Auge wahrgenommen werden kann.

Welche Grafikformate wofür verwenden?

Nicht jedes Grafikformat eignet sich für jede Aufgabe innerhalb einer Webseite. Ein PNG eignet sich hervorragend für Logos oder Illustrationen einer Webseite, wo es auf transparente Hintergründe der Grafik ankommt, für Fotos ist es nicht geeignet, da die Dateigröße größer als nötig wäre. Ein Gif hingegen kann nur einen Farbraum von 256 Farben darstellen und wird meistens nur für kleine Animationen verwendet. Das richtige Dateiformat für Fotos hingegen ist das Format JPG (JPEG). Dieses kann mit speziellen Tools verlustfrei in der Dateigröße verringert werden und bildet somit die Grundlage für diesen Artikel.

Optimus

Das Optimus Plugin für WordPress

Optimus verspricht verlustfreie und enorme Komprimierung der Dateigröße bei konstanter Bildqualität und hält dieses Versprechen auch ein. Bereits beim Hochladen der Bilder in die WordPress-Mediathek wird das Plugin aktiv und behandelt sämtliche, von WordPress gleichzeitig erstellte Bildformate. Leider bietet Optimus auch in der Premium-Version keine Bulk-Optimierung (Die Optimierung aller bereits bestehender Bilder auf einmal). In der kostenfreien Version, die bereits in vielen Fällen ausreichend ist, darf ein JPEG nicht größer als 25 KB sein, damit es optimiert wird. In der Premium-Version Optimus HQ darf ein JPEG durchaus bis 1MB groß sein und es können zusätzlich PNGs (bis 200KB) optimiert werden. Alles in allem ist Optimus ein sehr zuverlässiges Plugin, welches auch mit einem CDN (Content Delivery Network) klar kommt.

  • Entwickler: Sergej Müller
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 05.08.2014
  • Kosten: Kostenfrei über WordPress.org und Premium Version von 29.- € bis 149.- € jährlich
  • Lizenz: GNU GENERAL PUBLIC LICENSE für die kostenfreie Version und spezielle Lizenz für die Premium Version
  • Multisite Kompatibilität: Ja, voll kompatibel
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  Optimus

 WP Smush.it

Das WP Smush.it WordPress Plugin

Eines der bekanntesten Plugins zur Bildoptimierung, welches in den meisten Fällen wirklich gut und zuverlässig funktioniert, hört auf den Namen WP Smush.it. Das bekannte Webseiten Speedtest und Optimierungstool GTmetrix.com empfiehlt die Nutzung dieses Plugins. Allerdings funktioniert WP Smush.it nicht mit einem CDN, auch nicht, wenn Sie Ihre Mediathek auf eine Subdomain ausgelagert haben sollten. Für diese Anwendungsbereiche müssen Sie auf ein anderes Plugin ausweichen.

  • Entwickler: WPMUDEV
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 12.06.2014
  • Kosten: Kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  nicht vorhanden

EWWW Image Optimizer

Das EWWW Image Optimizer Plugin für WordPress

Der EWWW Image Optimizer macht seinen Job ebenfalls gut und sehr zuverlässig. Zum Teil kann es Optimierungen bis an die 50% Dateigrößen-Minimierung vorweisen und bietet eine Funktion zum Konvertieren von PNG in JPG an. Das Plugin ist für einen Einsatz in Kombination mit einem CDN (oder einer auf eine Subdomain ausgelagerten Mediathek) vorbehaltlos geeignet. Die Funktion einer Bulk-Optimierung zur Optimierung sämtlicher bestehenden Bilder ist ebenfalls vorhanden, ebenso eine Funktion, die sämtliche Theme-Grafiken optimieren kann. Dieses Plugin ist auf meiner Webseite im Einsatz.

Die Resultate einer Bildoptimierung mit EWWW Image Optimizer

  • Entwickler: nosilver4u
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 25.06.2014
  • Kosten: Kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  nicht vorhanden

 Imsanity

Das Imsanity Plugin für WordPress

Das Imsanity Plugin bietet einen Bulk-Optimizer an, sodass die bereits vorhandenen Bilder schnell und zuverlässig optimiert werden können. High-Resolution-Bilder werden automatisch auf eine gängige Auflösung zugeschnitten, die in den Einstellungen festgelegt werden kann. Ebenfalls können maximale Breite, Höhe und Qualität angegeben werden, da auch die Qualität der JPG Bilder nicht verlustfrei reduziert werden kann.

Die Einstellungen des Imsanity Plugins für WordPress

  • Entwickler: Jason
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 07.05.2014
  • Kosten: Kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  Imsanity

CW Image Optimizer

Das CW Image Optimizer Plugin für WordPress

Der CW Image Optimizer ist das beste Bildoptimierungs-Plugin, was den Datenschutz angeht. Während bei anderen Plugins die Komprimierung auf fremden Servern geschieht, verlässt mit diesem Plugin kein Bild den eigenen Server. Die Bilder werden vom Linux Bildoptimierungstool littleutils verlustfrei in Form gebracht.

  • Entwickler: Jacob Allred
  • Wird ständig weiter entwickelt: geht so
  • Letzte Version vom: 13.02.2013
  • Kompatibel mit WordPress 3.9.1: Ja
  • Kosten: Kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  nicht vorhanden

Lazy Load Plugins – Bilder anzeigen bei Bedarf

Die Lazy Load Technologie sorgt dafür, dass nicht sofort bei Seitenaufbau alle Grafiken und Bilder vom Server geladen werden, sondern erst dann, wenn sich diese im Sichtbereich (View Point) des Lesers befinden. Das sorgt für einen schnelleren Seitenaufbau und weniger Traffic auf dem Server. Ein Lazy Load Plugin ist daher eine optimale Ergänzung zu einem Bildoptimierungs-Plugin.

Lazy Load

Das Lazy Load Plugin für WordPress

Gut funktionierendes Plugin, an dem Automattic, die Firma hinter WordPress, mitarbeitet. Lazy Load nutzt das jQuery Plugin jQuery.sonar von Dave Artz. Dies reagiert manchmal leider etwas träge und wird schon länger nicht mehr gepflegt. Nach eingehendem Test kann ich jedoch die volle Kompatibilität mit WordPress 3.9.1 bescheinigen, sodass es problemlos eingesetzt werden kann.

  • Entwickler: Mohammad Jangda, Automattic, Jake Goldman, 10up
  • Wird ständig weiter entwickelt: geht so
  • Letzte Version vom: 04.09.2012
  • Kompatibel mit WordPress 3.9.1: Ja, vollständig
  • Kosten: Kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  nicht vorhanden

Crazy Lazy – Qualität made in Germany

Das Crazy Lazy Plugin für WordPress

Crazy Lazy ist ein sehr schnell und flüssig reagierendes Plugin vom bekannten deutschen Entwickler Sergej Müller. Was soll ich dazu sagen? Ich bin ein großer Freund der Produkte aus dem Hause Müller, wie Sie sicherlich gelegentlich schon bemerkt haben ;-)

  • Entwickler: Sergej Müller
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 10.06.2014
  • Kosten: Kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage:  nicht vorhanden

Links zum Beitrag

Bildoptimierer

Lazy Load Plugins

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Mobiles Webdesign: So optimieren Sie Ihr WordPress für Smartphones und Tablets

Immer mehr Menschen nutzen heutzutage Smartphones und Tablets, um mobil im Internet zu surfen. Doch richtig Spaß macht das nur, wenn die angesurften Webseiten auch für die Ansicht auf mobilen Geräten optimiert sind. Nicht für mobile Ansicht optimierte Webseiten nehmen einem User schnell den Spaß am Besuch, Besucherrückgang kann die Folge für den Betreiber sein. Machen Sie daher Ihre Webseite fit für das mobile Zeitalter und bieten Sie Ihren Besuchern mit einer für mobile Geräte optimierten Webseite einen echten Mehrwert. Wir zeigen Ihnen heute, welche Möglichkeiten es hierfür gibt, wenn Sie ein selbstgehostetes WordPress als Basis verwenden. Mobiles Webdesign kann so einfach sein…

WordPress für mobile Geräte optimieren

Testen Sie, ob Ihre Webseite bereits für die Ansicht auf mobilen Geräten optimiert ist

Für einen kurzen, aber aussagekräftigen Überblick, ob Ihre Webseite bereits für die Nutzung auf mobilen Geräten optimiert ist, bieten sich vor allem zwei Tools an. Sehr gut ist die Erweiterung „Webdeveloper“ für moderne Browser wie z.B. Google Chrome oder Mozilla Firefox. Aber auch das hervorragende Online-Tool „Am I Responsive“ bietet sich für eine kurze Überprüfung an.

Absolut aussagekräftig ist jedoch nur ein kurzer Test auf den jeweiligen mobilen Geräten selbst. Surfen Sie Ihre Webseite an und prüfen Sie, wie die Webseite angezeigt wird und wie benutzerfreundlich sie ist. Apple-User können sich auch die Apple Entwickler-Software „XCode“ installieren, die einen iOS- und Android-Simulator beinhaltet. XCode bekommt man auf der Apple-Developer-Webseite.

Worauf beim Test zu achten ist

  1. Der Inhalt sollte vollständig auf dem Display (oder dem Test-Tool) für die betreffende Auflösung zu sehen sein.
  2. Es dürfen keine horizontalen Scrollbalken entstehen.
  3. Es muss ein mobil-spezifisches, leicht (auch auf kleinen Smartphones) zu bedienendes Menü vorhanden sein.
  4. Bilder müssen vollständig zu sehen und dürfen nicht nur mit horizontalem Scrollen vollständig zu erfassen sein.

Ein Test mit dem Online-Tool „Am I Responsive“

Rufen Sie die Webseite von „Am I Responsive“ auf, scrollen Sie minimal nach unten, bis „See your Site Responsive“ erscheint und geben Sie Ihre Domain ein.

Die Webseiten Eingabe vom Online-Tool Am I Responsive

Drücken Sie nun „GO!“ und sehen Sie Ihre Webseite oberhalb in verschiedenen Auflösungen und auf verschiedenen Geräten. Das wirklich Gute an diesem Online-Tool ist übrigens, dass die Webseite in den einzelnen Ansichten scrollbar ist, genau wie in Ihrem Browser. In dieser Ansicht würden Sie auch sofort erkennen, wenn Handlungsbedarf bestehen sollte.

Das Ergebnis einer Webseite im Online-Tool Am I Responsive

Sieht Ihr Ergebnis so aus, dann besteht kein Handlungsbedarf.

Ein Test mit der Webdeveloper-Erweiterung für Chrome oder Firefox

Installieren Sie die Webdeveloper-Erweiterung in Ihrem Browser und rufen Sie die Webseite auf, die Sie testen möchten. Im Google Chrome klicken Sie nun auf das Webdeveloper-Icon rechts neben der Domainleiste, dann auf den Reiter „Resize“, und dort auf „View Responsive Layouts“.

So rufen Sie Webdeveloper in Chrome auf

In Firefox lassen Sie sich die Webdeveloper-Symbolleiste anzeigen, gehen dann auf „Größe ändern“ und zuletzt auf „Angepasste Layouts anzeigen“.

Der Aufruf der angepassten Layouts in Firefox

Es öffnet sich nun ein neuer Tab und Sie sehen Ihre Webseite in folgenden Auflösungen:  mobile portrait (320×480), mobile landscape (480×320), small tablet portrait (600×800), small tablet landscape (800×600), tablet portrait (768×1024) und tablet landscape (1024×768). Selbstverständlich lassen sich die einzelnen Auflösungen scrollen und auch ansonsten benutzen wie auf mobilen Geräten.

Responsive Layout Tester in Google Chrome aufgerufen

Optimierung für mobile Geräte mit responsiven WordPress-Themes

Responsive WordPress-Themes sind nicht ohne Grund der Trend im Webdesign schlechthin. Einmal installiert funktioniert das Theme in jeder Auflösung, wenn es denn gut gemacht ist. Nicht nur auf Desktop-Rechnern und Notebooks, sondern auch auf Smartphones und Tablets wird Ihre Webseite immer optimal und benutzerfreundlich dargestellt. Ein großer Nachteil jedoch ist, dass Bilder stets in großen Auflösungen für die Darstellung auf Desktops und Notebooks vorhanden sein müssen, um demzufolge dann auf den kleinen Auflösungen für Smartphones und Tablets per CSS heruntergerechnet zu werden. Das kann die Darstellung auf mobilen Geräten teils deutlich verlangsamen.

Hier kann jedoch durch die Verwendung eines Plugins zur Generierung von sogenannten Adaptive Images Abhilfe geleistet werden. Ein solches Plugin generiert auf Basis des in WordPress hochgeladenen Bildes die für die Darstellung auf mobilen Geräten benötigten Bildgrößen und liefert diese dann anstelle des (zu) großen Bildes aus. Eines dieser Plugins – Hammy – stelle ich weiter unten in diesem Artikel vor.

Make – ein richtig gutes responsives WordPress Theme

Kostenlose responsive WordPress-Themes gibt es mittlerweile wie Sand am Meer, eine kurze Suche auf WordPress.org liefert extrem viele Ergebnisse. Das Design jedoch lässt häufig zu wünschen übrig, oder aber es gibt nicht genug Anpassungsmöglichkeiten an die eigenen Bedürfnisse. Wer nun kein Geld für ein Premium-Theme ausgeben möchte, sollte einmal das Make Theme von The Theme Foundry testen, welches in einer kostenlosen Version namens Make und einer kostenpflichtigen Premium-Version namens Make Plus erhältlich ist.

Schon die kostenlose Version ist so vielseitig an die eigenen Bedürfnisse anpassbar, wie man es bisher nur von Premium Themes kannte. Es gibt kaum etwas, was man mit diesem Theme nicht realisieren könnte. Zudem sieht es noch sehr gut aus.

Das Make Theme für WordPress

Zum Beispiel sind sämtliche Farben anpassbar, egal ob Hintergrund der Webseite oder aber die Seite selbst. Man kann ein Logo hochladen, Schriften anpassen usw. Es gibt bereits in der kostenlosen Version soviel Möglichkeiten zur Anpassung, dass es diesen Artikel sprengen würde, wollte man sie alle aufzählen. Erwähnen will ich hier noch den Drag-und-Drop-Generator für WordPress-Seiten, mit dem man in Minutenschnelle benutzerdefinierte Layouts erstellen kann, wie z.B. Slider-Sektionen, Text in Spaltendarstellung oder aber variable Bildgalerien. Das gibt es sonst nur in teuren Premium-Themes.

Der Drag and Drop Page Builder des Make Themes für WordPress

Hier ein Eindruck von den vielen das Design betreffenden Einstellungen des kostenlosen Make Themes:

Die Design Anpassungsmöglichkeiten des Make Themes für WordPress

Die Premium-Version Make Plus bietet noch etliche Optionen mehr, unter anderem die optimale Anpassung an die beliebten Plugins WooCommerce und Easy Digital Downloads. Support und Updates für ein Jahr sind im Kaufpreis inkludiert.

Die Lizenzmodelle des Make Themes für WordPress

Adaptive-Images-Plugin zur Nutzung mit einem responsiven WordPress-Theme

Das WordPress-Plugin Hammy generiert aus den mit WordPress hochgeladenen Bildern nach einem kurzen Setup automatisch die für die Nutzung mit mobilen Geräten nötigen Skalierungen. Sobald eine Webseite mit einem mobilen Gerät angesurft wird, erkennt Hammy automatisch dessen Auflösung und liefert die für dieses Gerät passenden Bilder aus. Große Bilder werden bei Nutzung eines responsiven WordPress-Themes dann nicht mehr mit CSS klein gerechnet, sondern es werden passend kleine Bilder ausgeliefert, was der Ladegeschwindigkeit sehr zugute kommt.

Das Hammy WordPress Plugin

Bevor Sie das Plugin nutzen können, sind ein paar wenige Einstellungen nötig. Vor allem müssen noch die korrekten Bildbreiten für die adaptiven Bilder bestimmt werden. Ein Beispiel könnte so aussehen:

Die Einstellungen des Hammy Plugins für WordPress

  • Entwickler: Noel Tock
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 16.02.2014
  • Kosten: kostenfrei von WordPress.org
  • Lizenz: GNU General Public
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage: Adaptive Content Images within WordPress

Optimierung für mobile Geräte mittels Plugin

Ihr derzeitiges Theme unterstützt keine auf mobile Geräte optimierte Ansicht und auf ein anderes Theme möchten Sie auch nicht wechseln? Auch für dieses Problem gibt es die passende Lösung in Form von Plugins. Diese speziellen Mobile-Theme-Plugins erzeugen ein mehr oder minder hübsches Theme, welches nur die Nutzer Ihrer Webseite zu sehen bekommen, die mit Smartphone oder Tablet Ihre Webseite ansurfen.

Anhand des User-Agent, der von jedem Browser übermittelt wird, entscheidet Ihr WordPress dann, ob das normale, oder aber das mobile Theme an den Besucher ausgeliefert wird. So ist auf jedem Ausgabemedium eine entsprechende Nutzererfahrung möglich.

Das WPtouch-Mobile-Plugin

Das WPtouch Plugin für WordPress

WPtouch ermöglicht es Ihnen, ein einfaches und elegantes Design für die mobilen Besucher Ihrer Webseite zu erstellen. Der Administrationsbereich erlaubt Ihnen viele Aspekte der Erscheinung des mobilen Themes anzupassen und liefert Ihnen eine schnelle und benutzerfreundliche mobile Version Ihrer Webseite, ohne dass Sie sich mit der Programmierung auseinander setzen müssen. Ihr reguläres Desktop-WordPress-Theme kann weiterhin genutzt werden.

  • Entwickler: BraveNewCode Inc.
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 18.07.2014
  • Kosten: kostenfrei von WordPress.org
  • Lizenz: GNU General Public
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage: WPtouch Homepage

Die Premium Version – WPtouch Mobile Suite for WordPress

Die Preium Version des WPtouch Plugins für WordPress

Auch von diesem Plugin gibt es eine Premium-Version mit zusätzlichen Features, die WPtouch Mobile Suite for WordPress. Diese bietet neben fünf Designs der mobilen Version Ihrer Webseite auch die Möglichkeit, Werbung im mobilen Theme unterzubringen. Des Weiteren verfügt die kostenpflichtige Version des Plugin über einen Cache, so dass Ihre mobile Webseite bis zu 5x schneller als ein responsives WordPress-Theme ausgeliefert werden kann. Neue Themes, Erweiterungen und Updates für WPtouch können aus der WPtouch Cloud ohne weitere Kosten bezogen werden. Die Preise starten ab 49.- $.

Die Lizenzen der WPtouch Suite für WordPress

  • Entwickler: BraveNewCode Inc.
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 18.07.2014
  • Kosten: von 49.- $ bis 349.- $
  • Lizenz: Spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage: WPtouch Homepage

Eine mobile Webseite erzeugen mit dem Jetpack for WordPress Plugin

Das Jetpack for WordPress Plugin

Sollten Sie bereits Nutzer des beliebten Sammel-Plugin Jetpack for WordPress sein, so haben Sie die Möglichkeit, ein mobiles Theme von Jetpack generieren zu lassen.

Ein mobiles Theme vom Jetpack for WordPress Plugin generieren lassen

Links zum Beitrag

Test-Tools für die Ansicht auf mobilen Geräten

Optimierung für mobile Geräte mit responsiven WordPress Themes

Optimierung für mobile Geräte mittels Plugin

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress Extrem: Diese Spezial-Webseiten können Sie damit erstellen

In diesem Artikel zeigen wir Ihnen, wie wandelbar WordPress ist und was man damit alles machen kann. Es gibt praktisch kein Einsatzgebiet, keine Webseite – und sei sie auch noch so speziell – die nicht mit WordPress und einigen zusätzlichen Plugins oder Themes realisiert werden kann. Sie möchten gerne Ihr eigenes soziales Netzwerk? Eine Auktions-Webseite ähnlich Ebay war schon immer Ihr Traum? Sie würden gerne Online-Kurse und -Prüfungen abhalten und verkaufen, oder steht Ihnen der Sinn nach einer Membership-Seite, auf der Sie Ihren Content nur gegen eine Mitgliedschaft anbieten können? All das ist möglich mit WordPress und einigen ausgesuchten Plugins. Wir stellen Ihnen heute beispielhaft die richtigen Plugins und Lösungen vor. Dabei bieten wir keinen vollständigen Überblick. Noch viel mehr ist möglich…

Diese Spezial-Webseiten können Sie mit WordPress erstellen

Eine Auktions-Webseite erstellen – Ihr eigenes Ebay mit WordPress

WP Auctions – WordPress Auction Plugin

Das WP Auctions WordPress Plugin

Mit dem WP Auctions-Plugin gelingt es Ihnen, eine Auktions-Webseite ähnlich wie Ebay zu erstellen. Ihre erste Auktion kann bereits in unter 2 Minuten online sein! Ihre Auktionen werden in einem attraktiven Ajax-Popup dargestellt. Als Zahlungsmethoden stehen Ihnen PayPal und Banküberweisung zu Verfügung. Sie können so viele Auktionen erstellen, wie Sie brauchen und möchten und können für die von Ihnen erstellten Auktionen selbstverständlich auch Bilder hinterlegen. Es gibt keinerlei Beschränkungen in dem, was Sie verkaufen möchten. Des Weiteren können Sie zwischen 5 Designs für Ihre Auktionen wählen. Ein Sidebar-Widget ist ebenfalls vorhanden.

Die Einstellungen des WP Auctions Plugin für WordPress
© WP Auctions
Das WP Auctions Plugin für WordPress
© WP Auctions
  • Entwickler: Owen Cutajar & Hyder Jaffari
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: 12.04.2014
  • Kosten: kostenfrei, auch als Premium Version von 44.- $ bis 189.- $
  • Lizenz: GNU GENERAL PUBLIC LICENSE und Spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  WP Auctions

Ultimate Auction Plugin

Das Ultimate WordPress Auction Plugin

Ein weiteres WordPress Auktions-Plugin, welches mit jedem vorhandenen WordPress-Theme funktionieren soll. Mit diesem Plugin lässt sich eine professionelle Auktions-Webseite erstellen, es bietet Ihnen sehr viele Features, ist sehr einfach einzustellen und sehr gut an Ihre Bedürfnisse anpassbar.

Auktionen mit dem Ultimate Auktion Plugin für WordPress

  • Entwickler: Nitesh, WisdmLabs
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: 01.07.2014
  • Kosten: kostenfrei, auch als Premium Version von 99.- $ bis 149.- $
  • Lizenz: GNU GENERAL PUBLIC LICENSE und Spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

Ultimate Auction Pro – die professionelle Lösung

Ultimate Auction Pro Plugin für WordPress

Die professionelle Version des Ultimate Auction Plugins bietet unzählige Features mehr als die kostenfrei erhältliche Version. Zum Beispiel können hier registrierte User Auktionen hinzufügen. Es existiert ein Front-End Dashboard, um Auktionen hinzuzufügen und zu bearbeiten. Es können mehr als 4 Bilder bei jeder Auktion verwendet werden. Es ist eine bessere Suche integriert, um Auktionen leichter aufzufinden usw. Des Weiteren wird jeweils 1 Jahr professioneller Support geboten.

Die Ultimate Auction Pro Lizenzen

  • Entwickler: Nitesh, WisdmLabs
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: keine Angabe für die Pro Version
  • Kosten: Personal 99.- $, Developer 149.- $
  • Lizenz: Spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  Ultimate Auction Pro Webseite

Membership-Plugins – Inhalte online an Mitglieder verkaufen

Eine Membership (also Mitglieder)-Webseite dient dazu, einen geschützten Bereich zu erstellen und zu verwalten. Nur Mitglieder haben dann – etwa gegen Entrichtung einer Gebühr – Zugriff auf den Inhalt der geschützten Bereiche. Diese Plugins bieten verschiedene Mitglieder-Level, Abo-Möglichkeiten, einmalige Zahlungen, Schnittstellen zu verschiedenen Zahlungsanbietern, Coupons und sogar die Möglichkeit, ein eigenes Affiliate-Programm aufzusetzen. Eine professionelle Lösung bietet neben mehr Features immer noch professionellen Support vom Entwickler, was gerade bei größeren Projekten sehr hilfreich und zeitsparend sein kann.

Members – die kostenfreie Lösung

Das Members Plugin für WordPress

Ein kostenfreies Plugin vom bekannten WordPress Entwickler Justin Tadlock, bekannt durch sein Theme „Hybrid“. Dieses Plugin konzentriert sich hauptsächlich auf die Verwaltung der Inhalte und der Mitglieder. Wenn Sie weitergehende Funktionen, wie zum Beispiel eine Zahlungsabwicklung benötigen, müssen Sie leider auf zusätzliche Plugins zurückgreifen. Für den professionellen Einsatz ist dieses Plugin daher nur geeignet mit viel Zeit und Fachwissen im Rücken.

  • Entwickler: Justin Tadlock
  • Entwicklungsaktivität: Geht so
  • Letzte Version vom: 25.10.2013
  • Kompatibel zu WordPress 3.9.1: Ja, vollständig
  • Kosten: kostenfrei von WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

DigiMember – die professionelle Lösung aus Deutschland

DigiMember Plugin für WordPress

Diese professionelle Lösung ist perfekt auf den deutschen Markt abgestimmt. Alle wichtigen Funktionen sind mit an Bord, wie z.B. Produkte anlegen, Inhalte sperren, Mitglieder verwalten und einiges mehr. Auch sind bereits Schnittstellen zu allen wichtigen deutschen und englischen Zahlungsanbietern vorhanden. Von Vorteil ist, dass deutsche Newsletter-Anbieter unterstützt werden, wie CleverReach und Klick-Tipp.

DigiMember

Die Lizenzen

Die DigiMember Lizenzen

  • Entwickler: Neise GmbH
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: nicht bekannt
  • Kompatibel zu WordPress 3.9.1: Ja, vollständig
  • Kosten: Je nach Lizenz, von 97.- € bis 997.- €
  • Lizenz: Spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  DigiMember WordPress Membership Plugin

Online Weiterbildung anbieten – Tests, Prüfungen und Quiz

WatuPRO – Premium WordPress Plugin To Create Exams, Tests and Quizzes

Das WatuPRO Premium WordPress Plugin

WatuPRO ist die simple und professionelle Möglichkeit, eine Weiterbildungs-Webseite aufzubauen. Prüfungen, Tests und Quizes lassen sich hiermit realisieren. Das Plugin soll mit jedem üblichen WordPress-Theme ohne Probleme verwendbar sein. Das Plugin hat eine Menge hervorragender Features, wie z.B. die Kombination von Multiple-Choice, Single-Choice und offenen Fragen. Fragen können auch in zufälliger Reihenfolge erscheinen, es gibt Fristen für Prüfungen und eine eigene Notenskala. Abschluss-Zertifikate können erstellt werden. Das Abschluss-Zertifikat können sich erfolgreiche Absolventen der Prüfungen dann nach der Prüfung herunterladen. Dieses Plugin ist die Basis für Ihre seriöse Bildungsstätte.

Ein Demo-Test des WatuPro Premium WordPress Plugin

Die einzelnen Lizenzen des WatuPRO Premium WordPress Plugins

Die Lizenzen des WatuPRO Premium WordPress Plugin

  • Entwickler: Kiboko Labs Ltd.
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: nicht bekannt
  • Kompatibel zu WordPress 3.9.1: Ja, vollständig
  • Kosten: Je nach Lizenz, von 47.- $ bis 137.- $
  • Lizenz: Spezielle Lizenz
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  WatuPRO Homepage

Das eigene Social Network mit BuddyPress

Das BuddyPress WordPress Plugin

Wer schon immer ein eigenes Soziales Netzwerk sein eigen nennen wollte, kann mit WordPress und BuddyPress der nächste Mark Zuckerberg werden. Buddypress erweitert die eigene Webseite um ein voll funktionsfähiges Social Network mit eigenen Profilseiten, Gruppen, Diskussionsforen und Aktivitäten-Streams. Das Alles erhalten Sie ohne großen Aufwand, da Buddypress kostenlos als Plugin angeboten wird. BuddyPress funktioniert grundsätzlich mit jedem Theme, aber auf WordPress.org gibt es einige, die speziell für den BuddyPress-Einsatz modifiziert sind. Benutzt man kein für BuddyPress optimiertes Theme, sind CSS-Kenntnisse für ein ansprechendes Äußeres obligatorisch.

  • Entwickler: WordPress / Automattic
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: 03.05.2014
  • Kompatibel zu WordPress 3.9.1: Ja, vollständig
  • Kosten: Kostenfrei
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  BuddyPress.org

Das BuddyPress Activity Plus Plugin

Eine sehr empfehlenswerte Erweiterung für BuddyPress ist das Plugin Buddypress Activity Plus, es erweitert die Activitybox um Facebook-ähnliche Media Share Buttons.

  • Entwickler: WPMUDEV
  • Entwicklungsaktivität: Ja
  • Letzte Version vom: 14.06.2014
  • Kompatibel zu WordPress 3.9.1: Ja, vollständig
  • Kosten: Kostenfrei
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht vorhanden

Fazit

Das schöne an WordPress ist, dass grundsätzlich alles möglich ist. Alles, was man sich vorstellen kann, kann grundsätzlich mit WordPress und einigen Plugins umgesetzt werden – auch absolute Nischen-Webseiten. Bedingt durch die sehr große Community um das CMS werden immer mehr Plugins für immer mehr Anwendungsbereiche auf den Markt gebracht. Daraus resultiert, dass Sie Ihr nächstes Projekt fast unter Garantie auch mit WordPress umsetzen können.

Links zum Beitrag

Auktions-Plugins

Membership Plugins

Plugin für Online-Weiterbildung

WatuPRO Premium WordPress Plugin

Social Network Plugin BuddyPress

(dpe)

Kategorien
E-Business SEO & Online-Marketing Tipps, Tricks & Tutorials WordPress

WordPress für Admins: 40 kostenlose und essentielle Tipps zu Schnelligkeit, Sicherheit und Suchmaschinenoptimierung

WordPress ist das meist installierte Blog- und CMS-System weltweit. Drei Themenbereiche sind da von großer Relevanz. Die Geschwindigkeit des Ladens etwa, die sehr mit der Suchmaschinenoptimierung zusammenspielt. Auch die Sicherheit vor Spam, Hackern und Viren interessiert den Admin sehr. Wir haben deshalb gleich 40 herausragende und aktuelle WordPress für Admins-Artikel zu diesen Themen für Sie recherchiert. Viel Erfolg und neue Erkenntnisse wünschen wir Ihnen mit der folgenden Zusammenstellung.

Schnelligkeit

Why Trying to Get 95+ on Google PageSpeed Insights for Your WordPress Site Will Drive You Mad!

Urheber: premium.wpmudev.org

wordpress-tipps1

© Raelene Wilson

Optimize Your WordPress Using These Simple Tips

Urheber: elegantthemes.com

wordpress-tipps2

© Kevin Muldoon

Speed Up WordPress With These 5 Expert Tips

Urheber: rackaid.com


wordpress-tipps3

© Jeff Huckaby

7 WordPress Plugins to Make Your Blog Faster

Urheber: bloggingtips.com

wordpress-tipps4

© Ahmed Safwan

The Best Way to Make WordPress Faster

Urheber: mywpexpert.com

wordpress-tipps5

© Brandon Yanofsky

Tips for a Faster-Loading Site

Urheber: vizioninteractive.com

wordpress-tipps6

© Joshua Titsworth

WordPress Plugins to Speed Up Your WordPress Site

Urheber: tipsandtricks-hq.com

wordpress-tipps7

© tipsandtricks-hq.com

10 Quick Tips: Optimizing & Speeding Up Your WordPress Site

Urheber: code.tutsplus.com

wordpress-tipps8

© Avinash Zala M

5 Tips to Speed up Your WordPress Site

Urheber: tombunn.net

wordpress-tipps9

© Tom Bunn

16 WordPress Speed Tricks That Will Make Your Site Blazing Fast

Urheber: warriorforum.com

wordpress-tipps10

© satrap

Sicherheit

WordPress Security: Is Your WordPress Site Really Secure?

Urheber: wpexplorer.com

wordpress-tipps11

© Freddy

Improve your WordPress security with these 10 tips

Urheber: woothemes.com

wordpress-tipps12

© Dan

11 Quick Tips: Securing Your WordPress Site

Urheber: tutsplus.com


wordpress-tipps13

© Avinash Zala M

The 20 Best WordPress Security Tips on the Web

Urheber: rackaid.com

wordpress-tipps14

© Jeff Huckaby

11 WordPress Security Tips to Keep Hackers Away

Urheber: torquemag.io

wordpress-tipps15

© Jonathan John

Following These Simple WordPress Security Tips Could Help Save Your Website

Urheber: elegantthemes.com

wordpress-tipps16

© Nick Roach

How Secure is WordPress? Tips to Increase your Website’s Security

Urheber: yokoco.com

wordpress-tipps17

© Max

9 Easy Tips to Better Secure Your WordPress Admin Directory

Urheber: innothemes.com

wordpress-tipps18

© Hannah Duong

11 Ways for Small Businesses to Secure their WordPress Website

Urheber: bigideasblog.infusionsoft.com

wordpress-tipps19

© Joseph Manna

Useful WordPress Configuration Tricks That You May Not Know

Urheber: wpbeginner.com

wordpress-tipps20

© wpbeginner.com

Suchmaschinenoptimierung

WordPress SEO Tips: 7 Deadly Mistakes You Want to Avoid

Urheber: razorsocial.com

wordpress-tipps31

© Ian Cleary

5 SEO Tips for WordPress

Urheber: brandingpersonality.com

wordpress-tipps32

© Robert Gembarski

SEO best practice tips for WordPress

Urheber: econsultancy.com

wordpress-tipps33

© Christopher Ratcliff

10 SEO tips for WordPress websites

Urheber: graphpaperpress.com

wordpress-tipps34

© Thad Allender

WordPress SEO Tips and Tricks You Shouldn’t Miss

Urheber: aceclue.com

wordpress-tipps35

© Lasisi Afees

WordPress SEO: The Only Guide You Need

Urheber: viperchill.com

wordpress-tipps36

© viperchill.com

23 tips to improve SEO with WordPress for 2014

Urheber: socreativedigital.com

wordpress-tipps37

© Simon Oliver

5 Killer WordPress SEO Tips You May Be Missing

Urheber: marknetgroup.com

wordpress-tipps38

© Alex Miranda

SEO Tips and Tricks for 2014

Urheber: bestseoideas.com

wordpress-tipps39

© bestseoideas.com

31 Ways to Boost the SEO of Your WordPress Site

Urheber: techtage.com

wordpress-tipps40

© Rohit Palit

Sonstiges

Tips for Integrating Visual Social Media into Your WordPress Site

Urheber: managewp.com

wordpress-tipps21

© Tom Ewer

5 Essential Tips on Social Media Integration for WordPress

Urheber: code.tutsplus.com

wordpress-tipps22

© Barış Ünver

55+ Most Wanted WordPress Tips, Tricks, and Hacks

Urheber: wpbeginner.com

wordpress-tipps23

© Editorial Staff

Powerful WordPress Tips And Tricks

Urheber: smashingmagazine.com


wordpress-tipps24

© Daniel Pataki

50 of the Best WordPress Tips, Guides and Tutorials I Know

Urheber: managewp.com

wordpress-tipps25

© Tom Ewer

10 Tips for Making Your WordPress Ecommerce Site a Success

Urheber: ithemes.com

wordpress-tipps26

© Kristen Wright

Stupid WordPress Tricks

Urheber: perishablepress.com

wordpress-tipps27

© Jeff Starr

10 WordPress Tricks & Tips to Help You Manage Your Blog

Urheber: codecondo.com

wordpress-tipps28

© Alex Ivanovs

20 WordPress Tricks to Improve Your Blog

Urheber: designm.ag

wordpress-tipps29

© Steven Snell

5 WordPress Tips & Tricks You Need to Know

Urheber: mycleveragency.com

wordpress-tipps30

© Dan Davidson

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Endlich schön und benutzerfreundlich: WordPress 4.0 kommt

WordPress 4.0 wird Ende August offiziell verfügbar sein und intern als Milestone Release bezeichnet. Das macht deutlich, dass es sich nicht um ein einfaches Sicherheitsupdate handelt, sondern tiefgreifende Änderungen mit sich bringt. Das Nutzererlebnis im Umgang mit WordPress wird sich deutlich verbessern, viele wirklich nützliche Dinge wurden implementiert. Die wichtigsten und tiefgreifendsten stellt dieser Artikel vor.

Was erwartet uns in WordPress 4.0?

1. – Sprache wählbar während der Installation

Ein lang erwartetes Feature, da circa zwei Drittel der Nutzer von WordPress ausserhalb der USA leben. Bereits während der Installation von WordPress kann nun die Sprache gewählt werden, was den Download von speziellen Sprachdateien überflüssig macht. Eine eingedeutschte Version sollte damit auch überflüssig werden.

2. – Ein verbesserter visueller Editor

Der visuelle Texteditor von WordPress wurde mit WP-Version 4.0 stark überarbeitet und läuft nun insgesamt flüssiger und schneller. Textpassagen aus Microsoft Word können nun ohne Probleme direkt in den Editor eingegeben werden, vorher einen Button hierfür zu drücken ist nun unnötig. Die Bereinigung der Eingaben von MS Word läuft automatisch ab. Listen werden ebenfalls besser dargestellt werden.

Galerie Vorschau im visuellen Texteditor

In den Beitrag eingefügte Galerien werden nun genau wie in einem bereits veröffentlichten Beitrag in einem schicken Gitternetz dargestellt.

Eine in den Beitrag eingefügte WordPress Galerie

Audio und Video Playlists – präsentieren Sie Ihre Audio und Video Dateien

Ein Klick auf Dateien hinzufügen offenbart die nächsten tiefgreifenden Änderungen. Es können nun einfache Video und Audio Playlists erstellt werden, damit erhalten Sie nun die Möglichkeit, Ihre Audio und Video Dateien präsentieren zu können.

Die neuen Möglichkeiten des Medien Managers
Die neuen Möglichkeiten des Medien Managers in WordPress 4.0

 

Ein Beispiel einer mit dem neuen Medien Managers erstellten und veröffentlichten Audio Playlist.

Audio und Video Playlists erstellen mit WordPress 4.0

Weitere neue Funktionen im visuellen Editor

Die Bildbearbeitung wird zukünftig wesentlich einfacher und benutzerfreundlicher werden. Bilder können per Drag and Drop direkt in den Editor gezogen werden, ohne den Umweg über den Medienmanager, wie bisher gehen zu müssen. Bilder können nun auch direkt im visuellen Texteditor skaliert werden, um die richtige Größe zu erhalten. Das dürfte ziemlich praktisch werden.

Neue Möglichkeiten im WordPress 4.0 Texteditor

3. – Eine übersichtlichere, verbesserte Mediathek

Die Mediathek in WordPress 4.0 wird wesentlich übersichtlicher und schöner, da alle Medien-Dateien nun in einem Grid angezeigt werden. Wer mit dieser neuen Ansicht Probleme hat, wechselt mit einem Klick schnell wieder zur gewohnten Übersicht zurück.

Die neue Mediathek in WordPress 4.0

Die neue Bildbearbeitung aus der Mediathek heraus ist ein Traum und sehr benutzerfreundlich.

Die verbesserte Bildbearbeitung im der Mediathek von WordPress 4.0

4. – Live Vorschau für Widgets und Header im Theme-Customizer

Direkt im Theme-Customizer lassen sich nun Widgets erstellen, hinzufügen und sortieren. Alles passiert Live, sodass man sofort ersehen kann, wie das Widget später auf der Seite aussieht. Nach dem Abspeichern kann es also keine Überraschungen mehr geben, weil etwas anders als erwartet aussieht. Das verbesserte Header-Bild-Werkzeug lässt Sie Bilder für den Header hochladen, zuschneiden und die Header-Bilder verwalten, während Ihrer Anpassungen an Ihrem Theme.

Bearbeiten Sie Widgets und Header-Bilder direkt im Theme-Customizer von WordPress
Bearbeiten Sie Widgets und Header-Bilder direkt im Theme-Customizer von WordPress

 

Header-Bilder direkt im Theme-Customizer von WordPress bearbeiten, zuschneiden und verwalten.
Header-Bilder direkt im Theme-Customizer von WordPress bearbeiten, zuschneiden und verwalten.

 

5. – Ein atemberaubend neuer Theme-Browser

Neue Themes suchen und auswählen wird mit WordPress 4.0 ein atemberaubendes Erlebnis. Nach neuen, kostenfreien Themes von WordPress.org zu suchen wird erstmals richtig Spaß machen und zu einem visuellen Erlebnis werden.

Der neue Theme-Browser von WordPress 4.0

6. – Unter der Haube

  • Externe Bibliotheken: Aktualisierte Bibliotheken: TinyMCE 4, jQuery 1.11, Backbone 1.1, Underscore 1.6, Plupload 2, Mediaelement 2.14, Masonry 3.
  • Überarbeitete Datenbankanbindung: Datenbankverbindungen sind jetzt fehlerresistent und erhalten eine verbesserte Kompatibilität zu PHP 5.5 und MySQL 5.6.
  • Semantische Hervorhebung für Beschriftungen und Galerien: Theme-Entwickler haben neue Optionen für Bilder und Galerien, welche das intelligente HTML5-Markup verwenden.
  • Integrierte Quelltextdokumentation: Jeder Action und Filter Hook in WordPress ist jetzt dokumentiert, zusammen mit einer erweiterten Dokumentation für den Medien-Manager und die Theme-Customizer API.
  • Neue Hilfsfunktionen: Identifiziere aktuell ausgeführte Hooks mitdoing_action() bzw. doing_filter()und manipuliere benutzerdefinierte Bildgrößen mit has_image_size() bzw.remove_image_size().

7. – So können Sie Betatester werden

Ein paar Worte vorweg: Ich empfehle Ihnen dringend, die Beta-Versionen von WordPress nicht auf einer Live-Webseite zu testen. Legen Sie sich dafür ein Testsystem auf Ihrem Computer an, hier helfen Programme wie zum Beispiel Xampp für Windows, Linux und Mac oder aber Mamp für Mac OS X.

Nutzen Sie das WordPress Beta Tester Plugin

Das WordPress Beta Tester Plugin

Das WordPress Beta Tester Plugin lässt Sie automatisch immer die neueste Betaversion von WordPress testen, in dem Sie bei jeder neuen Betaversion eine Update-Benachrichtigung im WordPress Adminbereich bekommen. Unter „Werkzeuge => Beta Test“ lassen sich die Versionen einstellen, die man testen möchte. Sie haben die Wahl zwischen den kleinen und stabileren Versionen oder dem Sprung auf eine größere Version. Siehe Grafik:

Die Einstellungen des WordPress Beta Tester Plugins

  • Entwickler: Peter Westwood
  • Wird ständig weiter entwickelt: geht so
  • Letzte Version vom: 10.11.2013
  • Kostenpunkt: kostenfrei von WordPress.org
  • Lizenz: GNU General Public
  • Kompatibel mit WordPress 4.0: Ja, vollständig
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler Homepage: keine Angabe

Fazit

WordPress 4.0 scheint endlich in die richtige Richtung zu gehen und benutzerfreundlich sowie wunderschön zu werden. Ich persönlich freue mich wahnsinnig auf die neuen Features und denke, dass sie nicht nur gut aussehen, sondern auch zeitsparend im täglichen Einsatz sein werden.

Links zum Beitrag

(dpe)

Kategorien
IMHO Tipps, Tricks & Tutorials WordPress

Technologie-Debatte adé: Sprechen Sie nicht von WordPress, wenn Sie ein Webprojekt anbieten

Webworker haben es heutzutage wirklich nicht leicht. Um jeden Auftrag muss hart gekämpft werden. Besonders ärgerlich ist es dann, wenn Sie von zehn abgegebenen Angeboten nur eines zugesprochen bekommen. Das aber dürfte besonders in der Anfangszeit der Selbstständigkeit bittere Realität sein. Man mag zwar in seinem Bereich des Webdesigns richtig gut sein, hat allerdings in aller Regel vom Verkauf keine Ahnung. Doch eine Selbstständigkeit oder ein Freiberuflertum basiert zuerst einmal auf dem Verkauf. Man möchte gerne soviel Aufträge haben, dass man voll ausgelastet ist. Doch wie kann man das erreichen, wo sind die Fallstricke? Dieser Artikel zeigt Ihnen auf, wie Sie in Zukunft typische Fehler vermeiden können und besser im Verkauf Ihrer Arbeitskraft werden.

Sagen Sie niemals WordPress, wenn Sie ein Webprojekt anbieten

Der Status Quo – ein typischer Ablauf eines Verkaufsgespräches

Ein typischer Prozess könnte zum Beispiel so aussehen:

  • Ein Interessent meldet sich bei Ihnen und Sie starten ein Verkaufsgespräch
  • Sie fragen, was der Kunde braucht, holen sich Informationen über sein Geschäft ein und fragen den Interessenten, was er für Funktionen und Features zu brauchen glaubt.
  • Sie geben einen Überblick über die Dinge, die Sie leisten können und die Plattformen, die Sie dafür einsetzen, wie z.B. WordPress, Drupal, Shopware, Magento, Contao usw.
  • Dann geben Sie Ihrem Interessenten noch einen tiefen Einblick in die verschiedenen Funktionen, die Sie glauben, dass er für sein Projekt braucht und bringen Ihm näher, wie es gelöst werden könnte. Alles sehr schön technisch…
  • Sie schicken dem potenziellen Kunden ein Angebot und warten ab, was passiert.

Ab hier folgen meist noch weitere Gespräche mit Ihrem potenziellen Kunden über das von Ihnen angebotene Content Management-System für das betreffende Projekt. Sie führen nun wirklich ermüdende und sehr lange Gespräche, in denen Sie tief in die Technologie des CMS Ihrer Wahl tauchen müssen.

Kann es das…? Was ist mit jenem…?

Höchstwahrscheinlich hat Ihr Interessent auch andere Angebote bekommen, in denen eine andere Platform angeboten wurde. Daraus entsteht dann eine wirklich interessante Technologie-Debatte:

Kann WordPress dieses, kann WordPress das? Ist Drupal vielleicht doch die bessere Wahl als WordPress? Ist dieses besser als jenes? Usw..usw… Längst geht es nicht mehr darum, was für die Firma des Interessenten das Beste wäre, sondern der Kunde will nun die Plattform wählen – auch, wenn die von Ihnen vorgeschlagene besser zu seinen Bedürfnissen passen würde. Er kann es ja nicht wirklich beurteilen…

Ganz ehrlich: Diese Debatten braucht wirklich niemand. Das Gute ist, dass man diese Art der Gespräche sehr leicht umgehen kann, sich dabei gleichzeitig von seinen Mitbewerbern dadurch unterscheiden und mehr Angebote zu Aufträgen machen kann.

Was ein Kunde wirklich will

Wenn sich ein potenzieller Kunde bei Ihnen meldet, hat er ein Problem, dass er gelöst wissen möchte. Meist hat er nur wenig Vorstellungen davon, was er wirklich braucht und haben möchte. Klar, er möchte eine Webseite sein eigen nennen, hat aber meistens nur rudimentäre Vorstellungen von dem, was am Ende der Auftragsbearbeitung herauskommen soll – nämlich eine möglichst perfekt auf den Kunden und seine Bedürfnisse zugeschnittene Webseite. Kein Kunde will im Grunde Technologie-Debatten führen oder sich mit den verschiedenen Software-Plattformen beschäftigen müssen. Er will ausschliesslich die für Ihn und seine Bedürfnisse perfekte Webseite.

Es gilt das Motto: Die Menschen wollen keine Bohrmaschinen, sie wollen Löcher in der Wand.

Wie Sie es ab sofort besser machen können

Bevor ich mich dazu entschloss, mein Hobby zum Beruf zu machen und fortan Webdesign zu betreiben, war ich Versicherungsvertreter. Ich beschäftigte mich sehr viel mit Verkaufs-Psychologie, weil mir aufgefallen war, dass einige wenige Vertreter viel besser verkauften, als andere. Nach und nach fand ich heraus, was diese Menschen anders machten als andere aka ich. Nachdem ich mein Verkaufsgespräch entsprechend abgeändert hatte, wurde ich viel erfolgreicher und verkaufte bedeutend mehr Versicherungsverträge. Etwas sehr wichtiges habe ich auch herausgefunden: Zuviel Wissen hindert am Verkauf. Je mehr technisches Wissen Sie Ihrem potenziellen Kunden vermitteln, desto geringer ist die Chance eines Auftrags. Im Grunde muss Ihr Interessent lediglich wissen, dass die von Ihnen gewählte Lösung all das kann, was sie können muss.

Heben Sie sich von der Konkurrenz ab, machen Sie eine vollständige Bedarfsanalyse

Eine korrekte und vollständige Bedarfsanalyse ist der erste und wichtigste Punkt im Gespräch mit einem potenziellen Kunden. Sie müssen soviel wie nur möglich über die Firma des Kunden (oder über den Kunden selbst, wenn er keine Firma hat) erfahren. Ihr Gesprächsanteil sollte jedoch ein Drittel der Gesprächszeit nicht übersteigen, man muss erreichen, dass der Interessent die restlichen zwei Drittel spricht, damit man alles wirklich wichtige von Ihm erfährt. Außerdem hören sich Menschen lieber selbst reden, als dass sie anderen zuhören. Wie Sie gleich erfahren werden, ist das gar nicht so schwer, da es nur auf die richtige Fragetechnik ankommt.

Machen Sie eine vollständige Bedarfsanalyse mit Ihrem Interesseneten

Stellen Sie nur offene Fragen

Offene Fragen sind Fragen, auf die man nicht nur mit ja oder nein antworten kann, sondern gezwungen ist, etwas detaillierter auf die Frage einzugehen. Offene Fragen sind sogenannte W-Fragen, da sie immer mit einem W-Wort anfangen. Wie, warum, was, welche usw.

Ein paar Beispiele:

  • Was möchten Sie mit der Webseite erreichen?
  • Was soll die Website optisch vermitteln?
  • Welche Vorgaben muss ich bei der Umsetzung beachten (Corporate Design usw.)

Ein Beispiel einer guten Bedarfsanalyse

Die erste Frage ist natürlich immer die, ob bereits eine Webseite vorhanden ist.

  • Was ist das Hauptziel oder der Grund für die (Neu)-Gestaltung Ihrer Webseite?
  • Womit genau beschäftigt sich Ihre Firma?
  • Was unterscheidet Sie von Ihrer Konkurrenz, was macht Sie einzigartig (besonderer Service, spezielles Produkt usw.)?
  • Welche Zielgruppe möchten Sie ansprechen?
  • Welche Ihrer Leistungen sollen besonders hervorgehoben werden?
  • Welchen Schwerpunkt soll der Internetauftritt abdecken? (Beispiel: Promotion und Verkaufsförderung, Unternehmensdarstellung)?
  • Welche Vorgaben sind bei der Erstellung der Webseite zu beachten (Corporate Design usw.)?
  • Wollen Sie Ihre Webseite selbst bearbeiten und aktualisieren können?
  • Wieviele Mitarbeiter wären für die Aktualisierung der Webseite zuständig?
  • Welche Webseite Ihrer Konkurrenz gefällt Ihnen besonders gut – wenn ja, welche speziellen Elemente dieser Webseite gefallen Ihnen?
  • Was genau sollte Ihre Internetpräsenz können und beinhalten (Blog, spezielle Suche, Shop usw.)?
  • Wie genau sollte Ihre zukünftige Webseite aussehen (freundlich, elegant, modern, ruhig, minimalistisch usw.)?
  • Wie hoch ist das von Ihnen festgelegte Budget für das Webprojekt?

Als abschliessende Frage bietet sich natürlich noch die Frage nach einem eventuell bereits vorhandenen Hoster und einer bereits vorhandenen Domain an. Nun haben Sie alle wichtigen Informationen gesammelt, um dem Kunden seine perfekte Webseite anzubieten und Ihr Interessent wird das gute Gefühl haben, dass Sie der richtige Partner für sein Projekt sind. Technologie- und Plattform-Debatten werden so erst gar nicht aufkommen, Kunde und Webdesigner haben so bedeutend mehr Zeit für das Wesentliche – ihrem eigentlichen Job nachzugehen.

Fazit

Meine Erfahrungen haben gezeigt, dass sich potenzielle Kunden nach einer eingehenden Bedarfsanalyse sehr wohl und verstanden fühlen und demnach gerne den Auftrag an einen solch gewissenhaft vorgehenden Webdesigner vergeben. Sie werden mit Sicherheit nicht jeden Auftrag bekommen, aber es werden beständig mehr werden. Und die Plattform WordPress, wenn Sie diese präferieren, wird dann vom Kunden anstandslos akzeptiert, weil die Frage nach der Plattform keinerlei Bedeutung mehr besitzt.

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

Einfacher geht’s nicht: So ziehen Sie Ihr Blog von Googles Blogger zu WordPress um

Google´s Plattform Blogger aka Blogspot ist ziemlich beliebt, wenn es darum geht, mit einem eigenen Blog zu starten. Ohne finanzielle Aufwendungen kann so erstmal geprüft werden, ob das Bloggen auch über längere Zeit Spaß macht und man dabei bleiben möchte. Wenn man jedoch bereits über längere Zeit bloggt, dann kann schnell der Wunsch nach einem selbstgehosteten Blog mit mehr Möglichkeiten aufkommen. Fast zwangsläufig landet man hier bei WordPress – die Community ist extrem groß, es gibt zigtausende freie Themes zur Gestaltung, Support ist in den einschlägigen Foren kein Thema und Spass macht das Schreiben im übersichtlichen Backend von WordPress auch noch. Dieser Artikel beschäftigt sich daher mit der Frage, wie man am geschicktesten seine Inhalte von Blogger zu WordPress migriert.

Von Blogger zu WordPress, so geht´s

Installiere WordPress

Der erste Schritt ist die Installation eines sauberen, frischen WordPress. Werfen wir vorab einen kurzen Blick auf die Installations-Voraussetzungen:

Um WordPress zu installieren, wird ein Webspace benötigt, der die folgenden Mindestvoraussetzungen erfüllt:

1. PHP-Version 5.2.4 oder höher
2. MySQL-Version 5.0 oder höher
3. Das Apache mod_rewrite Modul, für „schönere URLs“

Die Installation an sich ist total leicht und meistens in 5 Minuten erledigt. WordPress Deutschland schreibt folgendes zur Installation:

  • Entpacke das Paket, das du gerade heruntergeladen hast.
  • Öffne die Datei wp-config-sample.php mit einem einfachen Texteditor (Notepad, Windows-Editor, jedoch nicht Word oder OpenOffice Writer!) und füge die erforderlichen Datenbankdaten und die Sicherheitsschlüssel ein.
  • Diese Datei jetzt unter dem neuen Namen wp-config.php abspeichern.
  • Übertrage alle Dateien auf deinen Server.
  • Starte die Installation, indem du mit deinem Browser zu der Seite install.php surfst. Sie liegt relativ zu den Daten, die du hochgeladen hast, im wp-admin Ordner. Da wir den Pfad zu deiner Datei nicht wissen können, mußt du das folgende Beispiel entsprechend anpassen. Beispiel: http://www.example.org/der_Ordner_in_welchem_WordPress_liegt/wp-admin/install.php
  • Merke dir das Passwort, welches du bei der Installation eingibst.

Von Blogger zu WordPress

Wichtig: Wir werden lediglich Artikel, Kategorien, Kommentare und Bilder/Grafiken in WordPress migrieren, keine angelegten Seiten. Seiten müssen erneut manuell in WordPress angelegt werden.

Um die Daten aus dem Blogger-Account in die neue, selbstgehostete WordPress – Webseite zu importieren, navigieren Sie im WordPress – Adminbereich zum Navigationspunkt Werkzeuge und klicken dort Daten importieren an. Nun muss der Importer für die Blogger-Dateien installiert werden.

Die Installation des Blogger-Importwerkzeugs

Nach der Installation bitte dieses Plugin aktivieren und ausführen. Sie werden nun zu einem Bildschirm geführt, in dem Sie gebeten werden, WordPress für den Zugriff auf das Blogger-Konto zu autorisieren.

WordPress für den Zugriff auf den Blogger-Account authorisieren

Nach der Genehmigung sehen Sie eine Liste Ihrer Blogger-Blogs. Wählen Sie den korrekten Blog aus, den Sie importieren möchten und starten Sie den Import. Innerhalb kürzester Zeit werden nun alle Daten inklusive den Grafiken/Bildern in WordPress importiert.

Die korrekte Permalinkstruktur

Das häufigste Problem bei der Migration von Blogger zu WordPress ist die WordPress Permalinks Struktur, die sich von der bei Blogger üblichen year/month/post-name.html eklatant unterscheidet. Da wir den Blogger-Inhalt in eine andere Permalinkstruktur importiert haben, empfiehlt es sich nun schon aus Gründen der Suchmaschinenoptimerung, die altbekannte Permalinkstruktur wieder herzustellen.

Navigieren Sie zu Einstellungen, dort zu Permalinks und klicken Sie dort den Menüpunkt Benutzerdefinierte Struktur an.

Gebe hier die benutzerdefinierte Permalinkstruktur ein

Geben Sie nun dort folgende Benutzerdefinierte Struktur ein und speichern die neuen Permalinks ab.

/%year%/%monthnum%/%day%/%postname%.html

Fertig! Nun können Sie damit beginnen, Ihre Domain auf Ihre neue WordPress – Installation zu verschieben, oder aber Ihr WordPress auf Ihre Bedürfnisse anzupassen und einzurichten.

Fazit

Das Umziehen eines kompletten Blogs von der Web-Platform Blogger zu einem selbstgehosteten WordPress geht leicht, einfach und sehr sicher. Nach weniger als einer halben Stunde Zeitaufwand kann man die unzähligen Vorteile erkunden, die WordPress nicht nur im optischen (tausende freier Themes) Bereich bietet.

(dpe)