Publizieren mit WordPress

Text: Haeme Ulrich

Das Content-Management-System WordPress kann Inhalte als Sprache ausgeben und sogar eigenständige Apps erzeugen und bereitstellen. Die Umsetzung ist nicht einmal so schwer und Thema des neuen Teils unserer Reihe über WordPress.

Inhaltsübersicht

Lesedauer: 07:09 Minuten

Während wir uns in den letzten Ausgaben mit traditionellen Ausgabekanälen wie Web und Print beschäftigt haben, geht es diesmal um die Sprachausgabe und Apps. Wird Inhalt sauber im Web CMS WordPress verwaltet, sind diese beiden Ausgabekanäle einfach zu integrieren.

Warum Audio sinnvoll ist

Die Sprachausgabe von Inhalten, die in WordPress verwaltet werden, kann aus mehreren Gründen sinnvoll sein. So lassen sich unterwegs längere Beiträge anhören, anstatt sie auf einem kleinen Display lesen zu müssen. Auch für Menschen mit eingeschränktem Sehvermögen ist es angenehmer, einen Text zu hören, als ihn mit der Bildschirmlupe zu lesen oder einen Screen Reader zu aktivieren. Mittlerweile indexiert Google Audio-Dateien und bietet sie zukünftig als Treffer an. Zudem ist es möglich, sauber strukturierten Text in einer hohen Sprachqualität auszugeben. Je nach eingesetzter Technologie kann die Qualität nahe an der eines professionellen Sprechers sein.

Mit Sprachausgabe erweitern

Für WordPress gibt es mehrere Plug-ins zur Sprachausgabe. Sie erweitern die Standardsoftware. Am Beispiel von „ResponsiveVoice Text to Speech“ und „play.ht“ erklären wir die Funktionen der Ausgabe. Responsive­Voice Text to Speech ist eine kostenlose Opensource-Software. Sie wurde vor allem für Menschen entwickelt, die körperlich eingeschränkt sind. Bei play.ht handelt es sich um ein kommerzielles Plug-in. Zusätzlich zur Konvertierung von Text zu Audio unterstützt es die Verwaltung und Produktion von Podcasts.

Das Plug-in ResponsiveVoice Text to Speech wird im öffentlichen Verzeichnis von WordPress aufgeführt. Suchen Sie dort einfach über den Namen des Plug-ins – Abbildung 01. Dem Plug-in fehlt ein Dialog für Voreinstellungen. Eingebettet und gesteuert wird die Sprachausgabe über so genannte Shortcodes. Das ist Code in eckiger Klammer. Über ihn können in WordPress Funktionen an beliebiger Stelle eingefügt werden. Abbildung 02 zeigt, wie im Fall von ResponsiveVoice Text to Speech der Shortcode lautet.

Abb. 01 Das kostenlose Plug-in erweitert WordPress um die Sprachausgabe. Quelle Haeme Ulrich

Überall da, wo Shortcode eingefügt wird, erscheint in der Website automatisch ein Button. Über ihn lässt sich die Sprachausgabe starten. Sollen alle Beiträge abspielbar sein, fügt man diesen Shortcode direkt ins Template für die Beiträge ein. Mit Hilfe von Attributen im Shortcode kann die Sprachausgabe weiter verfeinert werden, zum Beispiel eine weibliche Stimme und deutsche Sprache. Zudem soll der Text auf dem Button „Beitrag vorlesen“ lauten:

[responsivevoice_button voice="Deutsch Female" responsivevoice_button buttontext="Beitrag vorlesen"]

Abbildung 02 zeigt den Shortcode, Abbildung 03 die entsprechende Ansicht im Frontend. Übrigens: Auf der Website des Plug-in-Herstellers werden in den „FAQs“ sämtliche verfügbaren Ausgabeoptionen aufgeführt.

Abb. 02 Der Shortcode für die Sprachausgabe eingefügt in einem WordPress-Beitrag. Quelle Haeme Ulrich

Abb. 03 Der Shortcode zeigt im Frontend einen Button für die Sprachausgabe an. Quelle Haeme Ulrich

Ausgabe mit RSS-Feed

Wer „Play.ht“ installiert, kommt ohne Bezahlung nicht weit. Es können gerade mal drei WordPress-Beiträge als Audio ausgegeben werden, bevor man zur Kasse gebeten wird (Abbildung 04).

Konvertieren eines Beitrags

Abb. 04 Konvertieren eines WordPress-Beitrags in Play.ht. Quelle Ulrich Haeme

Kostenfrei bleibt jedoch die manuelle Konvertierung von Beiträgen über das Online-Portal des Herstellers. Play.ht geht dafür funktionell viel weiter: Neben WordPress können auch Artikel von der Blogger-Plattform „Medium“ als Audio konvertiert werden. Wer seine Beiträge zusätzlich als Podcast anbieten möchte, kann dies ebenfalls über „Play.ht“ erledigen (Abbildung 05). Das Portal generiert den „RSS Feed“ für die Audiodateien. Der RSS-Feed muss bei bekannten Podcast-Plattformen wie Apple iTunes oder Google Podcast hinterlegt werden.

Konvertierung mit Play.ht

Abb. 05 Play.ht macht aus einem WordPress-Beitrag sogar einen Podcast. Quelle Haeme Ulrich

Apps mit WordPress erstellen

Eine „Progressive Web App“ (PWA) ist eine Website, die auch offline auf unterschiedlichsten Geräten läuft, etwa Desktop, Smartphone oder Tablet. Sie aktualisiert sich bei bestehender Online-Verbindung im Hintergrund. Zudem kann sie Push-Nachrichten empfangen, wenn es der Benutzer zulässt. Optisch unterscheidet sich die PWA nicht von einer herkömmlichen App. Der Web­browser wird komplett ausgeblendet, so dass die App wie jede andere App im Vollbildmodus startet.

