WordPress

Tutorial: WordPress offline testen und bearbeiten mit Xampp für Mac

Mein aufmerksamer Leser, Dieter, hat mich auf eine wunderbare Möglichkeit aufmerksam gemacht, einen WordPress-Blog offline zu testen und zu bearbeiten. Und diese Möglichkeit möchte ich mal etwas genauer vorstellen, weil ich denke, dass sie für viele interessant und nützlich sein dürfte.

Aber Achtung: Dieser Artikel ist ziemlich technisch 😉

Warum WordPress offline installieren und testen?

Kennst du das? Du denkst über einen kleinen Umbau, ein neues Widget, ein neues Plugin oder was auch immer an deinem Blog nach, bist dir aber auf der anderen Seite noch nicht ganz so sicher, wie das genau aussehen soll oder wie das wirkt? Am liebsten würdest du das einmal testen bevor gleich alle Besucher deines Blogs die Änderung mitbekommen?

Genau deswegen wäre es doch schön, wenn man erst einmal offline Änderungen an seinem Blog testen könnte.

Insbesondere ist das bei größeren Blogs wichtig, die es sich nicht leisten können bei der Vielzahl an Besuchern „unansehnlich“ oder „unkomfortabel“ rüberzukommen.

Wie also kann man WordPress offline nutzen und seinen Blog offline testen, bevor man Änderungen auch online vollzieht?

Das wird mit dem kostenlosen Tool Xampp möglich. Xampp ist eine Distribution von Apache, MySQL, PHP und Perl. Mit Xampp installiert man sich einen vollständigen Webserver lokal auf dem eigenen Rechner. Und das egal, ob man Linux-, Mac- oder Windows-Nutzer ist.

Wie kriegt man Xampp zum Laufen?

  1. Xampp hier herunterladen.
    (Die folgende Beschreibung bezieht sich auf die Mac-Version.)
  2. Xampp installieren.
    Das geht genau so einfach, wie bei allen anderen Programmen auch. Einfach den Anweisungen am Bildschirm folgen.
  3. Xampp starten.
    Einfach auf „Programme“, „Xampp“ und dort auf „XAMPP Control“ klicken.
    Es öffnet sich folgendes kleines Fenster:
    Xampp ControlDort jeweils auf „Start“ klicken. Mit dem Admin-Passwort das Starten bestätigen.
  4. Xampp testen.
    Geh in deinen bevorzugten Browser und tippe http://localhost in die Adresszeile ein. Wenn die Installation und der Start von Xampp korrekt funktioniert haben, dann siehst du jetzt folgende Seite:

Xampp Start

Das war’s, Xampp läuft.

Okay, aber wie bekomme ich jetzt meinen WordPress-Blog da rein?!

Als nächstes wollen wir, dass unter http://localhost auch unser Blog angezeigt wird.

Dazu laden wir mittels FTP alle unsere Blog-Dateien von unserem Server herunter und speichern die Dateien in dem Ordner /Programme/XAMPP/htdocs.

Gut, jetzt sind die Dateien schon mal an Ort und Stelle. Allerdings fehlt noch unsere Datenbank, also quasi der Inhalt unseres Blogs.

Dazu gehen wir bei unserem Hoster ins phpMyAdmin. Zu finden ist das bei einem cPanel-Hoster (wie z.B. EUKHost, den GeldSchritte verwendet) im Bereich „Datenbanken“:

phpMyAdmin

In phpMyAdmin gehst du auf „Exportieren“:

phpMyAdmin Exportieren

Nun wählst du deine WordPress-Datenbank aus und klickst rechts unten auf „OK“:

phpMyAdmin Exportieren Einstellungen

Du bekommst jetzt eine *.sql-Datei als Download. Darin befindet sich der Inhalt deiner Datenbank und damit der Inhalt deines Blogs.

Jetzt gehst du wieder zu http://localhost und wählst links aus dem Menü auch hier phpMyAdmin aus:

