Tutorials in WordPress schreiben – 3 Versuche

Wie könnte ein Tutorial in WordPress aussehen? Bei diesem Beitrag brauche ich Ihre Hilfe! – Ich plane in Zukunft mehr How-To Artikel zu schreiben und suche nach einem guten Struktur dafür. Ich stelle drei mögliche Vorgangsweisen vor: Eine Version verwendet ganz normal WordPress, eine Variante nutzt den WordPress Plugin Accordion und die dritte Option nutzt den H5P-Inhaltstyp Agamotto. Am Ende des Beitrags gibt es eine anonyme Umfrage. Bitte beteiligen Sie sich!

Warum möchte ich Tutorials in WordPress schreiben?

OERcamp als Motivation

Ich plane in meinem Weblog in Zukunft stärker How-To Artikel zu schreiben. Also kleine Tutorials, die Schritt-für-Schritt eine Prozedur beschreiben. Angeregt dazu hat mich meine Teilnahme an den wunderbaren OERcamp-Webtalks, an denen ich mit Begeisterung teilnehme. Es sind alle Themen hoch interessant, besonders angetan aber bin ich (natürlich) von der Reihe zu H5P mit Oliver Tacke aber – Überraschung!! – auch von Open Source Tools mit Guido Brombach.

Guido behandelt ein Thema, das ich jetzt als Privatperson in der Pension, wo ich auf keine Unterstützung von der Uni in der Serveradministration mehr zurückgreifen kann, extrem gut brauchen kann. Ohne institutionelle Abhängigkeiten kann ich endlich Ideen generieren, die sich nicht mehr an akademischen Zwängen ausrichten müssen (Publizieren, Drittmittel einwerben, Personalführung, Administration). Mein Verständnis von Bildungstechnologie ist zwar stark didaktisch orientiert, aber ich brauche trotzdem auch eine technologischen Infrastruktur für Experimente und Demonstrationen. Andernfalls bleiben die Ideen nur belanglose Theorie, die nicht praxistauglich sind.

Gedankensplitter verschriftlichen

Ich bin mit der praktischen Installation von Serversoftware recht unerfahren. Da kommt mir die Reihe von Guido natürlich sehr entgegen. Aber bei der Umsetzung habe ich zwei Dinge bemerkt:

  • Es treten immer wieder Schwierigkeiten auf, die in den Videos nicht behandelt worden sind.
  • Ich muss mir alle Prozeduren selbst Schritt-für-Schritt zurecht legen, wenn ich sie nicht vergessen will.

Genau deshalb führe ich auch mein Blog "Gedankensplitter". Beim Niederschreiben, bin ich gezwungen, die einzelnen Ideen durch zu denken und bei der Verschriftlichung zu konkretisieren. Und für eine Öffentlichkeit zu schreiben, verlangt – für mich zumindest – weit mehr Disziplin und Genauigkeit, als private Notizen es erfordern würden.

Ich plane daher in Zukunft, die für mich neuen Prozeduren als tutorielle Anleitungen zum Lernen – aber auch zum späteren Nachschauen – als Blogartikel, niederzuschreiben. Ich hege natürlich die leise Hoffnung, dass dieser Lernprozess nicht nur für mich interessant ist.

Deshalb bin ich seit ein paar Wochen auf der Suche nach einer WordPress-Erweiterung, die das Schreiben von Tutorials erleichtert. Ich habe mir so eine Art Schritt-für-Schritt-Anleitung vorgestellt, die viele Bilder verwendet. Das konkrete Vorbild für diese vage Beschreibung ist mir plötzlich beim Schreiben dieser Zeilen mit wikiHow eingefallen. – Wieder so ein Beispiel, warum für mich der Schreibprozess wichtig ist!

WikiHow als Strukturmuster

Drei Beispiele von wikiHow sollen zeigen, was ich mir konkret vorstelle:

  • How to Stop the Spread of Covid-19: Aktueller Artikel, von einer Expertin geschrieben und mit wunderschönen Illustrationen für eine Schritt-für-Schritt-Anleitung versehen.
  • Medizinische Masken tragen: Es gibt auch eine deutschsprachige Abteilung von wikiHow.
  • How to Create a Desktop Shortcut Sowohl beim Computer als auch beim Bildungsthema Thema habe ich jedoch (bisher?) keine besonders guten/interessanten Beispiele gefunden. Sie sind auch meistens nicht die schönen wikiHow Zeichnungen illustriert.

