WordPress Multisite: Netzwerk-Domain nachträglich ändern

Es kann vorkommen, dass man die bisherige Domain eines WordPress Multisite Netzwerkes nachträglich ändern muss. Wie das funktioniert, soll hier kurz und anschaulich erklärt werden.

Webdesign Köln: WordPress Multisite

Entweder hat man seine WordPress Multisite zu Testzwecken zunächst lokal installiert, oder die Domain ändert sich aufgrund anderer Umstände. Beides ist kein Grund zum Verzweifeln, die Lösung ist nicht so kompliziert, wie sie erscheinen mag.

Ganz wichtig: Zuerst ein Datenbank-Backup erstellen! Danach wie folgt vorgehen:

1.: In der wp-config.php unter „DOMAIN_CURRENT_SITE“ die neue Domain eingeben. Hierbei ist es wichtig, das „http://“ wegzulassen.

2.: In der Datenbank müssen folgende Tabellen angepasst werden:

wp_options: Hier gibt es die Zeilen siteurl und home. In beiden die neue Domain einsetzen.

wp_blogs: Hier die Domain der Hauptseite ändern. Sollten die Seiten des Netzwerkes über Subdomains erreichbar sein, müssen auch alle anderen Domains entsprechend angepasst werden.

wp_site: Hier den Wert site anpassen.

wp_sitemeta: Hier den Wert für siteurl ändern.

Das war´s! Die WordPress Multisite ist jetzt unter der neuen Domain erreichbar.

Icon-Font mit IcoMoon erstellen

Font-Bibliotheken wie font-awesome und glyphicons sind sehr praktisch aber oft auch überdimensioniert, wenn man nur ein paar Icons verwenden möchte. Für diesen Fall kann man mit IcoMoon seinen eigenen Icon-Font erstellen.

icomoon-bild_im_blogpost

1. Seite aufrufen und IcoMoon App auswählen

icomoon-icon-erstellen-ideesign-koeln-auswahl

Zunächst muss die Seite icomoon.io aufgerufen werden. Oben rechts auf der Seite wechselt man zur IcoMoon App, mit der man seinen eigenen Font erstellen kann.

2. Icons hochladen oder aus anderen Fonts auswählen

icomoon-icon-erstellen-ideesign-koeln-iconauswahl

Über „Import Icons“ wählt man seine selbst erstellten Icons von seinem Rechner aus. Die Dateien müssen im SVG Format vorliegen, damit IcoMoon sie versteht. Enthaltene Schriften sollten unbedingt in Pfade umgewandelt sein, da sonst Darstellungsfehler entstehen können und auch die Dateigröße zu groß ist.

Möchte man keine eigenen Icons verwenden, kann man sich aus den verschiedenen kostenlosen Fonts wie FontAwesome, ElegantIcons oder LineIcons seine Icons individuell zusammenstellen und sich so seinen eigenen Wunsch-Font bauen.

Als nächstes auf „Generate Fonts“ klicken, um den Font zu erstellen und weitere Einstellungen zu tätigen.

3. IcoMoon Font: Einstellungen

icomoon-icon-erstellen-ideesign-koeln-download-einstellungen

Bevor man den Download-Button klickt, kann man mit Klick auf das Zahnrad rechts daneben weitere Einstellungen vornehmen.

 icomoon-icon-erstellen-ideesign-koeln-options

In den Einstellungen kann man Klassennamen vergeben oder Attribut-Einstellungen für CSS (Klassen-Pre- und Postfix) ändern. Das kann nützlich sein, wenn man mehrere Sets benutzt. Icomoon erstellt aber auch schon von Haus aus sinnvolle Bezeichnungen, wenn sie denn eindeutig benannt wurden. So wird, wenn das Icon „star.svg“ (wie in unserem Beispiel) heißt, auch die vergebene CSS-Klasse von IcoMoon zur späteren Verwendung diesen Namen enthalten. Nach dem Prinzip: „prefix-iconname-postfix“.

4. Dateien aus dem Download

Nach dem Download erhält man eine Anzahl von verschiedenen Dateien. Die wichtigsten für den direkten Gebrauch sind die Schrift-Dateien im Ordner „Fonts“ und die style.css, die man nachher in sein eigenes Webprojekt einbinden muss. Die Angaben zur Einbindung des Fonts kann man aus der style.css in sein eigenes Stylesheet übernehmen, den Ordner Fonts legt man einfach neben seinem Stylesheet ab.

Wie man dann den Webfont benutzt, ist in der Stylesheet-Datei selber erläutert.

icomoon-icon-erstellen-ideesign-koeln-dateien

Viel Spaß mit dem eigenen Icon Font!

Was sind Rich-Snippets und wie bindet man sie ein?

Rich Snippets  (dt. „reichhaltige Schnipsel“), dienen dazu, Informationen aus einer Webseite in Suchmaschinen gesondert darzustellen. Dem Nutzer wird geholfen spezifische Angaben wie Anschrift, Bewertungen oder Telefonnummern in den Suchergebnissen zu sehen. Wir zeigen beispielhaft, welche Snippets es gibt und wie man sie einsetzt.

rich-snippets-bild_im_blogpost

Warum Rich Snippets?

rich-snippets-schwarzwaelder-kirschtorte-serp-ideesign-koeln

