wp-rules.php aktualisiert

README.md

@@ -1,93 +1,113 @@
-# WP Rules – Regelbereich mit Tabs für WordPress
+=== Multi Rules - Regelbereich mit Tabs für WordPress ===
+Contributors: M_Viper
+Tags: rules, tabs, shortcode, settings, admin, frontend, styling, import-export, responsive, accessibility
+Requires at least: 5.0
+Tested up to: 6.8
+Stable tag: 1.1
+License: GPLv2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+
+Ein modernes, benutzerfreundliches WordPress-Plugin zur Erstellung eines responsiven Regelbereichs mit Tabs – ideal für Server-Regeln (z. B. Minecraft, Discord, Communitys), AGBs, Verhaltensrichtlinien oder FAQ-Bereiche.
+
+Einfach per Shortcode `[meine_regeln]` einbinden – komplett anpassbar, ohne eine Zeile Code schreiben zu müssen.
+
+== Beschreibung ==
 
 Ein modernes, benutzerfreundliches WordPress-Plugin zur Erstellung eines **responsiven Regelbereichs mit Tabs** – ideal für Server-Regeln (z. B. Minecraft, Discord, Communitys), AGBs, Verhaltensrichtlinien oder FAQ-Bereiche.
 
 Einfach per Shortcode `[meine_regeln]` einbinden – komplett anpassbar, ohne eine Zeile Code schreiben zu müssen.
 
-## Features
+== Features ==
 
-- **Unbegrenzt viele Tabs und Regeln** mit Drag & Drop-Sortierung im Backend
+*   **Unbegrenzt viele Tabs und Regeln** mit Drag & Drop-Sortierung im Backend
-- **Willkommens-Tab** (optional ein-/ausblendbar) mit eigenem Editor & Hintergrundfarbe
+*   **Willkommens-Tab** (optional ein-/ausblendbar) mit eigenem Editor & Hintergrundfarbe
-- **Komplett anpassbares Styling** (Schriftgrößen, Farben für Tabs & Inhalte)
+*   **Komplett anpassbares Styling** (Schriftgrößen, Farben für Tabs & Inhalte)
-- **Animationen** beim Öffnen/Schließen der Regeln (optional)
+*   **Animationen** beim Öffnen/Schließen der Regeln (optional)
-- **Import/Export-Funktion** (JSON) – perfekt für Backups oder Multisite-Nutzung
+*   **Import/Export-Funktion** (JSON) – perfekt für Backups oder Multisite-Nutzung
-- **Responsive & Barrierefrei** (ARIA-konform, Tastaturbedienung)
+*   **Responsive & Barrierefrei** (ARIA-konform, Tastaturbedienung)
-- **Kein zusätzliches CSS/JS von außen** – alles im Plugin enthalten
+*   **Kein zusätzliches CSS/JS von außen** – alles im Plugin enthalten
-- **Shortcode:** `[meine_regeln]`
+*   **Shortcode:** `[meine_regeln]`
 
-## Screenshots
+== Installation ==
 
-## Screenshots
+1.  Lade das Plugin als ZIP herunter (Releases)
+2.  Gehe in WordPress zu **Plugins → Installieren → Hochladen**
+3.  Aktiviere das Plugin
+4.  Gehe zu **Multi Rules** und lege deine Tabs & Regeln an
+5.  Füge den Shortcode `[meine_regeln]` auf einer Seite ein
 
-| Frontend (Willkommen) | Frontend (Tabs + Regeln) |
+== Verwendung ==
-|---|---|
-| <img src="https://git.viper.ipv64.net/M_Viper/wp-rules-plugin/raw/branch/main/assets/001.png" alt="Backend" width="100%"> | <img src="https://git.viper.ipv64.net/M_Viper/wp-rules-plugin/raw/branch/main/assets/002.png" alt="Frontend" width="100%"> |
 
-<p style="text-align:center; color:#666; margin-top:20px;">
+Füge den folgenden Shortcode auf einer beliebigen Seite oder in einem Beitrag ein, um deine Regeln anzuzeigen:
-  ← Backend • Frontend →
-</p>
 