Xampp phpMyAdmin

In diesem phpMyAdmin-Bereich (der genau so aussieht, wie jeder andere auch ;)), machst du jetzt zwei Dinge.

Zunächst legst du gleich auf dem Startbildschirm eine neue Datenbank an, mit exakt dem gleichen Namen, wie auch in deinem Online-Blog (also den Namen der Datenbank, die du eben gesichert hast):

phpMyAdmin Neue Datenbank anlegen

Erledigt?

Dann gehst du jetzt auf „Importieren“ und wählst die eben heruntergeladene Datei aus:

 

phpMyAdmin Importieren

Jetzt sind die Inhalte deines Blogs hochgeladen und in deiner lokalen Datenbank hinterlegt.

Kannst du noch? 🙂

Du bist nämlich immer noch nicht ganz fertig 😉

Öffne jetzt bitte die Datei „wp-config.php“ aus dem Ordner /Programme/XAMPP/htdocs und ändere dort den „MySQL database username“ (bei mir in Zeile 22 und 23) in „root“, das „MySQL database password“ (Zeile 25, 26) in nichts (so dass “ da steht) und deinen „MySQL hostname“ (Zeile 28,29) in „localhost“.

Jetzt sollte eigentlich alles erledigt sein. Versuch bitte http://localhost noch einmal aufzurufen. Du solltest nun eigentlich deinen Blog sehen, wenn nichts schief gelaufen ist.

Fehlermeldung bei Mac OS X?

Sollte eine Fehlermeldung angezeigt werden, dann versuch noch folgendes:

Ruf die Datenbank auf, in der dein Blog liegt und wähle die Tabelle „wp-options“ aus (Achtung! Klicke auf den Text, nicht auf die kleine Grafik vor dem Text!).

Hier nun bitte zwei Dinge ändern: Such nach „siteurl“ (bei mir Zeile 2) und ändere die URL dort auf http://localhost ab. Dann such nach „home“ (bei mir Zeile 38) und mach hier dasselbe.

Außerdem: Navigiere im Finder zu /Programme/XAMPP/xamppfiles/htdocs und markiere den Ordner, in dem dein Blog liegt (bei mir ist das direkt htdocs). Öffne mit einem Rechtsklick (oder CTRL + linke Maustaste) das Kontextmenü und wähle „Informationen“:

 

Datei Informationen

Im sich öffnenden Menü gehst du ganz unten bei „Freigabe & Zugriffsrechte“ auf das kleine Zahlenschloss rechts unten. Nach Eingabe des Admin-Passworts deines Macs kannst du diese Rechte nun bearbeiten und setzt bitte alle drei auf „Lesen & Schreiben“:

Zugriffsrechte ändern

Vergiss nicht „Änderungen auf alle Unterordner anwenden“ auszuwählen, indem du unten auf das kleine Zahnrädchen klickst!

Plugins funktionieren nicht… *

Wenn du einige Plugins installiert hast, die irgendwie in deiner lokalen Serverumgebung nicht so arbeiten, wie sie sollen, dann geh bitte noch einmal in dein phpMyAdmin-Bereich in Xampp (siehe oben).

Klicke jetzt oben auf den Reiter „Suche“. Gib in das Suchfeld nun die URL deines Online-Blogs ein, markiere „genau diese Zeichenkette“ und klicke auf „Alle auswählen“, damit alle Tabellen deiner Datenbank ausgewählt werden. Klicke dann auf „OK“:

 

phpMyAdmin URL ändern

Überall, wo genau diese Zeichenkette nun auftaucht, erscheint in den folgenden Suchergebnissen die Möglichkeit auf „Anzeigen“ zu klicken:

phpMyAdmin Anzeigen

Klickst du auf „Anzeigen“, dann sehen die nachfolgenden Ergebnisse z.B. so aus:

phpMyAdmin Eintrag ändern

