In a neon wilderness he was restless

Quelle: alexramos10 (Pixabay)

Das Problem

Der Trend (siehe kürzlich Herr Kulturflaneur und nun auch Herr Schneck), sich als Twoday-Mitglied mehr Sicherheit, Modernität und Erweiterbarkeit im Wege eines Wordpress-Zweitblogs zu verschaffen, scheint sich zu verstärken.

Ein Haupthemmnis für viele Blogger, die den Schritt hin zu einer moderneren Bloggingplattform machen möchten, ist, dass sie damit auch die bisherige Einbindung in die Twoday-Community verlassen, es sei denn, sie pflegten beide Blogs (Wordpress und Twoday) parallel identisch weiter. Ideal wäre es hingegen, wenn man z.B. nur den Wordpress-Blog mit neuen Beiträgen bestücken und diesen im Twoday-Blog anzeigen könnte sowie gleichzeitig die bisherigen Verbindungen (Verwaltung von Mitgliedern/Abonnements) unter Twoday weiterführen könnte — und das alles vorzugsweise mit minimaler Doppelarbeit. Wie man so etwas realisieren kann, wird im folgenden erklärt.

Die Lösung

Das kleine Monster hatte als erstes die ziemlich geniale Idee, sein neues Wordpress-Blog per <iframe>-Befehl vollflächig in sein bestehendes Twoday-Blog zu integrieren. Dabei ergibt sich zunächst der Nachteil, dass eine vollständige Anzeige des WP-Blogs als bildschirmfüllendes Fenster den Zugang zu wichtigen Twoday-Funktionen (Admin, Abonnements) erschwert bzw. verhindert. Zu diesem Zweck habe ich eine ergänzende Lösung geschaffen, die zusätzlich über der eigentlichen Bloganzeige eine Schaltfläche einblendet, die bei Mausklick ein (beliebig) einstellbares Menü, z.B. mit Twoday-Funktionen, aufruft.

Um eine bessere Vorstellung davon zu bekommen, wie so etwas aussehen kann, schaut man sich am besten die beiden Blogversionen an:

Neuen Wordpress-Blog vom kleinen Monster ansehen (Original)
Twoday-Blog mit Menübutton ansehen (Wordpress-Blog eingebettet)

Position, Farbe, Größe und Erscheinungsbild des Menübuttons in der Twoday-Anzeige sind prinzipiell frei einstellbar. Bei diesem Blog wird er links oben in hellrot angezeigt.

Abbildung 1: Wordpress-Blog in Twoday mit zusätzlichem Menübutton links oben

Bei einem Mausklick auf den Button wird der Blog in einer Animation perspektivisch verzerrt um Platz für das eingeblendete Menü zu machen. Ein weiterer Klick auf das linke Blogbild schließt das Menü und stellt den alten Zustand wieder her.

Abbildung 2: Aktiviertes Menü mit Twoday-Funktionen

Die 3D-Animation mit perspektivischer Verzerrung funktioniert jedoch nur in modernen Browsern, will heißen ab:

• Internet Explorer 10+
• Firefox 30+
• Chrome 27+ und Chrome für Android 37+
• Safari 5.1+ und iOS Safari 7.1+
• Opera 23+
• Android 2.3+

Als Alternative zur oben gezeigten Animation habe ich noch eine zweite Variante der Menü­einblendung realisiert. In diesem Beispiel verwende ich das neue Wordpress-Blog von Herrn Kulturflaneur, welches in Twoday mit überlagerndem Menüknopf dargestellt wird — diesmal rechts oben als transparente Schaltfläche.

Abbildung 3: Wordpress-Blog in Twoday mit zusätzlichem Menübutton rechts oben

Ein Klick auf den Menüknopf blendet auf der linken Seite ein einfaches Menü mit beliebig einstellbaren Links ein (hier z.B. Twoday-Funktionen). In der oberen Kopfzeile ist Platz für weitere Links (hier beispielhaft Social Links wie Twitter, Facebook, E-Mail). Ein zweiter Klick auf die Menüschaltfläche schließt die Einblendung wieder.

