Twoday-Tipp #4 - Wordpress heiratet Twoday
| Datum | Änderungen / Edits |
|---|---|
| 13.03.2017 | Ersatz der Dropbox-Links wg. Abschaltung des Dropbox-Public-Ordners |
| 23.12.2014 | Ersatz der Wuala-Links und Umleitung auf GoogleDrive |
| 01.10.2014 | Text: Varianten "gefahrlos" testen Code: "Weblog abonnieren"-Link in Variante1.hmtl.txt und Variante2.html.txt integriert |
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.
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.
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.
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.
Die Einbauanleitung
Einen eigenen (neuen) Wordpress-Blog mit der beschriebenen Lösung zusätzlich unter der bisherigen Twoday-Adresse anzuzeigen, gestaltet sich sehr einfach:
- 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).
- 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:
- Ö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.
- 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.
- 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:
- Melden Sie sich bei Twoday mit Ihrem Account an
- Klicken Sie im Twoday-Menü auf Admin → Layout → Meine Layouts
- Falls Sie nur ein Layout besitzen, legen Sie sich über Neues Layout anlegen ein zweites Layout an
- Klicken Sie in der Layoutübersicht beim Zweitlayout (dem nicht aktiven Layout) auf "testen & bearbeiten".
- Klicken Sie danach auf Skins (HTML), um den Skin Site.page mit einer der beschriebenen Varianten zu füllen.
- Klicken Sie auf Weblog ansehen, um die Darstellung zu kontrollieren.
- 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!
wissen sie aber vielleicht auch, was ich ändern könnt, um ihr blog besser zu sehen?
was anderes als den blöden internet-explorer darf ich nämlich grad nicht verwenden ...
Ui, das sieht aber wirklich sehr unschön aus. Der Browserstats beteuert, dass Sie IE10 auf Win7 verwenden, aber eigentlich kann das nicht sein, weil sowohl IE10 als auch schon IE9 mit der verwendeten Blogtechnik keine Probleme haben. Hm, ist das immer so auf diesem Rechner oder passiert das nur temporär? Können Sie mal die installierte IE-Version (im Browser Alt-X drücken und auf Info klicken) herausfinden?
Der Umstand, dass auch die Bilder nicht angezeigt werden, deutet allerdings darauf hin, dass bestimmte Scripte nicht geladen werden (bei mir werden die <IMG>-Adressen durch ein Javascript gesetzt). Eventuell werden bei Ihnen Scriptausführungen blockiert — vielleicht erkennen Sie eine oder mehrere Fehlermeldungen, wenn Sie im IE mal F12 drücken, dann die Konsole wählen und danach noch einmal die Blogseite laden.
Vielleicht war es aber auch nur ein temporäres Google-Drive Zugriffsproblem, wo ich meine Bilder und Scripte hoste.