Mit HTML und CSS Kenntnissen CMS-Themes optimieren

Mit HTML und CSS Kenntnissen CMS-Themes optimieren auf imeister.deContent-Management-Systeme wie WordPress, Joomla! oder TYPO3 vereinfachen das Aufsetzen einer Webseite maßgeblich. Schon jetzt basiert ein großer Teil des Internets auf CMS-basierten Webseiten, der Trend ist steigend. Der Aufbau der Content-Management-Systeme ist dabei sehr ähnlich und basiert auf einer Datenbank und einem Theme um Content darzustellen.

Das WordPress-Theme

WordPress bietet die Möglichkeit der Verwendung von einer enormen Anzahl an verschiedenen Themen. Der Aufbau von WordPress-Themes lässt sich am besten anhand einer HTML-Seite erklären. HTML gibt im Webdesign die Positionierung einzelner Webseiten-Elemente vor. Überschriften, Unterüberschriften, normale Texte und die Schriftart lassen sich mit einer einzelnen HTML-Datei festlegen. Ein WordPress-Theme besteht aus einem zerkleinerten HTML-Dokument, welche Template-Dateien genannt werden und das eigentliche Dokument durch den Einfluss von PHP, CSS und JavaScript erweitern. Diese sind in drei verschiedene Zustände unterteilt und sorgen dafür, dass die Webseite benutzerfreundlich und optisch ansprechend ist. Die erste Gruppe von Template-Dateien kommt zum Einsatz, wenn ein bestimmter Zustand abgefragt wird, bspw. das Abfragen von Suchergebnissen oder das Betrachten von Beiträgen. Diese Gruppe benötigt mindestens zwei Dateien, die index.php und die style.css, welche Informationen zur genauen Struktur der Page beinhalten.

Mit HTML und CSS Kenntnissen CMS-Themes optimieren auf imeister.de

Eine solche Seite sieht jedoch deutlich zu simpel aus, daher werden von WordPress-Themes in der Regel jedoch mindestens zwölf Dateien zur Abfrage bestimmter Zustände verwendet. Die zweite und dritte Gruppe der Template-Dateien dienen alleine der Übersichtlichkeit und lagern bestimmte Seitenteile aus oder widmen sich sonstigen Aufgaben (wie dem Widget-Bereich eines Themes).   Grundsätzlich benötigt ein WordPress-Theme also nur zwei Ordner/Dateien um die Grundfunktion, das Darstellen von Content, zu ermöglichen. Die meisten Themes setzen auf bestimmte Standardelemente, welche sich im WordPress-Customizer individualisieren lassen. Welche Veränderungen dabei vorgenommen werden können wird vom Theme selbst vorgegeben. Dies führt dazu, dass viele erstellte WordPress-Webseiten sehr ähnlich aussehen. Verwenden Webseiten dasselbe Theme, kann man das in der Regel in kürzester Zeit ausmachen.

HTML auf einzelnen Seiten/Beiträgen der Webseite

Im WordPress-Texteditor lässt sich immer ein „Text“-Feld neben dem „Visual“-Feld finden, welches die Seite als HTML-Dokument präsentiert. Hier lassen sich individuelle Elemente sehr unkompliziert und direkt durch die Integration eines Codes hinzufügen oder entfernen. Buttons, Kolumnen oder die Integration von Bildern können so unkompliziert erfolgen. Wichtig ist hierbei jedoch, dass Veränderungen immer mit einem sauber geschriebenen Code vorgenommen werden, da es sonst zu Problemen bei der Darstellung der Seite kommen kann.

Individualität durch Veränderungen der Template-Dateien

Eine WordPress-Seite lässt sich im Grunde vollkommen individualisieren und hat keinerlei Limitierungen. Der Unterschied zwischen einer WordPress-Webseite und einer herkömmlichen Webseite ist ausschließlich, dass Nutzer die Möglichkeit haben mit WordPress gewisse Aspekte der Webseite zu standardisieren. Das spart Arbeit sowie Zeit und ermöglicht eine Nutzung von Nicht-Programmierern. Möchte sich ein Content-Producer jedoch optisch von der Masse abheben und Individualität in die Webseite mit einbringen, benötigt dieser zumindest Grundkenntnisse von HTML, CSS und am besten auch noch PHP. Veränderungen an der style.css-Datei können Farben, Fonts oder Schriftgrößen beispielsweise simpel ermöglichen. CSS wird dabei in ein normales HTML Element integriert, dabei wird zwischen drei verschiedenen Wegen unterschieden.

  • Inline – Hier wird das Style-Attribut in HTML-Elementen verwendet.
  • Internal – Veränderungen werden durch ein <style> Element in der <head> Sektion erzielt.
  • External – Hier wird eine externe CSS verwendet, um optische Veränderungen zu erzielen.  Durch das Bearbeiten der index.php lassen sich zudem strukturelle Veränderungen vornehmen, wenn das zu bearbeitende Element nicht in eine eigenständige Datei ausgelagert wurde.

Mit HTML und CSS Kenntnissen CMS-Themes optimieren auf imeister.de

Was ist zu beachten?

Grundsätzlich müssen sich Content-Producer, bzw. Webseiten-Betreiber klar machen, dass sie durch Veränderungen am Source-Code der Seite genauso viel Schaden, wie Nutzen erzeugen können. Bevor eine größere Veränderung vorgenommen wird, sollte daher immer ein Child-Theme des verwendeten Themes angefertigt werden. Hierzu muss die Webseite in einem FTP-Client geöffnet werden und ein separates Theme mit allen wichtigen Dateien erstellt werden. Anschließend lässt sich dieses als „Backup“ verwenden, sollten die Veränderungen schief gehen. Um sicher zu gehen, dass die eigene Webseite professionell und individuell auftreten kann, empfehlen wir immer einen Profi zu konsultieren. Professionelle Webdesign-Agenturen wie die Webdesign-Boutique mit Büros in München und Berlin bieten hierbei einen individuellen Service schon zu  Einstiegspreisen an.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert