WordPress Website Erstellen

von Patrick Adams

WordPress Seite Erstellen

1. Web Hosting einrichten

Mit gutem Gewissen empfehle ich dir Siteground Hosting für deine Website. Schon mit dem kleinsten Start Up Paket sind die Server auf schnellen SSD (Solid State Disk) gehostet, was deine Website besonders schnell macht. Der Support reagiert schnell und ist wirklich professionell.

Über diesen Link kommst du direkt zum Shared Hosting und bekommst einen besonderen Rabatt auf die monatliche Gebühr. Zusätzlich kannst du mich mit dem Kauf direkt unterstützen ?


Siteground Hosting Einrichten

  1. Bei der Registrierung musst du unter anderem deine „Fax Nr.“ angeben. Gib einfach eine beliebige Telefon Nr. ein in dem Format 49.12345 …
  2. Du kannst aussuchen ob du das Hosting Paket für 1 Monat oder direkt 12 Monate und länger abschließt. Für 1 Monat fällt leider eine hohe Setup Gebühr an, deshalb empfehle ich dir mind. 12 Monate

Über diesen Link kannst du dich bei Siteground einloggen, wenn du ein Hosting Paket abgeschlossen hast: Siteground Login

Wenn du dann auf „My Accounts“ navigierst, kannst du über „Manage Accounts“ dein Konto auswählen. Im nächsten Fenster kannst du mit dem roten Button ins cPanel wechseln. Das cPanel ist sozusagen deine Zentrale für dein Website Hosting.

2. WordPress installieren

Bei Siteground im cPanel, unter der zweiten Rubrik „AutoInstallers“ kannst du WordPress auswählen und installieren.

  1. Hier klickst du als erstes auf „Install Now“
  2. Ganz oben wählst du dein Protokoll für deine Website aus. Ich würde dir einfach „http://www.“ empfehlen
  3. Dann wählst du im DropDown Menu deine Domain aus.
  4. Das nächste Feld „Directory“ lässt du frei.
  5. Die Site Settings kannst du auch erstmal überspringen

Admin Account

  1. Unter „Admin Account“ legst du deinen Benutzernamen, dein Passwort und deine Email-Adresse fest. Das sind die Daten mit denen du dich später bei WordPress anmelden wirst.
  2. Achte darauf, dass das Passwort stark genug ist.

Wähle dann deine Systemsprache „Deutsch“ aus.

Dann klicke einfach auf „Install“. WordPress wird innerhalb weniger Sekunden installiert.

Einloggen bei WordPress

Um die Website zu erstellen musst du dich mit deinen Login Daten die du vor der Installation vergeben hast bei WordPress einloggen. Aber wo kannst du das genau machen?

Du musst deine Domain in den Browser eingeben und an das Ende folgendes anhängen: „/wp-admin
Also z.B.: http://www.demo.jonasschindler.de/wp-admin

Dann wirst du direkt zum Login Feld weitergeleitet.

3. WordPress Theme aussuchen

In diesem Abschnitt werden wir das Layout unserer Website mit einem WordPress Theme optimieren. Das geht ganz einfach.

Alles was wir dafür brauchen ist ein starkes Theme, das gut aussieht aber auch flexibel genug ist, damit wir alle Elemente selbst einstellen können.

impreza theme

Ich empfehle dir absolut dir das Impreza Theme zuzulegen. Ich verwende es im Website Video und damit kannst du garantiert nichts falsch machen. Als wenn das Theme allein nicht genug ist, bekommst du noch Lizenzen für die folgenden Premium Plugins dazu:

  • Visual Composer
  • Visual Composer Ultimate Addons
  • Revolution Slider 5 (Slider Revolution)

Hier kannst du eine Lizenz für Impreza bekommen: IMPREZA THEME

4. Theme installieren und einrichten

Wenn du dir eine Lizenz gekauft hast, kannst du mit einem Klick alle Dateien herunter laden die du benötigst:

  • Das Haupt Impreza Theme
  • Das Impreza Child Theme

In WordPress kannst du das Theme ganz leicht installieren.

Dazu navigierst du in der Seitenleiste zu „Design -> Themes“. Hier klickst du ganz oben auf Installieren.