Lecker Schwarzwälder Kirschtorte – Doch welches Rezept würden Sie nehmen? – google.com

Hier ein einfaches Beispiel. Worauf würde man wohl als erstes klicken? Der obere Eintrag von chefkoch.de wurde mit Rich-Snippets um eine Bewertung, Zubereitungsdauer und ein Artikelbild erweitert. Nutzer heutzutage haben wenig Zeit, um die gesuchten Informationen zu finden. Wenn Produktbewertungen, Anschrift oder Öffnungszeiten direkt im Suchergebnis vorliegen, ist das ein immenser Vorteil gegenüber der Konkurrenz und erhöht die Chance, dass Kunden die Seite anklicken oder Sie andersweitig kontaktieren. Bilder haben sich als besonders hilfreich erwiesen, da sie aus der Textwüste des Suchergebnisses herausstechen. Daher sind Rich Snippets eine sinnvolle Erweiterung der Webseite, um aufzufallen und dem Besucher schon im Suchergebnis Informationen an die Hand zu geben. Welche Informationen angezeigt werden, sollten mit dem gewählten Marketing-Ziel in Einklang gebracht werden.

Beispiele verschiedener Rich Snippets und ihre Bedeutung:

Hier nur ein paar der bekannteren Beispiele, denn die Datenbank von schema.org umfasst hunderte Einträge von Rich Snippets, die den Content einer Webseite im Suchergebnis von Google und Co. besser platzieren kann. Zunächst einmal sollte klar werden, welche Snippets eine sinnvolle Erweiterung in den Suchergebnissen bedeuten. Für lokale Geschäfte lohnen sich Angaben des Standorts, der Telefonnummer, Bewertungen und möglicherweise auch aktueller Events.

· Bewertungen

Eines der am meisten genutzten Rich Snippets weltweit. Nutzer können für verschiedene Produkte auf der Webseite eine Bewertung hinterlassen. Dabei hat sich eine Bewertung von 0 bis 5 Sternen bewährt. Google zeigt diese standardmäßig als Sterne an, deklariert man die Bewertung mit dem dafür vorgesehenen Rich Snippet.

· Unternehmen und Organisationen

Rich Snippets bieten eine genaue Darstellung des Unternehmens für die Suchanfrage. Weitreichende Informationen wie die Branche, Mitarbeiter, den Standort und Unterorganisationen können mit Rich Snippets visualisiert werden.

· Rezepte

Eine beliebte Angabe sind Rezepte. In den Suchanzeigen können durch Angabe der Snippets z.B. bereits Kalorienanzahl oder auch Ausschnitte des Rezepts dargestellt werden.

· Veranstaltungen

Veranstaltungen können mit Anfangsdatum, den darstellenden Akteuren und Direktoren, Sponsoren und etlichen weiteren Informationen ausgestattet werden.

· Produkte

Von Produktfotos über passende Bewertungen bis zu Kundenreviews ist alles möglich, um Besucher schon in den Suchergebnissen zu einer Conversion zu bekommen.

· Musik

Alben können in einer kompletten Liste dargestellt werden. Mit Albumcover und den jeweiligen Interpreten. Dabei kann auch ein direkter Link zum Abspielen der Musik angeboten werden. Regionsabhängige Angaben, Bitrate und weitere Angaben zu den Stücken sind nur eine von vielen Möglichkeiten Musik auf Google zu promoten.

· Preise

Zusammen mit Produktreviews bietet es sich an, den Preis des Produkts direkt im Suchergebnis anzeigen zu lassen. Vielleicht bietet die eigene Webseite ja einen besonders guten Preis an. Der sollte auf jeden Fall Platz auf Google finden.

· Videos

Videos sind einige der wenigen Schemas, die kein Text-Snippet sind. Sie können als Direktlink mit Thumbnail, weiteren Informationen wie Bitrate, Autoren, Caption oder Akteuren dargestellt werden.

Einbindung in eine Webseite

Im Grunde ist es ziemlich einfach bereits erstellte Inhalte mit Rich Snippets auszustatten. Dazu müssen Angaben in der HTML-Syntax der Webseite getätigt werden. Mit dem HTML-Attribut „itemprop“ und dem jeweiligen Wert z.B. „name, mail, telephone“ , den man auf schema.org nachlesen kann, werden Elemente für Suchmaschinen sichtbar ausgezeichnet.

