einfacher Downloadlink

Gelöst akinoo
(@akinoo)

vor 7 Jahren, 10 Monaten

Hallo in die WP-Runde,

ich hoffe Ihr könnt mir helfen:

für meinem Kunden suche ich eine einfache Möglichkeit, dass er Prospekte und Datenblätter im Pdf-Format zum Download anbieten kann.

Das heißt er soll sie selber hochladen und pflegen können.

Meine Idee war, einfach ein Icon bzw. ein kleines Bild mit einem Link zu dem Download zu verbinden.

Was für mich mit Programmierkenntnissen recht einfach ist, erweist sich für meinen Kunden als komplizierter:

Zuerst muss er das Bild/Icon hochladen, um es dann mit einem LInk zu dem Medium zu verbinden.

Leider werden im Link-Dialog von WP keine PDFs, sondern nur Seiten und Posts angeboten.

Jetzt meine Fragen:

– Kann man WP dazu bringen, dass es im Link-Dialog auch andere Medien anbietet, z.B. PDFs?

– Oder: Kennt jemand ein kleines Plugin, womit man mit wenigen Einstellungen auch zum Ziel kommt?

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Monika
(@monika)

vor 7 Jahren, 10 Monaten
in die functions.php des Child Themes oder ein kleines Plugin schreiben
```
function modify_post_mime_types( $post_mime_types ) {

 // select the mime type, here: 'application/pdf'
 // then we define an array with the label values

 $post_mime_types['application/pdf'] = array( __( 'PDFs' ), __( 'Manage PDFs' ), _n_noop( 'PDF (%s)', 'PDFs (%s)' ) );

 // then we return the $post_mime_types variable
 return $post_mime_types;

}

// Add Filter Hook
add_filter( 'post_mime_types', 'modify_post_mime_types' );
```
somit kannst du bei Beitrag oder Seite schreiben, statt Bild hochladen auch .pdf auswählen

gestalten kannst du den Link via CSS, weil du das .pdf ja ansprechen kannst
Moderator Bego Mario Garde
(@pixolin)

vor 7 Jahren, 10 Monaten
Ich würde das per CSS lösen.
1. Du besorgst dir hier ein pdf-Icon in der Gröe 32×32 Pixel.
2. Du lädst das Icon in die Mediathek hoch*.
3. Du installierst das Plugin Simple Custom CSS.
4. Unter Design > Benutzerdefiniertes CSS gibst du folgendes ein:
```
a[href$=".pdf"]
{
 padding: 0 0 0 36px;
 background-image: url('http://deinedomain.de/wp-content/uploads/2016/06/Adobe_PDF_file_icon_32x32.png');
 background-position: top left;
 background-repeat:no-repeat;
 height: 32px;
 display: inline-block;
}
```
 (Den Link zum Hintergrundbild musst du ggf. anpassen.)
5. Jetzt kann dein Kunde pdf-Dateien in die Mediathek hochladen und dann in Beiträge oder Seiten einfügen. Links neben der Linkbezeichnung wird automatisch das pdf-Icon angezeigt.
* Alternativ kannst du das Icon natürlich auch in ein Child-Theme packen und dann im Stylesheet des Child Themes einen relativen Pfad zum Icon angeben.

PS: Das sollte kein Einwand zu Monikas etwas anders ausgerichtetem Vorschlag sein; sie war einfach schneller als ich. Ich hatte auch zuerst an einen Filter gedacht, fand dann aber die Lösung mit dem CSS einfacher. Schönes Beispiel, dass man bei WordPress häufig sehr unterschiedliche Lösungsansätze verfolgen kann.
Thread-Starter akinoo
(@akinoo)

vor 7 Jahren, 10 Monaten
Hallo Monika, Hallo Bego,

merci für die schnelle Hilfe.

Ich habe beide Varianten ausprobiert.

Zu Bego:

Die Lösung funktioniert wunderbar.

Leider benötige ich zwei Sorten an Pdfs: nämlich Datenblätter und Prospekte. Die beiden würde ich gerne durch 2 unterschiedliche Icons unterscheiden.

Letztendlich soll es so aussehen

zu Monika:

Mit deiner Lösung komme ich einen Schritt weiter:

Ich kann das PDF hochladen und bekomme dann eine verlinkte Datei.

Leider steh ich jetzt auf dem Schlauch:

– das Pdf soll sich in einem neuen Fenster öffnen. Wie füge ich dem ganzen ein target=„_blank“ hinzu?

– Wie kann ich das CSS für meinen Kunden komfortabel einbinden?

Meine Idee ist, mit dem Plugin „Add-Quick-Tags“ zu arbeiten. Dieses bietet im Editor vorgefertigte CSS-Lösungen an. Die ich natürlich vorher angefertigt habe.

