Demo Website erstellen mit One Click Demo Import | WP Consultant (2024)

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:

• Teil 1: Vorstellung der Idee: Eltern-Kind-Netzwerk
• Teil 2: Vorgehensweise bei der Umsetzung
• Teil 3: Idee Entwicklung: Geschäftsmodell mit Business Model Canvas visualisieren
• Teil 4: Wettbewerbsanalyse
• Teil 5: Umsetzung einer Online Community
• Teil 6: Demo Website erstellen mit One Click Demo Import
• Teil 7: Website Usability optimieren
• Teil 8: Die Idee vermarkten
• Teil 9: Website Analyse mit Google Analytics (Teil 1)
• Teil 10: Website Analyse mit Google Analytics (Teil 2, nur mit kostenlosen E-Book)
• Teil 11: Details zur Monetarisierung (nur mit kostenlosen E-Book)
• Teil 12: Rechtssicherheit & Datenschutz: Kosten und Vorgehensweise (nur mit kostenlosen E-Book)
• Teil 13: Lessons Learned: Wichtige Erkenntnisse & Optimierungstipps (nur mit kostenlosen E-Book)

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.

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]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:[/wpc]

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

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

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

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:

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):

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

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!

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.