Wie du deinen Besuchern eine Druckversion deiner BeitrĂ€ge mit CSS und AJAX zur VerfĂŒgung stellst
Viele Blogs stellen Ihren Besuchern aus unterschiedlichen GrĂŒnden eine Druckversion Ihrer BeitrĂ€ge zur VerfĂŒgung.
Eine Möglichkeit kann sein, die Kundenbindung aufzubauen oder zu verstÀrken. Eine Andere ist, die Kopie des jeweiligen Beitrags als PDF zu verkaufen.
Egal, was deine BeweggrĂŒnde sind: Eine druckbare Version des Beitrags muss erst einmal erstellt werden, bevor du sie anbieten kannst.
Warum sollte ich eine Druckversion zur VerfĂŒgung stellen?
Eine Druckversion zu erstellen kann ein paar Vorteile haben.
PayWall vor druckbare PDF's verwenden
Wenn du Blog-BeitrÀge an deine Besucher verkaufen möchtest, kannst du eine sogenannte "PayWall" einrichten. Mit einem Klick wird der Besucher auf die Transaktions-Seite von PayPal Express weitergeleitet.
Nach der erfolgreichen Transaktion kann der Besucher dann eine PDF-Version deines Beitrags herunterladen.
Marken-StÀrke und Kundenbindung verbessern
Eine Druck-Version stÀrkt aber auch die Bindung zu deinen Besuchern.
Sobald ein Besucher eine PDF herunterlĂ€dt, weiĂt du dass ihn der Beitrag interessiert. Ein Logo deines Blogs in der PDF stĂ€rkt die Bindung zum Leser und die Bekanntheit deiner Marke.
BlogbeitrÀge viral machen
Der Besucher möchte die BeitrĂ€ge gegebenenfalls nicht fĂŒr sich selbst haben, sondern an einen Freund oder Kollegen senden.
Stelle fĂŒr diesen wahrscheinlichen Fall sicher, dass der Link zum Original-Beitrag im PDF enthalten ist.
Durch das Versenden einer solchen PDF kann ein Beitrag ebenfalls viral werden. Es muss nicht immer auf Facebook und Co. zurĂŒckgegriffen werden, damit ein Besucher den Beitrag teilt.
Wie kann ich eine Druckversion zur VerfĂŒgung stellen?
In den meisten FĂ€llen erstellen Blogger eine unabhĂ€ngige PDF-Datei Ihres Blog-Beitrags. Das kann recht umstĂ€ndlich sein. Denn es wird ein Programm wie Adobe InDesign fĂŒr die Erstellung von guten PDF's benötigt, was ein paar Nachteile mit sich bringt:
- Du musst dich zunÀchst in das Programm einarbeiten, bevor du die umfangreichen Funktionen verwenden kannst
- Ein Programm zum Erstellen einer Druckversion ist nicht gerade billig
- Nachdem du deinen Beitrag aktualisiert hast, solltest du auch die Druck-Version aktualisieren
Und wenn du dich eher in der Rolle des Entwicklers der Webseite siehst, hast du dir bestimmt schon Gedanken ĂŒber eine einfachere Variante gemacht.
Die automatische Erstellung von PDF's aus deinen BeitrÀgen
Besser wĂ€re es doch, wenn du den Besucher dazu bringst eine PDF aus dem Blog-Beitrag ĂŒber die "Drucken"-Funktion zu erstellen.
Dabei gibt es aber ein Problem(chen): Es wird nicht nur der Beitrag an sich ausgedruckt, sondern auch der Header, der Footer, die Sidebar und mehr unnötige Elemente des Artikels. Das kann in einer PDF nicht nur den Lese-Fluss stören, sondern auch das ganze Layout kaputt machen.
Mit CSS können alle Elemente entfernt werden, die nicht gedruckt werden dĂŒrfen. DafĂŒr gibt es den "@media print"-Selektor. Damit können bestimmte Bereiche deiner Seite von der Druckversion entfernt werden. Aber sobald du Ănderungen an der HTML-Struktur deiner Webseite vornimmst, kann es sein dass die Regeln wieder angepasst werden mĂŒssen.
Du erkennst vielleicht, dass im besten Fall eine unabhÀngige Print-Version der BeitrÀge erstellt werden sollte.
Und mit einem kleinen Skript geht das auch!
Druckversionen zur VerfĂŒgung stellen ohne eine PDF vorzubereiten
Das fertige Script habe ich natĂŒrlich schon vorbereitet und getestet. Mit einem Klick auf diesen Button kannst du es ebenfalls testen:
Beachte bitte, dass du bereits ein wenig JavaScript-, PHP- und HTML/CSS-Kenntnisse benötigst, wenn du das folgende Skript vollstÀndig verstehen möchtest.
Die Idee hinter der Druck-Funktion
GrundsĂ€tzlich gibt es ein paar Schritte, die du beachten solltest, wenn du eine solche Funktion erstellen willst. FĂŒr meinen Print-Algorithmus habe ich mich fĂŒr den folgenden Ablauf entschieden:
- Klick auf den Button zur Druck-Version
- Aufruf einer AJAX-Abfrage
- Bereitstellen der HTML/CSS Print-Version per PHP
- Zusenden der Print-Version an das JavaScript
- Aufruf der Druck-Funktion in einem neuen Fenster
FĂŒr das folgende Script habe ich folgende Bibliotheken verwendet, die du in dein Projekt hinzufĂŒgen solltest:
-
jQuery
Du musst nicht zwangslÀufig jQuery verwenden. Wenn du dich mit JavaScript auskennst, kannst du das Skript auch ohne diese "Schwerlast" umsetzen.
Verwende am besten die neueste Version, es sollte aber keinen Unterschied machen, wenn du eine Àltere Version verwendest.
Link zum Download: jQuery downloaden -
Font Awesome
FĂŒr die Animation wĂ€hrend das AJAX-Script lĂ€dt, verwende ich normalerweise Font Awesome.
In den Beispielen wird dir auch ganz genau erklÀrt, wie du Font Awesome verwendest und wie die sogenannten "Spinner" funktionieren.
Link zum Download: Font Awesome downloaden
Das Auslösen der Druck-Funktion
ZunÀchst kannst du den Button in HTML und CSS vorbereiten, den wir verwenden werden um die JavaScript-Funktion zu starten.
<button class="print_version"<Diese Seite als PDF drucken</button> <span class="print_load" style="display: none;"> <i class="fa fa-circle-o-notch fa-spin fa-fw"></i> </span>
Den Button kannst du mit CSS formatieren wie du möchtest, oder ihn so belassen wie der Browser es vorgibt. Beachte aber, dass jeder Browser einen Button unterschiedlich formatiert. Um einen einheitlichen Stil zu erhalten, solltest du also CSS verwenden.
Ein Beispiel:
button.print_version {
padding: 8px 14px;
background-color: #000000;
border: 1px solid #000000;
border-radius: 0;
color: #ffffff;
transition: background-color .5s, color .5s;
}
button.print_version:hover,
button.print_version:active,
button.print_version:focus {
background-color: transparent;
color: #000000;
}
Der Aufruf der Druck-Funktion
Beim Aufruf der Druck-Funktion binde ich alle Elemente mit der Klasse "print_version" durch einen Klick an eine Funktion. Diese Funktion hat 2 Aufgaben: Die Lade-Animation anzeigen und eine weitere Funktion "getPrintVersion" aufrufen.
Das Lade-Element ĂŒbergebe ich an die getPrintVersion-Funktion, damit diese die Lade-Animation selbststĂ€ndig ausschalten kann, sobald sie fertig ist.
(function($) {
$( document ).ready( function() {
$( '.print_version' ).each( function() {
var printBtn = $( this );
printBtn.unbind( 'click' );
printBtn.bind( 'click', function() {
var loader = printBtn.siblings( '.print_load' );
loader.show();
getPrintVersion( loader );
});
});
});
})(jQuery);
Vergiss beim "bind" nicht eine "unbind"-Funktion zu setzen. Sollte es durch einen Fehler der Fall sein, dass dieses Skript mehr als ein mal ausgefĂŒhrt wird, so wird die Funktion getPrintVersion auch öfters mit einem Klick aufgerufen. Das ist ein Programmier-Fehler der vermieden werden sollte.
Die AJAX-Funktion des Drucken-Skripts
Nun erstellen wir die Funktion "getPrintVersion". Diese sollte unmittelbar unter dem Aufruf "$( document ).ready()" platziert werden, damit wir jQuery als "$" verwenden können.
In der Funktion "getPrinterVersion" wird eine AJAX-Abfrage erstellt, die ein PHP-Skript wÀhrend der Laufzeit der Webseite aufruft. Durch eine AJAX-Abfrage können Inhalte der Webseite nachgeladen werden, ohne dass die Seite neu geladen wird.
In der AJAX-Funktion verbergen sich einige Daten, die an das PHP-Skript ĂŒbergeben werden. Diese Daten findest du im Objekt "data". Durch den Wert "action" kann im PHP-Skript ĂŒberprĂŒft werden, welche Funktion das AJAX aufrufen möchte. Mehr dazu spĂ€ter in der PHP-Funktion.
Zudem beinhaltet das Skript eine "success"-Funktion, die aufgerufen wird sobald das PHP-Skript Daten zurĂŒck gibt. Diese Funktion lĂ€sst die Lade-Animation verschwinden und ruft eine weitere Funktion "openPrinter" auf, die sich um die Darstellung der Print-Version in einem neuen Fenster kĂŒmmert.
function getPrintVersion( loader ) {
var ajax_url = 'ajax.php'; // Dieser Pfad muss zu deinem PHP-Skript fĂŒhren
var post_id = 1; // Ăndere diese ID je nach Beitrag ab. Eine Lösung fĂŒr WordPress wird nachfolgend genannt
$.ajax({
url: ajax_url,
method: 'POST',
cache: true,
data: {
'action': 'printversion',
'id': 1
},
success: function( data ) {
loader.hide();
data = $.parseJSON( data );
openPrinter( data.html, data.title );
}
});
}
Bevor wir zum PHP-Skript kommen, erstellen wir nun als nÀchstes die Funktion "openPrinter". Diese Funktion ist recht einfach aufgebaut. Durch den Algorithmus erstellen wir ein neues Fenster, dass die Druck-Version beinhaltet.
In dieser Funktion wird der HTML-Code der Druck-Version und der Titel ĂŒbergeben.
function openPrinter( jsonHTML, title ) {
if( typeof title === "undefined" ) title = document.title;
var printVersion = $.parseJSON( jsonHTML );
var printWindow = window.open( '', title, 'width=800,height=600' );
printWindow.document.write( printVersion );
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
Die dynamische Druck-Version in PHP aufbauen
Das PHP-Skript beinhaltet sowohl die Steuerung, welche AJAX-Abfrage aufgerufen wird, als auch die Aufbereitung und Struktur des HTML-Inhalts fĂŒr die Druck-Version.
Ich verwende gerne ob-Funktionen ("ob_start()" und "ob_get_clean()"), um HTML-Inhalte in meinem Quellcode-Editor besser darstellen zu lassen. Mit der Funktion "ob_start()" wird sozusagen eine Aufnahme der nachfolgenden Ausgaben erstellt und mit "ob_get_clean()" wieder gestoppt. Zudem gibt die Funktion "ob_get_clean()" die komplette Ausgabe als Zeichenkette zurĂŒck, die du in eine Variable sichern kannst.
Verwende regelmĂ€Ăig Funktion "json_encode()", um deine Codes verkleinert zu ĂŒbertragen. Damit kannst du auch super Arrays in eine Zeichenkette wandeln und in jQuery mit "$.parseJSON" wieder in eine Array zurĂŒckverwandeln.
Ich habe im nachfolgenden PHP-Skript bedacht, dass du eventuell kein Content Management System verwendest. Du kannst das Skript nach belieben Ă€ndern, damit du die Inhalte aus deinem CMS oder der Datenbank heranziehen kannst. Eine Version fĂŒr WordPress findest du im nĂ€chsten Abschnitt.
<?php
switch( $_POST[ 'action' ] ) {
case 'printversion':
echo render_printversion();
break;
default: echo ""; break;
}
function render_printversion() {
$id = $_POST[ 'id' ];
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $post[ $id ][ 'title' ]; ?></title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1><?php echo $post[ $id ][ 'title' ]; ?></h1>
<?php echo $post[ $id ][ 'content' ]; ?>
</body>
</html>
<?php
$html = json_encode( ob_get_clean() );
$title = $post[ $id ][ 'title' ];
$printData = array(
'html' => $html,
'title' => $title
);
return json_encode( $printData );
}
$post = array(
1 => array(
'title' => 'Title 1',
'content' => 'Lorem ipsum dolor sit amet'
),
2 => array(
'title' => 'Title 2',
'content' => 'Lorem ipsum dolor sit amet'
)
);
?>
Denke dran, dass du einen PHP-FĂ€higen Server benötigst, um dieses Programm auszufĂŒhren. Da das aber der Standard im Web ist, gehe ich davon aus, dass du einen PHP-FĂ€higen Server verwendest.
WordPress Drucken-Button ohne Plugin
In WordPress musst du das PHP-Skript fĂŒr AJAX ein wenig anders handhaben. Damit du die WordPress-Eigenen Funktionen verwenden kannst, musst du die PHP-Funktion "render_printversion" in den Kontext von WordPress einbinden. Ansonsten kennt das System deine PHP-Funktion nicht und kann ihm auch keine Daten wie BeitrĂ€ge zur VerfĂŒgung stellen.
Nachfolgend findest du den angepassten PHP-Code fĂŒr WordPress:
<?php
add_action( 'wp_ajax_printversion', 'render_printversion' );
add_action( 'wp_ajax_nopriv_printversion', 'render_printversion' );
function render_printversion() {
if( !empty( $_POST[ 'id' ] ) )
$id = $_POST[ 'id' ];
else
$id = url_to_postid( wp_get_referer() );
$post = get_post( $id );
ob_start();
?>
<title><?php echo $post->post_title; ?></title>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<?php
if( !empty( $thumb = get_the_post_thumbnail_url( $post ) ) ) {
?>
<img src="<?php echo $thumb; ?>" width="100%" alt="<?php echo $post->post_title; ?>" />
<?php
}
?>
<h1><?php echo $post->post_title; ?></h1>
<?php echo do_shortcode( $post->post_content ); ?>
</body>
</html>
<?php
$html = json_encode( ob_get_clean() );
$title = $post->post_title;
$printData = array(
'html' => $html,
'title' => $title
);
wp_die( json_encode( $printData ) );
exit;
}
?>
In dieser angepassten Version berĂŒcksichtige ich die Möglichkeit einen anderen Beitrag auszuwĂ€hlen, als der den der Benutzer gerade vor dem Bildschirm hat. Dadurch kannst du zum Beispiel ein Archiv aller BeitrĂ€ge mit der Druckfunktion erweitern.
Sollte die ID ĂŒber die AJAX-Funktion von JavaScript nicht gesetzt sein, wird die Druck-Version des Beitrags erstellt, auf der sich der Benutzer aktuell befindet. Das funktioniert mit der WordPress-Funktion "url_to_postid( wp_get_referer() )".
Hast du Anmerkungen oder Probleme zu diesen Skripten? Schreibe in den Kommentaren. Ich versuche dir gerne nach Möglichkeit zu helfen.
Das konnte dich auch interessieren
![The Great Book of Cooking [Code] - Vol.1 | Chap.1](https://static.codepalm.de/wp-content/uploads/2023/03/Great-Book-of-Cooking-Code-Volume-1-Chapter-1-EN-Itch-1.png)
Kommentare
Sei der Erste, der einen Kommentar erstellt!