Warum "Gedankensplitter" und nicht wikiHow?

Ein wichtiger Vorteil bei wikiHow ein How-To zu schreiben, besteht sicherlich darin, dass die Webseite extrem gute Zugriffszahlen hat. Bei fast jeder Frage mit "how to" liegt wikiHow bei den Suchmaschinen ganz vorne.

Ein anderer Vorteil sind die wirklich gut gelungenen Illustrationen, die sowohl übersichtlich, verständlich und didaktisch gut aufbereitet sind.

Ich sehe allerdings einige Nachteile, die mich abschrecken:

  • Ich müsste die Regeln und Syntax von wikiHow für meinen Schreibprozess lernen.
  • Es gibt einen Reviewprozess, d.h. ich muss mich den wikiHow Regeln "beugen" und auf eine Freigabe warten.
  • Wie bei Wikis üblich, können alle in den Artikel eingreifen und Ergänzungen, Änderungen etc. durchführen. Das geht auch ohne Registrierung. Ich möchte mich aber nicht mit anderen darüber streiten, ob meine zusammengestellte Schrittfolge optimal ist.
  • Die wunderschönen Bilder bei den obigen ersten beiden Beispielen werden von einer großen Gruppe, die als "Wikivisual team" firmiert, gezeichnet. Es sind (wahrscheinlich) keine freiwilligen Autor:innen, sondern (vermutlich) a massive group of freelance illustrators, primarily a “core group of artists in the Philippines.” Um diese sehr informativen und gut verständlichen Illustrationen zu erhalten, muss allerdings bei wikiHow extra angesucht werden. Da ist es natürlich keineswegs gesichert, ob ich mit meinem Spezialthemen interessant genug dafür bin. Womit ein weiterer potentieller Vorteil von wikiHow fraglich geworden ist.

Aus all diesen Gründen ziehe ich die einfachere Möglichkeit, in meinem eigenen Weblog Tutorials zu schreiben, vor.

Coverbild für "Tutorials in WordPress schreiben": Eine mechanische Schreibmaschine mit einem eingespannten Blatt Papier auf dem groß "Tutorial" steht.
Das Coverbild dieses Artikel stammt von Markus Winkler auf Pixabay

Drei Varianten zur Auswahl

Mit meinem Twitter-Aufruf für einen WordPress-Plugin zum vereinfachten Schreiben von Tutorials war ich leider nicht erfolgreich.

Meine erfolgloser Twitter-Rundruf

Es kamen keine konkreten Vorschläge als Rückmeldung. Neben der Idee H5p-Agamotto als Tutorial zu nutzen, hatte ich selbst inzwischen noch eine weitere Idee: Nämlich eine Accordion WordPress-Erweiterung zu verwenden. Ich habe mich dabei für Accordion FAQ von wpshopmart entschieden.

Als praktisches Beispiel, habe ich gleich die nicht besonders spektakuläre Anmeldung bei Uberspace.de aus dem ersten Video von Guido Brombach hergenommen.

Folge 1 der OERcamp-Webtalk Reihe Open Source Tools: Der eigene Server, auch wenn du bisher dachtest keinen zu haben

Über meine Erfahrungen mit Uberspace.de schreibe ich später mal ausführlicher. Jetzt geht es mir vor allem um die drei Varianten für ein Tutorial-Strukturmuster:

  • "Normaler" WordPress-Artikel
  • Nutzung des WordPress-Plugins Accordion FAQ
  • Nutzung von H5P-Inhaltstyp Agamotto

Ich finde alle drei Spielarten recht interessant und weiß noch nicht so recht, welche ich nützen soll. Deshalb stelle ich alle drei Versionen im Vergleich vor und habe am Ende des Artikels eine Umfrage eingefügt. Bitte helfen Sie mir und geben Sie Ihre Stimme ab!

Versuch 1: Tutorials in WordPress ohne weitere Hilfsmittel