-## Installation
+`[meine_regeln]`
-
-1. Lade das Plugin als ZIP herunter (Releases)
-2. Gehe in WordPress zu **Plugins → Installieren → Hochladen**
-3. Aktiviere das Plugin
-4. Gehe zu **Einstellungen → Regeln-Plugin** und lege deine Tabs & Regeln an
-5. Füge den Shortcode `[meine_regeln]` auf einer Seite ein
-
-## Verwendung
-
-```shortcode
-[meine_regeln]
-```
 
 Das war’s! Der Regelbereich erscheint automatisch mit deinem Design.
 
-## Einstellungen
+== Einstellungen ==
 
-Unter **Einstellungen → Regeln-Plugin** findest du:
+Unter **Multi Rules** findest du:
 
-- Standard-Willkommens-Tab (mit WP-Editor)
+*   Standard-Willkommens-Tab (mit WP-Editor)
-- Tab- und Regelverwaltung mit Drag & Drop
+*   Tab- und Regelverwaltung mit Drag & Drop
-- Farb- und Schriftgrößen-Anpassungen (Live-Vorschau im Frontend)
+*   Farb- und Schriftgrößen-Anpassungen (Live-Vorschau im Frontend)
-- Animationen aktivieren/deaktivieren
+*   Animationen aktivieren/deaktivieren
-- Import & Export deiner kompletten Konfiguration
+*   Import & Export deiner kompletten Konfiguration
 
-## Entwicklung & Mitwirken
+== Screenshots ==
+
+| Frontend Willkommens-Ansicht | Frontend-Regel-Ansicht |
+|---|---|
+| <img src="https://git.viper.ipv64.net/M_Viper/Multi-Rules/raw/branch/main/assets/001.png" alt="Backend" width="100%"> | <img src="https://git.viper.ipv64.net/M_Viper/Multi-Rules/raw/branch/main/assets/002.png" alt="Frontend" width="100%"> |
+
+== Entwicklung & Mitwirken ==
 
 Das Plugin ist Open Source und wird aktiv weiterentwickelt.
 