Ein umschließendes div-Tag gibt der Suchmaschine Informationen, nach welchem Schema die Daten angelegt sind (hier: itemtype=“http://schema.org/Recipe„) und Attribut „itemscope“, dass als Elternattribut funktioniert. Es handelt sich also um ein Rezept. Die beschriebenen Child-Tags stehen für die verschiedenen Informationen, die man Nutzern für ein Rezept geben kann. Die Attribut-Werte sind sprechend. Zum Beispiel geben „itemprop“ Werte, wie ‚cookTime‘ die veranschlagte Zubereitungsdauer des Rezepts an.

WordPress Plugin – All In-One Rich Snippets

all-in-one-rich-snippets-plugin-wordpress-ideesign-koeln

Mit dem kostenlosen Plugin „All In One Scheme.org Rich Snippets“ können die Rich Snippets mit einem einfachen Interface in die eigene WordPress Installation eingefügt werden und müssen nicht manuell in den Code eingetippt werden. Dabei bietet das Plugin eine automatische Vorschau des Suchresultats. Die meisten Snippets werden bereits unterstützt und weitere sollen noch hinzugefügt werden.

Quellen:
schema.org
webmasterpro.de

Seite nicht gefunden? Tipps für 404-Fehler in WordPress

Findet ein Server die gewünschte Seite nicht, entsteht ein sogenannter 404-Fehler mit entsprechender Anzeige. Für den Nutzer kann das bedeuten, dass er die Webseite verlässt. Wir zeigen, was man nicht nur in WordPress tun kann, um das zu verhindern.

404-fehler-wordpress-bild_im_blogpost

Eine 404-Seite sagt im Grunde nur, dass die Seite, die ein Nutzer aufrufen möchte, nicht auf dem Server gefunden wurde. Der Server arbeitet ordnungsgemäß, nur die aufgerufene Seite befindet sich nicht an Ort und Stelle. Deshalb zeigen wir hier:

  1. Weshalb gibt es 404 Seiten?
  2. Wie generiert WordPress 404 Seiten?
  3. Welche Strategie gibt es für 404 Seiten?

Weshalb gibt es 404-Seiten?

Zunächst sind 404-Seiten kein spezielles Problem von WordPress. Jedoch kann man mit WordPress die Permalink-Struktur ändern und leider auch zerstören. Meistens entstehen 404-Fehler durch falsche Schreibweise der URL des Nutzers oder des Autors der Webseite.

Die Permalink-Struktur kann auf allen Seiten und Beiträgen im WordPress Dashboard überprüft und geändert werden. Sind die Permalinks grundsätzlich im falschen Format, ist es möglich sie im Backend unter Einstellungen -> Permalinks auf die bevorzugte Schreibweise zu stellen. Dabei empfiehlt es sich, die URL „sprechend“ zu gestalten:

Beispiel: www.webseite.de/unterseite/unter-thema

Was macht WordPress bei einem 404-Fehler?

WordPress sucht bei einem Seitenaufruf im Dateisystem nach der index.php, die wiederum auf eine Unterseite verlinkt. Sollte die Seite in der Datenbank nicht gefunden werden, wird alternativ auf die 404.php verwiesen. Normalerweise befindet sich in jedem Standard Theme eine 404.php. Falls dem nicht so ist, verlinkt WordPress automatisch auf die Startseite der Installation. Eine 404 Seite kann wie jedes andere Seiten-Template erstellt werden.

Die 404.php Datei befindet sich standardmäßig im Theme-Verzeichnis und sollte einen generischen Inhalt haben, wie einen 404-Text, der den Nutzer auf den Fehler hinweist und eine Suchmaske. Alternativ kann man sich für diese Seite eine Strategie überlegen, die den Nutzer gezielt leitet. Möchte man ihn zu einer bestimmten Seite bewegen oder soll er selbst suchen können? Ist eine Auflistung der meist gesuchten Begriffe sinnvoll?

404 Seite erstellen – WordPress Codex: Create a 404 Page

Welche Strategie für 404-Seiten?

Bevor man anfängt die Seite zu modifizieren, sollte man sich eine 404-Strategie überlegen. Woher kommen die Nutzer und kann man die kaputten Links schon vorher reparieren? Was kann man tun, damit der Nutzer auf der Seite bleibt und nicht auf eine andere Seite springt? Und falls Nutzer öfter über eine falsch geschriebene Seite kommen, sollte man sie auf die richtige Webseite leiten?

1. Kaputte Links überprüfen

Zunächst sollte überprüft werden, ob es kaputte Links gibt, die auf nicht mehr vorhandene Inhalt verweisen. Mit den folgenden Tools erhält man eine übersichtliche Liste dieser Links.

Google Webmaster Tools – Crawl Errors
Indem man einen Snippet Code in die Webseite einfügt, bestätigt man, dass man Besitzer der Webseite ist. Danach erstellt Google eine Liste von Links, über die die Suchmaschine die Seite gecrawlt hat. Dabei werden sowohl interne als auch externe Links überprüft. Google zeigt nun nicht mehr funktionierende Links an. Zu den Google Webmaster Tools

w3 Validator – Checklink
Der w3 Validator überprüft nur die interne Verlinkung einer Webseite und listet die vorhandenen Fehler sauber untereinander auf. Es gibt außerdem Tipps für die Linksstruktur, um die Seitengeschwindigkeit zu erhöhen. Zum w3 Validator

2. WordPress-Plugins – 404 Seiten umleiten

Wer sich jedoch nicht darum kümmern will, wie seine 404 Fehlerseite aussieht, kann sie umleiten. Mit diesen Plugins geht das in WordPress sehr komfortabel.

Bildschirmfoto 2017-01-12 um 16.07.15

404 to 301
Mit diesem Plugin können 404-Seiten automatisch auf eine andere Seite weitergeleitet werden. Ideal, um direkt im WordPress Backend nicht vorhandene Seiten umzuleiten. Zum Plugin

Bildschirmfoto 2017-01-12 um 16.12.22

404 to Homepage
Dieses Plugin leitet sämtliche 404-Seiten zur Startseite der Homepage weiter. Zum Plugin

3. Kreative 404 Seite

Man kann auch etwas kreativer an die Erstellung von 404-Seiten herangehen. Das Magazin t3n hat dafür Beispiele aufgelistet, die zur Inspiration dienen können:

404 Error! Wanna play Pacman instead?

Fazit

Für welche Strategie man sich auch entscheidet: Man sollte das Potenzial einer 404-Seite nicht liegen lassen und es für den eigen Vorteil nutzen. Alles ist besser, als den Besucher auf einer weißen Webseite alleine zu lassen. Eine gute 404-Strategie ist Bestandteil der Benutzerführung und wirklich ohne großen Aufwand zu realisieren.

Die 10 schönsten Webfonts

Seitdem Google das Hosting für Open Source Schriften zur Webeinbindung übernommen hat, sind die Zeiten der ewig gleichen „Arial, Helvetica, sans-serif“-Layouts vorbei. Wir haben 10 der zurzeit angesagtesten Webschriften zusammengetragen. 5 davon zur kostenlosen Nutzung, 5 aus dem kostenpflichtigen Typekit-Abo von Adobe.

Schreibwerkstatt - Die 10 schönsten Webfonts

Freie Webfonts

Die hier angegebenen Schriften sind komplett kostenlos herunterzuladen. Entweder findet man sie auf der Google Fonts Seite oder auf fontsquirrel.com. Auf diesen Webseiten ist es außerdem möglich einen Test mit beliebigen Textausschnitten durchzuführen und Schriften zu vergleichen.

1. Source Sans Pro

10_schoenste_webfonts-sourcesanspro-ideesign-koeln

Die serifenlose Source Sans Pro war Adobes erste Open Source Schriftart und ist für digitale Interfaces optimiert worden. Sie wurde von Paul D. Hunt entworfen und ist in insgesamt 12 verschiedenen Schriftschnitten erhältlich.

2. Open Sans

10_schoenste_webfonts-opensans-ideesign-koeln

Mit ihren offenen Formen und dem neutralen, freundlichen Charakter gehört die serifenlose Open Sans von Steve Matteson zu einer der beliebtesten Schriften im Web. Sie wurde sowohl für den Druckbereich als auch für das Web und mobile Anwendungen optimiert und zeichnet sich durch ihre hervorragende Lesbarkeit aus. Sie umfasst circa 900 Zeichen und ist in 10 Schriftschnitten erhältlich.

3. Raleway

10_schoenste_webfonts-raleway-ideesign-koeln

Raleway ist eine freie, serifenlose Schrift, die vor allem für Überschriften gebräuchlich ist. Ursprünglich nur mit einer Schriftstärke ausgestattet wurde sie 2012 von Pablo Impallari und Rodrigo Fuenzalida in 2012 und iKerned von Igino Marini um 8 Schriftstärken erweitert.

4. Dosis

10_schoenste_webfonts-dosis-ideesign-koeln
Eine abgerundeter, serifenloser Schrifttyp mit gerade Strichen und abgerundeten Buchstabenenden. Erzeugt durch weiche Formen und geometrische Strichführung eine gelungene Mischung aus Seriosität und Verspieltheit.

5. Arvo

10_schoenste_webfonts-arvo-ideesign-koeln
Unter vielen serifenlosen Schriften im Webbereich sticht Arvo durch seine geometrische, serifenbetonte Anmutung angenehm hervor. Gestaltet von Anton Koovit und optimiert für die Webanwendung ist die beinahe monolineare Schrift gut lesbar auf den meisten Geräten. Arvo steht im Finnischen für „Nummer, Betrag oder Wert“, was den Charakter der Schrift gut beschreibt.

Kostenpflichtige Webfonts aus Typekit von Adobe

Bei Typekit handelt es sich um ein Abonnement für eine Schriftenbibliothek, aus der man anstatt einzelne Schriften zu lizensieren, Schriftarten auswählen kann, die über eine App synchronisiert werden. Typekit ist quasi das Spotify unter den Schriftbibliotheken: Man kann die Schrift benutzen, hat aber keinen Zugriff auf die Schriftdatei selber. Man erhält Typekit automatisch zum Abonnement der Creative Cloud von Adobe dazu. Aber auch ohne CC-Abonnement kann man die Schriften ausprobieren und ein separates Typekit-Abonnement abschließen. Die Schriften sind unterteilt in Desktop- und Web-Nutzung. Wobei viele der Schriften für beide Zwecke verwendet werden können.

6. Proxima Nova

10_schoenste_webfonts-proximanova-ideesign-koeln

Die Proxima Nova ist eine Überarbeitung der Proxima Sans aus dem Jahr 1994 und zeichnet sich durch seine humanistischen Proportionen aus und eine eher geometrische Anmutung. Sie besteht aus 3 Schriftbreiten mit jeweils 8 passenden Schriftstärken. Die Schrift wird mit verschiedenen Erweiterungen, wie Ligaturen, Frakturen, passenden Ordnungszahlen, Dingbats ausgeben und unterstützt sowohl die meisten lateinischen Schriften als auch Währungen.

7. Museo

10_schoenste_webfonts-museo-ideesign-koeln

Angefangen mit der Letter „U“ ist die Museo durch ihre geradlinige Schriftstärke und ihr charakteristischer nahtloser Übergang in die Serifen ein besonderer Anblick. Leichter Verspieltheit und ein klares Auftreten sind die Charakteristiken der Museo, die sich vor allem für größere Textgrößen eignet.

8. FF Market Web

10_schoenste_webfonts-ffmarketweb-ideesign-koeln

Handgeschriebene Antiqua aus dem Jahr 1996 vom deutschen Schriftdesigner H. A. Simon. Sie eignet sich durch ihre dynamische Strichführung gut für vielfältige Anwendungen im Werbebereich, Verpackungen, auf Webseiten und der Spieleindustrie. Dabei bietet sie vor allem mit den vor allem im Webbereich üblichen serifenlosen Schriftarten einen ausgewogenen und stimmigen Kontrast. Sie wird in 3 Schriftstärken ausgegeben und unterstützt Funktionalitäten wie Ligaturen, alternatierende Zeichen, Frakturen, stylistische Alternativen und vieles mehr.

9. Minion Pro

10_schoenste_webfonts-minionpro-ideesign-koeln

Eine klassische Schriftart wie die ebenfalls beliebte Garamond, die sich durch ihr ruhiges Schriftbild auszeichnet.

10. Adelle

10_schoenste_webfonts-adelle-ideesign-koeln

Die dynamische, serifenbetonte Schrift eignet sich vor allem für den Editorial Bereich, meistens für Zeitschriften oder Magazine. Durch ihren unauffälligen Charakter mit dunkler Farbe kann sie für die meisten Anwendungen verwendet werden. In größeren Schriftgrößen spielt sie ihre energetischen Eigenschaften wegen ihrer betonten Serifen aus. Mit 14 verschiedenen Schriftschnitten, Schriftbesonderheiten wie Frakturen ist die Adelle eine Allzweckwaffe für gute Typografie.

Quellen: Google FontsTypekit – fontsquirrel

Kostenloses PSD Website Template zum Download [freebie]

Modernes und aufgeräumtes Webseiten-Template als PSD. Inklusive verschiedener Grid-Systeme sowie strukturierter Ebenen und Gruppen. Einfach herunterladen und benutzen, verändern, umsetzen … viel Spaß damit!

explore_freetemplate_ideesign

Format: PSD/zip
Größe: 17.5 MB

Download

Dir gefällt, was du kriegst? Please share the love:

6 Basis-Tipps zum Umgang mit WordPress als CMS

Sie haben sich eine WordPress Webseite erstellen lassen und möchten hin und wieder selbstständig Texte und Inhalte anpassen? Dafür haben wir hier eine Liste mit den wichtigsten Basis-Tipps zusammengestellt.

6_basistipps_wordpress_cms-ideesign_koeln-post-img

1.) Sicheres Passwort verwenden

