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://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.


Version: 2.1
02. November 2012

  • Tested up to WordPress 3.8-alpha


Version: 2.0
22. Juli 2012

  • Code Cleanup


Version: 1.3.1
06. Juni 2012

  • Fixed CSS load. Now it will only be loaded on frontend view.


Version: 1.3
29. April 2012

  • Updated CSS
  • Updated Look and Feel. Its looks more modern now.
  • Added Download-Types. (PDF, Archive, Audio, Video, Image, Link, Doc)
  • better, newer, cooler :-)


Version: 1.2
27. Februar 2011

  • Moved CSS from external file to inline. Loads faster :-)


Version: 1.1.2
09. November 2011

  • Ready for WordPress 3.3


Version: 1.1.2
24. Februar 2011

  • Ready for WordPress 3.1


Version: 1.1.1

  • Renamed to Download Button Shortcode
  • Upload to Wordpress Plugin Directory


Version: 1.1.0

  • Added Shortcodeoption for Buttonposition [dl url="" title="" desc="" align=""]. This ist optional. If not set, the button will appear centered. Possible options are “center”, “left” and “right”


Version: 1.0.0

  • Initial Release

Also, viel Spaß damit.

Artikel weiterempfehlen
Werbung

34 Meinungen zu “Download Button Shortcode

  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"]
  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>'
    ;
  3. 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

  4. 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?

  5. 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 :-)

  6. 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

  7. 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!

  8. 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.

  9. 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:

    1
    [dl url="http://eure-seite.de/euer-download.tar.gz" title="Download" desc="Tolles Archiv" icon="pdf"]
      • 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 :-)

  10. 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.

  11. Hallo H. Peter,

    danke für das Plugin :-)
    Jetzt frage ich mich, wie ich den WordPress Download Monitor dazu bringe die Downloads zu zählen, die über den Download Button laufen. Über einen Tipp würde ich mich sehr freuen.

    Herzliche Grüße Frank

  12. Hallo,

    mich würde interessieren, wie sie den Changelog erzeugt haben und ob das auch ein Plugin ist?

    Viele Grüße und besten Dank für das optisch sehr ansprechende Download Button Plugin :)

  13. Wie bekomme ich im ganz oben angegeben:

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

    Die Bilder geändert? Ich möchte gerne ein Link setzten, doch er zeigt mir immer das Button Bild mit dem Download an? Oder muss ich da ins Plugin rein um das zu ändern? Bei Pdf zeigt er immer pdf an

    Danke

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>