Abbildung 4: Aktiviertes Menü mit Twoday-Funktionen und Social Links

Die Einbauanleitung

Einen eigenen (neuen) Wordpress-Blog mit der beschriebenen Lösung zusätzlich unter der bisherigen Twoday-Adresse anzuzeigen, gestaltet sich sehr einfach:

1. Kopieren Sie den gesamten Inhalt Ihres Site.page Skins in eine Textdatei und sichern Sie diese ab (falls Sie den alten Zustand bei Bedarf wieder herstellen wollen).
2. Laden Sie eine der oben beschriebenen Varianten herunter (Textdatei und PDF-Dokumentation) und speichern Sie die Dateien in einem beliebigen Arbeitsverzeichnis oder auf dem Desktop:

   Variante 1: Perspektivische Verzerrung

   Variante1.html.txtVariante1.pdf

   Variante 2: Seitliche Einblendung

   Variante2.html.txtVariante2.pdf
3. Öffnen Sie die txt-Datei in einem Texteditor (z.B. Notepad) und führen Sie dort die notwendigen Änderungen anhand der Hinweise im PDF-Dokument durch:
• Passen Sie im Kopfbereich Titel, Beschreibung und Autor des Blogs an.
• Legen Sie die Position und Farben der Menüschaltfläche fest.
• Passen Sie die Blog-Zieladresse im iframe-Befehl an. Für Herrn Schneck sähe dieser z.B. dann folgendermaßen aus: <iframe src="http://schneckinternational.me/"></iframe>
• Verändern Sie bei Bedarf die Menütexte, Icons, Links nach Ihren Wünschen.
4. Kopieren Sie nun den gesamten Code aus der angepassten Textdatei in Ihren site.page Skin (der alte Inhalt muss vollständig ersetzt werden) und speichern Sie die neue Version.
5. Fertig. Rufen Sie Ihr Blog auf und kontrollieren Sie Aussehen und Funktionalität. Für weitere Anpassungen oder Menüerweiterungen gehen Sie erneut in Ihren site.page Skin und führen dort die Änderungen direkt durch.

Varianten "gefahrlos" testen

Üblicherweise testet man neue technische Ideen und Funktionalitäten nicht sofort im Live-Originalblog. Auch in Twoday gibt es die Option, neue Dinge unsichtbar für den normalen Blogbesucher auszuprobieren.

Jeder Twoday Free-User hat die Möglichkeit, zwei Layouts anzulegen. Ein Layout ist — einfach gesagt — eine Darstellungsvariante für Ihren Blogcontent. Das Zweitlayout kann andere Farben, Schriftarten, Bildschirmaufteilungen haben — und eben auch andere Skins, die das Verhalten des Blogs festlegen.

Um nun eine der oben beschriebenen Varianten "gefahrlos" zu testen und anzuschauen, führen Sie folgende Schritte aus:

1. Melden Sie sich bei Twoday mit Ihrem Account an
2. Klicken Sie im Twoday-Menü auf Admin → Layout → Meine Layouts
3. Falls Sie nur ein Layout besitzen, legen Sie sich über Neues Layout anlegen ein zweites Layout an
4. Klicken Sie in der Layoutübersicht beim Zweitlayout (dem nicht aktiven Layout) auf "testen & bearbeiten".
5. Klicken Sie danach auf Skins (HTML), um den Skin Site.page mit einer der beschriebenen Varianten zu füllen.
6. Klicken Sie auf Weblog ansehen, um die Darstellung zu kontrollieren.
7. Zum Beenden des Tests klicken Sie in der angezeigten (gelben) Twoday-Nachricht auf "Test beenden". Dadurch wird das vorherige Layout auch für Sie wieder aktiviert.

Viel Spaß bei der Verheiratung Ihres Wordpress-Blogs mit Twoday!