Man kann es nicht deutlich genug herausstellen: Das Passwort zu Ihrer WordPress-Webseite sollte absolut sicher sein und nirgendwo sonst benutzt werden. Es ist natürlich sehr bequem, für die meisten Dienste ein und das selbe Passwort zu benutzen. Aber diese Bequemlichkeit ist eine große Sicherheitslücke, die u. U. teuer bezahlt werden muss. Lassen Sie sich von WordPress ein Passwort vorschlagen und das von Ihrem Browser speichern. Wenn Sie z.B. die Cloud- Schlüsselbundverwaltung auf dem Mac benutzen, haben Sie das Passwort für alle Ihre Geräte synchronisiert und müssen es sich nicht merken. Alternativ benutzen Sie einen Passwortmanager wie 1 Password.

So sieht ein sicheres Passwort aus. WordPress generiert ein langes zufälliges Passwort mit vielen Sonderzeichen.

So sieht ein sicheres Passwort aus.

ideesign-6basis_tipps_wordpress_cms-schwaches_passwort

Und so sieht ein schwaches Passwort aus.

2.) Unformatierte Texte benutzen

Wenn Sie Texte für Ihre Webseite verfassen, benutzen Sie sicher ein Textverarbeitungsprogramm wie Word oder Pages. Wenn die Texte fertig sind, kopieren Sie diese und fügen Sie auf Ihrer Webseite ein. Aber Vorsicht: Was beim Kopieren unicht sichtbar ist, sind zusätzliche Format-Informationen, die das Programm einfügt und die somit auch auf Ihrer Webseite landen. Das führt entweder dazu, dass plötzlich andere Textgrößen und -Arten angezeigt werden oder dass der Quellcode der Webseite künstlich aufgebläht wird mit unnötigen Informationen. Sie können das verhindern, indem Sie den Text als „reinen Text“ einfügen, also ohne Formate. Dazu schalten Sie vor dem Einfügen den WordPress Editor auf „Text“. Jetzt werden beim Einfügen alle Formate entfernt.

