280 lines
7.3 KiB
Markdown
280 lines
7.3 KiB
Markdown
# Instagram Gallery Sync Pro
|
||
|
||
[](https://wordpress.org/)
|
||
[](https://php.net/)
|
||
[](https://www.gnu.org/licenses/gpl-2.0.html)
|
||
|
||
Ein leistungsstarkes WordPress-Plugin zur Synchronisierung und Anzeige von Instagram-Fotos ohne offizielle API.
|
||
|
||
**Entwickelt von [Keil & Schick](https://keil-schick.de)**
|
||
|
||
---
|
||
|
||
## 🚀 Features
|
||
|
||
- **Automatische Synchronisierung** – Holt regelmäßig neue Bilder von öffentlichen Instagram-Profilen
|
||
- **Lokale Bildspeicherung** – Bilder werden auf deinem Server gespeichert (bessere Performance)
|
||
- **5 Layout-Optionen** – Grid, Masonry, Justified, Slider, List
|
||
- **Vollständig responsive** – Separate Spalteneinstellungen für Desktop, Tablet & Mobile
|
||
- **Lightbox-Integration** – GLightbox für elegante Bildanzeige
|
||
- **Gutenberg-Block** – Nativer Block-Editor mit Live-Vorschau
|
||
- **Shortcode-Unterstützung** – Flexibel mit zahlreichen Parametern
|
||
- **6 Hover-Effekte** – Zoom, Fade, Overlay, Grayscale, Lift, None
|
||
- **Custom CSS** – Eigene Styles direkt im Admin-Bereich
|
||
- **Activity Logs** – Detaillierte Protokollierung aller Sync-Aktivitäten
|
||
- **i18n-ready** – Vorbereitet für Übersetzungen (DE/EN)
|
||
|
||
---
|
||
|
||
## 📋 Anforderungen
|
||
|
||
- WordPress 5.0 oder höher
|
||
- PHP 7.4 oder höher
|
||
- Öffentliches Instagram-Profil
|
||
|
||
---
|
||
|
||
## 📥 Installation
|
||
|
||
### Manuelle Installation
|
||
|
||
1. Lade den `instagram-gallery-sync-pro` Ordner herunter
|
||
2. Kopiere ihn nach `/wp-content/plugins/`
|
||
3. Aktiviere das Plugin unter **Plugins** im WordPress-Admin
|
||
4. Gehe zu **Instagram Gallery** in der Sidebar
|
||
|
||
### Via WordPress Admin
|
||
|
||
1. Gehe zu **Plugins → Installieren**
|
||
2. Klicke auf **Plugin hochladen**
|
||
3. Wähle die ZIP-Datei aus
|
||
4. Klicke auf **Jetzt installieren** und dann **Aktivieren**
|
||
|
||
---
|
||
|
||
## ⚙️ Konfiguration
|
||
|
||
### Grundeinrichtung
|
||
|
||
1. Navigiere zu **Instagram Gallery** im Admin-Menü
|
||
2. Gib deinen Instagram-Benutzernamen ein (ohne @)
|
||
3. Wähle die gewünschte Bildanzahl und Qualität
|
||
4. Klicke auf **Sync Now**
|
||
|
||
### Einstellungs-Tabs
|
||
|
||
| Tab | Beschreibung |
|
||
|-----|--------------|
|
||
| **Instagram** | Username, Sync-Intervall, Bildqualität |
|
||
| **Layout** | Grid-Typ, Spalten, Abstände, Hover-Effekte |
|
||
| **Anzeige** | Limit, Sortierung, Lightbox, Lazy Loading |
|
||
| **Styling** | Farben, Schriftgrößen, Custom CSS |
|
||
| **Erweitert** | Debug-Modus, Cache, Proxy, Logs |
|
||
|
||
---
|
||
|
||
## 🔧 Verwendung
|
||
|
||
### Shortcode
|
||
|
||
Einfachste Verwendung:
|
||
|
||
```
|
||
[instagram_gallery]
|
||
```
|
||
|
||
Mit Parametern:
|
||
|
||
```
|
||
[instagram_gallery layout="masonry" columns="4" limit="12" spacing="15"]
|
||
```
|
||
|
||
#### Alle Parameter
|
||
|
||
| Parameter | Werte | Standard |
|
||
|-----------|-------|----------|
|
||
| `layout` | `grid`, `masonry`, `slider`, `justified`, `list` | `grid` |
|
||
| `columns` | `1` - `6` | `3` |
|
||
| `spacing` | `0` - `50` (px) | `10` |
|
||
| `limit` | `1` - `50` | `12` |
|
||
| `order` | `newest`, `oldest`, `random` | `newest` |
|
||
| `lightbox` | `yes`, `no` | `yes` |
|
||
| `captions` | `yes`, `no` | `no` |
|
||
| `autoplay` | `true`, `false` (nur Slider) | `false` |
|
||
| `class` | CSS-Klassenname | – |
|
||
|
||
### Gutenberg Block
|
||
|
||
1. Öffne den Block-Editor
|
||
2. Suche nach "Instagram Gallery"
|
||
3. Füge den Block hinzu
|
||
4. Konfiguriere über die Sidebar-Einstellungen
|
||
|
||
### PHP Template
|
||
|
||
```php
|
||
<?php
|
||
if (function_exists('display_instagram_gallery')) {
|
||
display_instagram_gallery(array(
|
||
'layout' => 'grid',
|
||
'columns' => 3,
|
||
'limit' => 9
|
||
));
|
||
}
|
||
?>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎨 Styling
|
||
|
||
### CSS-Variablen
|
||
|
||
Das Plugin verwendet CSS Custom Properties für einfache Anpassung:
|
||
|
||
```css
|
||
:root {
|
||
--igsp-primary: #e1306c;
|
||
--igsp-hover: #c13584;
|
||
--igsp-text: #ffffff;
|
||
--igsp-font-size: 14px;
|
||
--igsp-radius: 0px;
|
||
}
|
||
```
|
||
|
||
### CSS-Klassen
|
||
|
||
| Klasse | Beschreibung |
|
||
|--------|--------------|
|
||
| `.igsp-gallery` | Container |
|
||
| `.igsp-item` | Einzelnes Bild |
|
||
| `.igsp-image` | Bild-Element |
|
||
| `.igsp-overlay` | Caption-Overlay |
|
||
| `.igsp-follow-btn` | Instagram-Button |
|
||
|
||
---
|
||
|
||
## 🔄 Synchronisierung
|
||
|
||
### Automatisch
|
||
|
||
Das Plugin synchronisiert automatisch basierend auf dem konfigurierten Intervall:
|
||
- Alle 30 Minuten
|
||
- Stündlich
|
||
- Alle 6 Stunden
|
||
- Täglich
|
||
- Wöchentlich
|
||
|
||
### Manuell
|
||
|
||
Klicke auf **Sync Now** im Instagram-Tab der Einstellungen.
|
||
|
||
### Scraping-Methoden
|
||
|
||
Das Plugin verwendet mehrere Fallback-Methoden:
|
||
|
||
1. **Web Profile Info API** – Instagrams interne Web-API
|
||
2. **Embed Page Parsing** – Parst die Embed-Seiten
|
||
3. **Profile Page Parsing** – HTML-Analyse mit mehreren Strategien
|
||
|
||
---
|
||
|
||
## ⚠️ Wichtige Hinweise
|
||
|
||
> **Hinweis:** Instagram blockiert Scraping aktiv. Das Plugin enthält Anti-Blocking-Maßnahmen, aber 100% Zuverlässigkeit kann nicht garantiert werden.
|
||
|
||
### Best Practices
|
||
|
||
- Verwende **lange Sync-Intervalle** (6h+)
|
||
- Aktiviere **lokale Bildspeicherung**
|
||
- Nutze **Caching** für bessere Performance
|
||
- Halte die **Bildanzahl** moderat (12-24)
|
||
|
||
### Problembehandlung
|
||
|
||
| Problem | Lösung |
|
||
|---------|--------|
|
||
| Keine Bilder | Prüfe ob Profil öffentlich ist |
|
||
| Rate Limiting | Erhöhe Sync-Intervall |
|
||
| Timeout | Erhöhe Request-Timeout in Erweitert |
|
||
| Parsing-Fehler | Prüfe Logs, warte und versuche erneut |
|
||
|
||
---
|
||
|
||
## 🗄️ Datenbank
|
||
|
||
Das Plugin erstellt zwei Tabellen:
|
||
|
||
- `wp_instagram_gallery_posts` – Gespeicherte Bilder
|
||
- `wp_instagram_gallery_log` – Aktivitätsprotokolle
|
||
|
||
Bei Deinstallation werden alle Daten vollständig entfernt.
|
||
|
||
---
|
||
|
||
## 📁 Dateistruktur
|
||
|
||
```
|
||
instagram-gallery-sync-pro/
|
||
├── instagram-gallery-sync-pro.php # Hauptdatei
|
||
├── uninstall.php # Deinstallations-Routine
|
||
├── includes/
|
||
│ ├── class-admin.php # Admin-Handler
|
||
│ ├── class-cron.php # Cron-Jobs
|
||
│ ├── class-database.php # Datenbank-Operationen
|
||
│ ├── class-gutenberg-block.php # Block-Editor
|
||
│ ├── class-image-handler.php # Bild-Download & -Verarbeitung
|
||
│ ├── class-logger.php # Logging-System
|
||
│ ├── class-scraper.php # Instagram-Scraper
|
||
│ └── class-shortcode.php # Shortcode-Handler
|
||
├── admin/
|
||
│ ├── css/admin-style.css
|
||
│ ├── js/admin-script.js
|
||
│ ├── js/ajax-sync.js
|
||
│ └── views/ # Admin-Templates
|
||
├── public/
|
||
│ ├── css/ # Frontend-Styles
|
||
│ └── js/ # Frontend-Scripts + Libs
|
||
└── languages/ # Übersetzungsdateien
|
||
```
|
||
|
||
---
|
||
|
||
## 🔐 Sicherheit
|
||
|
||
- Prepared Statements für alle DB-Queries
|
||
- Nonce-Verifizierung für AJAX-Requests
|
||
- Capability-Checks (`manage_options`)
|
||
- Input-Sanitization für alle Benutzereingaben
|
||
- Output-Escaping mit `esc_html()`, `esc_attr()`, etc.
|
||
|
||
---
|
||
|
||
## 📝 Changelog
|
||
|
||
### 1.0.0 (2026-01-22)
|
||
- Erste Veröffentlichung
|
||
- 5 Layout-Typen (Grid, Masonry, Justified, Slider, List)
|
||
- Gutenberg Block mit Live-Vorschau
|
||
- Shortcode mit allen Parametern
|
||
- Admin-Bereich mit 5 Tabs
|
||
- Multi-Methoden Scraping Engine
|
||
- Lokale Bildspeicherung mit Thumbnails
|
||
- Activity Logging System
|
||
|
||
---
|
||
|
||
## 📄 Lizenz
|
||
|
||
GPL-2.0-or-later © [Keil & Schick](https://keil-schick.de)
|
||
|
||
---
|
||
|
||
## 🆘 Support
|
||
|
||
Für Fragen und Support besuche: [https://keil-schick.de](https://keil-schick.de)
|
||
|
||
---
|
||
|
||
*Entwickelt mit ❤️ in Deutschland*
|