5 Commits
1.0 ... 1.3

Author SHA1 Message Date
848d7df8ab wp-rules.php aktualisiert 2026-02-11 19:33:44 +00:00
63264d46af wp-rules.php aktualisiert 2026-01-06 17:58:44 +00:00
58e3d965a0 style.css aktualisiert 2026-01-06 17:58:30 +00:00
e520c4990e README.md aktualisiert 2025-11-25 15:59:22 +00:00
82e5cb1311 wp-rules.php aktualisiert 2025-11-25 06:41:27 +00:00
3 changed files with 1058 additions and 957 deletions

132
README.md
View File

@@ -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
- **Willkommens-Tab** (optional ein-/ausblendbar) mit eigenem Editor & Hintergrundfarbe
- **Komplett anpassbares Styling** (Schriftgrößen, Farben für Tabs & Inhalte)
- **Animationen** beim Öffnen/Schließen der Regeln (optional)
- **Import/Export-Funktion** (JSON) perfekt für Backups oder Multisite-Nutzung
- **Responsive & Barrierefrei** (ARIA-konform, Tastaturbedienung)
- **Kein zusätzliches CSS/JS von außen** alles im Plugin enthalten
- **Shortcode:** `[meine_regeln]`
* **Unbegrenzt viele Tabs und Regeln** mit Drag & Drop-Sortierung im Backend
* **Willkommens-Tab** (optional ein-/ausblendbar) mit eigenem Editor & Hintergrundfarbe
* **Komplett anpassbares Styling** (Schriftgrößen, Farben für Tabs & Inhalte)
* **Animationen** beim Öffnen/Schließen der Regeln (optional)
* **Import/Export-Funktion** (JSON) perfekt für Backups oder Multisite-Nutzung
* **Responsive & Barrierefrei** (ARIA-konform, Tastaturbedienung)
* **Kein zusätzliches CSS/JS von außen** alles im Plugin enthalten
* **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) |
|---|---|
| <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%"> |
== Verwendung ==
<p style="text-align:center; color:#666; margin-top:20px;">
← Backend • Frontend →
</p>
Füge den folgenden Shortcode auf einer beliebigen Seite oder in einem Beitrag ein, um deine Regeln anzuzeigen:
## Installation
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]
```
`[meine_regeln]`
Das wars! 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)
- Tab- und Regelverwaltung mit Drag & Drop
- Farb- und Schriftgrößen-Anpassungen (Live-Vorschau im Frontend)
- Animationen aktivieren/deaktivieren
- Import & Export deiner kompletten Konfiguration
* Standard-Willkommens-Tab (mit WP-Editor)
* Tab- und Regelverwaltung mit Drag & Drop
* Farb- und Schriftgrößen-Anpassungen (Live-Vorschau im Frontend)
* Animationen aktivieren/deaktivieren
* 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/wp-rules-plugin.git
```
`git clone https://git.viper.ipv64.net/M_Viper/Multi-Rules.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)
- Erste stabile Version
- Vollständiger Repeater mit Tabs & Regeln
- Drag & Drop Sortierung
- Styling-Optionen
- Import/Export
- Animationen
- Willkommens-Tab mit Hintergrundfarbe
= 1.1 (24.11.2025) =
* Umbenennung des Plugins von "WP Rules" zu "Multi Rules"
* Korrektur von Sicherheits- und Code-Qualitätsfehlern
* Verbesserte Performance und Stabilität
## 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)*

395
style.css
View File

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

File diff suppressed because it is too large Load Diff