Oberhalb des Text-Editors von WordPress lässt sich die Option "Text" für unformatierten Text auswählen

Oberhalb des Text-Editors von WordPress lässt sich die Option „Text“ für unformatierten Text auswählen

3.) Bildgrößen optimieren

Wenn Sie Ihre Inhalte mit Bildern interessanter machen wollen, achten Sie darauf, dass diese nicht zu groß sind. Viele Bilder kommen heutzutage mit 5000px aus der Digitalkamera und aktuelle Smartphones produzieren schon Fotos über 3000px Breite. Zu große Bilder senken die Ladegeschwindigkeit Ihrer Webseite deutlich und somit auch das Nutzererlebnis. In den Grundeinstellungen von WordPress kann man eine Maximalgröße für Bilder angeben. Dabei reichen 1200px für die längere Bildseite i.d.R. aus, auf keinen Fall sollte sie 2000px überschreiten. Es sei denn, Sie betreiben einen Fotografie-Blog, dann gelten etwas andere Werte. Für den Hausgebrauch reicht das jedoch.

4.) Revision wiederherstellen

Im Tab Veröffentlichen findet man die Revisionen eines Artikels, um sie einfach wieder herzustellen.

Im Tab Veröffentlichen findet man die Revisionen eines Artikels, um sie einfach wieder herzustellen.