Anschließend klickst du oben auf Theme hochladen. Wähle nun die heruntergeladene Datei Impreza.zip aus und lade sie hoch. Das gleiche machst du mit der Impreza-Child.zip.

Jetzt hast du erfolgreich Impreza auf deinem WordPress installiert.

Farbeinstellungen für das Theme

Die Style Einstellungen für Farben etc. kannst in den Theme Optionen unter „Styling“ verändern.

Hier sind die Farben die ich verwendet habe:

Primary Color:  #f97352
Top Area Text Color:  #666666
Main Menu Text Color:  #ffffff

UnterFußzeilen Farben

Hintergrundfarbe:  #3d4045
Alternative Hintergrundfarbe:  #222222
Überschriftfarbe:  #ffffff
Textfarbe:  #999999
Linkfarbe:  #cccccc

Fußzeilen Farben
Hintergrundfarbe:  #43474d
Textfarbe:  #8c8e91

Im Video habe ich angekündigt euch den Script Code für den Copyright Bereich im Footer zur Verfügung zu stellen:

Also, in den Theme Einstellungen im Bereich „Footer“ habt Ihr die Möglichkeit den Inhalt für die Copyright Leiste zu definieren. Wie Ihr das wahrscheinlich kennt schreiben wir dann meist © Copyright 2016, also mit dem aktuellen Jahr.

Dann müssten wir uns Anfang jeden Jahres hinsetzen und die Jahreszahl aktualisieren. Aber in Zeiten moderner Technik wäre das doch wohl ziemlich lame!!

Mit diesem Mini Script wird die Jahreszahl immer automatisch angepasst:

<script>document.write(new Date().getFullYear());</script>

 

5. Logo Einstellen

In Impreza 3 gibt es mittlerweile mehrere Möglichkeiten ein Website Log zu integrieren. Es ist auch erstmals möglich Logo und Text zusammen einzustellen. Das ist z.B. für Suchmaschinen sehr wichtig.

Du navigierst du „Impreza -> Theme Optionen -> Header Builder„. Dort bearbeitest du dann das Text Element auf der linken Seite in der zweiten Zeile. Du kannst einen Text als Seiten Titel eintragen. Z.B. „Meine Website“.

Zusätzlich kannst du ein Symbol aus einer Font Library (Bibliothek) verwenden. Such dir vielleicht ein Symbol von Font Awesome aus und kopiere dir da die Symbolbezeichnung: z.B. „fa-globe„, dann erhälst du:

Unter dem Reiter „Sizes“ kannst du die Darstellung dieses Textes und Symbols genau definieren.

Wenn du allerdings ein eigenes Logo als Bild verwenden möchtest, dann musst du anstatt des Text Elementes ein Bild Element benutzen.

Du klickst auf das Plus und fügst ein Bild Element ein. Hier kannst du dann eine Bilddatei auswählen, hochladen und ebenfalls die Größe einstellen.

6. Titelbild einfügen

Ganz oben auf der Startseite soll als erstes ein großes Titelbild eingefügt werden, dass den ganzen Bildschirm einnimmt. Dafür brauchst du natürlich ein schönes Bild. Normalerweise sind hochauflösende Bilder von Stockseiten wie Shutterstock etc. ziemlich teuer.

Zum Glück kenne ich den Geheimtipp Unsplash.com. Hier könnt Ihr viele sehr schicke Bilder finden und kostenlos herunterladen und auf eurer Website verwenden. Eine Lizenz braucht Ihr dafür nicht.

Sucht euch ein passendes Bild für eure Website aus. Ich habe für die Demo Website z.B. dieses Foto genommen.

Bevor Ihr das Bild auf eurer Homepage verwenden könnt, solltet Ihr es allerdings erst komprimieren. Das ist wichtig, damit eure Website schnell bleibt und für Besucher zügig geladen werden kann.

Ihr solltet das Bild mit Photoshop o.ä. auf eine Dateigröße von max. 120kb und 1920 x 720pxbringen.

7. Hauptmenü anlegen

In diesem Abschnitt lernst du wie du ein Menü in WordPress anlegen kannst. Das ist wie fast alles sehr sehr einfach! ?

Du navigierst zu „Design -> Menüs„. Etwa in der Mitte, rechts klickst du auf „erstelle ein neues Menü„. Dieses Menü nennst du z.B. „Hauptmenü“.

