Demo Website erstellen mit One Click Demo Import
WPC - Dein WordPress Blog

Online Business starten mit WordPress Teil 6 – Demo Website erstellen mit One Click Demo Import

Willkommen zu Teil 6 unserer Artikelreihe, in der wir das WordPress Startup Knirpsy – Deine Eltern-Kind-Community aufbauen. In dieser Folge werden wir uns ansehen, was eine Demo Website ist, wie man eine solche Website erstellt, welche Anwendungsfälle es dafür gibt und wie das Demo mit nur einem Klick auf einer neuen Website importiert werden kann.

Inhaltsverzeichnis unserer Artikelreihe:

Was ist eine Demo Website?

Eine Demo Website ist eine Beispiel-Website, die zeigen soll, wie eine reale Website im fertigen Zustand aussehen könnte. Meistens verwendet man dafür Platzhalter Bilder wie z. B. von Placehold.it oder lizenzfreie Demo Bilder von pixabay.com bzw. unsplash.com. Oft werden auf den Demo Seiten auch Dummy Texte wie lorem ipsum verwendet und interaktive Elemente wie „Bestellen“- oder „Anmelden“-Buttons deaktiviert.

Welche Anwendungsbeispiele gibt es für eine Demo Website?

  1. WordPress Theme Entwickler erstellen Demo Websites, damit sich ihre potentiellen Kunden ein Bild davon machen können, wie ihre Website mit dem jeweiligen Theme aussehen könnte. Unter dem folgenden Link könnt ihr z. B. die Demo Websites für die WordPress Themes meiner Firma WebGeckos ansehen.
  2. Was für Theme Entwickler gilt, gilt natürlich auch für WordPress Plugin Entwickler. Auch hier kann eine Demo Website helfen, die Funktionen des Plugins zu veranschaulichen.
  3. Website Baukästen wie Jimdo oder Wix verwenden Demo Websites, um ihre Designs zu präsentieren.

Für unser knirpsy Netzwerk werden wir den Anwendungfall 3 betrachten, denn unsere User werden die Möglichkeit haben, sich einen eigenen Baby Blog innerhalb der Community zu erstellen. Wir benötigen 2 verschiedene Demo Website Typen für unsere Knirpsy Blogs:

Knirpsy Blog FUN – Mit Knirpsy FUN erhält der User einen persönlichen Blog, mit der er seiner Verwandtschaft und seinen Freunden die Entwicklungsschritte seines Kindes zeigen und die Erinnerungen in einem ansprechenden Design festhalten kann.

Knirpsy Blog PRO – Mit Knirpsy PRO erhält der User einen professionellen Blog, mit dem er seine Erfahrungen, welche er mit seinem Kleinkind gesammelt hat, teilen und damit anderen Eltern bei verschiedenen Kinderthemen helfen kann.

Wie erstellt man eine Demo Website?

1. WordPress Multisite Feature aktivieren

Zu allererst muss natürlich WordPress installiert werden. Wie du WordPress einfach installieren kannst, erfährst du hier auf wpc. Nach einer erfolgreichen Installation kann nun das Multisite Feature aktiviert werden. Dazu empfehle ich dir auch den Blogbeitrag, wie du eine WordPress Multisite Installation durchführen kannst.

2. Neue Subdomain oder Unterverzeichnis für die Demo Website anlegen

Für unsere Demo Website erstellen wir einen eigenen Blog bzw. eine eigene Website innerhalb unseres Multisite Netzwerks. Über Meine Websites > Netzwerkverwaltung > Websites > Neu hinzufügen, lässt sich ein neuer Netzwerk-Blog einrichten.

WordPress Multisite neue Website anlegen
WordPress Multisite neue Website anlegen

Für das knirpsy Netzwerk haben wir uns für die Unterverzeichnis-Struktur entschieden, deshalb erstelle ich an dieser Stelle zwei neue Websites mit den folgenden URLs: knirpsy.com/knirpsy-blog-fun und knirpsy.com/knirpsy-blog-pro.

Ich lege den Titel für die Websites fest, lasse die Spracheinstellung auf „Deutsch“, trage meine Administrator E-Mail-Adresse ein und klicke auf Website erstellen.

3. WordPress Theme installieren

Als nächsten Schritt müssen wir das WordPress Theme installieren, welches wir als Vorlage für unsere Knirpsy Blogs verwenden möchten. In unserem Fall ist das das Layers Theme (Affiliate Link). Die Theme Installation bei einer WordPress Multisite erfolgt über Meine Websites > Netzwerkverwaltung > Themes > Neu hinzufügen > Theme hochladen (falls das Theme nicht auf wordpress.org vorhanden ist).

4. Child Theme erstellen (optional)

Unser knirpsy Netzwerk ist ein klassischer Anwendungsfall für WordPress Child Themes. Somit können wir unseren Usern verschiedene Templates anbieten, die wir jeweils mit einem Child Theme erstellen. Das Parent Theme, das heißt die Basis bleibt dabei immer dieselbe, nämlich das Layers Theme. In diesem Artikel erfährst du wie du ein „Child Theme in WordPress erstellen“ kannst.