So ganz ohne Hilfsmittel ist das nachfolgende Tutorial nicht geschrieben. Ich nutze die WordPress-Erweiterung Simple Lightbox. Damit können die Bilder mit einem Klick im Originalformat angesehen werden und alle Bilder – wie bei einer Diashow –, durchgesehen werden. Der automatische Wechsel der Bilder kann bei jedem Lightbox-Bild rechts oben auch ausgeschaltet werden.

Außerdem habe ich ein wenig in meiner CSS-Datei herum gefummelt, damit die einzelnen Bilder ein wenig ansprechender aussehen. Das ist sicherlich noch ausbaufähig; ich habe nur rudimentäre CSS-Kenntnisse.

Screenshot of a part of the Uberspace start page
Step 1: Go to the URL of Uberspace and scroll to the middle of the start page.
  • Go to the start page of your hosting service. This tutorial uses Uberspace
  • Scroll to the middle of the page and click on the link SIGN ME UP!
Screenshot of the Uberspace registration page.
Step 2: Choose username and fill it in the form of the Uberspace registration page.
  1. Fill in your username and tick the check box to conform to the technical and social house rules.
  2. Check if your username is still available.
  3. Think again about your chosen username. You can't change it anymore. It will be the first part of the URL, followed by the server address.
Screenshot of Uberspace page asking for additional information. First part: eMail address
Step 3: After creating your account Uberspace asks for additional information. First part: eMail

Uberspace comes back after some moment with this new form. Meanwhile, your username was filed in the Uberspace database, and you are already logged in. What you here see is the first part of the form.

  1. Also, you have already gotten an email address.
  2. But for security reasons, it is highly recommended to give them another email address. Whenever you forgot your password, you can apply for a new password sent to your email account. Otherwise, you are locked out from your webspace.
Screenshot of Uberspace page asking for additional information. Second part: password and price.
Step 4: Uberspace asking for additional information. Second part: Password and price

After scrolling down, you will see this second part of the form.

  1. Provide a password to enter later the admin pages of your webspace. 
  2. This password has nothing to do with the password you will use to access the server via SSH or SFTP. (Secure Shell resp. Secure File Transfer Protocol will be explained in another tutorial.)
  3. The first month is free. After that, you have three paying options. All of them have the same services but differ in your financial contribution to the hosting service. You can always later change your decision.
  4. Then click the "Make it so" button.
  5. Be patient. It can take several minutes till your server space is ready for you to access.
Screenshot of the success page of the Uberspace registration process
Step 5: Success page of the registration process.
  1. When you see this page, your registration process was successful.
  2. There are many helpful resource in the Uberspace manual and wiki. But if you are still stuck don't be shy and ask the people at Uberspace directly via email. 

Versuch 2: Tutorials in WordPress mit Plugin Accordion

Diesen zweiten Versuch für ein Tutorial habe ich unter Verwendung der WordPress-Erweiterung Accordion geschrieben. Im Gegensatz zum gleichnamigen H5P-Inhaltstyp lassen sich bei dieser WordPress Implementierung alle Elemente gemeinsam aufklappen und es können sogar auch Bilder integriert werden.

Ich beginne mit einer komplett aufgeklappten Version. Die einzelnen Schritte lassen sich zu klappen. Im aufgeklappten Zustand können alle Inhalte des Tutorials ausgedruckt werden. Außerdem ist auch hier die Lightbox-Funktion aktiv.