Manchmal passieren einem beim Schreiben oder Bearbeiten einer Seite Fehler, die man erst nach dem Speichern erkennt. Damit man deswegen nicht alles erneut machen muss, gibt es in WordPress die Revisionen: WordPress speichert automatisch alle Versionen, die abgespeichert wurden, und man kann diese bequem auswählen, vergleichen und mit einem Klick wiederherstellen.

5.) Regelmäßig updaten

WordPress ist ein System, das ständig weiterentwickelt wird. Somit gibt es alle paar Tage und Wochen kleinere Updates, die automatisch installiert werden. Größere Updates hingegen müssen manuell durchgeführt werden. Dies sollte man, ebenso wie das Updaten der Plugins, regelmäßig machen. Im Artikel „Warum man mit WordPress Updates immer etwas warten sollte“ haben wir bereits beschrieben, wann der richtige Zeitpunkt für ein WordPress Update gekommen ist. Sollte das Updaten Ihre technischen Fähigkeiten überschreiten, raten wir dringend, das von einem Profi erledigen zu lassen.

6.) Backups erstellen

Dies ist ein Punkt, der leider noch zu häufig ignoriert wird: Von einer WordPress-Webseite sollte immer regelmäßig ein Backup erstellt und auf einem anderen Server oder lokal gesichert werden. Das ist die sicherste Methode gegen Virenangriffe: So verliert man ggf. einige Änderungen, aber man kann immer zu einer der zuletzt gespeicherten Versionen zurückkehren. Wenn keine Kopie der Webseite existiert, ist es sehr mühsam und teuer, eine von Viren befallene WordPress-Installation wieder zu säubern.

Fazit

WordPress ist ein leistungsfähiges CMS, das nach einer gewissen Einarbeitungszeit auch für den Laien relativ einfach zu bedienen ist. Wenn man einige grundlegende Dinge berücksichtigt und – vor allem – regelmäßig Backups anlegt, wird man am Bearbeiten der eigenen Webseite sicher schnell Gefallen finden. Wem der Umgang mit Textverarbeitungsprogrammen einigermaßen vertraut ist, sollte auch mit WordPress als CMS recht schnell zurecht kommen.

mmenu – Das flexible Off-Canvas Menü

Es gibt viele Möglichkeiten Menüs mobil darzustellen. Ein äußerst erfolgreiches Prinzip ist das Off-Canvas Menü, das von außerhalb in den Screen geflogen kommt. Das jQuery Plugin mmenu bietet vielseitige Optionen für ein kreatives, responsives Menü.

mmenu_responsive_offcanvas_menu-ideesign_koeln-post_img

Was bietet das Javascript Plugin?

Mit dem mmenu ist es möglich, aus dem aktuellen Menü ein off-Canvas Menü zu erstellen. Mit an Bord sind professionelle Animationen, Farbwahl, mehrere Ebenen. Es kann so gut wie alles eingestellt werden, um es den eigenen Anforderungen anzupassen. Es kann festgelegt werden, von welcher Seite es in das Sichtfeld rutscht oder welche Animationen im Menü zu sehen sind. Zudem kann es aussehen wie eine App-Auswahl, wie man sie z.B. vom mobilen Betriebssystem Android kennt. Es kann ein komplettes Suchverzeichnis erstellt werden, ähnlich einem Telefonbuch, sodass der Nutzer einfach den Menüpunkt finden kann, den er braucht. Der Kreativität für dieses Plugin sind beinahe keine Grenzen gesetzt, sofern man weiß, welche Einstellungen getätigt werden müssen.

Nutzer kennen Off-Canvas

Das wichtigste an dem Menü ist seine Benutzerfreundlichkeit. Das Off-Canvas Menü ist ein bewährtes Prinzip, das aus der Welt der nativen Apps übernommen wurde und Webseiten genau so wirken lassen kann. Somit sollte jeder Nutzer, der mit Smartphones vertraut ist, das Menü einfach verstehen und sich direkt zurechtfinden können. Zudem bietet es eine gelungene Abwechslung zu den teilweise unübersichtlichen und zu oft verwendeten Drop-Down Menüs mobiler Webseiten.

Kosten (Stand September 2016)