Nachdem wir das Child Theme in dem Verzeichnis „Themes“ auf unserem Webspace erstellt haben, erscheint es in der Liste unter Meine Websites > Netzwerkverwaltung > Themes. In einer Multisite Umgebung muss man das Child Theme (im Gegensatz zu dem Parent Theme) netzwerkweit freischalten. Damit steht es allen Blogs innerhalb des Netzwerks zur Verfügung.

WPC Tipp:

Solltest du, so wie wir auch, für dein Netzwerk ein Default Theme festlegen wollen, trage einfach die folgende Zeile Code in die wp-config.php Datei ein:

define( 'WP_DEFAULT_THEME', 'dein-theme' );

Wann immer einer deiner User einen neuen Blog in deinem Netzwerk erstellt, wird das von dir gewählte Theme standardmäßig für die neue Seite aktiviert.

5. Demo Inhalt erstellen

Alle Vorbereitungen sind erledigt, nun können wir den Inhalt wie bei einer normalen Website erstellen. Wir erstellen also ein paar Beiträge für unseren Blog, ein paar Demo-Seiten und laden die gewünschten Bilder hoch bzw. verwenden Platzhalter von Placehold.it.

2 Punkte sind hierbei aus Performance-Sicht zu beachten:

  1. Die verwendeten Bilder für die Demos müssen bis auf den letzten Byte optimiert werden. Dazu kann ich dir den Beitrag WordPress Bildoptimierung mit und ohne Plugin empfehlen. Nachdem die User die Demo-Beiträge mit ihren eigenen ersetzt haben, verbleiben die Demo Bilder weiterhin in der Mediathek. Da nur die wenigsten Nutzer diese Demo Bilder nachträglich löschen werden, sollten die Bilder bestens optimiert werden, um möglichst wenig Speicherplatz zu verbrauchen.
  2. Erstelle nur die nötigsten Demo-Beiträge und -Seiten. Die User sollen nicht die durch den Demo Import gewonnene Zeit, damit verbringen, nicht benötigte Beiträge und Seiten zu löschen.

Wie ermögliche ich meinen Usern mit nur einem Klick den Demo Inhalt zu installieren?

Bevor wir zu dieser Frage kommen, lasst uns erst einmal sehen, warum man den Demo Inhalt überhaupt importieren sollte. Viele Premium WordPress Themes da draußen haben unzählige Einstellungsmöglichkeiten. Im besten Fall haben solche Themes eine separate Dokumentations-Website, die allerdings so umfangreich ist, dass es sehr zeitaufwendig ist, sich durch die verschiedenen Settings zu kämpfen. Um deshalb die Benutzerfreundlichkeit zu optimieren, benutzen viele Theme-Entwickler den Demo Content Import, denn es ist oft einfacher und deutlich schneller, den Demo Inhalt anzupassen als komplett bei null anzufangen.

Um unseren Knirpsy Blog Autoren den One Click Import des Demo Inhalts zu ermöglichen, benötigen wir die folgenden 3 Plugins. In einer Multisite kannst du die Plugins über Meine Websites > Netzwerkverwaltung > Plugins > Installieren installieren.

1. One Click Demo Import

WordPress Plugin One Click Demo Import
WordPress Plugin One Click Demo Import

Wie der Name schon sagt, ist das das Plugin, welches uns ermöglicht, den Demo Inhalt mit nur einem Klick zu installieren.

2. Widget Importer & Exporter

WordPress Plugin Widget Importer & Exporter
WordPress Plugin Widget Importer & Exporter

Die standardmäßig eingebaute Export-Funktion von WordPress erstellt eine .xml-Datei mit Blog- und Custom Post Types-Beiträgen, Seiten-Inhalten, Bildern, Kategorien und Stichwörtern. Die Widget Inhalte werden jedoch nicht exportiert. Dazu benötigen wir das Plugin Widget Importer & Exporter, welches uns eine .wie-Datei liefert, die wir ebenfalls automatisch mit importieren werden.

3. Customizer Export/Import

WordPress Plugin Customizer Export Import
WordPress Plugin Customizer Export Import

Was für den Inhalt in den Widgets gilt, gilt auch für den Customizer Inhalt. Dieser wird nicht mit der Default Export Funktion exportiert. Das Plugin Customizer Export/Import hilft uns die exportierte .dat-Datei ebenfalls mit einzubinden.

Demo Import Code in die functions.php einsetzen

Sobald wir die drei Dateien exportiert haben, können wir diese mit dem folgenden Code in die functions.php Datei unseres Child Themes eintragen:

/**
 * Loading demo content files
 */