Über das Bleistift-Symbol kannst du die jeweiligen Einträge ändern. Du kannst auch mehrere Einträge markieren und unten dann auf ändern gehen, so dass du mehrere Einträge gleichzeitig bearbeiten kannst.

Hier musst du selbst entscheiden, wie weit du Änderungen vornehmen möchtest. In der Tabelle der wp-comments wäre es z.B. ziemlich aufwendig jeden einzelnen eigenen Kommentar, bei dem die eigene URL hinterlegt ist, zu ändern – und Sinn würde das wohl auch keinen machen…

Fazit

Hui, das war mal richtig technisch, oder? 😀

Aber es hat sich gelohnt, wenn du es mir nachgemacht hast!

Denn jetzt hast du die Möglichkeit mit Xampp deinen Blog auch offline zu betrachten – und was noch viel wichtiger ist: Zu bearbeiten!

Du kannst Designänderungen testen, bevor sie online gehen. Kannst neue Funktionen integrieren oder Plugins austesten – alles ohne den Lesefluss deiner Besucher zu stören!

Für mich ein wirklich sehr wertvoller Tipp, den Dieter mir gegeben hat und bei dem ich mich für seine tollen Ratschläge, seine Hilfe und seine Anleitung bedanke! Er war die Inspiration für diesen Artikel.

Ich würde mich freuen von dir zu hören, ob du dieses Tutorial umsetzen konntest oder nicht. Ob die Windows- oder Linux-Nutzer da draußen etwas davon haben, weiß ich zwar nicht. Aber alle Mac-Nutzer sollten eigentlich mit dieser Anleitung klar kommen. Oder?

* Wichtiger Hinweis:
Beachte bitte den Kommentar von Thomas Joachim Richter, der auf eine wichtige Änderung der „wp_options“ hinweist! Ohne diese Änderung geht’s nicht; die hatte ich hier im Artikel glatt vergessen zu erwähnen 😉
Danke Thomas! 🙂