Derzeit kostet die kommerzielle Lizenz für ein einzelnes Projekt für das mmenu jQuery Plugin 7.50$. Für eine unlimitierte Anzahl an Installationen kostet die kommerzielle Lizenz 50$. Damit bekommt man für sein Geld Einiges geboten, denn das Plugin bietet eine einfache Integration in bereits bestehende CMS Systeme durch seine relativ simple Syntax. Außerdem steht es direkt als WordPress Plugin zum Download bereit.

Download

Wenn man sich einen Eindruck des Plugins machen möchte, kann man es auf der Webseite des Herstellers in Aktion sehen, herunterladen und kostenlos ausprobieren.

Zum Plugin

Bootstrap 4 Update – Was ändert sich?

Das weltweit beliebteste CSS-Framework bekommt ein Update auf die mittlerweile vierte Version. Die wichtigsten Änderungen – und ob sich ein Umstieg auf Version 4 lohnt – haben wir hier kurz zusammengefasst.

bootstrap-4-update-was-aendert-sich

Die wichtigsten Änderungen

1. Aus Less werde Sass

Bootstrap verwendet jetzt Sass als Präprozessor für seine CSS-Dateien. Laut der eigenen Webseite von Bootstrap kann Sass schneller kompiliert werden als Less.

2. Der Design-Trend Karten wurde aufgenommen

Seit einiger Zeit ein beliebter Design Trend im Webdesign: Karten sind ein gutes Mittel, flexibel responsive Inhalte einer Webseite darzustellen. Bekanntestes Beispiel dürfte Pinterest sein. Auch das hat das Framework erkannt und ersetzt Panels, Wells und Thumbnails jetzt durch die neue Komponente „Cards“.

3. Internet Explorer 8 wird nicht mehr unterstützt

Laut CanIUse (Stand Juni 2016) hat der Internet Explorer 8 nur noch eine fast zu vernachlässigende Prozentzahl von 0,61% Nutzeranzahl weltweit. Daher wird das Twitter Framework ihn ab jetzt nicht mehr unterstützen und kann nun flexible Größen für Schriften und einzelne Komponenten nutzen. Für IE8 Support sei Bootstrap 3 anzuraten.

4. Das Grid-System wird weiter verbessert

Das ohnehin schon sehr ausgereifte Grid System wird erweitert und verbessert. Die bislang verwendeten Mixins wurden komplett überarbeitet und an die Anforderungen mobiler Geräte angepasst.

5. Sämtliche JavaScript Plugins wurden aktualisiert

In der neuen Version sind sämtliche Plugins nach dem aktuellen ECMAScript 6 Standard geschrieben und profitieren nun von den neuesten JavaScript Erweiterungen. Sie unterstützen die Univeral Module Definition und sind einfach anzupassen.

6. Flexbox Layouts sind da

Die neue Art und Weise Objekte zu positionieren ist nun auch in Bootstrap angekommen. Das Gridsystem und andere Komponenten basieren auf dem neuen Flexbox Modell.

7. Reboot ist das neue Normalize.css

Erweiterungen im CSS Reset wie Box Sizing, Paddings und Margins sind alle in nur einer Sass-Datei vereint.

8. Änderungsmöglichkeiten vereinfacht

Genau wie die restlichen Veränderungen haben vor allem auch die Stylesheet-Dateien vom Update profitiert. Sämtliche Änderungen können nun leicht in Sass-Variablen geändert werden und müssen nicht mehr umständlich in einzelnen CSS Dateien geändert werden, wie noch in Version 3.

9. Dokumentation wird zukünftig vereinfacht

Die Dokumentation wurde komplett in Markdown umgeschrieben und mit Plugins erweitert, damit einfacher das gefunden werden kann, was gesucht wird. Eine Verbesserung der Dokumentationssuche steht noch aus.

10. Und viel, viel mehr!

Benutzerdefinierte Formulare, Klassen für Abstände und Dienstskripte, Popups und Tooltips und noch vieles mehr wurden der neuesten Bootstrap-Version hinzugefügt.

Lohnt sich ein Update auf Bootstrap 4?

Genau wie bei WordPress Updates ist es auch bei einem komplexen Framework wie Bootstrap eine heikle Sache, einfach upzudaten. Da es sich um ein sehr weitreichendes und grundlegendes Update des Framework handelt, ist ein Update einer Bootstrap-Webseite nur bei einem Relaunch sinnvoll. Es müssten unzählige Änderungen in den Stylesheet-Dateien getätigt werden, die noch nicht komplett absehbar sind. Bootstrap 4 befindet sich derzeit noch in der Alpha Version. Daher ist ein Update noch keine gewinnbringende Option. Bis zum offiziellen Release der Version 4 wird sich noch viel verändern. Jedoch kann man sicher sein, dass zukünftige Projekte von den Entwicklungen des Framework und seiner neuen Version 4 profitieren werden.

Quelle: http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ (Stand Juni 2016)

12 WordPress Plugins, die auf keinen Fall fehlen dürfen!

Der Erfolg von WordPress kommt nicht zuletzt durch seine große Anpassungsfähigkeit. Plugins tragen einen großen Teil zur Beliebtheit des Content-Management-Systems bei. Wir haben hier unsere Top 12 der WordPress Plugins aufgelistet, die in keiner Installation fehlen sollten.

 1. Visual Composer (kostenpflichtig)

visual-composer-wordpress-plugin-ideesign-koeln
https://vc.wpbakery.com/