Links siehst du dann alle existierenden Seiten deiner Website aufgelistet. Markiere die Seiten die du im Menü haben möchtest und klicke „Zum Menü hinzufügen„.

Du kannst die Seiten dann einfach in deine gewünschte Reihenfolge ziehen.

Im linken Bereich unter der Kategorie „Links“ hast du auch die Möglichkeit Verknüpfung zu einer beliebigen Website zum Menü hinzuzufügen.

Nachdem du ein Menü erstellt hast musst du unten noch die Position definieren, in der das Menü auf deiner Website erscheint:

  • Hauptmenü
  • Fußzeilen Menü

8. Favicon implementieren

Was ist überhaupt FavIcon? Das ist das kleine Symbol das sich in der Ecke eines Browserfensters oder Tabs einer Website befindet. Wie z.B. bei YouTube das rote Viereck mit dem Pfeil.

Es ist wichtig, dass deine Website ein Favicon hat, so ist der Wiedererkennungswert viel größer. Es ist Teil des grundlegenden Layouts einer Homepage.

Meist macht es Sinn wenn du das Logo deiner Firma oder eben deiner Website als Favicon verwendest. Allerdings gibt es bestimmte Anforderungen an die Datei die du dafür verwendest.

Das Favicon muss quadratisch sein und über eine Größe von 512 x 512 px verfügen. Das ist zwar wahnsinnig riesig, aber die Auflösung der Datei braucht dafür nicht so groß zu sein. Der Dateityp sollte png oder jpeg sein.

Das Favicon kann farbig oder nur schwarz sein, das ist dir überlassen.

Im Video Tutorial habe ich einfach nur ein Font Icon kopiert und in eine png umgewandelt. Hier kannst du es dir herunterladen: Download Favicon

9. Footer Widgets einstellen

In diesem Abschnitt erstellen wir die Inhalte für den Footer am Ende jeder Seite. Das können wir sehr komfortabel mit den WordPress Widgets machen. Diese findest du unter Design -> Widgets

Das erste Footer Widget
In das erste Widget ganz links werden wir ein Bild einfügen. Wir können dazu einfach das Standard Text Widget verwenden, da dieses auch HTML Code versteht. Aber keine Angst der Code den wir dazu verwenden, ist ganz simpel.

Wir erstellen ein Image Element und fügen als „Src“ Attribut den Pfad zum gewünschten Bild ein. Den Pfad zu ein Bild kannst du in den Details eines Bildes in der WordPress Mediathek finden.

Damit sich das Bild auch genau in der Mitte des Widget Bereiches befindet, ummanteln wir das Bild Element mit einem Div Container. Diesem Container geben wir dann ein Style Attribut von „Text-Align: Center“ um das Bild zu zentrieren.

Hier ist der Code für das erste Widget:

<div style="text-align: center;">
<img src="http://www.demo.jonasschindler.de/wp-content/uploads/jonas-schindler-badge.png"></img>
</div>

Das zweite Footer Widget
Im zweiten Widget werden wir die letzten 5. Blogbeiträge auflisten. Das ist ein Standard Feature von WordPress. im Widgetbereich kannst du einfach das passende Widget in den zweiten Footer Bereich ziehen.

Hier wählen wir noch aus, dass kein Datum angezeigt werden soll und nur die letzten 5 Beiträge gezeigt werden sollen.

Das dritte Footer Widget
Im dritten Footer Bereich sollen die Seiten der Website verlinkt werden. Mit Impreza kann man Menüs als Widgets darstellen.

Wir können also direkt das Main Menu was wir auch in der Haupt Navigation verwenden im Menu Widget auswählen.

Das vierte Footer Widget
Der vierte Bereich wird meine Kontaktinformationen zeigen. Hier habe ich auch etwas leichtes HTML verwendet. Benutzt einfach den Code hier oder tragt eure eigenen Informationen ein:

<span style="font-size: 14px;">
Jonas Schindler</br>
Königsbrücker Str. 62</br>
01099 Dresden, Germany</br>
Email: js@dieberater.de</br>
Phone: +49 (0) 174 707 2151</br>
Url: www.jonasschindler.de</br>
</span>