18.12.2023
Von Raimund Milde

So aktivieren Sie Mobile Pinch-Zoom im Divi Theme für WordPress

Mobile Pinch-Zoom im Divi Theme: Mehr Komfort für alle

Die Bedeutung von Zugänglichkeit auf Websites ist klar. Sie ermöglicht allen Nutzern, unabhängig von ihren Fähigkeiten, die Inhalte einer Website zu nutzen. Beim beliebten WordPress Divi Theme gibt es jedoch eine Herausforderung: Die Pinch-Zoom-Funktion, die auf mobilen Geräten eine wichtige Rolle für die Barrierefreiheit spielt, ist standardmäßig deaktiviert.

Im nächsten Abschnitt finden Sie eine detaillierte Anleitung zur Implementierung von Pinch-Zoom auf Ihrer Divi Website.

Inhaltsverzeichnis

Praktische Schritte zur Implementierung von Pinch-Zoom auf Ihrer WordPress Divi-Website

Ich werde Ihnen zwei Methoden vorstellen:

  • eine schnelle und einfache Lösung durch ein Plugin
  • eine fortgeschrittenere Option für Nutzer, die manuelles Programmieren bevorzugen und sich für ein Divi Child Theme entscheiden.

WordPress Plugin „Divi Zoom Fixer“ herunterladen und installieren

Mit dem kostenlosen „Divi Zoom Fixer“, meinem speziell für Divi Theme-Websites entwickelten WordPress-Plugin, können Sie ganz einfach die Pinch-Zoom-Funktion aktivieren.

Klicken Sie auf die Schaltfläche „Divi-Zoom fixer herunterladen“, um die ZIP-Datei des Plugins auf Ihren Computer herunterzuladen.

Divi Zoom Fixer Plugin installieren

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Gehen Sie zu „Plugins“ > „Neues Plugin hinzufügen“ in Ihrem Dashboard.
  3. Klicken Sie oben auf der Seite auf die Schaltfläche „Plugin hochladen“.
  4. Klicken Sie auf „Datei auswählen“ und wählen Sie die zuvor heruntergeladene ZIP-Datei des Plugins von Ihrem Computer aus.
  5. Klicken Sie auf „Jetzt installieren“, um das Plugin hochzuladen und zu installieren.
  6. Nach der Installation erhalten Sie eine Benachrichtigung, dass das Plugin erfolgreich installiert wurde. Klicken Sie auf „Plugin aktivieren“, um es in Ihrem WordPress-System zu aktivieren.

Überprüfen Sie die Zoom-Funktion auf Ihrem Smartphone

  • Öffnen Sie Ihre Website auf einem mobilen Gerät.
  • Löschen Sie den Browserverlauf und den Cache Ihres Browsers, um sicherzustellen, dass keine gespeicherten Daten die Überprüfung beeinflussen.
  • Versuchen Sie nun, mit zwei Fingern auf den Bildschirm zu zoomen. Die Pinch-Zoom-Funktion sollte jetzt aktiviert sein.

Code-Variante: Sie verwenden ein Divi Child-Theme

Möchten Sie schnell und einfach ein Divi Child Theme installieren? Hier klicken ▷

functions.php Datei über das WordPress-Dashboard bearbeiten

  1. Öffnen Sie Ihr WordPress-Dashboard.
  2. Navigieren Sie zu „Design“ (oder „Design anpassen“, je nach Ihrer WordPress-Version).
  3. Im linken Menü finden Sie die Option „Theme-Datei-Editor“ oder „Theme-Editor“. Klicken Sie darauf.
  4. In der Liste der Theme-Dateien auf der rechten Seite sehen Sie die functions.php Datei. Klicken Sie auf diese Datei, um sie zu öffnen.
  5. Fügen Sie den bereitgestellten Code am Ende der functions.php Datei ein.
  6. Speichern Sie die vorgenommenen Änderungen.

Es ist immer ratsam, vor jeder Änderung an der functions.php eine Sicherung Ihrer Website anzulegen, um im Falle unerwarteter Probleme auf eine funktionierende Version Ihrer Website zurückgreifen zu können.

Code:


// Aktion nach dem Theme-Setup hinzufügen
add_action('after_setup_theme', 'wt_remove_et_viewport_meta');
add_action('wp_head', 'wt_enable_pinch_zoom');

// Entfernen der Original Viewport Meta-Tags des Divi-Themes
function wt_remove_et_viewport_meta() {
	remove_action('wp_head', 'et_add_viewport_meta');
}

// Neuen Meta-Tag hinzufügen
function wt_enable_pinch_zoom() {
	echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.1, maximum-scale=10.0">';
}

Überprüfen Sie die Zoom-Funktion auf Ihrem Smartphone

  • Öffnen Sie Ihre Website auf einem mobilen Gerät.
  • Löschen Sie den Browserverlauf und den Cache Ihres Browsers, um sicherzustellen, dass keine gespeicherten Daten die Überprüfung beeinflussen.
  • Versuchen Sie nun, mit zwei Fingern auf den Bildschirm zu zoomen. Die Pinch-Zoom-Funktion sollte jetzt aktiviert sein.

Herzlichen Glückwunsch!

Mit Ihrem heutigen Schritt haben Sie bereits viel dazu beigetragen, die Zugänglichkeit Ihrer Divi WordPress-Website auf mobilen Geräten zu verbessern.

Denken Sie daran, vor jeder Änderung an Ihrer Website eine Sicherung zu erstellen.

Ich hoffe, dass dieser Artikel Ihnen bei Ihren Divi-Projekten hilfreich war. Wenn Sie weitere Fragen haben oder Unterstützung benötigen, zögern Sie bitte nicht, mich zu kontaktieren. Vielen Dank fürs Lesen und viel Erfolg mit Ihrer verbesserten Divi-Website!

* Dieses Plugin, „Divi Zoom Fixer“, steht unter der GNU General Public License, Version 2.0 (GPL-2.0). Es wird kostenlos zur Verfügung gestellt und darf unter den Bedingungen der GPL-2.0 verwendet, modifiziert und verbreitet werden.

Für weitere Informationen zur GPL-2.0-Lizenz besuchen Sie bitte GNU General Public License 2.0 – Offizielle Webseite.