Eine Allzweckwaffe, um responsive WordPress Seiten zu bauen. Der Visual Composer gestaltet den Standard Editor von WordPress um und legt in der festgelegten Breite des Inhalts ein responsives Grid an. Dazu bietet es viele Komponenten, die einfach per Drag und Drop verschoben, bearbeitet und genau an die eigenen Vorstellungen angepasst werden können.

2. Slider Revolution (kostenpflichtig)

slider-revolution-wordpress-plugin-ideesign-koeln

https://revolution.themepunch.com/

Die „Slider Revolution“ ist einer der beliebtesten Slider, die man für WordPress finden kann. Einzelne Slides können mit dem WYSIWYG Editor wie in einem handelsüblichen Grafikprogramm bearbeitet werden und verschoben werden. Ob Full Screen Slider mit Videoinhalt und komplexen Animationen oder einfacher Slideshow. Der Revolution Slider ist für mobile Endgeräte geeignet und lässt sich mit ein wenig Einarbeitungszeit für viele Anwendungsgebiete sehr gezielt anpassen.

3. Black Studio TinyMCE Widget (kostenlos)

blackstudio-tiny-mce-widget-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/black-studio-tinymce-widget/

Mit dem Plugin „Black Studio TinyMCE Widget“ ist es endlich möglich, den kompletten TinyMCE Editor von WordPress auch im Widgetbereich zu verwenden. So lässt sich z.B. der Footer, falls dort ein Widget Bereich existiert, einfach mit Bildern und bereits implementierten Plugins, Shortcodes und Custom Styles ausstatten.

4. WordPress SEO by Yoast (kostenlos)

yoast-seo-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/wordpress-seo/

Mit mehr als 1 Millionen aktiven Installationen (Stand Mai 2016) ist das kostenlose Plugin „Yoast SEO“ eins der beliebtesten SEO Plugins auf dem Markt. Zu seinen Funktionen zählen die Seitenanalyse, automatische Meta-Tag & Link Anpassung, XML Sitemaps, RSS Optimierung, .htaccess und robot.txt Bearbeitung. Es ist bereit für Multi-Site Installationen und bietet eine Import & Export Funktion für andere SEO Plugins.

5. Updraft Plus (Grundversion kostenlos)

updraft-plus-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/updraftplus/

Updraft Plus unterstützt WordPress Backups in viele der bekannten Cloud-Dienste, E-Mail und andere Übertragungsarten. Die Backups können auch automatisch nach Plan an den gewählten Dienst geschickt werden. Dabei trennt das Plugin bei Bedarf auch Multi-Site Archive oder unterschiedliche Sprachen in ihre jeweiligen Seiten.

6. Duplicate Post Plugin (kostenlos)

duplicate-post-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/duplicate-post/

Bis WordPress diese Funktionalität selbst einführt, bleibt nichts sich übrig als sich auf das kostenlose Plugin „Duplicate Post“ zu verlassen: Das Plugin dupliziert Seiten, Beiträge und Custom Posts zuverlässig und erstellt die Kopie standardmäßig als Entwurf.

7.  Contact Form 7

contact-form-7-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/contact-form-7/

Das Plugin „Contact Form 7“ macht es einfach, Kontaktformulare zu erstellen. Mit Shortcode-Funktionalität, Anpassung der Formular und E-Mail-Benachrichtigungen.

8. Advanced Custom Fields (Basisversion kostenlos)

advanced-custom-fields-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/advanced-custom-fields/

In seiner Grundfunktionalität bietet „Advanced Custom Fields“ die Möglichkeit, für festgelegte Beitragsarten, einzelne Seiten oder andere frei einstellbare Zuweisungsregeln extra Bearbeitungsfelder festzulegen. Mittels PHP können diese Custom Fields genau dort ausgegeben werden, wo sie gebraucht werden. Erweiterungen machen das Plugin universal einsetzbar für verschiedene Inhaltstypen und bietet weitere Templates für eine noch komfortablere Erstellung von angepassten Feldern.

9. WP Smush

wp-smush-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/wp-smushit/

Einfach WP Smush installieren und ohne Qualitätsverlust die Dateigröße von Bildern beim Upload verkleinern lassen.

10. iThemes Security (Basisversion kostenlos)

ithemes-security-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/better-wp-security/

iThemes Security ist eine umfassende Security Suite, die bei keiner Wordpress-Installation fehlen sollte. Das Thema Sicherheit hat aufgrund seiner hohen Verbreitung für WordPress mittlerweile eine sehr hohe Bedeutung und darf auf keinen Fall vernachlässigt werden.

11. Admin Menu Tree Page View

admin-menu-tree-page-view-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/admin-menu-tree-page-view/

Sehr praktisches Werkzeug, denn es listet die einzelnen Seiten der Installation in einem Hover Menu neben der eigentlichen Menüleiste auf. Seiten können in dem aufgeklappten Menü einfach erstellt und direkt benannt werden, auch innerhalb anderer Seiten.

12. Email Address Encoder

email-address-encoder-ideesign-koeln

https://wordpress.org/plugins/email-address-encoder/

Verhindert, dass Emailadressen von Email Spam Bots erkannt werden, indem es sie in dezimal und hexadezimal Einheiten verschlüsselt.