Nach dem Motto: ich wähle im Editor mein gerade hochgeladenes und verlinktes PDF aus und füge mit einem Klick dem ganzen ein vorgefertigtes CSS hinzu.

Nun weiß ich nicht genau, wie ich den Download selektieren soll. Mit einem -Element? Das birgt viele Möglichkeiten für meinen Kunden sich zu vertun, weil es hier auf die genauen Verschachtelungen ankommt.

Wenn ich Monikas Lösung nutze, bekomme ich folgenden Code:

<a href="http://meinedomain.de/datenplatt.pdf“>Datenblatt-Produkt-A</a>

Meine Idee ist folgender Code. Einen für Prospekte und einen für Datenblätter.

Habt Ihr eine Idee?
```
<a href="http://meinedomain.de/datenplatt.pdf" target="_blank"><img src="http://meinedomain.de/datenblatt-icon.jpg" width="45" height="60" />Datenblatt-Produkt-A</a>

<a href="http://meinedomain.de/datenplatt.pdf" target="_blank"><img src="http://meinedomain.de/prospekt-icon.jpg" width="45" height="60" />Prospekt-Produkt-A</a>
```
Moderationshinweis: Auszeichnung korrigiert. Viele Grüße, Bego
Moderator Bego Mario Garde
(@pixolin)

vor 7 Jahren, 10 Monaten
Du könntest mit dem Kunden vereinbaren, dass Datenblätter und Prospekte nach einem einheitlichen Schema benannt werden und z.B. immer mit -blatt.pdf bzw. -prospekt.pdf enden. Dazu fügst du dann zwei unterschiedliche Icons zum (Child) Theme hinzu. Das CSS sähe dann so aus:
```
a[href$=".pdf"] {
 padding: 0 0 0 36px;
 background-position: top left;
 background-repeat:no-repeat;
 height: 32px;
 display: inline-block;
}

a[href$="-blatt.pdf"] {
 background-image: url('img/datenblatt_icon_32x32.png');
}
a[href$="-prospekt.pdf"] {
 background-image: url('img/prospekt_icon_32x32.png');
}
```
Thread-Starter akinoo
(@akinoo)

vor 7 Jahren, 10 Monaten

Hi Bego,
merci, das funktioniert gut.

Es hat leider nur einen Haken:
Die Seite soll in viele Sprachen übersetzt werden. Dann muss man jeweils dran denken, 2 Endungen für die beiden Dokumente zu vereinbaren.

Oder macht vereinbart zwei internationale Begriffe, wie -prospect und -datasheets.

Das ist machbar, aber birgt natürlich auch wieder Fehlerquellen in sich.

Habt ihr noch eine Idee?

Moderator Bego Mario Garde
(@pixolin)

vor 7 Jahren, 10 Monaten

Vielleicht hättest du von Anfang an erklären sollen, was du eigentlich willst. 😬

Du kannst auch für jede Sprache zwei Icons hochladen, einmal für Prospekte, einmal für Broschüren. Dein Kunde kann dann die Icons einfügen und bei Link zu … den Link zur pdf-Datei angeben.

Monika
(@monika)

vor 7 Jahren, 10 Monaten

du wirst nicht umhin kommen, deinen Kunden gründlichst einzuschulen

wer so spezielles haben mag, muss auch was dafür tun,
alles geht einfach nicht immer automatisch

oder du nimmst den Ansatz von Bego und musst eben dann für jede Sprache das CSS schreiben

Thread-Starter akinoo
(@akinoo)

vor 7 Jahren, 10 Monaten

@ Bego

Im Prinzip war meine Ausgangsidee, genauso, wie Du sie in Deiner letzten Mail beschreibst:

Der Kunde lädt ein Icon auf die Seite und setzt dann einen Link zur Pdf.

Nur, dass Du den Link schon im MedienUpload-Dialog setzt.

Ich hätte diesen Link erst später setzen wollen. Im Editor, im LInk-Dialog.

Und meine ursprüngliche Frage war, ob es eine Möglichkeit gibt, dass in diesem Dialog auch PDF-Dateien angezeigt werden. Hier könnte ich dann pro Icon mehre Pdfs verlinken.

Sorry, mir war nicht klar, dass sich so viele Wenn und Abers ergeben.

Letztendlich habe ich mich für Deine CSS-Lösung entschieden.

Da ich ungefähr abschätzen kann, welche Sprachen in Frage kommen, werde ich eine Liste mit den verschiedenen Endungen pro Sprache anlegen.

Das hat auch was Gutes: Man hat in der Mediathek immer eine Übersicht in welcher Sprache das Medium vorliegt.

@ Monika

Ja, du hast Recht. Natürlich muss der Kunde ordentlich geschult werden.

Aber die verlieren oft den Überblick. Da war meine Idee, es ein wenig komfortabler zu gestalten.

Herzlichen Dank für Eure Mühen

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Das Thema „einfacher Downloadlink“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten