Eine neue Webseite entsteht (Teil 6): WordPress lokal Installation und Blank-Theme

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.

Webseiten Tutorial Teil6

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.

Webseiten Tutorial Teil6
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.

Webseiten Tutorial Teil6
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.

Webseiten Tutorial Teil6
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.

Webseiten Tutorial Teil6
Ü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.

Webseiten Tutorial Teil6
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.

Webseiten Tutorial Teil6

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.

Webseiten Tutorial Teil6
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.

Webseiten Tutorial Teil6
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 :-)

Webseiten Tutorial Teil6
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!

Weitere Teile der Tutorial-Serie

32 Kommentare

  1. 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

    • Muss man, um Xampp portable zu nutzen, alles noch mal neu installieren – local server, Datenbanken, WordPress, usw.?

  2. 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

  3. 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

  4. 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

  5. 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

    • 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

  6. 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.

  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

  8. 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

  9. @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.

    • 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

  10. 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

  11. 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

  12. 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

  13. 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.

  14. Danke für die super Anleitung. Beschäftige mich das erste mal damit und alles hat gut funktioniert. Das starkers theme kann man jetzt auch schon einfacher hochladen. Man muss einfach die zip Datei hochladen und dann installieren und schon passts :-) Nochmals Danke für die super Anleitung

  15. Brauche Hilfe:
    Habe Xammp auf MAc installiet. Läuft auch alles soweit. Wenn ich jetzt ein Theme installieren will, kriege ich folgende Meldung:
    Um diese Aktion durchführen zu können, benötigt WordPress Zugriff auf deinen Webserver. Bitte gib die FTP-Serverdaten ein, um fortzufahren. Falls du deine Zugangsdaten vergessen hast, so solltest du bei deinem Webhoster nachfragen.
    Hostname
    FTP-Benutzername
    FTP-Passwort
    Verbindungstyp
    Verbindungstyp FTP FTPS (SSL)

    Da ich ja nur den virtuellen Server Xammp habe, weiss ich nicht, was mein Hostname ist…

    Kann mir jemand helfen?
    Danke
    Tanja

    • Hallo Tanja,
      hast du inzwischen eine Lösung für dein Problem (FTP User bei lokaler Installation) gefunden?
      Gruß, Mike

  16. Hallo,
    Habe das gleiche Problem wieTanja. Kann mir da jmd weiterhelfen?
    Vielen Dank
    Gruß Katharina

    • Hallo,
      für alle mit dem FTP Problem. Dieses liegt meistens an den Dateirechten. Diese mal überprüfen. Gruß Tolga

  17. Hallo Ellen!

    ich würde gerne neben der Webseite an der ich gerade bastle (offline – über xampp – wie von Dir beschrieben), noch anfangen an weiteren Webseiten zu bauen. Wie mache ich das mit wordpress? Muß ich in xampp neue Datenbanken anlegen und für jede Website WordPress neu installieren??? Oder gibts auch einfachere Methoden?

    Wär super wenn Du das kurz erklären könntest.

    Vielen Dank!

    Michl

Hinterlasse eine Antwort

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