Disable Mobile Horizontal Scroll - WordPress Plugin

Ein WordPress-Plugin, das horizontales Scrollen auf Mobilgeräten verhindert, um eine bessere Benutzererfahrung zu gewährleisten.

📋 Inhaltsverzeichnis

• Beschreibung
• Funktionen
• Installation
• Verwendung
• Einstellungen
• Technische Details
• Anforderungen
• Häufig gestellte Fragen
• Changelog
• Entwicklung
• Lizenz
• Mitwirkende

📝 Beschreibung

Das Plugin Disable Mobile Horizontal Scroll verhindert das horizontale Scrollen auf Mobilgeräten (Smartphones, Tablets und optional Desktop). Es ist besonders nützlich, wenn Ihre WordPress-Website auf mobilen Geräten versehentlich horizontal scrollbar wird, was zu einer schlechten Benutzererfahrung führt.

Problem, das gelöst wird

Häufige Ursachen für horizontales Scrollen auf mobilen Geräten:

• Zu breite Bilder oder Medien
• Elemente mit fester Breite, die größer als der Viewport sind
• CSS-Fehler oder Konflikte
• Responsive Design-Probleme
• Drittanbieter-Plugins oder Widgets

Dieses Plugin behebt diese Probleme durch eine Kombination aus CSS und JavaScript.

✨ Funktionen

• ✅ Verhindert horizontales Scrollen auf Mobilgeräten (bis 768px)
• ✅ Verhindert horizontales Scrollen auf Tablets (768px - 1024px)
• ✅ Optional: Verhindert horizontales Scrollen auf Desktop (über 1024px)
• ✅ Einstellbare maximale Breite der Website
• ✅ Touch-Gesten-Blockierung für horizontales Scrollen
• ✅ Automatische Überwachung von DOM-Änderungen
• ✅ Responsive Design-Unterstützung
• ✅ Leichtgewichtige Lösung ohne Performance-Einbußen
• ✅ Admin-Einstellungsseite für einfache Konfiguration
• ✅ Kompatibel mit allen WordPress-Themes

🚀 Installation

Methode 1: Manuelle Installation

1. Plugin herunterladen

   • Laden Sie das Plugin als ZIP-Datei von GitHub herunter
   • Oder klonen Sie das Repository:

     git clone https://github.com/Blitz1990/disable-mobile-horizontal-scroll.git

2. Plugin hochladen

   • Melden Sie sich in Ihrem WordPress-Admin-Bereich an
   • Navigieren Sie zu Plugins → Installieren
   • Klicken Sie auf Plugin hochladen
   • Wählen Sie die ZIP-Datei aus und klicken Sie auf Jetzt installieren

3. Plugin aktivieren

   • Nach der Installation klicken Sie auf Plugin aktivieren
   • Das Plugin ist sofort einsatzbereit mit Standardeinstellungen

Methode 2: Installation über FTP/SFTP

1. Plugin-Dateien hochladen

   • Verbinden Sie sich mit Ihrem Server über FTP/SFTP
   • Navigieren Sie zum WordPress-Verzeichnis: /wp-content/plugins/
   • Laden Sie den gesamten disable-mobile-horizontal-scroll Ordner hoch

2. Plugin aktivieren

   • Melden Sie sich im WordPress-Admin an
   • Gehen Sie zu Plugins
   • Suchen Sie nach Disable Mobile Horizontal Scroll
   • Klicken Sie auf Aktivieren

Methode 3: Installation über WP-CLI

cd /pfad/zu/wordpress
wp plugin install /pfad/zur/plugin-zip.zip --activate

📖 Verwendung

Nach der Aktivierung funktioniert das Plugin automatisch mit den Standardeinstellungen:

• ✅ Aktiviert auf Mobilgeräten (bis 768px)
• ✅ Aktiviert auf Tablets (768px - 1024px)
• ❌ Deaktiviert auf Desktop (über 1024px)
• Maximale Breite: 1920px

Plugin-Einstellungen anpassen

1. Navigieren Sie zu Einstellungen → Mobile Scroll
2. Passen Sie die Einstellungen nach Ihren Bedürfnissen an:
   • Aktivieren/Deaktivieren für verschiedene Geräte
   • Maximale Breite der Website festlegen
3. Klicken Sie auf Einstellungen speichern

⚙️ Einstellungen

Auf Mobilgeräten aktivieren

• Standard: Aktiviert
• Beschreibung: Verhindert horizontales Scrollen auf Smartphones (bis 768px Breite)
• Empfohlen: Aktiviert lassen

Auf Tablets aktivieren

• Standard: Aktiviert
• Beschreibung: Verhindert horizontales Scrollen auf Tablets (768px - 1024px Breite)
• Empfohlen: Aktiviert lassen

Auf Desktop aktivieren

• Standard: Deaktiviert
• Beschreibung: Verhindert horizontales Scrollen auf Desktop-Geräten (über 1024px Breite)
• Empfohlen: Nur aktivieren, wenn Sie auch auf Desktop horizontales Scrollen verhindern möchten

Maximale Breite (px)

• Standard: 1920px
• Beschreibung: Maximale Breite der Website in Pixeln
• Empfohlen: Passen Sie dies an Ihre Website-Design an

🔧 Technische Details

Dateistruktur

disable-mobile-horizontal-scroll/
├── disable-mobile-horizontal-scroll.php  # Haupt-Plugin-Datei
├── assets/
│   ├── css/
│   │   └── disable-scroll.css            # CSS-Dateien
│   └── js/
│       └── disable-scroll.js             # JavaScript-Dateien
├── README.md                              # Diese Datei
├── README.txt                             # WordPress-Plugin-Header-Info
└── .gitignore                             # Git-Ignore-Datei

Wie es funktioniert

1. CSS-Basis:

   • Setzt overflow-x: hidden auf html und body
   • Begrenzt die maximale Breite aller Elemente
   • Verhindert horizontales Scrollen durch Media Queries

2. JavaScript-Erweiterung:

   • Blockiert Touch-Gesten für horizontales Scrollen
   • Überwacht DOM-Änderungen in Echtzeit
   • Verhindert horizontales Scrollen mit Maus/Trackpad
   • Passt sich automatisch an Bildschirmgrößenänderungen an

3. Responsive Design:

   • Unterscheidet zwischen Mobile, Tablet und Desktop
   • Kann für jede Geräteklasse einzeln aktiviert/deaktiviert werden

Hooks und Filter

Das Plugin verwendet folgende WordPress-Hooks:

• wp_enqueue_scripts - Lädt CSS und JavaScript
• admin_menu - Erstellt Admin-Menü
• admin_init - Registriert Einstellungen
• register_activation_hook - Aktivierungs-Hook
• register_deactivation_hook - Deaktivierungs-Hook

Performance

• Minimale Auswirkungen: Das Plugin ist sehr leichtgewichtig
• Keine Datenbankabfragen: Nutzt nur WordPress-Optionen
• Optimiertes Laden: CSS und JS werden nur im Frontend geladen
• Keine jQuery-Abhängigkeit: Reines Vanilla JavaScript

📋 Anforderungen

Systemanforderungen

• WordPress: 5.0 oder höher
• PHP: 7.4 oder höher
• Browser: Alle modernen Browser (Chrome, Firefox, Safari, Edge)
• Mobile: iOS Safari, Chrome Mobile, Samsung Internet

Getestet mit

• WordPress 5.0 - 6.4
• PHP 7.4 - 8.2
• Alle gängigen WordPress-Themes
• WooCommerce (kompatibel)
• Elementor (kompatibel)
• Gutenberg (kompatibel)

❓ Häufig gestellte Fragen

Funktioniert das Plugin mit allen Themes?

Ja, das Plugin ist mit allen WordPress-Themes kompatibel. Es verwendet Standard-CSS-Eigenschaften, die von allen modernen Browsern unterstützt werden.

Beeinträchtigt das Plugin die Performance?

Nein, das Plugin ist sehr leichtgewichtig und hat minimale Auswirkungen auf die Performance. CSS und JavaScript werden nur einmal pro Seite geladen.

Kann ich das Plugin für bestimmte Seiten deaktivieren?

