WordPress: Optimierung des Designs

Ich habe zwei kleine Änderungen am Design gemacht. Die eine Optimierung bezieht sich nur auf Content. Die zweite Änderung könnt ihr aber bemerken. Wenn ihr jetzt mit der Maus über manche Bilder mit der Maus fahrt, wird das Bild auf einmal in groß angezeigt.

1. Änderung: Folgendes fehlt: updated

Bei der Google Indizierung werden die sogenannten Rich Snippets gescannt. Diese sind für die Einordungen für Suchmaschinen wichtig. Diese Information werden meistens für den normalen Website Besucher gar nicht angezeigt.

Google bringt in den Webmaster-Tools immer eine Fehlermeldung „Folgendes fehlt: updated“ (seit ungefähr Mitte Dezember 2013). Ich möchte die Fehlermeldung schon lange beseitigen, habe auch schon kleinere Versuche unternommen, aber bin noch nicht zu einem Ergebnis gekommen.

Dieses Mal hat es geklappt. Ich hatte die Ruhe mir einige Berichte darüber durchzulesen. Es ist eigentlich nur eine ganz kleine Änderung in der functions.php Datei.

Ich habe in der Datei nach dem Wort „entry-date“ in einer Klasse gesucht und daraus „entry-date updated“ gemacht. Schon wurde mir beim Live-Test in den Webmaster-Tools angezeigt, das es jetzt ein Update gibt. Ich jetzt natürlich noch gespannt, ob wirklich die 124 Fehler zurückgehen.

Es gibt noch einige andere Fehlermeldungen im Bereich Rich Snippets, aber jetzt will ich zuerst einmal sehen, das diese Änderung etwas gebracht hat.

2. Änderung: Hover-Grow Effekt bei Bildern

Diese Änderung finde ich sehr vorteilhaft für mein Design. Ich bin aber noch lange nicht zufrieden mit meinem Design. Aber kommt Zeit, kommt Design  🙂

Ich habe einen sogenannten Grow Effekt des Bildes eingefügt, das wenn die Maus über einem Bild mit diesem Effekt fährt, das Bild größer gemacht wird.

Dazu gibt eine tolle Beschreibung (englisch). Und auch eine Demo der verschiedenen Effekt wird bereitgestellt.

Ich habe mich im Moment dazu entschieden, nur den 2D Grow Effekt zu benutzen. Deshalb lade ich nicht die ganze hover.css Datei in meine Seiten, sondern nur einen kleinen Teil daraus.

Diesen Teil habe ich über den Editor in die „style.css“ Datei eingetragen:

.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

Jetzt noch im HTML-Code der Seiten oder Artikel mit den Bildern im bei Class=“…“ zusätzlich noch die Klasse grow einfügen.

class=“… grow“

Das sind die kleinen Änderungen die gemacht werden müssen.

Ich wünsche euch viel Spaß am nachmachen dieser Änderungen. Ich finde das der GROW Effekt sehr gut auf eine Website passt.

WordPress: Optimierung des Designs

Nick Horn ist für den Blog Nicks-Technik.de verantwortlich und interessiert sich für die Themen Lifestyle, Technik, Sport und Reisen. Motto: Der Weg ist das Ziel.

Kommentar verfassen