Wie man DearFlip hinzufügt, um ein Flipbook in WordPress zu erstellen
DearFlip ist ein WordPress-Plugin, das PDF-Dateien oder Bildsequenzen in interaktive, seitenblätternde Flipbooks umwandelt, die direkt im Browser mithilfe von WebGL und CSS3 3D-Transformationen gerendert werden. Anstatt Besucher zum Herunterladen einer statischen PDF zu zwingen, bettet DearFlip ein realistisches Buch-Blätter-Erlebnis ein – komplett mit Seitenumblätter-Schatten, Soundeffekten und Zoom-Steuerung – ohne Flash oder externe Abhängigkeiten zu benötigen.
Dieser Leitfaden führt durch jeden Schritt des Prozesses: Installation, globale Konfiguration, Flipbook-Erstellung, Einbettung und Performance-Optimierung. Er behandelt auch technische Sonderfälle und häufige Fallstricke, die die meisten Tutorials vollständig übergehen.
Warum Flipbooks für die WordPress-Content-Strategie wichtig sind
Ein Flipbook ist nicht nur ein visueller Gimmick. Für Verlage, E-Commerce-Betreiber und Agenturen löst es ein konkretes Problem: PDFs, die über <iframe> oder den Google Docs Viewer eingebettet werden, sind ungebrandmarkt, auf Mobilgeräten langsam und bieten keine Analytics-Hooks. DearFlip hält Nutzer auf Ihrer Domain, unterstützt Deep-Linking zu bestimmten Seiten und integriert sich in Standard-WordPress-Hooks, sodass Sie das Engagement verfolgen können.
Häufige Anwendungsfälle sind:
- Digitale Magazine und Kataloge, bei denen die seitenweise Navigation das Druckerlebnis widerspiegelt
- Produkt-Lookbooks, eingebettet auf WooCommerce-Kategorieseiten
- Jahresberichte und Whitepapers, die markenkonform bleiben müssen
- Interaktive Portfolios, die aus einer Sequenz hochauflösender Bilder erstellt werden
- Schulungshandbücher mit internen Lesezeichen und Inhaltsverzeichnis-Navigation
DearFlip Free vs. Pro: Was Sie tatsächlich erhalten
Verstehen Sie vor der Installation, was die kostenlose Version einschränkt und wo die Pro-Lizenz wichtige Funktionen freischaltet.
| Funktion | DearFlip Free | DearFlip Pro |
|---|---|---|
| PDF-Flipbooks | Ja | Ja |
| Bildbasierte Flipbooks | Ja | Ja |
| 3D-Seitenumblätter-Effekt | Ja | Ja |
| Benutzerdefiniertes Skin / Farbthemen | Begrenzt (3 Skins) | Vollständiges benutzerdefiniertes CSS + 10+ Skins |
| Passwortschutz | Nein | Ja |
| Deep-Linking (URL zu Seite) | Nein | Ja |
| PDF-Textebene / Suche | Nein | Ja |
| Analytics-Integration | Nein | Ja |
| Wasserzeichen | Nein | Ja |
| WordPress Multisite-Unterstützung | Teilweise | Vollständig |
| DearFlip-Branding entfernen | Nein | Ja |
| Prioritäts-Support | Nein | Ja |
Für interne Dokumente oder Websites mit geringem Traffic ist die kostenlose Version voll funktionsfähig. Für kundenorientierte Kataloge oder geschützte Inhalte lohnt sich die Investition in Pro.
Schritt 1: Das DearFlip-Plugin installieren
1.1 Installation aus dem WordPress-Plugin-Repository
Melden Sie sich in Ihrem WordPress-Adminbereich an und navigieren Sie zu Plugins > Neues Plugin hinzufügen. Geben Sie im Suchfeld DearFlip ein. Suchen Sie das Plugin mit dem Titel DearFlip – 3D Flipbook, PDF Viewer von DearHive und klicken Sie auf Jetzt installieren und dann auf Aktivieren.
Alternativ können Sie die Installation über WP-CLI durchführen, wenn Sie mehrere Websites verwalten oder Befehlszeilen-Workflows bevorzugen:
wp plugin install dearflip --activate1.2 Die Pro-Version manuell installieren
Wenn Sie die Pro-Lizenz erworben haben, laden Sie das .zip-Archiv aus Ihrem DearHive-Konto-Dashboard herunter. Navigieren Sie dann zu Plugins > Neues Plugin hinzufügen > Plugin hochladen, wählen Sie die .zip-Datei aus und klicken Sie auf Jetzt installieren > Aktivieren.
Wichtiger Hinweis: Installieren Sie nicht gleichzeitig die kostenlose und die Pro-Version. Deaktivieren und löschen Sie die kostenlose Version, bevor Sie das Pro-Archiv hochladen, um Klassenkonflikte zu vermeiden, die einen fatalen PHP-Fehler verursachen würden.
1.3 PHP- und Serveranforderungen überprüfen
DearFlip erfordert:
- PHP 7.4 oder höher (PHP 8.1+ empfohlen)
- WordPress 5.0+
- GD Library oder Imagick auf dem Server aktiviert (wird für die Thumbnail-Generierung aus PDF-Titelseiten verwendet)
allow_url_fopenoder cURL aktiviert (für externe PDF-Quellen in Pro)
Wenn Ihre Shared-Hosting-Umgebung kein Imagick hat, werden Flipbook-Cover-Thumbnails nicht automatisch generiert. Ein Upgrade auf einen VPS Hosting-Plan gibt Ihnen die volle Kontrolle über PHP-Erweiterungen und php.ini-Direktiven, was diese Art von Konfigurationsproblemen vollständig beseitigt.
Schritt 2: Globale DearFlip-Einstellungen konfigurieren
Nach der Aktivierung erscheint ein DearFlip-Menüpunkt in der linken Seitenleiste. Navigieren Sie zu DearFlip > Einstellungen. Diese globalen Einstellungen definieren das Standardverhalten für jedes Flipbook, das Sie erstellen – einzelne Flipbooks können sie überschreiben, aber die richtigen Standardwerte sparen Zeit.
2.1 Allgemeine Einstellungen
- Seitenumblätter-Modus: Wählen Sie Einzelseite für mobile-first-Layouts oder Doppelseite für magazinartige Desktop-Darstellung. Der Doppelseitenmodus teilt jede PDF-Doppelseite nur dann korrekt auf, wenn Ihre PDF als Doppelseiten exportiert wurde, nicht als Einzelseiten.
- Flipbook-Höhe: Legen Sie einen Prozentwert oder einen festen Pixelwert fest. Die Verwendung von
100%mit einem Container-Div ist der responsivste Ansatz. - Hintergrundfarbe: Passen Sie den Hintergrund Ihrer Website an, um einen störenden Farbkontrast um die Flipbook-Leinwand zu vermeiden.
2.2 Steuerungseinstellungen
Aktivieren oder deaktivieren Sie die folgenden UI-Steuerelemente je nach Ihrer Zielgruppe:
- Zoom — Unverzichtbar für Kataloge mit Kleingedrucktem; für rein visuelle Lookbooks deaktivieren
- Vollbild — Sehr empfehlenswert; Nutzer erwarten es
- Seitennavigationssteuerung — Pfeilschaltflächen und ein Seitennummer-Eingabefeld
- Soundeffekte — Das Seitenumblätter-Geräusch erhöht den Realismus, kann aber störend sein; lassen Sie es als Opt-in statt automatisch aktiviert
- Download-Schaltfläche — Deaktivieren Sie diese, wenn Ihre PDF proprietär oder geschützter Inhalt ist
2.3 Performance-Einstellungen
Hier schweigen die meisten Tutorials, und hier scheitern reale Deployments.
PDF-Rendering-Engine: DearFlip rendert PDFs clientseitig mit PDF.js (Mozillas Open-Source-Bibliothek). Das bedeutet, dass die gesamte PDF vor dem Rendering-Beginn an den Browser übertragen wird. Bei einem 50-seitigen Katalog mit 150 KB pro Seite ergibt das eine anfängliche Nutzlast von 7,5 MB. Mildern Sie dies durch:
- Komprimieren Sie Ihre PDF mit Ghostscript vor dem Hochladen:
gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook
-dNOPAUSE -dQUIET -dBATCH
-sOutputFile=compressed_output.pdf input.pdf- Aktivieren Sie Lazy Loading in den DearFlip-Einstellungen, sodass beim ersten Laden nur die ersten Seiten gerendert werden.
- Stellen Sie die PDF aus einem CDN-gestützten Speicher-Bucket bereit, anstatt direkt aus Ihrem WordPress-
uploads-Verzeichnis.
WordPress-Speicherlimit: Die PDF.js-Verarbeitung kann die PHP-Speichernutzung während der Thumbnail-Generierung in die Höhe treiben. Wenn nach dem Hochladen einer großen PDF ein weißer Bildschirm oder ein 500-Fehler erscheint, erhöhen Sie das Speicherlimit in wp-config.php:
define( 'WP_MEMORY_LIMIT', '256M' );Schritt 3: Ein neues Flipbook erstellen
Navigieren Sie zu DearFlip > Neu hinzufügen. Dies öffnet die Flipbook-Erstellungsoberfläche, die wie ein benutzerdefinierter Beitragstyp-Editor funktioniert.
3.1 Titel und Quellentyp festlegen
Geben Sie einen beschreibenden internen Titel ein (dieser wird Besuchern standardmäßig nicht angezeigt, erscheint aber in der Shortcode-Liste und im Adminbereich, also seien Sie präzise: 2025 Spring Catalog statt Flipbook 1).
Wählen Sie im Dropdown-Menü Quelle:
- PDF — für eine einzelne PDF-Datei (am häufigsten)
- Bild — für eine Sequenz von JPEG- oder PNG-Dateien
- Externe URL (nur Pro) — um auf eine PDF zu verweisen, die auf einem externen Server oder CDN gehostet wird
3.2 Eine PDF hochladen
Klicken Sie auf PDF hochladen und wählen Sie Ihre Datei aus der Mediathek aus oder laden Sie sie direkt von Ihrem Computer hoch. Die standardmäßige maximale Upload-Größe von WordPress beträgt oft 2 MB, was für die meisten Kataloge unzureichend ist.
Um das Upload-Limit zu erhöhen, fügen Sie Folgendes zu Ihrer .htaccess-Datei (Apache) oder nginx.conf (Nginx) hinzu:
Apache .htaccess:
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300Nginx-Serverblock:
client_max_body_size 64M;Nach dem Hochladen generiert DearFlip automatisch ein Cover-Thumbnail aus der ersten Seite mit Imagick oder GD. Wenn das Thumbnail leer oder fehlend ist, bestätigen Sie, dass Imagick auf Ihrem Server installiert ist:
php -r "phpinfo();" | grep -i imagick3.3 Eine Bildsequenz hochladen
Für bildbasierte Flipbooks klicken Sie auf Bilder hochladen und wählen mehrere Dateien aus. Die Upload-Reihenfolge bestimmt die Seitenreihenfolge. Ein zuverlässiger Workflow besteht darin, Ihre Dateien vor dem Hochladen sequenziell zu benennen (page-001.jpg, page-002.jpg usw.), damit die Dateisystem-Sortierreihenfolge Ihrer beabsichtigten Sequenz entspricht.
Unterstützte Formate: JPEG, PNG, WebP (WebP-Unterstützung hängt von der GD- oder Imagick-Version Ihres Servers ab).
Empfohlene Bildspezifikationen:
- Auflösung: 1200 x 1600 px (Hochformat) oder 1600 x 1200 px (Querformat)
- Farbprofil: sRGB (CMYK-Bilder werden in Browsern mit falschen Farben dargestellt)
- Dateigröße pro Bild: Unter 200 KB nach Komprimierung; verwenden Sie Tools wie
cwebpoderjpegoptim
3.4 Anpassungsoptionen pro Flipbook
Jedes Flipbook hat eigene Einstellungen, die die globalen Standardwerte überschreiben:
- Seitenbreite / -höhe: Legen Sie explizite Abmessungen fest, wenn das Flipbook in eine bestimmte Layout-Spalte passen muss
- Auto-Flip: Aktiviert das automatische Seitenumblättern in einem definierten Intervall (in Sekunden). Sparsam verwenden — Auto-Flip ist bei inhaltsreichen Seiten desorientierend
- Startseite: Geben Sie an, welche Seite zuerst geöffnet wird, nützlich für Deep-Linking-Kampagnen
- Skin: Wählen Sie ein visuelles Thema (hell, dunkel oder benutzerdefiniert in Pro)
- Flipbook-Thumbnail: Laden Sie ein benutzerdefiniertes Cover-Bild hoch, das erscheint, bevor der Nutzer klickt, um das Flipbook zu öffnen
3.5 Das Flipbook veröffentlichen
Klicken Sie auf Veröffentlichen. WordPress speichert das Flipbook als benutzerdefinierten Beitragstyp-Eintrag. Der Shortcode ist sofort auf der rechten Seite des Editors sichtbar, formatiert als:
[dflip id="123"]Wobei 123 die WordPress-Beitrags-ID ist, die diesem Flipbook zugewiesen wurde. Notieren Sie sich diese ID — Sie benötigen sie für die Einbettung.
Schritt 4: Das Flipbook auf einer Seite oder in einem Beitrag einbetten
4.1 Den Gutenberg-Block-Editor verwenden
Navigieren Sie zu Seiten > Neu hinzufügen oder öffnen Sie eine bestehende Seite. Klicken Sie im Block-Editor auf das +-Symbol, um einen neuen Block hinzuzufügen. Suchen Sie nach Shortcode und wählen Sie ihn aus. Fügen Sie den Shortcode ein:
[dflip id="123"]Sie können auch den dedizierten DearFlip-Block verwenden, wenn er nach der Aktivierung in Ihrer Block-Bibliothek erscheint — dieser bietet eine visuelle Vorschau direkt im Editor.
4.2 Den Classic Editor verwenden
Öffnen Sie die Seite oder den Beitrag im Classic Editor. Wechseln Sie zur Registerkarte Text (nicht Visuell), um den Shortcode direkt in das HTML einzufügen. Das Einfügen in der visuellen Ansicht kann dazu führen, dass der wpautop-Filter von WordPress den Shortcode in <p>-Tags einschließt, was gelegentlich die Container-Abmessungen des Flipbooks beschädigt.
4.3 Einbettung mit einem benutzerdefinierten HTML-Block
Für präzise Layout-Kontrolle umschließen Sie den Shortcode in einem benutzerdefinierten HTML-Block mit expliziten Abmessungen:
<div>
[dflip id="123"]
</div>Dies verhindert, dass das Flipbook auf ultrabreiten Monitoren auf die volle Viewport-Breite gestreckt wird.
4.4 Shortcode-Parameter für erweitertes Einbetten
Der Shortcode von DearFlip akzeptiert Inline-Parameter, die sowohl globale als auch flipbook-spezifische Einstellungen überschreiben:
[dflip id="123" width="900" height="600" mode="2d" autoplay="1" duration="5"]Wichtige Parameter:
| Parameter | Werte | Beschreibung |
|---|---|---|
width | px oder % | Überschreibt die Flipbook-Breite |
height | px-Wert | Überschreibt die Flipbook-Höhe |
mode | 2d, 3d | Erzwingt 2D- oder 3D-Flip-Modus |
autoplay | 0, 1 | Aktiviert Auto-Flip |
duration | Sekunden | Auto-Flip-Intervall |
startpage | Ganzzahl | Beim Laden zu öffnende Seite |
bgcolor | Hex-Farbe | Hintergrundfarbe überschreiben |
controlsposition | top, bottom, hide | Platzierung der Steuerleiste |
4.5 Einbettung in einem Widget oder einer Seitenleiste
DearFlip-Shortcodes funktionieren in jedem Widget-Bereich, der Shortcode-Rendering unterstützt. Navigieren Sie zu Design > Widgets, fügen Sie ein Text– oder Benutzerdefiniertes HTML-Widget hinzu und fügen Sie den Shortcode ein. Beachten Sie, dass Seitenleisten-Flipbooks eingeschränkte Abmessungen (width="300") verwenden sollten, um Layout-Überlauf zu vermeiden.
Schritt 5: Performance-, SEO- und Barrierefreiheits-Überlegungen
5.1 SEO-Auswirkungen von PDF-Flipbooks
Google kann PDF-Inhalte direkt indexieren, wenn die Datei öffentlich zugänglich ist, aber es kann Inhalte, die von JavaScript (PDF.js) gerendert werden, nicht auf dieselbe Weise indexieren. Wenn die SEO-Auffindbarkeit des Flipbook-Inhalts wichtig ist, erwägen Sie:
- Veröffentlichung desselben Inhalts als HTML-Seite neben dem Flipbook
- Hinzufügen eines textbasierten Inhaltsverzeichnisses unterhalb der Flipbook-Einbettung
- Verwendung des
og:image-Meta-Tags, um das Flipbook-Cover als Social-Share-Bild festzulegen
5.2 Auswirkungen auf Core Web Vitals
Eine Flipbook-Einbettung führt zu einer erheblichen JavaScript-Nutzlast (PDF.js ist ca. 300 KB minifiziert). Um Ihre Largest Contentful Paint (LCP)– und Total Blocking Time (TBT)-Werte zu schützen:
- Laden Sie das Flipbook nur auf Seiten, auf denen es der primäre Inhalt ist, nicht auf Ihrer Startseite
- Verwenden Sie den Lightbox-Modus von DearFlip, der das Flipbook erst lädt, wenn ein Nutzer auf ein Thumbnail klickt, und so das vollständige JavaScript-Bundle bis zur Interaktion verzögert
- Aktivieren Sie WordPress-Caching und stellen Sie statische Assets über ein CDN bereit
Ein gut konfigurierter VPS mit cPanel ermöglicht es Ihnen, PHP-FPM-Worker-Pools fein abzustimmen, OPcache zu aktivieren und Nginx als Reverse-Proxy zu konfigurieren — all das summiert sich zu messbar schnelleren Flipbook-Ladezeiten im Vergleich zu Shared-Hosting-Umgebungen.
5.3 Barrierefreiheit
Die Standardimplementierung von DearFlip bietet eingeschränkte Tastaturnavigationsunterstützung. Für WCAG 2.1-Konformität:
- Aktivieren Sie die Inhaltsverzeichnis-Funktion (Pro), damit Screenreader kapitelweise navigieren können
- Stellen Sie unterhalb des Flipbooks einen alternativen Download-Link zur Original-PDF bereit
- Setzen Sie beschreibenden
alt-Text auf dem Flipbook-Thumbnail-Bild
5.4 Mobile Darstellung
Auf Mobilgeräten sind 3D-Seitenumblätter-Effekte GPU-intensiv. DearFlip fällt automatisch auf einen 2D-Wisch-Modus auf Geräten mit eingeschränkter WebGL-Unterstützung zurück. Testen Sie Ihr Flipbook auf echter mobiler Hardware — nicht nur in Browser-DevTools — da das WebGL-Verhalten zwischen Android Chrome und iOS Safari erheblich variiert.
Schritt 6: Mehrere Flipbooks verwalten
Wenn Ihre Bibliothek wächst, wird die Liste DearFlip > Alle Flipbooks zu Ihrem Verwaltungs-Hub. Jeder Eintrag zeigt den Flipbook-Titel, den Shortcode und den Veröffentlichungsstatus.
Praktische Verwaltungstipps:
- Verwenden Sie eine einheitliche Namenskonvention, die den Inhaltstyp und das Datum enthält:
Catalog-Spring-2025,Report-Annual-2024 - Weisen Sie Flipbooks WordPress-Kategorien oder -Tags zu, wenn Sie mehr als zehn haben — DearFlip unterstützt Taxonomie-Filterung in der Pro-Version
- Wenn Sie ein Flipbook aktualisieren (neue PDF-Version), ersetzen Sie die Quelldatei, anstatt einen neuen Flipbook-Eintrag zu erstellen; die Shortcode-ID bleibt gleich, sodass alle bestehenden Einbettungen automatisch aktualisiert werden
- Überprüfen Sie regelmäßig unveröffentlichte oder Entwurfs-Flipbooks und löschen Sie nicht verwendete PDF-Dateien aus der Mediathek, um Ihr Speicherkontingent nicht zu belasten
Wenn Sie eine inhaltsreiche Website mit Dutzenden von Flipbooks und großen PDF-Assets betreiben, erwägen Sie einen Dedicated Servers-Plan, um konsistente I/O-Performance sicherzustellen und den Noisy-Neighbor-Effekt zu vermeiden, der auf gemeinsam genutzter Infrastruktur häufig vorkommt.
Häufige DearFlip-Probleme beheben
Flipbook zeigt eine leere weiße Leinwand
Ursache: Die PDF konnte nicht geladen werden, typischerweise aufgrund einer CORS-Richtlinie, die die PDF-URL blockiert, eines falschen Dateipfads nach einer Site-Migration oder einer PHP-Speichererschöpfung während des Renderings.
Lösung: Öffnen Sie die Browser-Konsole (F12 > Console). Wenn Sie einen CORS-Fehler sehen, stellen Sie sicher, dass die PDF von derselben Domain wie WordPress bereitgestellt wird. Wenn Sie einen 404-Fehler sehen, überprüfen Sie die Attachment-URL in der Mediathek. Wenn Sie einen PHP-Fatal-Error sehen, erhöhen Sie WP_MEMORY_LIMIT.
Seitenumblätter-Animation ist ruckelig oder verzögert
Ursache: Die PDF-Seiten sind zu groß (hochauflösende Bilder in der PDF eingebettet), oder die Geräte-GPU kann das WebGL-Compositing nicht bewältigen.
Lösung: Komprimieren Sie die PDF vor dem Hochladen (siehe den Ghostscript-Befehl in Schritt 2.3). Wechseln Sie das Flipbook für Nutzer auf leistungsschwachen Geräten zu mode="2d".
Shortcode wird als Klartext dargestellt
Ursache: Das Theme oder ein Page-Builder entfernt die Shortcode-Verarbeitung, oder der Shortcode wurde in einen Code-Block statt in einen Shortcode-Block eingefügt.
Lösung: Stellen Sie sicher, dass der Shortcode in Gutenberg in einem Shortcode-Block ist, nicht in einem Code-Block oder Absatz-Block. Bestätigen Sie im Classic Editor, dass Sie beim Einfügen im Text-Modus sind, nicht im Visuell-Modus.
Thumbnail wird nicht generiert
Ursache: Imagick oder GD ist nicht installiert, oder die PDF verwendet eine nicht standardmäßige Kodierung, die keine der beiden Bibliotheken parsen kann.
Lösung: Installieren Sie Imagick über den Paketmanager Ihres Servers:
sudo apt-get install php-imagick
sudo systemctl restart php8.1-fpmAlternativ können Sie manuell ein benutzerdefiniertes Thumbnail-Bild in den Flipbook-Einstellungen hochladen.
Flipbook wird auf HTTPS-Websites nicht angezeigt
Ursache: Die PDF wird über HTTP bereitgestellt, während die Seite HTTPS verwendet, was einen Mixed-Content-Browser-Block auslöst.
Lösung: Stellen Sie sicher, dass Ihre WordPress-Website-URL und WordPress-URL beide auf https:// in Einstellungen > Allgemein gesetzt sind. Führen Sie eine Suche-Ersetzen-Operation in der Datenbank durch, um alle Attachment-URLs zu aktualisieren:
wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --skip-columns=guidDie Kombination mit einem ordnungsgemäß ausgestellten SSL Certificates stellt sicher, dass alle Assets — einschließlich PDFs, die in wp-content/uploads gespeichert sind — über eine sichere Verbindung ohne Mixed-Content-Warnungen bereitgestellt werden.
Erweiterte Konfiguration: PDFs auf externem Speicher hosten
Für Produktions-Deployments mit großen PDF-Bibliotheken ist das direkte Speichern von PDFs in wp-content/uploads ineffizient. Eine bessere Architektur:
- Laden Sie PDFs in einen S3-kompatiblen Objektspeicher-Bucket hoch (Cloudflare R2, Backblaze B2 oder AWS S3)
- Konfigurieren Sie eine CDN-Distribution vor dem Bucket
- Verwenden Sie in DearFlip Pro den Quellentyp Externe URL und verweisen Sie auf die CDN-URL jeder PDF
- Setzen Sie
Cache-Control: public, max-age=31536000-Header auf dem CDN für PDF-Assets
Diese Architektur entkoppelt die Festplatten-I/O Ihres WordPress-Servers von der PDF-Bereitstellung, reduziert die Serverlast bei Traffic-Spitzen erheblich und hält Ihre WordPress-Datenbank schlank.
Wenn Ihr Anwendungsfall die dynamische Generierung von PDFs umfasst (aus nutzerübermittelten Daten oder vorlagenbasierten Berichten), kombinieren Sie dieses Setup mit einem VPS Hosting-Plan, auf dem Sie Puppeteer, wkhtmltopdf oder WeasyPrint als serverseitige PDF-Generierungstools installieren und die Ausgabe direkt in den Objektspeicher übertragen können.
Entscheidungsmatrix: Wann DearFlip vs. Alternativen verwenden
| Szenario | Empfohlene Lösung |
|---|---|
| Einfacher PDF-Download-Link | Natives HTML-<a>-Tag mit download-Attribut |
| Einfache PDF-Anzeige im Browser | Google Docs Viewer-Einbettung oder PDF.js iframe |
| Gebrandmarkter interaktiver Katalog | DearFlip (kostenlos oder Pro) |
| Geschützter Inhalt mit Analytics | DearFlip Pro mit Passwortschutz |
| Barrierefreiheits-orientiertes Dokument | HTML-Seite + PDF-Download-Link |
| Große PDF-Bibliothek (50+ Dokumente) | DearFlip Pro + externer CDN-Speicher |
| Ausschließlich mobiles Publikum | DearFlip im 2D-Modus oder ein dedizierter mobiler Reader |
Technische Checkliste der wichtigsten Punkte
Überprüfen Sie vor dem Live-Gang eines DearFlip-Flipbooks jeden Punkt:
- PHP-Version ist 7.4 oder höher; Imagick-Erweiterung ist geladen
- Upload-Größenlimits in
.htaccessodernginx.confentsprechen Ihrer größten PDF-Dateigröße - PDF ist komprimiert auf unter 10 MB für typische Kataloge; verwenden Sie Ghostscript für Batch-Komprimierung
- WP_MEMORY_LIMIT ist auf mindestens
256Minwp-config.phpgesetzt - HTTPS ist seitenübergreifend erzwungen und alle PDF-URLs verwenden
https://; Mixed-Content-Fehler werden das Flipbook stillschweigend beschädigen - Lightbox-Modus ist aktiviert für Flipbooks, die nicht der primäre Seiteninhalt sind, um das JavaScript-Laden zu verzögern
- Eine Klartext- oder HTML-Alternative für den Flipbook-Inhalt existiert, wenn SEO-Indexierbarkeit wichtig ist
- Mobile Darstellung getestet auf echten iOS- und Android-Geräten, nicht nur in Browser-DevTools
- Benutzerdefiniertes Thumbnail hochgeladen für jedes Flipbook, um die Klickrate auf Archiv- oder Landingpages zu verbessern
- Nicht verwendete Flipbooks und verwaiste PDFs werden aus der Mediathek gelöscht, um den Speicher sauber zu halten
FAQ
Funktioniert DearFlip mit passwortgeschützten PDFs?
Nein. PDF.js, das DearFlip für das Rendering verwendet, kann passwortgeschützte PDFs nicht entschlüsseln. Entfernen Sie den PDF-Passwortschutz vor dem Hochladen. Wenn Sie Zugangskontrolle benötigen, verwenden Sie stattdessen die integrierte Flipbook-Passwortfunktion von DearFlip Pro, die die Einbettung selbst schützt und nicht die zugrunde liegende Datei.
Kann ich DearFlip mit einem Page-Builder wie Elementor oder Divi verwenden?
Ja. Sowohl Elementor als auch Divi enthalten ein Shortcode-Widget. Fügen Sie den [dflip id="123"]-Shortcode in dieses Widget ein. DearFlip Pro liefert auch ein natives Elementor-Widget, das eine visuelle Konfiguration ohne Shortcodes ermöglicht.
Wird DearFlip meine gesamte WordPress-Website verlangsamen?
Nur auf Seiten, auf denen das Flipbook eingebettet ist. DearFlip lädt sein JavaScript und CSS standardmäßig global. Um das Asset-Laden auf Flipbook-Seiten zu beschränken, fügen Sie Folgendes zur functions.php Ihres Themes hinzu:
add_filter( 'dflip_load_scripts', function( $load ) {
return is_singular() && has_shortcode( get_post()->post_content, 'dflip' );
});Wie viele Flipbooks kann ich mit der kostenlosen Version erstellen?
Die kostenlose Version setzt kein hartes Limit für die Anzahl der Flipbooks. Die praktischen Einschränkungen sind der Speicherplatz und das Fehlen von Pro-Funktionen wie Passwortschutz und Analytics.
Was passiert mit meinen Flipbooks, wenn ich das DearFlip-Plugin deaktiviere?
Die benutzerdefinierten Beitragstyp-Einträge des Flipbooks verbleiben in der WordPress-Datenbank, aber die Shortcodes werden auf dem Frontend als leere Zeichenketten gerendert. Die hochgeladenen PDF-Dateien verbleiben in der Mediathek. Durch erneutes Aktivieren des Plugins werden alle Flipbooks sofort ohne Datenverlust wiederhergestellt.
