Ich will auf deinen Home-Screen - WordPress als "App" für Smartphones - Guru 2.0
Ich will auf deinen Home-Screen – WordPress als “App” für Smartphones

Ich will auf deinen Home-Screen – WordPress als “App” für Smartphones

Die eigenen Seite auf den Home-Screen speichern

Die eigenen Seite auf den Home-Screen speichern

Sobald es uns gelingt mit unserer Webseite oder unseren Blog auf die Startseite des Browsers oder noch besser auf den Homescreen des Smartphones kommen haben wir es geschafft. Dann sind wir wirklich im Herzen unserer Anwender und für sie unentbehrlich geworden.

Daher sollten wir es ihnen auch so leicht als möglich machen. Für uns ist das natürlich ein wenig schwieriger, denn wir müssen einiges zusammenstellen, damit es gut klappt.

1. Die Symbole vorbereiten oder erweitere deinen Header

Eigentlich sollte es heute schon Standard sein die notwendigen Icons, FavIcons und TouchIcons auf der Webseite darzustellen. Aber es gibt noch immer Fälle in denen irgendwas fehlt. Am einfachsten erledigen wir dies mit einem Generator und alles was du dazu brauchst ist ein möglichst quadratisches Logo/Grafik welche für deine Seite steht.
Am Ende erhältst du bei diesem Generator eine Möglichkeit die generierten Dateien als zip-Datei herunterzuladen und die notwendigen Quellcode-Zeilen für das head-Element. Nach dem du die zip-Datei gespeichert und entpackt hast, lädst du die ganzen Grafiken mit ftp (Verwende dazu zum Beispiel FileZilla oder CyberDuck) in das root-Verzeichnis (Das Hauptverzeichnis ist das, in dem der Ordner /wp-content/ steht.) deiner WordPress-Installation.
Und jetzt musst du die Datei header.php in deinem aktiven Theme öffnen. Die Codezeilen vom Generator kopierst du in das head-Element. Du findest irgendwo die Zeile < ?php wp_head(); ?> und genau davor ist ein guter Platz für die ganzen Icons.

2. Ein kleiner Hinweis für deine Anwender

Damit deine Anwender auch wissen, dass du auf ihren Home-Screen willst, können wir ihnen ein kleines Fenster zeigen. Manchmal hilft ja ein kleiner Schubs damit das passiert, was wir erwarten.
Dazu können wir in der Datei footer.php von deinem WordPress-Theme den folgenden MarkUp einfügen. Auch hier gibt es einen guten Platz, nämlich genau vor der Zeile < ?php wp_footer(); ?>.

Die Info-Box haben wir jetzt fertig! Aber damit sie auch so gut aussieht, wie unser Beispiel am Anfang des Artikels brauchen wir ein wenig CSS. Dieses kannst du auch in dein aktives WordPress-Theme einfügen. Dazu brauchst du die Datei style.css. Ganz am Ende der Datei kannst du nun die Stile für deine Box einfügen.

Nun “sieht” das ganze schon hübsch aus, wenn da nicht die Zeile 8 wäre, welche die gesamte Box ausblendet. Außerdem fehlen dir noch zwei Bilder:

  • Das Symbol für den Home-Screen
    Home-Icon für die Hinweis-Box
  • Der Schließen-Knopf
    Close-Button für die Hinweis-Box

Beide Bilder kannst du dir mit einem Rechtsklick speichern. Dann lädst du sie mit ftp wieder in dein aktives Theme von WordPress. Im Theme-Ordner findest du entweder das Verzeichnis /images/ oder musst es dir erst anlegen. Denn genau dort sollen die beiden Bilder abgelegt werden.
Falls du schon ungeduldig bist und die Hinweis-Box gleich sehen willst, dann lösche einfach die Zeile 8 von dem vorherigen CSS.

3. Benutzerkomfort mit JavaScript

Da wir unsere Hinweisbox ausgeblendet haben, müssen wir es schaffen sie wieder einzublenden. Wir machen das erst, wenn die Seite nach unten gescrollt wird. Dadurch haben wir einerseits einen Hingucker, der Aufmerksamkeit erregt. Andererseits eine gute User-Experience, denn du zeigst den Hinweis erst an, wenn mit deinem Blog interagiert wird.
Dazu brauchen wir JavaScript und jQuery muss in deinem Theme aktiv sein. Den folgenden Codeblock kannst du genau nach der Slide-Box in die footer.php einfügen.

So nun hast du alles fertig erledigt und deine Seite kann auf dem Home-Bildschirm deiner Anwender abgelegt werden.

4. Noch ein Tipp!

Wir haben hier alles im aktiven Theme erledigt, dadurch gehen alle Änderungen bei einem Update verloren. Besser wäre es, wenn du mit einem Child-Theme arbeiten würdest. Wie das geht kannst du in diesem Post nachlesen. Erst mit der Methode bleiben deine Änderungen nach einem Update erhalten.

Ach ja, falls du Fragen hast, dann schreibe einen Kommentar. Der Guru 2.0 freut sich immer über einen Hinweis von dir!

Es wurden 6 Kommentare zu diesem Beitrag geschrieben.

  • sven

    in der HTML-Datei steht in der Zeile 7: Auf “<img … BILD " klicken … "

    Ich habe jetzt das Bild (apphome.png) und kann auch darauf klicken. Aber es passiert nichts. Fehlt bei dem Bild nicht noch irgendeine Aktion, damit es dem Homebildschirm hinzugefügt werden kann?

    Vielleicht noch der Hinweis: Das "Das Symbol für den Home-Screen" kann heruntergeladen werden heißt dann aber home_icon.png. Im Code wird aber "apphome.png" benötigt.

    • Guru 2.0 Autor

      Danke!
      Den Dateinamen habe ich oben im Quellcode angepasst.
      Aber das direkte hinzufügen geht nicht, denn das verbieten die Betriebssystem. Die Bubble ist nur ein Hinweistext für den Anwender, dass er es selber tun soll und auch wie er es schafft

  • Jonas

    Gute Anleitung, allerdings gibt es wohl im php einen Fehler. Bei mir wird ab Zeile 9 alles auskommentiert, was wohl an einem überflüssigen / am Ende von Zeile 8 liegt.

    Allerdings wird mir auch nach der Korrektur dessen die Box nicht angezeigt. Lediglich der Inhalt in Textform…

    • Guru 2.0 Autor

      Danke stimmt, da ist ein Schrägstrich zu viel. Warum den WordPress hartnäckig hinschreibt kann ich noch nicht sagen.

      Für das Formatieren musst du das CSS auch einfügen und natürlich die beiden Grafik auch hochladen.

      • Jonas

        Hi,
        das habe ich natürlich beides gemacht. Allerdings wird mir keine Box angezeigt, sondern der Text steht einfach “unverarbeitete” unterhalb des Footers.

        • Guru 2.0 Autor

          Wenn Du es online hast, schick mir doch einen Link per eMail. Ich schaue es mir gerne an.
          Sonst könnte ich mir vorstellen, dass es irgendwo ein Problem mit JavaScript gibt.
          Hast du jQuery geladen oder zeigt dir die Konsole eine Fehlermeldung an.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.