WordPress: Button für Downloads erzeugen

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.

Download Plugin Erzeugt einen schönen Downloadbutton

Also, viel Spaß damit.

Über H.-Peter Pfeufer

Ich bin Webentwickler/ -programmierer aus Leidenschaft, WordPressbegeistert und ab und an auch mal ein netter Mensch.
Vor allen schreibe ich über alles was mit den Themen Webentwicklung/ -programmierung und WordPress zu tun hat. Nebenher auch mal einige Gedanken zu allgemeineren Themen.

Zeige alle Beiträge von H.-Peter Pfeufer →

11 Antworten auf WordPress: Button für Downloads erzeugen

Silas DeProgramma sagt:
6. September 2010 um 00:50

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:

1
return '<a href="' . $url . '" rel="nofollow">';

it will bw nice if you have something like

1
[dl url="http://eure-seite.de/euer-download.tar.gz" title="Download" desc="Tolles Archiv" target="_blank"]

Antworten

H.-Peter Pfeufer sagt:

6. September 2010 um 08:26

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.

1
2
3
4
5
6
7

extract(shortcode_atts(array(
"url" => '',
"title" => '',
"desc" => '',
"align" => '',
"target" => ''
), $atts));

You have to check if a target is set.

1
2
3

if ($target != '') {
$target = ' target="' . $target . '"';
}

Modify the output.

1
2
3
4
5
6

$var_sHTML .= '<div id="downloadbutton" class="dlbutton' . $align . '">
<a href="' . $url . '" ' . $target . '>
<span>' . $title . '</span>
<em>' . $desc . '</em>
</a>
</div>';

Antworten

Miguel sagt:
16. Oktober 2010 um 19:21

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

Antworten
H.-Peter Pfeufer sagt:
17. Oktober 2010 um 14:00

Hi Miguel,

Das Ganze funktioniert über einen Shortcode.

1
[dl url="http://eure-seite.de/euer-download.tar.gz" title="Download" desc="Tolles Archiv"]

Dies einfach in den Artikel einfügen und der Button wird angezeigt.

Antworten
Gil sagt:
11. November 2010 um 04:38

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?

Antworten
H.-Peter Pfeufer sagt:
11. November 2010 um 16:53

Yes, make a .zip-File from your image.

Images will always open in browserwindows. This button is only a styled hyperlink.

Antworten
eduard sagt:
13. Dezember 2010 um 18:54

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

Antworten
H.-Peter Pfeufer sagt:
14. Dezember 2010 um 01:03

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.

1
2
#downloadbutton {width:304px; height:75px; background:url("../img/button.png") top right; text-align:center;}
#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

Antworten
pablo sagt:
26. Januar 2011 um 10:08

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

Antworten
H.-Peter Pfeufer sagt:
26. Januar 2011 um 11:05

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.

Antworten
Kurzvorstellung: Download Counter für WordPress » bohncore Ping

21. April 2011 um 09:42

[...] 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. [...]