if( ! function_exists( 'childtheme_name_import_files' ) ) {
  function childtheme_name_import_files() {
      return array(
          array(
              'import_file_name'       			=> 'Knirpsy Blog FUN',
              'import_file_url'        			=> get_stylesheet_directory_uri() . '/assets/demo-content/content.xml',
              'import_widget_file_url' 			=> get_stylesheet_directory_uri() . '/assets/demo-content/content-widgets.wie',
              'import_customizer_file_url'  => get_stylesheet_directory_uri() . '/assets/demo-content/content-customizer.dat'
          ),
      );
  }
}
add_filter( 'pt-ocdi/import_files', 'childtheme_name_import_files' );

Die exportierten Dateien müssen natürlich in unserem Fall content.xml, content-widgets.wie und content-customizer.dat heißen und im Ordner demo-content liegen, der wiederum im Ordner assets abgelegt ist.

Wenn alles richtig eingebunden ist, erscheint ein neuer Menü-Punkt unter Design > Import Demo Data:

One Click Demo Import in WordPress
One Click Demo Import in WordPress

Wenn unsere User auf den Button „Import Demo Data“ klicken, wird der ganze Demo Inhalt importiert. Es sind allerdings noch zwei Einstellungen notwendig. Aus irgendeinem Grund exportiert WordPress nicht die Menü-Einstellungen und manchmal auch nicht die Definition der Startseite. Uns bleibt also nichts anderes übrig, als diese zwei Punkte in die User-Dokumentation mit aufzunehmen:

Die Menüstruktur wird zwar übernommen, jedoch nicht die richtige Position im Theme. Es fehlt das Häckchen an der richtigen Stelle (welches Menü das richtige ist, hängt vom WordPress Theme ab):

WordPress Menü Einstellungen
WordPress Menü Einstellungen

Bei manch einem Import muss noch die richtige Startseite festgelegt werden:

WordPress Startseite festlegen
WordPress Startseite festlegen

Das war’s! Unsere User können nun, nachdem sie im Knirpsy Netzwerk ihren eigenen Blog angelegt haben, den Demo Inhalt mit nur einem Klick importieren und sofort mit ihren Änderungen loslegen.

Falls du noch Fragen hast zu der Demo Website oder dem One Click Demo Import, freue ich mich über deinen Kommentar!

Jetzt für den WPC Newsletter anmelden und...

Online Business starten mit WordPress kostenloses E-Book

...wertvolle Tipps zu WordPress, Elementor, SEO und DSGVO direkt in die Inbox erhalten

​Als kleines Dankeschön bekommst du das E-Book "Online Business starten mit WordPress" und die "SEO Checkliste von WPC" kostenlos dazu.

(*) = Pflichtfeld

SEO Checkliste Download kostenlos

Der Newsletter enthält Informationen über neue Beiträge, Tipps, Angebote und Aktionen. Hinweise zum Anmeldeverfahren, Versanddienstleister, statistischer Auswertung und Widerruf in unserer Datenschutzerklärung.

Ausblick auf Teil 7 der Artikelreihe:

Im nächsten Teil unserer Artikelserie werden wir sehen, welche Möglichkeiten es gibt unsere Knirpsy Plattform benutzerfreundlicher zu gestalten.

Save

Vielen Dank fürs Teilen dieser Seite

5 Kommentare zu „Online Business starten mit WordPress Teil 6 – Demo Website erstellen mit One Click Demo Import“

  1. N

    Ich hatte das Plugin One Click Demo Import für meinen Blog verwendet. Nun habe ich alle Inhalte angepasst und brauche es nicht mehr. Deaktiviert hatte ich es schon allerdings bekomme ich jetzt immer eine Meldung, dass das benötigte Plugin deaktiviert ist. Kann ich das Plugin einfach löschen? Oder zerstöre ich damit meine Seite? Leider finde ich online keine Infos dazu 🙁 Liebe Grüße!

    1. D

      Hallo Nina,
      mir ist nicht bekannt, dass das Plugin nach dem Import noch irgendwelche Funktionen ausführt. Deswegen müsste man das Plugin auch getrost wieder deinstallieren können ohne dass es Auswirkungen auf die Seite hat. Natürlich kann der Plugin Autor so eine Frage besser beantworten. Der Support auf wordpress.org ist zwar etwas langsam aber es wird einem geholfen. Was bekommst du denn für eine Fehlermeldung? LG, Danijel

  2. s

    Hallo,
    da ist ein ‚broken link‘ in (wpconsultant.de/online-business-starten-teil-6/) der auf die Demos zeigt … (webgeckos.com/demos) … dafür gibt es ja auch Tools wie zB den Broken Link Checker. Ansonsten sehr schön zu lesen! Ty!

    1. D

      Hallo st3phan,
      vielen Dank für den Hinweis! Habe ich bereits behoben. Freut mich, dass dir der Artikel ansonsten gefallen hat!
      Schöne Grüße, Danijel

Kommentar verfassen

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

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.

KURS: WordPress schneller lernen!

Related Posts

Ähnliche Beiträge