Gehört zu: WordPress Plugins
Siehe auch: Google Drive, SVG-Zeichnungen, Google Apps Login, Google Fotos
Benutzt: Fotos von Google Drive
Stand: 14.10.2023
Ich suche nach einem Weg, wie ich Medien-Dateien (z.B. JPG, SVG, XLS, MP3, MP4, GMX,…) in meine WordPress-Artikel gut einbinden kann. Also wirklich “einbinden”, möglichst keinen Upload. Die Medien-Dateien werde ich dann irgendwo “hosten”, unabhängig vom WordPress-Provider.
Im ersten Schritt werde ich also meine Medien-Dateien auf Google Drive speichern. Dabei ist wichtig, welchen meiner Google-Accounts ich dafür verwende.
Im zweiten Schritt möchte ich die auf Google Drive gespeicherte Medien-Datei in einen WordPress-Artikel einbinden.
Hochladen der Medien-Dateien auf Google Drive
Um meine Medien-Dateien auf mein Google Drive hochzuladen, benutze ich meinen Web-Browser und gehe auf mein Google Drive (https://dirve.google.com). Dort melde ich mich mit meinem Google Konto (rubaschow@googlemail.com) an:
Abbildung 1: Anmelden bei Google Drive (Google Drive: GoogleDrive20.jpg)
Im obersten Ordner “Meine Ablage” lege ich einen Unterordner mit dem Namen “WordPress” an.
In diesen Unterordner WordPress lade ich dann meine Medien-Dateien hoch.
Die hochgeladenen Medien-Dateien gebe ich dann noch frei für “Jeder, der über den Link verfügt”.
Dann kann das Einbetten in einen WordPress-Artkel losgehen…
Einbetten von Medien-Dateien in WordPress-Artikel
Zum Einbetten von Dateien aus Google Drive gibt es ein älteres und ein neueres WordPress-Plugin:
- Älteres Plugin: “Google Drive Embedder”
- Neueres Plugin: “Integrate Google Drive”
Beide benutzen zum Anmelden am Google-Konto ein weiteres WordPress-Plugin “Login for Google Apps“. Dieses Plugin muss also zuerst installiert und eingerichtet werden.
WordPress-Plugin “Login for Google Apps”
Dies hatte ich schon einmal in 2021 beschrieben: Google Apps Login
Login for Google Apps uses the latest secure OAuth2 authentication recommended by Google, including 2-factor Auth if enabled for your Google Workspace (formerly known as Google Apps / G Suite) accounts.
Nun beginnt eine recht komplizierte Prozedur, mit der wir am Schluss eine “Client-ID” und ein “Client Secret” bekommen, dass wir im Setup des WordPress-Plugins eintragen können.
Diese Prozedur erfordert einen Admin access zu einer Google Workspace domain, oder einen normalen Gmail account, womit man die Registrierung vornehmen kann, um am Ende diese zwei einfache Daten von Google zu bekommen.
In your Web Browser go to the Google Developers Console: https://console.cloud.google.com
Jetzt muss eine Anmeldung am “richtigen” Google-Konto aktiv sein; dann sieht man diejenigen “Projekte”, die zu diesem Google-Konto gehören.
Abbildung 2: Google Developers Console (Google Drive: GoogleDrive21.jpg)
In der Google Developers Console, sehe ich schon ein Projekt names “WordPressPhotos”, das ich als letztes bearbeitet hatte. Falls das nicht das richtige Projekt ist, können wir ein anderes vorhandenes Project dieses Google Kontos auswählen. Wenn noch garkein Projekt da ist, klicken wir auf Create Project und legen ein ganz neues Projekt an.
Nun sind wir also auf unserem gewünschten Projekt und klicken als nächstes auf APIs & Auth (APIs und Dienste) im Menü links, und dann auf “Anmeldedaten” . Dort sehen wir schon die zuvor angelegte “OAuth 2.0 Client-Id” namens “WordPress”.
http://blog.kr8.de/wp-admin/admin.php?page=wpseo_dashboard
Falls wir eine “OAuth 2.0 Client-Id” neu anlegen wollen,…..and select the Consent screen sub-menu. XYZ
Die so erhaltenen zwei Infos “Client-Id” und “Client Secret” tragen wir im Setup des Plugins “Login for Google Apps” wie folgt ein:
Abbildung 3: Settings im Plugin “Login for Google Apps” (Google Drive: GoogleDrive23.jpg)
Abbildung 4: WordPress-Plugin “Login for Google Apps” (Google Drive: GoogleDrive24.jpg)
WordPress-Plugin: “Integrate Google Drive”
Zum Abschluss dieser (einmaligen) Einrichtung der WordPress-Plugins müssen wir noch dem Plugin “Integrate Google Drive” sagen welches Google-Konto es benutzen soll (mehrere Google-Konten wären kostenpflichtig).
Abbildung 5: WordPress-Plugin “Ingegrate Google Drive” (Google Drive: GoogleDrive25.jpg)
Einbetten von Media-Dateien von Google Drive
Da zu habe ich das WordPress-Plugin “Integrate Google Drive” installiert. Danach erscheint beim Editieren eines jeden WordPress Artikels in der oberen Leiste eine Schaltfläche “Google File” (in der Reihe: Add Media, Add slider, Google File, Add Contact Form):
Abbildung 6: WordPress – Google Drive (Google Drive: GoogleDrive26.jpg)
Wenn ich auf diese Schaltfläche “Google File” klicke, öffnet das Plugin zunächst ein Fenster “Select Insert Type”, wo ich “Embed Document” auswähle. Danach wird der oberste Ordner “Meine Ablage” von Google Drive (meines festgelegten Google Kontos) angezeigt..
Abbildung 7: Select Insert Type (Google Drive: GoogleDrive27.jpg)
Einbetten von Fotos – JPG-Dateien
Fotos (JPG-Dateien) werden so als “iframe” in den WordPress-Artikel eingebettet.
Beispiel:
<iframe class=”igd-embed” src=”https://drive.google.com/file/d/14p0r4cfiHWRCY4KyQND4MkW8LMbluwHq/preview?rm=minimal” width=”100%” height=”480px” frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>
Ich mache dann immer noch folgende Änderungen im Editor (statt “Visual” gehe ich auf den Reiter “Text”).
Dann suche ich die HTML-Passage mit dem IFRAME und mache drei Dinge:
- Entfernen der CSS-Klasse: class=”igd-embed”
- Width und Height auf die genaue Größe des Fotos, damit keine schwarzen Balken entstehen…
Einbetten von Zeichnungen – SVG-Dateien
Mit dem WordPress-Plugin “SVG Support” kann ich zwar SVG-Zeichnungen schön in meine WordPress-Artikel einbinden, die Speicherung erfolgt aber in der WordPress-Media-Library – also beim WordPress-Provider. Ich möchte die Speicherung aber unabhängig vom WordPress-Provider vornehmen. So wie ich das schon mit einen Pixel-Bildern mache, die auf Google Drive gespeichert sind.
Update 2023: Mittlerweile speichere ich meine SVG-Grafiken auf GitHub. und füge dann über “Add Media” und “Insert from URL” die SVG-Zeichnung ein.
Beispiele:
Einbetten von Tabellenblättern – XLS-Dateien
Bei Tabellenblättern möchte man häufig ja nicht die ganze Datei, sondern nur einen Ausschnitt eines Tabellenblatts in den WordPress-Artikel einbetten.
Zum Einbetten von Tabellen gibt es diverse WordPress-Plugins z.B.: “TablePress”, “WP Table Manager”,…
Beispiele dafür sind:
Im Prinzip kann ich Excel-Dateien genauso wie oben beschrieben bei JPG-Dateien in WordPress einbinden. Der Punkt ist nur, dass dann immer das ganze Tabellenblatt angezeigt wird, obwohl man meisten ja nur eine bestimmte Range haben möchte…
Abbildung 8: Die ganze Excel-Datei einbinden (Google Drive: Beobachtungsobjekte.xlsx)
Wenn ich nur einen bestimmten Ausschnitt (eine Excel-Range) haben will, muss ich eine andere URL nehmen. Diese URL benutzt dann statt “?preview” das Wort “?htmlembed”. Wobei ich soeine Excel-Range dann alternativ über WordPress-Embed oder über IFRAME einbauen kann.
Abbildung 9: Nur eine kleinere Excel-Range einbinden mit EMBED (Google Drive: Beobachtungsobjekte.xlsx)
Abbildung 10: Nur eine kleinere Excel-Range einbinden als IFRAME (Google Drive: Beobachtungsobjekte.xlsx)
Einbetten von Audio-Dateien – MP3-Dateien
Ich möchte die Speicherung auch der MP3-Dateien unabhängig vom WordPress-Provider vornehmen. So wie ich das schon mit einen Pixel-Bildern (JPG) mache, die auf Google Drive gespeichert sind.
Deswegen speichere ich meine MP3-Dateien auch auf Google Drive. und embedde sie dann manuell als IFRAME über Google Drive in den WordPress-Beitrag.
Beispiele:
Einbetten von GPS-Tracks – GPX-Dateien
Ich möchte die Speicherung auch de GPX-Dateien unabhängig vom WordPress-Provider vornehmen. So wie ich das schon mit einen Pixel-Bildern (JPG) mache, die auf Google Drive gespeichert sind.
Deswegen speichere ich meine GPX-Dateien auf GitHub. und füge dann mit Hilfe des WordPress-Plugins OSM die Landkarte mit GPS-Track in den WordPress-Beitrag ein.
Beispiele:
==================================
Beispiel
Das WordPress-Plugin “Google Apps Login” habe ich unter “WordPress Settings” auf eines meiner Google-Konten (rubaschow) eingestellt.
Mit dem Google-Konto habe ich mich angemeldet, zwei Ordner neu angelegt: “Audio” und “Pictures”.
Dann habe ich in den Ordner “Audio” drei MP3-Dateien und in den Ordner “Pictures” einige JPG-Dateien hochgeladen.
Schießlich habe ich die hochgeladenen Dateien auf “Shared” gesetzt und zwar mit “jeder der den Link hat“.
Beispiel 1: Eine JPG-Datei “netzwerk07.jpg”
Beispiel 2: Eine MP3-Datei “derloewe.mp3”