Aktuell nicht direkt über die Benutzeroberfläche, aber Sie können es programmatisch deaktivieren:

// In functions.php Ihres Themes
add_action('wp_enqueue_scripts', function() {
    if (is_page('seiten-slug')) {
        wp_dequeue_style('disable-mobile-horizontal-scroll-css');
        wp_dequeue_script('disable-mobile-horizontal-scroll-js');
    }
}, 99);

Was passiert, wenn ich das Plugin deaktiviere?

Alle Einstellungen werden gespeichert, aber das horizontale Scrollen wird nicht mehr verhindert. Ihre Website funktioniert wieder wie vorher.

Funktioniert es mit Page Buildern?

Ja, das Plugin funktioniert mit allen gängigen Page Buildern wie Elementor, Beaver Builder, Divi, etc.

Verhindert das Plugin auch vertikales Scrollen?

Nein, das Plugin verhindert nur horizontales Scrollen. Vertikales Scrollen bleibt vollständig funktionsfähig.

Kann ich die maximale Breite für verschiedene Geräte unterschiedlich setzen?

Aktuell gibt es eine globale Einstellung für die maximale Breite. Für gerätespezifische Einstellungen können Sie die CSS-Datei anpassen oder einen Support-Request erstellen.

📝 Changelog

Version 1.0.0 (2024)

• ✨ Erste Veröffentlichung
• ✅ Verhindert horizontales Scrollen auf Mobilgeräten
• ✅ Verhindert horizontales Scrollen auf Tablets
• ✅ Optionale Desktop-Unterstützung
• ✅ Admin-Einstellungsseite
• ✅ Touch-Gesten-Blockierung
• ✅ Automatische DOM-Überwachung
• ✅ Responsive Design-Unterstützung

🔨 Entwicklung

Lokale Entwicklungsumgebung einrichten

1. Repository klonen:

   git clone https://github.com/Blitz1990/disable-mobile-horizontal-scroll.git
   cd disable-mobile-horizontal-scroll

2. Plugin in WordPress einbinden:

   • Symlink oder Kopie in /wp-content/plugins/ erstellen
   • Plugin in WordPress aktivieren

3. Entwicklung:

   • CSS-Dateien bearbeiten: assets/css/disable-scroll.css
   • JavaScript-Dateien bearbeiten: assets/js/disable-scroll.js
   • PHP-Dateien bearbeiten: disable-mobile-horizontal-scroll.php

Beitragen

Beiträge sind willkommen! Bitte:

1. Forken Sie das Repository
2. Erstellen Sie einen Feature-Branch (git checkout -b feature/AmazingFeature)
3. Committen Sie Ihre Änderungen (git commit -m 'Add some AmazingFeature')
4. Pushen Sie zum Branch (git push origin feature/AmazingFeature)
5. Öffnen Sie einen Pull Request

Code-Standards

• PHP: WordPress Coding Standards
• JavaScript: ES6+ mit modernen Best Practices
• CSS: Standard CSS mit Kommentaren

Testen

Vor dem Einreichen eines Pull Requests bitte testen:

• ✅ Aktivierung/Deaktivierung
• ✅ Verschiedene Bildschirmgrößen
• ✅ Verschiedene Browser
• ✅ Verschiedene WordPress-Themes
• ✅ Kompatibilität mit anderen Plugins

📄 Lizenz

Dieses Plugin ist lizenziert unter der GPL v2 oder höher.

Copyright (C) 2024 Oliver Bosen

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

👥 Mitwirkende

• Entwickler: Oliver Bosen
• Beitragende:

📞 Support

Bei Fragen oder Problemen:

• GitHub Issues: https://github.com/Blitz1990/disable-mobile-horizontal-scroll/issues
• E-Mail: support@yourwebsite.com
• WordPress.org Support: (falls veröffentlicht)

🌟 Credits

• Entwickelt mit ❤️ für die WordPress-Community
• Inspiriert von der Notwendigkeit, mobile Benutzererfahrungen zu verbessern

---

Viel Erfolg mit dem Plugin! 🚀

Wenn Ihnen das Plugin gefällt, erwägen Sie bitte, einen Stern ⭐ auf GitHub zu geben!