-```bash
+`git clone https://git.viper.ipv64.net/M_Viper/Multi-Rules.git`
-git clone https://git.viper.ipv64.net/M_Viper/wp-rules-plugin.git
-```
 
 Pull Requests und Issues sind herzlich willkommen!
 
-## Support
+== Häufig gestellte Fragen ==
+
+= Funktioniert das Plugin mit meinem Theme? =
+
+Ja, das Plugin ist so konzipiert, dass es mit den meisten WordPress-Themes problemlos funktioniert. Es verwendet grundlegende HTML-Strukturen und CSS-Klassen, die bei Bedarf angepasst werden können.
+
+= Kann ich die Regeln auf mehreren Seiten mit unterschiedlichen Einstellungen anzeigen? =
+
+Aktuell werden die Regeln global aus den Einstellungen unter "Multi Rules" geladen und auf allen Seiten, die den Shortcode verwenden, identisch angezeigt.
+
+== Support ==
 
 Bei Fragen oder Problemen:
 
-- Telegram: [@M_Viper04](https://t.me/M_Viper04)
+*   Telegram: [@M_Viper04](https://t.me/M_Viper04)
 
-## Changelog
+== Changelog ==
 
-### 1.0 (24.11.2025)
+= 1.1 (24.11.2025) =
-- Erste stabile Version
+*   Umbenennung des Plugins von "WP Rules" zu "Multi Rules"
-- Vollständiger Repeater mit Tabs & Regeln
+*   Korrektur von Sicherheits- und Code-Qualitätsfehlern
-- Drag & Drop Sortierung
+*   Verbesserte Performance und Stabilität
-- Styling-Optionen
-- Import/Export
-- Animationen
-- Willkommens-Tab mit Hintergrundfarbe
 
-## Lizenz
+= 1.0 (24.11.2025) =
+*   Erste stabile Version
+*   Vollständiger Repeater mit Tabs & Regeln
+*   Drag & Drop Sortierung
+*   Styling-Optionen
+*   Import/Export
+*   Animationen
+*   Willkommens-Tab mit Hintergrundfarbe
+
+== Lizenz ==
 
 Dieses Plugin steht unter der **GNU General Public License v2.0**  
 → https://www.gnu.org/licenses/gpl-2.0.html
 
-## Danke!
+== Danke! ==
 
-Vielen Dank, dass du **WP Rules** nutzt!  
+Vielen Dank, dass du **Multi Rules** nutzt!  
 Dein Feedback macht das Plugin besser.
 
 *Made with ♥ by [M_Viper](https://m-viper.de)*

style.css

@@ -1,198 +1,199 @@
-/* CSS Variablen für ein modernes, konsistentes Design */
+/* Haupt-Container */
-:root {
+.regel-plugin-container {
-    --primary-color: #0073aa;
+    /* 
-    --primary-hover: #005a87;
+     * CSS Variablen für ein modernes, konsistentes Design 
-    --background-light: #f8f9fa;
+     * WICHTIG: Diese Variablen sind jetzt hier definiert, NICHT in :root,
-    --background-lighter: #ffffff;
+     * damit sie nur dieses Plugin beeinflussen und nicht das globale Theme.
-    --text-color: #2c3e50;
+     */
-    --text-muted: #6c757d;
+    --primary-color: #0073aa;
-    --border-color: #dee2e6;
+    --primary-hover: #005a87;
-    --border-radius: 8px;
+    --background-light: #f8f9fa;
-    --transition-speed: 0.25s;
+    --background-lighter: #ffffff;
-    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
+    --text-color: #2c3e50;
-    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+    --text-muted: #6c757d;
-    --shadow-lg: 0 8px 25px rgba(0,0,0,0.12);
+    --border-color: #dee2e6;
-}
+    --border-radius: 8px;
-
+    --transition-speed: 0.25s;
-/* Haupt-Container */
+    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
-.regel-plugin-container {
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
-    max-width: 900px;
+    --shadow-lg: 0 8px 25px rgba(0,0,0,0.12);
-    margin: 40px auto;
+
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    max-width: 900px;
-    background: var(--background-lighter);
+    margin: 40px auto;
-    border-radius: var(--border-radius);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    box-shadow: var(--shadow-lg);
+    background: var(--background-lighter);
-    overflow: hidden;
+    border-radius: var(--border-radius);
-    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-lg);
-}
+    overflow: hidden;
-
+    border: 1px solid var(--border-color);
-/* Tab-Navigation */
+}
-.regel-tabs-nav {
+
-    display: flex;
+/* Tab-Navigation */
-    background: var(--background-light);
+.regel-plugin-container .regel-tabs-nav {
-    border-bottom: 1px solid var(--border-color);
+    display: flex;
-    padding: 8px;
+    background: var(--background-light);
-}
+    border-bottom: 1px solid var(--border-color);
-
+    padding: 8px;
-.regel-tab-button {
+}
-    background: transparent;
+
-    border: none;
+.regel-plugin-container .regel-tab-button {
-    padding: 14px 24px;
+    background: transparent;
-    margin: 0 4px;
+    border: none;
-    cursor: pointer;
+    padding: 14px 24px;
-    font-weight: 600;
+    margin: 0 4px;
-    transition: all var(--transition-speed) ease;
+    cursor: pointer;
-    border-radius: 6px;
+    font-weight: 600;
-    flex-grow: 1;
+    transition: all var(--transition-speed) ease;
-    text-align: center;
+    border-radius: 6px;
-}
+    flex-grow: 1;
-
+    text-align: center;
-.regel-tab-button:hover {
+}
-    background: rgba(0, 115, 170, 0.05);
+
-}
+.regel-plugin-container .regel-tab-button:hover {
-
+    background: rgba(0, 115, 170, 0.05);
-.regel-tab-button.active {
+}
-    background: var(--background-lighter);
+
-    box-shadow: var(--shadow-sm);
+.regel-plugin-container .regel-tab-button.active {
-    border-bottom: 3px solid var(--primary-color);
+    background: var(--background-lighter);
-}
+    box-shadow: var(--shadow-sm);
-
+    border-bottom: 3px solid var(--primary-color);
-/* Tab-Panels (Inhalte) */
+}
-.regel-tabs-content .regel-tab-panel {
+
-    display: none;
+/* Tab-Panels (Inhalte) */
-    padding: 25px;
+.regel-plugin-container .regel-tabs-content .regel-tab-panel {
-    animation: fadeInUp 0.5s ease-out;
+    display: none;
-}
+    padding: 25px;
-
+    animation: fadeInUp 0.5s ease-out;
-.regel-tabs-content .regel-tab-panel.active {
+}
-    display: block;
+
-}
+.regel-plugin-container .regel-tabs-content .regel-tab-panel.active {
-
+    display: block;
-@keyframes fadeInUp {
+}
-    from { opacity: 0; transform: translateY(15px); }
+
-    to { opacity: 1; transform: translateY(0); }
+@keyframes fadeInUp {
-}
+    from { opacity: 0; transform: translateY(15px); }
-
+    to { opacity: 1; transform: translateY(0); }
-/* Akkordeon-Items (Regeln) */
+}
-.regel-item {
+
-    margin-bottom: 16px;
+/* Akkordeon-Items (Regeln) */
-    border: 1px solid var(--border-color);
+.regel-plugin-container .regel-item {
-    border-radius: var(--border-radius);
+    margin-bottom: 16px;
-    overflow: hidden;
+    border: 1px solid var(--border-color);
-    transition: all var(--transition-speed) ease;
+    border-radius: var(--border-radius);
-    border-left: 4px solid var(--primary-color);
+    overflow: hidden;
-}
+    transition: all var(--transition-speed) ease;
-
+    border-left: 4px solid var(--primary-color);
-.regel-item:hover {
+}
-    transform: translateY(-2px);
+
-    box-shadow: var(--shadow-md);
+.regel-plugin-container .regel-item:hover {
-}
+    transform: translateY(-2px);
-
+    box-shadow: var(--shadow-md);
-.regel-item:last-child {
+}
-    margin-bottom: 0;
+
-}
+.regel-plugin-container .regel-item:last-child {
-
+    margin-bottom: 0;
-/* KORREKTUR: Icon-Positionierung */
+}
-.regel-toggle {
+
-    width: 100%;
+/* KORREKTUR: Icon-Positionierung */
-    background: var(--background-lighter);
+.regel-plugin-container .regel-toggle {
-    border: none;
+    width: 100%;
-    padding: 18px 22px 18px 50px; /* Links mehr Padding für den Icon-Platz */
+    background: var(--background-lighter);
-    text-align: left;
+    border: none;
-    font-weight: 600;
+    padding: 18px 22px 18px 50px; /* Links mehr Padding für den Icon-Platz */
-    cursor: pointer;
+    text-align: left;
-    display: flex;
+    font-weight: 600;
-    align-items: center;
+    cursor: pointer;
-    transition: background var(--transition-speed) ease;
+    display: flex;
-    position: relative; /* Wichtig für die Positionierung des Icons */
+    align-items: center;
-}
+    transition: background var(--transition-speed) ease;
-
+    position: relative; /* Wichtig für die Positionierung des Icons */
-.regel-toggle:hover {
+}
-    background: var(--background-light);
+
-}
+.regel-plugin-container .regel-toggle:hover {
-
+    background: var(--background-light);
-/* Das Plus/Minus Icon (Sehr spezifische Version) */
+}
-.regel-plugin-container .regel-icon {
+
-    display: inline-block;
+/* Das Plus/Minus Icon (Sehr spezifische Version) */
-    width: 24px;
+.regel-plugin-container .regel-icon {
-    height: 24px;
+    display: inline-block;
-    line-height: 22px;
+    width: 24px;
-    text-align: center;
+    height: 24px;
-    font-size: 20px;
+    line-height: 22px;
-    font-weight: bold;
+    text-align: center;
-    border-radius: 50%;
+    font-size: 20px;
-    color: #000000 !important;
+    font-weight: bold;
-    flex-shrink: 0;
+    border-radius: 50%;
-    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
+    color: #000000 !important;
-    position: absolute;
+    flex-shrink: 0;
-    left: 22px;
+    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
-    top: 50%;
+    position: absolute;
-    transform: translateY(-50%);
+    left: 22px;
-}
+    top: 50%;
-
+    transform: translateY(-50%);
-.regel-item .icon-minus {
+}
-    opacity: 0;
+
-    transform: translateY(-50%) scale(0.8);
+.regel-plugin-container .regel-item .icon-minus {
-}
+    opacity: 0;
-
+    transform: translateY(-50%) scale(0.8);
-.regel-item.open .icon-plus {
+}
-    opacity: 0;
+
-    transform: translateY(-50%) scale(0.8);
+.regel-plugin-container .regel-item.open .icon-plus {
-}
+    opacity: 0;
-
+    transform: translateY(-50%) scale(0.8);
-.regel-item.open .icon-minus {
+}
-    opacity: 1;
+
-    transform: translateY(-50%) scale(1);
+.regel-plugin-container .regel-item.open .icon-minus {
-}
+    opacity: 1;
-
+    transform: translateY(-50%) scale(1);
-/* Aufklappbarer Inhalt */
+}
-.regel-content {
+
-    max-height: 0;
+/* Aufklappbarer Inhalt */
-    overflow: hidden;
+.regel-plugin-container .regel-content {
-    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
+    max-height: 0;
-    background: var(--background-lighter);
+    overflow: hidden;
-}
+    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
-
+    background: var(--background-lighter);
-.regel-item.open .regel-content {
+}
-    max-height: 1000px;
+
-    padding: 0 22px 20px 50px; /* Linker Abstand anpassen */
+.regel-plugin-container .regel-item.open .regel-content {
-}
+    max-height: 1000px;
-
+    padding: 0 22px 20px 50px; /* Linker Abstand anpassen */
-.regel-content-inner {
+}
-    padding-top: 5px;
+
-    line-height: 1.7;
+.regel-plugin-container .regel-content-inner {
-}
+    padding-top: 5px;
-
+    line-height: 1.7;
-/* NEU & WICHTIG: Entfernt Listenpunkte (Punkte, Zahlen) zuverlässig */
+}
-/* Diese Regel ist spezifischer und überschreibt Theme-Styles */
+
-.regel-plugin-container .regel-content-inner ul,
+/* NEU & WICHTIG: Entfernt Listenpunkte (Punkte, Zahlen) zuverlässig */
-.regel-plugin-container .regel-content-inner ol {
+/* Diese Regel ist spezifischer und überschreibt Theme-Styles */
-    list-style: none;
+.regel-plugin-container .regel-content-inner ul,
-    padding-left: 0;
+.regel-plugin-container .regel-content-inner ol {
-    margin-left: 0;
+    list-style: none;
-}
+    padding-left: 0;
-.regel-plugin-container .regel-content-inner li {
+    margin-left: 0;
-    list-style: none;
+}
-}
+.regel-plugin-container .regel-content-inner li {
-
+    list-style: none;
-
+}
-/* Responsive Design */
+
-@media (max-width: 768px) {
+/* Responsive Design */
-    .regel-plugin-container {
+@media (max-width: 768px) {
-        margin: 20px;
+    .regel-plugin-container {
-        border-radius: 0;
+        margin: 20px;
-    }
+        border-radius: 0;
-    .regel-tabs-nav {
+    }
-        flex-wrap: wrap;
+    .regel-plugin-container .regel-tabs-nav {
-        padding: 5px;
+        flex-wrap: wrap;
-    }
+        padding: 5px;
-    .regel-tab-button {
+    }
-        flex-basis: 50%;
+    .regel-plugin-container .regel-tab-button {
-        margin: 2px;
+        flex-basis: 50%;
-        font-size: 14px;
+        margin: 2px;
-        padding: 12px 8px;
+        font-size: 14px;
-    }
+        padding: 12px 8px;
-    .regel-tabs-content .regel-tab-panel {
+    }
-        padding: 15px;
+    .regel-plugin-container .regel-tabs-content .regel-tab-panel {
-    }
+        padding: 15px;
+    }
 }