Willst du deine Webseite in WordPress umsetzen, ist es praktisch eine WordPress-Installation auf einem lokalen Web-Server einzurichten. So kannst du auch offline arbeiten, und später deine angelegte Datenbank problemlos auf deinen online Server importieren. Eine weitere tolle Option für die Theme-Erstellung in WordPress ist es, ein sogenannten Blank-Theme als Grundlage für die Programmierung zu verwenden. So spart man sich ein wenig Zeit, und muss nicht bei jeder Webseite komplett von vorne beginnen. Denn keine Sorge, Arbeit kommt noch genug auf uns zu ;-) Also, los gehts!
1. Einen lokalen Web-Server einrichten
Als ersten Schritt kannst du dir einen lokalen Web-Server (mit Apache, MySql und PHP) auf meinem Computer einrichten. Dazu gibt es mehrere Möglichkeiten, für Windows oder Linux kannst du XAMPP von ApacheFriends herunterladen. Für den MAC ist MAMP üblicher.
Ich verwende auf meinem Windows-Laptop XAMPP. Wenn ich das Programm starte, erscheint in der Taskleiste ein kleines Programm-Symbol, mit dem du das Control Panel öffnen kannst. Hier starte du jetzt Apache und MySql.
Ein Hinweis für alle Skype-Nutzer!
Damit der lokale Server funktioniert, musst du in Skype unter Aktionen / Optionen / Erweitert / Verbindung die Option »Ports 80 und 443 als Alternative für eingehende Verbindungen nutzen« deaktivieren.
2. Neue Datenbank anlegen
Um eine neue Datenbank auf deinem lokalen Web-Server anzulegen, klickst du im XAMPP Control Panel neben MySql auf den Admin-Button. Du wirst in deinem Standard-Browser auf PHPMyAdmin weitergeleitet. Hier kannst du deine neue Datenbank für deine WordPress-Installation anlegen. Später kannst du diese Datenbank dann exportieren und auf deinen Online-Server importieren.
Lege auf der Startseite unter »Neue Datenbank anlegen« eine neue Datenbank an.
Ich gebe meiner Datenbank den Namen coffeelove.
Unter »Rechte« kannst du dem User noch ein Passwort generieren. Den Namen deiner Datenbank und das Passwort solltest du dir merken bzw. aufschreiben.
3. WordPress downloaden
Dein lokaler Server und deine neue Datenbank sind eingerichtet. Jetzt kannst du dir endlich die aktuelle WordPress-Version auf der WordPress-Deutschland Webseite herunterladen.
Du kannst zwischen der englischen und der deutschen WordPress-Version wählen.
Suche dann im Ordner XAMPP den Ordner htdocs. In diesem Ordner legst du jetzt einen neuen Ordner (z.B. mysite) für deine WordPress-Installation an. In den mysite-Ordner fügst du alle Dateien aus dem Ordner »wordpress« der heruntergeladenen zip-Datei »latest« ein.
Alle Dateien von WordPress in meinem Ordner »mysite«.
4. Die wp-config.php Datei anpassen
Unter den WordPress-Dateien findest du die wp-config-sample.php Datei. Diese öffnest du zur Bearbeitung am besten in einem Source Code-Editor (ein guter kostenloser ist z.B. Notepad++).
Ab ca. Zeile 16 des Codes findest du die Einstellungen für deine Datenbank. Trage den Namen deiner angelegten Datenbank, des Benutzers, und das Passwort ein.
Übertrage die Daten deiner lokalen Datenbank in die wp-config-sample.php Datei.
Jetzt speicherst du die Datei unter dem Namen wp-config.php. Die Sample-Datei kannst du aus dem Ordner löschen.
5. WordPress installieren
Jetzt hast du alles soweit eingerichtet, dass du endlich WordPress installieren kannst. Dazu rufst du folgende URL in deinem Browser auf: http://localhost/mysite/wp-admin/install.php
Hast du alle Angaben in der config.php Datei richtig übertragen, erscheint eine Willkommens-Nachricht von WordPress und ein Formular, in das du deinen Blognamen sowie deinen Benutzernamen und ein neues Passwort eintragen musst.
Hier gibst du die Angaben für deinen Blog, dein Admin-Namen und Passwort ein.
Klickst du jetzt auf »WordPress installieren« erscheint der Login-Bereich von WordPress, und du kannst dich in den Admin-Bereich deines neuen Blogs einloggen.
6. Ein Blank-Theme verwenden
Dein neuer WordPress-Blog ist auf dem lokalen Server installiert, und du bist im Admin-Bereich eingeloggt. Klickst du in der oberen Admin-Leiste auf den Namen deines Blogs gelangst du in das Frontend. Installiert ist das neue Standard-Theme von WordPress »TwentyTen«.
Um mit der Programmierung der Coffeelove-Seite zu beginnen, nutze ich aber nicht das TwentyTen als Vorlage, sondern ein sogenanntes Blank-Theme für WordPress. Ein Blank-Theme ist ein leeres Theme mit nur sehr wenigen CSS-Styles. Ein solches Theme bietet eine saubere Grundlage, um mit der eigenen Programmierung in WordPress zu starten.
Ich werde für die Coffeelove-Seite das erst kürzlich auf WordPress 3.0 upgedatete Starkers Theme von Elliot Jay Stocks verwenden.
Möchtest du bereits HTML5 einsetzen, kannst du das von Nathan Staines erweiterte StarkersHTML5 Theme nutzen.
Weitere Optionen für Blank-Themes findest du in unserem Artikel »8 Basis WordPress Themes für Theme-Entwickler«.
6.1. Das Theme anpassen und installieren
Hast du dir das Starkers Theme heruntergeladen, kannst du den Ordner »Starkers« in den Namen deines eigenen Themes (z.B. coffeelove) ändern. Öffnest du im Theme-Ordner die style.css Datei, kannst du die Angaben hier ebenfalls für dein eigenes Theme anpassen.
In der style.css Datei kannst du Angaben zu deinem eigenen Theme machen.
Ein nettes Detail, an dass man am besten gleich vor Upload des Themes denken sollte, ist der Screenshot des Themes für die Ansicht im WordPress-Admin. Dafür löscht du die Datei screenshot.png aus dem Theme-Ordner und erstellst ein eines 300×225 Pixel großes PNG Screenshot-Bild für dein Theme. Du kannst z.B. ein Screenshot deines Theme-Layouts verwenden, oder ein extra Bild gestalten.
Jetzt kannst du dein (noch leeres) Theme endlich in WordPress laden. Erstelle dazu eine ZIP-Version deines Theme-Ordners. Unter »Theme installieren« im Admin-Bereich findest du den Punkt Hochladen. Ist dein Ordner ausgewählt, kannst du das Theme auch gleich aktivieren.
Da du ja bereits einen Screenshot erstellt hast, wird dein Theme gleich schön angezeigt. Auch deine Beschreibung aus der style.css Datei ist hier sichtbar.
Jetzt bist du gut vorbereitet, um das leere WordPress-Theme mit deinen eigenen Styles und Funktionen zu füllen.
Als letzten Schmankerl (oder eher kleiner Schocker) kannst du noch einen Blick auf den aktuellen Zustand deines WordPress-Themes werfen :-)
Starkers bietet eine schöne, leere Grundlage für die Erstellung eines eigenen WordPress-Themes.
Im nächsten Teil des Tutorials können wir uns dann mit diesem schön eingerichteten WordPress-Installation an die Arbeit machen, das Theme mit Hilfe von CSS und HTML ein bisschen zu verschönern. Dazu werde ich auch auf die Dateien-Struktur in WordPress näher eingehen.
Ich hoffe dir hat auch dieser Teil des Coffeelove Webseiten-Tutorials wieder gut gefallen, und du kannst den ein oder anderen Tipp für deine eigenen Arbeiten mit WordPress nutzen. Über dein Feedback und deine Tipps freue ich mich wie immer sehr!
Wie immer ein informativer Blogpost von Ellen. Ich habe eine Anmerkung aus eigener Erfahrung mit XAMPP. Diesen ab Windows Vista nicht auf dem Laufwerk C installieren!
Evtl auch interessant, den XAMPP gibt es auch portable für den USB Stick. Kann man gut zum Kunden mitnehmen und dann auf dessen Technik vorführen.
Bei Problemen - Apache startet nicht, weil Windows den Port 80 belegt, mal hier lesen (http://kuettner.it/2010/portproblem-mit-xampp-unter-windows-7).
Tschüß
Claudius
Hallo Claudius,
vielen Dank für dein tolles Feedback und die hilfreichen Tipps zu XAMPP. Die Option XAMPP Portable zu nutzen, finde ich besonders interessant. Wirklich ein toller Tipp!
Vielen herzlichen Dank und viele Grüße,
Ellen
Ich bin jetzt zwar kein kompletter Neuanfänger, aber danke für den Link zum HTML5 Starkers, darauf werde ich ein neues Layout für mein Blog aufbauen. :)
Hallo Michel,
vielen Dank für dein Feedback zum Artikel. Freut mich, dass dir der Tipp zum HTML5 Starkers hilfreich findest. Ja, ich will das Theme auch unbedingt demnächst ausprobieren :-)
Viele Grüße,
Ellen
Hallo Ellen!
Ich finde deine Artikelserie ›Eine neue Webseite entsteht‹ wirklich toll.
Ich habe im Jahre 2009 bei der Installation meines ersten eigenen Weblogs XAMPP kennengelernt und bin davon begeistert.
Ich teste jede noch so kleine Änderung an meiner aktuellen Webseite immer vorher auf dem lokalen Webserver - so habe ich praktisch immer eine 1:1-Kopie.
Ich freue mich schon auf die nächsten Teile deines Tutorials!
Liebe Grüße
Franz
Hallo Franz,
vielen Dank Dank für dein tolles Feedback. Es freut mich, dass dir die Serie gefällt :-)
Ja, da hast du Recht. Ein Backup seines Themes auf einem lokalen Server zu haben, ist wirklich klasse. Ich mache es genauso, wie du. Auch neue Plugins und die entsprechenden CSS-Styles für das Theme kann man so immer entspannt erst einmal offline testen :-)
Viele Grüße
Ellen
Also bei Blank-Themes hab ich immer Probleme mitn Anpassen - bei einigen sind verwirrende Dinge drin im Code O.o. Aber da ich das ja schon öfters mal gemacht hab, weiß ich ja, was für was ist und für alles andere gibts die WordPress-Doku, solche Webseiten wie hier und Foren :)
Hallo Crissy,
vielen herzlichen Dank für dein Feedback :-) Ja, das stimmt schon. Manche Blank-Themes sind für mich auch etwas verwirrend aufgebaut. Vor allem, wenn man sie zum ersten mal nutzt.
Persönlich verwende ich daher immer wieder gerne das gleiche Blank-Theme, so kann man sich besser »eingewöhnen«. Das Starkers-Theme finde ich außerdem eines der Theme-Vorlagen, die meiner Meinung nach sehr gut aufgebaut, und auch super dokumentiert sind.
Und wenn es mal gar nicht nicht weitergeht, sind die WordPress-Doku, Blogs oder Foren natürlich auch eine tolle Option, sich Hilfe zu holen, gemeinsam sind wir schließlich stark :-)
Viele Grüße
Ellen
Also ich fände einen Artikel interessant in dem Ihr die verwendung als CMS erklärt, also kein Blog sondern wirklich als normale Website. Ist ja mit 3.0 gut möglich.
Hallo Andreas,
vielen herzlichen Dank für deinen tollen Vorschlag. Stimmt, einen Artikel zu WordPress als CMS zu machen, ist eine klasse Idee! Mal schauen, dass ich das so bald wie möglich realisieren kann :-)
Viele Grüße
Ellen
Das mit dem Blank-Theme ist ein guter Tipp, ich wusste bisher gar nicht, dass es sowas überhaupt gibt :)
Hallo Seelendieb,
vielen Dank für dein Feedback zum Artikel. Es freut mich sehr, dass du den Tipp ein Blank-Theme zu verwenden hilfreich findest.
Weitere Blank-Themes kannst du dir übrigens auch in diesem Smashing Magazine-Artikel unter »Starter und Blank WordPress Themes« anschauen. Schau doch dort einmal rein :-)
Viele Grüße,
Ellen
Dein Tutorial kommt für mich wie gerufen. Ich habe die ersten fünf Teile verfolgt aber mit Teil 6 wird’s nun richtig interessant.
Ich bin nämlich gerade dabei meinem Blog ein kleines Facelift zu verpassen, merke aber, dass ich durch das Wirrwarr von PHP- und CSS-Dateien - im Theme und in den verwendeten Plugins - nicht mehr durchsteige. Der Ansatz, ein Blank-Theme zu verwenden, scheint mir sehr interessant.
Ich bin gespannt auf Teil 7.
Wahnsinniges gutes Tutorial. Bin Neueinsteiger und daher sehr gespannt wie es weiter geht. Bis jetzt war es sehr hilfreich. Interessante Onlinetools die du als Hilfe verwendest. Danke für diese Zeilen!
Hallo Chris,
vielen herzlichen Dank für dein tolles Feedback zum Tutorial. Es freut mich sehr, dass du die Tipps und Tools hilfreich findest. Ich arbeite bereits am nächsten Teil ;-)
Beste Grüße,
Ellen
Hallo Ellen!
Super erklärt. Das macht richtig Spaß. Wann kommt denn der nächste Teil? Ich kann es kaum erwarten und freue mich.
Ein Tutorial - WP als CMS - fänd ich auch toll;-)
Weiter so!
Viele Grüße vom Max
Hallo Max,
vielen herzlichen Dank für dein tolles Feedback zum Tutorial :-) Der nächste Teil kommt bald, ich arbeite gerade schon dran :-) Und da ich gerade auch an einem CMS-WordPress Projekt arbeite, sammel ich auch schon eifrig Ideen für eine weitere Tutorial-Serie mit speziellen WordPress CMS-Features :-)
Viele Grüße,
Ellen
@Claudius:
Wollte kurz zu Windows Vista/Se7en und XAMPP sagen, daß das Laufwerk ruhig C sein kann, nur sollte halt nicht im normalen Programm-Ordner installiert werden. Dies macht XAMPP aber schon seit etlichen Versionen korrekt und installiert sich nach C:\xampp.
hej Ellen!
Die Serie ist der Kracher! Bin fleißig am rumbasteln und ausprobieren!
Vielen Dank!
Hallo Mandy,
es freut mich sehr, dass dir das Tutorial so gut gefällt :-) Hoffe es hilft dir weiter, wenn du Fragen hast, sag bescheid, ja :-)
Viele Grüße,
Ellen
Hallo Ellen,
vielen dank für deine hilfreiche Serie.
Für das Jahr 2011 habe ich als »guten Vorsatz« endlich einen Blog für unsere Firmenseite aufzusetzen und da kommt mir so ein Step-by-Step-Tutorial natürlich sehr gelegen.
Ich wüsste gerne, ob es einen Unterschied macht, ob ein Theme installiert wird oder nicht. Denn ich habe das Theme einfach in den passenden Ordner gelegt und konnte es im Adminbereich dann einfach auswählen, ohne es als zip hochzuladen und zu installieren.
vielen Dank für deine Hilfe und viele Grüße
Regina
Hallo Ellen,
vielen Dank für die tolle Serie!
Würdest Du das Starkers Theme auch als blank theme für ein CMS-Wordpress-Projekt empfehlen, bei dem ein Blog nur am Rande vorkommt?
Viele Grüße
Daniel
Liebe Ellen, toller Artikel. Aber die Produkte heißen Mac (http://www.apple.com/de/mac/), MySQL (http://www.mysql.de/) und phpMyAdmin (http://www.phpmyadmin.net/). Kleinigkeit, ich weiß, aber wenn schon, denn schon ;-).
Hallo Ellen,
seit ein paar monaten schau ich immer wieder auf deine seite,
der OBERKNALLER!!! Respekt!!!!!
Und eine frage hätte ich auch:
Eignet sich das starkers Blank-Theme auch für die
wordpress installation 3.3.1?
Oder brauch ich da ein anderes?
Sorry ich bin absoluter newbie,
aber photoshop hab ich drauf :-)
jetzt muss ich nur noch lernen
es im web umzusetzen…
viele Grüsse
nille
Endlich mal ein richtig schönes Tutorial. Habe bis jezt nur ein Theme vollständig selbst erstellt, aber ich werde den Ratschlag mal beherzigen. Danke für die Mühe.