Ich benutze die beiden Plugins Accordion und Simple Lightbox das erste Mal. Was ich nicht wusste:

  • Es werden alle Überschriften der einzelnen Elemente des Accordions als Zwischenüberschriften in das Inhaltsverzeichnis geschrieben. (Ich habe das aber hier über die Anpassung meines Plugins LuckyWP Table of Contents ausgeschaltet.
  • Wenn keine eigene Bildunterschrift vorhanden ist, dann nimmt die WordPress-Erweiterung Simple Lightbox den Text vom HTML-Alt-Tag als Bildbeschriftung.
Screenshot of a part of the Uberspace start page
  1. Go to the start page of your hosting service. This tutorial uses Uberspace
  2. Scroll to the middle of the page and click on the link SIGN ME UP!
Screenshot of the Uberspace registration page.
  1. Fill in your username and tick the check box to conform to the technical and social house rules.
  2. Check if your username is still available.
  3. Think again about your chosen username. You can't change it anymore. It will be the first part of the URL, followed by the server address.
Screenshot of the Uberspace registration page. Uberspace comes back after some moment with this new form. Meanwhile, your username was filed in the Uberspace database, and you are already logged in. What you here see is the first part of the form.
  1. Also, you have already gotten an email address.
  2. But for security reasons, it is highly recommended to give them another email address. Whenever you forgot your password, you can apply for a new password sent to your email account. Otherwise, you are locked out from your webspace.
Screenshot of Uberspace page asking for additional information. Second part: password and price. After scrolling down, you will see this second part of the form.
  1. Provide a password to enter later the admin pages of your webspace.
  2. This password has nothing to do with the password you will use to access the server via SSH or SFTP. (Secure Shell resp. Secure File Transfer Protocol will be explained in another tutorial.)
  3. The first month is free. After that, you have three paying options. All of them have the same services but differ in your financial contribution to the hosting service. You can always later change your decision.
  4. Then click the "Make it so" button.
  5. Be patient. It can take several minutes till your server space is ready for you to access.
 
Screenshot of the success page of the Uberspace registration process.
  1. When you see this page, your registration process was successful.
  2. There are many helpful resource in the Uberspace manual and wiki. But if you are still stuck don't be shy and ask the people at Uberspace directly via email.

Versuch 3: Tutorials in WordPress mit H5P Agamotto

Dieses Beispiel habe ich bereits mit seinen Funktionen im Artikel H5P Agamotto als Tutorial vorgestellt und diskutiert. Ergänzend sei noch festgehalten, dass mit einem Klick auf den Schieberegler die verschiedenen Schritte des Tutorials auch mit den Cursor/Pfeil-Tasten gesteuert werden können. Ausdrucken ist allerdings nicht möglich.

Die Lightbox-Funktion funktioniert mit Agamotto nicht. Die einzelnen Bilder können jedoch durch rechten Mausklick (bei mir in macOS) in einem eigenen Browser-Tab in der Originalgröße betrachtet werden.

Umfrage zu "Tutorials in WordPress"

Die Umfrage verwendet ebenfalls mit YOP Poll einen für mich neuen WordPress Plugin. Ich habe daher noch keine Erfahrung damit und hoffe, dass alles klappt.

Die Idee Abstimmungen in WordPress einzubinden, wurde in der dritten Folge der Open Source Tools von Guido Brombach mit einer ganzen Reihe anderer Plugins besprochen. Allerdings hat Guido WP-Polls vorgeschlagen. Mit mehr als 90.000 Installationen ist WP-Polls gegenüber YOP Poll scheinbar im Vorteil. Tatsächlich hat er auch sehr viele Funktionen implementiert. Die Erweiterung wurde allerdings seit sieben Monaten nicht mehr aktualisiert und braucht Eingriffe in das WordPress Theme. Das ist mir (vorerst einmal) für meine Bedürfnisse zu kompliziert gewesen.

Ich lasse für die nachfolgende Abstimmung eine anonyme Stimmabgabe zu. Das heißt, es werden keine Cookies gesetzt und auch keine IP Adressen gespeichert und verglichen. (In der Hoffnung, dass Sie wirklich nur einmal Ihre Stimme abgeben!) Nutzen Sie auch die Kommentarfunktion dieser Seite um Ihre Meinung zu begründen.

Welcher der drei Versuche ein Tutorial in WordPress zu schreiben gefällt Ihnen am Besten?

Von Peter Baumgartner

Seit mehr als 30 Jahren treiben mich die Themen eLearning/Blended Learning und (Hochschul)-Didaktik um. Als Universitätsprofessor hat sich dieses Interesse in 13 Bücher, knapp über 200 Artikel und 20 betreuten Dissertationen niedergeschlagen. Jetzt in der Pension beschäftige ich mich zunehmend auch mit Open Science und Data Science Education.

Eine Antwort auf „Tutorials in WordPress schreiben – 3 Versuche“

Hi Peter, danke für den umfangreichen (!) Artikel. Als Freelancer arbeite ich sehr viel mit WordPress. Zufällig erhielt ich heute den Zuschlag für einen WordPress Auftrag mit YOP poll. Scheint ein tolles Plugin zu sein; ohne Fehler.

Schreiben Sie einen Kommentar

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