Abbildung 06 vergleicht die drei App-Arten, die heute gebräuchlich sind. Während die native App wegen ihres hohen Entwicklungsaufwandes nur noch für hoch performante Anwendungen zum Einsatz kommt, beschränkt sich der Aufwand für die hybride App. Der gleiche Inhalt wird für alle Plattformen verwendet. Jedoch sind die App-Entwickler und Autoren abhängig vom Geschäftsmodell und der Weiterentwicklung einer „Runtime“, die den Inhalt der App bereitstellt.

Apps im Vergleich

Abb. 06 Die unterschiedlichen App-Technologien im Vergleich. Quelle Haeme Ulrich

Die PWA funktioniert wie eine hybride App. Jedoch ersetzt der Webbrowser die proprietäre Runtime. Ein Vorteil ist, dass Webbrowser kostenlos und für alle wesentlichen Plattformen verfügbar sind. Zudem werden sie im Hintergrund automatisch aktualisiert und haben somit immer den neuesten Stand. Wie eine typische Progressiv Web App aussieht, zeigt Abbildung 07.

Der Inhalt wird in einer PWA mit herkömmlicher Webtechnologie erstellt, etwa mit HTML, CSS und JavaScript. Das vereinfacht die Produktion gegenüber dem Anlegen proprietärer Formaten für hybride Apps. Die Metadaten sind im „Manifest“-File hinterlegt, das in JSON geschrieben ist. Die „Service Worker“ sind verantwortlich für die Offline-Funktionalität und das Empfangen von Push-Nachrichten. Geschrieben sind diese wie andere Bestandteile einer modernen Website in JavaScript. Alle Technologien stammen aus dem Web und passen somit genau zu WordPress.

eine bekannte PWA

Abb. 07 Zu den bekanntesten PWAs gehört mobile.twitter.com; links befindet sich das Icon, in der Mitte die gestartete App und recht dis App im Betriebssystem. Quelle Haeme Ulrich

Ein System mit Apps

Wie bei der Audioausgabe sind auch für die App-Erstellung noch Plug-ins zur Erweiterung der WordPress-Funktionalitäten notwendig. Besonders gut geeignet ist das Plug-in „Progressiv WordPress (PWA)“. Es stammt von der Schweizer WordPress-Agentur „Say Hello“. Das Plug-in ist kostenfrei und steht im öffentlichen Plug-in-Verzeichnis von Wordpress bereit. Ist das Plug-in installiert, taucht im Backend von WordPress die Abteilung „Progressive WP“ auf – Abbildung 08. Die App lässt sich einfach über die drei Kategorien „Add to Homescreen“, „Offline Nutzung“ und „Push Notifications“ konfigurieren. Besonders clever ist die Integration der Push-Nachrichten. Hier ist der kostenlose Push-Dienst „Firebase“ von Google angebunden. Konfiguration und Aktivierung sind mit wenigen Mausklicks erledigt.

Darstellungsmöglichkeiten

Abb. 08 Die Optionen für die PWA; im Beispiel soll die App in einer separaten Browser-Instanz gestartet werden, damit das Verhalten genau gleich wie bei der klassischen nativen App ist. Quelle Haeme Ulrich.

App-Download anbieten

Sind die Optionen des Plug-ins eingestellt, ist die App fertig. Damit sie ein Benutzer verwenden kann, muss sie nicht in einen App-Store geladen werden. Wer mit einem kompatiblen Browser die WordPress-Website aufruft, kommt die Option angeboten, die App bzw. Website zu installieren – Abbildung 09. Neuere Versionen der Browser „Chrome“ und „Edge“ zeigen die Option sogar auf dem Desktop an.

Screenshot

Abb. 09 Hinweis, dass diese Website auch als App installiert werden kann. Quelle Haeme Ulrich

Der Markt verändert sich

Klingt fast zu gut, um wahr zu sein – denn Apple fährt bislang einen anderen Kurs. Würden PWAs die klassischen Apps aus den Stores ersetzen, dann müsste Apple auf Provision verzichten. Auch hätte das Unternehmen viel weniger Kontrolle über die Plattform iOS und das neue iPad OS. Kein Wunder also, dass Apple PWAs nicht so umfangreich unterstützt, wie es Android oder Microsoft tun.

Aktuell fehlen bei iOS das Empfangen von Push-Nachrichten und die aufpoppende Option, die App direkt zu installieren. Microsoft hingegen bekennt sich wie Google vollständig zu PWAs. Der neue Edge-Browser, der den Internet Explorer ersetzt, bietet volle Unterstützung. Der „Microsoft Store“ auf Windows 10 zeigt sogar PWAs wie normale Apps an. Es dürfte sich aber nur um eine Frage der Zeit handeln, bis Apple nachzieht oder nachziehen muss. Dann sind der neuen Welt der Progressive Web Apps Tür und Tor geöffnet.

Mehr zum Thema WordPress

Publizieren mit Wordpress - Teil 1
Meist wird die Anwendung WordPress mit dem Schreiben und Veröffentlichen von Blogs gleichgesetzt. Aber das System kann ganz klar mehr, auch für die Technische Kommunikation. Doch starten wir zunächst mit einem Überblick, der die Idee und die Umsetzung von WordPress veranschaulicht. Erschienen in Ausgabe 04/19

Publizieren mit Wordpress - Teil 2
Heute werden nicht nur die meisten Webseiten mit WordPress erstellt. Inhalte lassen sich auch in anderen Kanälen ausgeben. Einer davon verspricht eine flexible Ausgabe für den Druck, zum Beispiel als Gebrauchsanleitung. Erschienen in Ausgabe 05/19

 

Quelle CSH