15%

15% auf alle Hosting-Dienste sparen

Teste deine Fähigkeiten und erhalte Rabatt auf jeden Hosting-Plan

Benutze den Code:

Skills
Anfangen
23.10.2024

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.

FunktionDearFlip FreeDearFlip Pro
PDF-FlipbooksJaJa
Bildbasierte FlipbooksJaJa
3D-Seitenumblätter-EffektJaJa
Benutzerdefiniertes Skin / FarbthemenBegrenzt (3 Skins)Vollständiges benutzerdefiniertes CSS + 10+ Skins
PasswortschutzNeinJa
Deep-Linking (URL zu Seite)NeinJa
PDF-Textebene / SucheNeinJa
Analytics-IntegrationNeinJa
WasserzeichenNeinJa
WordPress Multisite-UnterstützungTeilweiseVollständig
DearFlip-Branding entfernenNeinJa
Prioritäts-SupportNeinJa

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 --activate

1.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_fopen oder 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:

  1. 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
  1. Aktivieren Sie Lazy Loading in den DearFlip-Einstellungen, sodass beim ersten Laden nur die ersten Seiten gerendert werden.
  2. 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 300

Nginx-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 imagick

3.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 cwebp oder jpegoptim

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:

ParameterWerteBeschreibung
widthpx oder %Überschreibt die Flipbook-Breite
heightpx-WertÜberschreibt die Flipbook-Höhe
mode2d, 3dErzwingt 2D- oder 3D-Flip-Modus
autoplay0, 1Aktiviert Auto-Flip
durationSekundenAuto-Flip-Intervall
startpageGanzzahlBeim Laden zu öffnende Seite
bgcolorHex-FarbeHintergrundfarbe überschreiben
controlspositiontop, bottom, hidePlatzierung 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:

  1. Veröffentlichung desselben Inhalts als HTML-Seite neben dem Flipbook
  2. Hinzufügen eines textbasierten Inhaltsverzeichnisses unterhalb der Flipbook-Einbettung
  3. 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-fpm

Alternativ 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=guid

Die 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:

  1. Laden Sie PDFs in einen S3-kompatiblen Objektspeicher-Bucket hoch (Cloudflare R2, Backblaze B2 oder AWS S3)
  2. Konfigurieren Sie eine CDN-Distribution vor dem Bucket
  3. Verwenden Sie in DearFlip Pro den Quellentyp Externe URL und verweisen Sie auf die CDN-URL jeder PDF
  4. 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

SzenarioEmpfohlene Lösung
Einfacher PDF-Download-LinkNatives HTML-<a>-Tag mit download-Attribut
Einfache PDF-Anzeige im BrowserGoogle Docs Viewer-Einbettung oder PDF.js iframe
Gebrandmarkter interaktiver KatalogDearFlip (kostenlos oder Pro)
Geschützter Inhalt mit AnalyticsDearFlip Pro mit Passwortschutz
Barrierefreiheits-orientiertes DokumentHTML-Seite + PDF-Download-Link
Große PDF-Bibliothek (50+ Dokumente)DearFlip Pro + externer CDN-Speicher
Ausschließlich mobiles PublikumDearFlip 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 .htaccess oder nginx.conf entsprechen 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 256M in wp-config.php gesetzt
  • 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.

15%

15% auf alle Hosting-Dienste sparen

Teste deine Fähigkeiten und erhalte Rabatt auf jeden Hosting-Plan

Benutze den Code:

Skills
Anfangen