Wordpress: Button für Downloads erzeugen

WordPress: Button für Downloads erzeugen

Montag, 26. Juli 2010 um 9:36 Uhr | Kategorien: Wordpress, Wordpress-Plugins | Tags: Download, Plugin, Wordpress

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.

WordPress: WikioVote-Button Plugin
- Tweet var wikiovoted=false; function setWikio(id){ } 13 voten Wikio ist ein Informationsportal, auf dem aktuelle Meldungen aus Medien und Blogs zusammenstellt werden. Die dort gelisteten Beiträge können auch gevotet werden. Wikio selbst stellt hierzu sogar ein Plugin für WordPress zur Verfügung. Dieses Plugin ist allerdings etwas älter und wird nicht...
WordPress: WP List PlugIns – Ein Plugin zum Auflisten der installierten WordPress-Plugins
- Tweet var wikiovoted=false; function setWikio(id){ } 6 voten Dieses Plugin ist in der Lage eine Liste aller in der WordPress-Installation verwendeten Plugins zu erstellen. Warum ich so etwas mache? Nun, ganz einfach, ich habe schon viele Blogs gesehen, wo die Betreiber ihre Plugins auflisten und da kam ich auf die...
WordPress: WP Tweet Search Tooltip Plugin
- Tweet var wikiovoted=false; function setWikio(id){ } 6 voten Für jeden Blogbetreiber kann es durchaus interessant sein, den Lesern die letzten Tweets zu ausgewählten Schlagworten zu zeigen. Genau dies macht das WP Tweet Search Tooltip Plugin für WordPress. Dazu werden die Schlagworte die bei Twitter gesucht werden sollen, einfach in einem...
WordPress-Plugin: WP-Twitter Retweet Button
- Tweet var wikiovoted=false; function setWikio(id){ } 13 voten Der Twitter-Button von Twitter selbst ist nun offiziell, diverse Blogs berichteten darüber. Dies war für mich Grund genug aus dem ein WordPress-Plugin zu basteln. Ich nenne es einfach WP-Twitter Retweet Button. Das Plugin einfach herunter laden und im Backend aktivieren. Das Plugin...
WordPress-Plugin: Extended Blogroll
- Tweet var wikiovoted=false; function setWikio(id){ } 6 voten Basierend auf dem Blogroll Widget with RSS Feed Plugin von Crazy Girl habe ich mich an die Arbeit gemacht und diese doch sehr interessante und gelungene Umsetzung einer Blogroll weiter zu vereinfachen. Geblieben ist dem eigentlichen Plugin das Sidebar-Widget. Überarbeitet ist die...

Kommentar abgeben | Trackback

Silas DeProgramma

Montag, 06. September 2010 um 0:50 Uhr

Antworten | Zitieren | #1

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"]

H.-Peter Pfeufer

Montag, 06. September 2010 um 8:26 Uhr

Antworten | Zitieren | #2

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>';