Ab und an möchte man seinen Lesern einen Download anbieten. Aber einfach nur ein Link ist da doch etwas banal. Daher möchte ich hier nun eine Möglichkeit vorstellen, wie man einen schönen Downloadbutton erzeugen kann. Dazu nutzt man einfach die Shortcode-API von WordPress und erstellt sich einen solchen Shortcode, welchen man dann im Artikel selbst nutzen kann.
In diesem Beispiel sieht das dann wie folgt aus:
1 | [dl url="http://eure-seite.de/euer-download.tar.gz" title="Download" desc="Tolles Archiv"] |
Zur Erklärung, der Shortcode an sich heißt “dl” und hat drei Attribute. Die URL (url=”")des Downloads, den Titel (title=”") und eine Kurzbeschreibung (desc=”"). Alle drei Angaben sind erforderlich.
Dahinter steckt ein PHP-Script, welche diesen Shortcode nun in HTML-Code umwandelt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?php /** * Plugin name: Download Button * Plugin URI: http://blog.ppfeufer.de/wordpress-button-fuer-downloads-erzeugen/ * Author: H.-Peter Pfeufer * Author URI: http://ppfeufer.de * Version: 1.0.0 * Description: Erzeugt einen schönen Downloadbutton. Grafiken erstellt von <a href="http://kkoepke.de">Kai Köpke</a>. Einbinden via [dl url="" title="" desc=""] */ if(!is_admin()) { // Nur wenn keine Adminseite define('DOWNLOADBUTTON_VERSION', '1.0.0'); $css_url = plugins_url(basename(dirname(__FILE__)) . '/css/downloadbutton.css'); /** * CSS in Wordpress einbinden */ wp_register_style('downloadbutton-for-wordpress', $css_url, array(), DOWNLOADBUTTON_VERSION, 'screen'); wp_enqueue_style('downloadbutton-for-wordpress'); /** * Shortcode in HTML-Code umwandeln * @param $atts */ function sc_downloadButton($atts) { extract(shortcode_atts(array( "url" => '', "title" => '', "desc" => '' ), $atts)); return '<div id="downloadbutton"> <a href="' . $url . '"> <span>' . $text . '</span> <em>' . $desc . '</em> </a> </div>'; } add_shortcode('dl', 'sc_downloadButton'); } ?> |
Damit das auch noch schön aussieht, kommt natürlich auch noch etwas CSS zum Einsatz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | @CHARSET "UTF-8"; #downloadbutton { width: 305px; height: 75px; left: 10px; position: relative; background: url("../img/button.png") top right; text-align: center; } #downloadbutton:hover { background: url("../img/button.png") bottom right; color: #ffffff; } #downloadbutton a { width: 100%; height: 100%; display: block; text-decoration: none; } #downloadbutton a:hover { color: #ffffff; } #downloadbutton a span { font: normal 190%/ 130% "Trebuchet MS", Tahoma, Arial; color: #5f6970; display: block; padding: 11px 0 0 0; width: 100% } #downloadbutton a em { font: normal 110%/ 80% "Trebuchet MS", Tahoma, Arial; color: #5f6970; display: block; width: 100%; } |
Natürlich ist da auch noch eine kleine Grafik mit im Spiel, welche freundlicherweise von Kai Köpke erstellt wurde, aber die poste ich nun hier nicht, denn ihr sollt das Plugin ja downloaden 
Seit dem 19. August 2010 kann dieses Plugin auch über das WordPress-Pluginverzeichnis bezogen werden.
Also, viel Spaß damit.
Thanks for creating this. really useful.
Is there a way you can let user specify target in the link? I had to modify the code to work with what I wanted, as in:
it will bw nice if you have something like
Hi Silas,
Sorry, but the target-attribute is deprecated since years and so i will not longer use this in my codes.
For a simple download there is no target needed, but if you want to use this button as a link to other sides, here is the code you need to implement the target.
First you modify to change the array.
2
3
4
5
6
7
"url" => '',
"title" => '',
"desc" => '',
"align" => '',
"target" => ''
), $atts));
You have to check if a target is set.
2
3
$target = ' target="' . $target . '"';
}
Modify the output.
2
3
4
5
6
<a href="' . $url . '" ' . $target . '>
<span>' . $title . '</span>
<em>' . $desc . '</em>
</a>
</div>';
Entschuldigen Sie meine Frage, sprechen kein Englisch und Nutzung der Google-Übersetzer ..
Ihr Plugin korrekt in meinem WP 3.1 Theme installiert Arras + 1.5.0.1.
Das Problem ist, dass buchstäblich nicht können Sie auf diese Schaltfläche angezeigt wird.
Erstellen Sie einen Beitrag und diesen Beitrag einen Link zu Datei herunterladen. Woher kommt der Button? wie bekomme ich den Download-Button sichtbar?
Ich weiß, es ist eine primäre Frage, aber ich kann nicht sehen, wie.
Mit freundlichen Grüßen,
Miguel
Hi Miguel,
Das Ganze funktioniert über einen Shortcode.
Dies einfach in den Artikel einfügen und der Button wird angezeigt.
Hi!
Very useful plugin! I am using this to download 1 large image per post but it brings the download to a new page instead of downloading it straight. Is it possible to make the button download the file straight to the user’s computer?
Yes, make a .zip-File from your image.
Images will always open in browserwindows. This button is only a styled hyperlink.
Hi there, very useful your plugin. But Can I change the image for another one? That one its too big. There’s anything we could do with that?
many thanks
Yes, you can use your own image. For this, you have to change the CSS a little. The CSS-File is located under /wp-content/plugins/download-button-shortcode/css/ and is named as downloadbutton.css.
To set anther image, first, you need another image and then you have to change the background in two lines in CSS.
2
#downloadbutton:hover {background:url("../img/button.png") bottom right; color:#ffffff;}
The first line ist the button as seen on pages and the second line ist the hover-state. It’s the moment you are with your mouse over the button. The attributes “width” and “height” define how big the button is.
Good luck
hi, this is a really nice plug in but i am having problem to use it and to mask my download link. could you tell me how can i use this button plus a mask link for my downloads? something like this
http://www.hotscripts.com/forums/script-requests/28802-hide-download-link-script.html
Hi Pablo,
Masking the downloadlink is not possible only with this button. For WordPress there are several plugins to do this. I recommend WordPress Download Monitor. With this plugin you can set your own downloadpath like http://yoursite.com/download/name and the plugin redirects to the given file (.zip or .pdf or whatever) to download.
[...] Als kleiner weiterführender Hinweis: Bei Peter gibt es einen Artikel über das Generieren eines Download-Buttons mithilfe der WordPress Shortcode API. Wer also noch einen Button erzeugen lassen möchte, kann sich den Artikel von Peter durchlesen. [...]
Hallo, danke für deinen netten Plugin.
Meine Frage – kann ich die Größe irgendwie anpassen, denn im Moment ist er mir etwas zu groß für meine HP Sidebar : siehe rechts unten: http://twizzlers.bplaced.net/wordpress/?page_id=2
Und, ist es möglich die automatische Zentrieung im Artikel raus zunehmen?
Viele Grüße und vielen Dank!
Die Größe des Downloadbuttons ist im CSS einstellbar, jedoch auf die Grafik, welche im Hintergrund ist angepasst. Die Positionierung kannst Du durch das Argument align=”" bestimmen. Dies erlaubt die Optionen align=”left” und align=”right”. Ist dieses Argument nicht angegeben, wird der Button schlichtweg zentriert angezeigt.
Sehr nützliches Plugin.
Allerdings wäre es insofern nicht schlecht, wenn man die Farbe der Button-Grafik per CSS regeln könnte.
Wäre insofern realisierbar, dass man statt eines eingefärbten Buttons einen transparenten Button nutzt und den Huntergrund per CSS definiert.
Ansonsten seht feine Sache.
Vielen Dank für diese schöne Plugin!
Einen Vorschlag habe ich trotzdem: Wie wäre es mit einem kleinen Icon im Button? Z.B. ein PDF oder JPG Icon, damit man sofort sieht was man herunterlädt?
So könnte das aussehen:
Das Plugin ist in Überarbeitung bei der dies geplant ist. Auch eine automatische Erkennung ist geplant. Aber das dauert noch etwas.
Ok, dann freue ich mich schon!
In der Zwischenzeit habe ich es für mich so gemacht, das ich ein Shortcode icon=”pdf” habe und das dann das Bild “button_pdf.png” lädt (button.png, wenn kein icon definiert wurde).
Das ist natürlich nicht sicher vor Updates
Auch musste ich etwas CSS inline schreiben … passt mir auch nicht, funktioniert aber.
Das mit dem automatisch erkennen habe ich hingekriegt.
Ich weiss bloss nicht ob es massentauglich ist. Wenn aber jemand Interesse daran haben sollte, bitte melden. Icons dazu habe ich auch gefunden.
Dieser Downloadknopf ist vollständig automatisch erstellt worden.
@Gilbert
Ja, Interesse besteht! Bei mir auf jeden Fall!
Vielleicht kannst Du Dich mit Peter einigen, dass dieser es in sein Plugin einbaut bzw. Deine Änderungen hier übernimmt und veröffentlicht. Diese Funktion ist nämlich sehr sinnvoll und ich möchte diese gern auf meiner zukünftigen Seite verwenden. Danke.
@Peter
Danke für Deine fleißige Programmierarbeit und die ganzen Tools für WP!
@Lars
Hier habe ich Dir den Link zu meiner Version.
Peter hat jetzt gerade eine neue Version herausgegeben, aber so wie ich das sehen, erkennt dieser die Dateiendung noch nicht selber.
Ich werde mir den neuen Download-Button noch genauer ansehen, vielleicht wird meiner ja überflüssig!
Und hier der Link: Download-Button_mod
Peter und Lars:
Ich habe mir vorhin das Plugin näher angeschaut!
Also, die automatische Erkennung ist gut – Danke!
Ich habe aber für mich noch etwas anpassen müssen, da ich den “Download Counter” (von Erwin Bovendeur) benutze, muss ich den Dateiname aus der Datenbank holen gehen (alles in der ZIP Datei) sonst geht die Erkennung, logischerweise, nicht.
Ähm, den Download-Type kannst Du auch manuell setzen. einfach type=”pdf” für zum Beispiel PDF-Dateien angeben. Momentan als Grafik hinterlegte Typen sind “archive”, “audio”, “doc”, “download”, “image”, “link”, “pdf” und “video”. Wobei “download” als Standardbildchen hergenommen wird, wenn der Typ nicht erkannt wird oder keiner der definierten ist.
Die Bildchen sind allesamt von Kai erstellt worden, wer aber mag, kann gerne weitere Bildchen für verschiedene Typen erstellen. Wichtig hierbei ist jedoch, dass man sich an den bereits vorhandenen vom Stil her orientiert und die Icons keine Urheberrechtsverletzung darstellen. Dann einfach mir die Bildchen schicken, ich erweitere das dann dementsprechend
Vielen Dank an Euch Beide für die schnelle und unkomplizierte Lösung.
Werde es versuchen umzusetzen und dabei fleißig Eure Codes studieren. Bin derzeit gerade bei der Aneignung von ersten Programmiererfahrungen.
@Peter
Woher bekomme ich diesen individuellen Mauszeiger auf der Seite? Hast Du die selbst erstellt und muss ich für jede Grafik eine Extra-.cur-Datei haben und diese per CSS einbinden, oder geht auch eine .ani-Datei dafür? Reicht es den CSS-Eintrag im Bereich des Haupt-HTML-Bereiches zu einzupflegen, oder sind spezifische Änderungen notwendig, da sich der Zeiger ja z.B. bei Mousover hier im Textfeld auch ändert? Danke, Lars.