22 Kommentare

  1. Hallo Gordon,

    zu deiner Anleitung kann ich nichts sagen, bin halt kein „Mac-User“ aber sieht gut aus. 😉

    Auf meinem „Windows“ Rechner habe ich schon seit geraumer Zeit Xampp installiert und kann dir daher beipflichten, dass es wunderbar zum editieren des WordPress Blogs geeignet ist.

    Wünsch dir ein schönes Wochenende
    Beste Grüße
    Thomas

    1. Ohne den Tipp von Dieter wäre ich nicht drauf gekommen – und hätte mich da wahrscheinlich auch nicht selbst durchgefuchst… 😉

      Dir auch nen schönes WE!

      Liebe Grüße
      Gordon

  2. Zur Info:

    Gut das das auf dem MAC auch läuft. Da der Localhost aber auch dazu da ist, andere Pages zu testen, sollte man den Blog nicht in das Verzeichnis …XAMPP/xamppfiles/htdocs/ legen, sondern in ein Unterverzeichnis desselben z.B.
    …XAMPP/xamppfiles/htdocs/www.geldschritte.de/
    Der Aufruf geht dann mit http://localhost/www.geldschritte.de/
    Andere Seiten, wie z.B. ein 2. Blog bekommen auch ihr eigenes Unterverzeichnis innerhalb ../HTDOCS/, und somit können mehrere Seiten neben einander leben.

    Alle Seiten, Tests, Buchbeispiele und Beispiele aus dem Internet liegen bei mir im HTDOCS-Verzeichnis in Unterverzeichnissen wie BSP, BUCHxy, etc.
    Damit habe ich immer eine Version online und eine Quasi Sicherung auf dem Localhost!

    Warnung:
    Es kommt aber auf die Themes und die Plugins an, ob diese auf dem Localhost laufen. Denn oft haben Plugins und Themes URLs in den DB-Tabellen, die nicht auf den Localhost „schauen“. Dann muss man in den Tabellen der Datenbank nach den anderen URL’s suchen und diese anpassen.
    Damit ist aber dann die Datenbank auf dem Localhost nicht mehr 1:1 in die Datenbank auf dem Web importierbar. Also Vorsicht.

    Gruß
    Bernd

    Gruß
    Bernd

    1. Danke für den Hinweis, Bernd!

      Allerdings kann ich doch z.B. auch GeldSchritte im HTDOCS liegen haben und wenn ein 2.er Blog dazu kommt, packe ich den eben in den Ordner HTDOCS/BLOG2 z.B. – müsste doch auch gehen, oder?

      Das mit den Plugins spreche ich ja auch im Artikel an.

      Viele Grüße
      Gordon

      1. Hallo Gordon,
        das ist richtig mit dem HTDOC/wp-… !
        Es geht, aber es kann sein, dass Du dann die schönen XAMPP-Bilder nicht mehr bekommst, wenn eine 2. index.php oder start.php dazukommt!

        Außerdem, denn der Localhost ein paar Jahre gelebt hat, blickst Du irgendwann nicht mehr durch, was zu was gehört. Denn Du hast, wenn Du den Localhost einsetzt, schnell 1000 andere Dateien dort gespeichert.
        Ordnung ist das halbe Suchen 🙂
        Gruß
        Bernd

  3. Hi Gordon,
    woher weißt du eigentlich immer ganz genau was ich brauche?
    Ich bin zwar auch kein Mac Nutzer, sondern habe hier Windows laufen aber ich denke die Grundlagen werden ähnlich sein.
    WEerde das auf jeden Fall mal testen und dann kann ich ja vielleicht auch eine Anleitung für Windows User beisteuern.
    Ich hab schon seit einiger Zeit vor etwas an meinem Theme zu basteln – habs aber bisher gelassen, weil ich mir nicht alles zerschießen wollte und es auch keine gute Idee fand meinen Lesern das anzutun.
    Aber jetzt werde ich das ganze mit XAMPP definitiv mal in Angriff nehmen.

    Liebe Grüße
    Stefanie

    1. Hey Stefanie,

      hehehe, tja… ich hab da eben ganz feine Antennen 😉

      Würde mich über ein Windows-Pendant-Artikel freuen! 🙂

      Viel Erfolg mit Xampp!

      Liebe Grüße
      Gordon

  4. MAMP ist eigentlich die Alternativ zum XAMPP von Windows. 😛

    1. Danke für den Hinweis 🙂

      1. Nichts zu danken, ging damals ähnlich vor wie du und kam erst über Umweg zu MAMP. Welches sich meiner Meinung nach auch viel einfacher installieren und Handhaben lässt als XAMPP für Mac.

        Wenn Du allerdings nur Nutzer und nicht Admin auf deinem Mac bist (wegen Sicherheit usw.) dann kann es unter Umständen zu Problemen mit der Vergabe der Rechte bei MAMP kommen.

  5. Hallo Gordon,

    da hast Du tatsächlich ein interessantes Thema angeschnitten. Ich benutze XAMPP schon seit Jahren als lokale Entwicklungsumgebung und es gibt (zumindest unter Windows) keine ernst zu nehmenden Alternative.

    Die Vorgehensweise unter Windows unterscheidet sich übrigens kaum. Bis auf die Tatsache, dass wohl der Screenshot für die Verzeichnisrechte etwas anders aussehen würde 😉

    Wie Bernd ja bereits angemerkt hat, ist es wesentlich professioneller unter htdocs nochmal ein Unterverzeichnis anzulegen. Irgendwann kommt man ja doch in Versuchung ein anderes PHP-Skript lokal zu testen…

    Eine Sache fehlt allerdings und wird lediglich in Bezug auf Plugins angesprochen. Denn in der Datenbank müssen über phpMyAdmin in der Tabelle „wp_options“ mindestens die Felder „siteurl“ und „home“ entsprechend geändert werden. Ansonsten kann es nämlich passieren, dass Verlinkungen auf die Seite im Web verweisen.

    Abschließend sollte man noch sämtliche Einstellungen im Dashboard überprüfen. Insbesondere was die Pfade zur Mediathek usw. angeht.

    Super Artikel

    Viele Grüße
    Thomas

    1. Hallo Thomas,

      ganz wichtiger Hinweis mit der wp_options! Danke!

      Hatte ich glatt vergessen 😉

      Ich mache gleich mal einen Hinweis im Artikel auf Deinen Kommentar!

      Danke!

      Herzliche Grüße
      Gordon

  6. Ich habe da mal ne Frage:

    Ich werde einen weiteren Blog erstellen und momentan ist auf der künftigen Domain ein Under-Construction-Wordpress-Theme installiert.

    Die Idee mit Xamp bzw. der Tipp von Stefan, „MAMP“ zu nutzen ist super, danke euch dafür.

    Nun mein Anliegen, ich erstelle also mit MAMP (bin Windows-Nutzer) den Blog, tu‘ ihn füllen und dann? Wie bekomme ich dann den ganzen fertigen Blog bzw. die ganzen Datenbank-Inhalte in die Datenbank meines Hosters sprich wo jetzt momentan das Under-Construction-Wordpress-Theme installiert ist?

    Ich muss ehrlich gestehen, dass ich ein bissel Angst vor der Datenbank habe, ein Fehler und alles ist futsch. Ich mache zwar tägl. ein BackUp aber was das ganze Technische angeht habe ich ein riesen Respekt.

    1. Tja, ich denke da musst Du Dich wohl Deiner Angst stellen 😉

      Ich gehe über das phpMyAdmin, das bei XAMP (MAMP habe ich noch nicht getestet) ja auch vorhanden ist, exportiere die Datenbank dort (Datenbank auswählen und oben auf „Exportieren“ gehen) und importiere sie dann wieder in der anderen Datenbank, in dem Fall also Deiner Online-Datenbank.

      Liebe Grüße
      Gordon

  7. Hallo Sebastian,
    also Du kannst auf dem Localhost mit http://localhost/phpmyadmin/main.php den phpMyAdmin sofort aufrufen.
    Du kannst Deine Datenbanktabellen exportieren und im
    Web mit dem dortigen phpMyAdmin, wieder importieren.
    Nicht vergessen darf man bei dem Export, dass man die Option „Füge Drop Table/… hinzu“ angeklickt hat, das löscht die Tabelle bevor man sie wieder importiert.
    Außerdem musst Du nach dem Import ins Web, in der Tabelle options bei den Feldern option_name=siteurl und option_name=home wieder die richtigen Http-Adressen einstellen, wenn Du nicht das ganze automatisiert hast. Habe mir das automatisiert, bei mir läuft das automatisch ab
    Gruß
    Bernd

    1. Hallo Bernd,

      wie hast du denn das Ganze automatisiert?

      Ich würde gerne die Aktualisierungen so einfach wie möglich gestalten.

      Beste Grüße,

  8. Hallo, ich habe ein kleines Problem. Nachdem ich die DB Importiert habe geht es nicht mehr weiter, da ich keine “wp-config.php” Datei in meinem Ordner /Programme/XAMPP/htdocs habe, woran kan das liegen?

    Vielen Dank für die Hilfe!

    1. Hallo Steffen,

      puh… ich nutze Xamp dank BackupBuddy gar nicht mehr… lang, lang ist’s daher her 😉

      Deine DB hat ja nix mit der wp-config.php zu tun. Hast Du denn alle WP-Dateien in den entsprechenden Ordner reinkopiert?

      Liebe Grüße
      Gordon

  9. Vielen Dank, das funktioniert problemlos. 🙂

Kommentare geschlossen

Mehr in:WordPress