So beschleunigen Sie die Bereitstellung von WordPress-Assets mithilfe von DigitalOcean Spaces CDN

Fortsetzung von Wie man WordPress-Assets auf DigitalOcean-Spaces speichert, Ihre Medienbibliothek sollte in Ihren DigitalOcean Space entladen werden und Ihre Einstellungen für das Spaces Sync-Plugin sollten wie folgt aussehen:

image: https://assets.digitalocean.com/articles/do_spaces_sync_plugin/sync_cloud_only.png [Nur Cloud synchronisieren]

Wenn Sie die How To Store WordPress Assets nicht ausgefüllt haben Im Tutorial zu DigitalOcean Spaces können Sie diese Anleitung weiterhin befolgen, indem Sie das Spaces Sync-Plug-In mit dem built-in plugin installer installieren. Wenn Sie auf Fehler stoßen, lesen Sie bitte die Schritte in dieser Anleitung.

Wir werden einige kleinere Änderungen vornehmen, um sicherzustellen, dass wir mit unserer Konfiguration WordPress-Themes und andere Verzeichnisse über den Ordner + wp-content / uploads + Media Library hinaus auslagern können.

Zunächst ändern wir das Feld * Vollständiger URL-Pfad zu Dateien *, sodass die Mediathek-Dateien vom CDN unseres Space und nicht lokal vom Server bereitgestellt werden. Diese Einstellung schreibt Verknüpfungen zu Medienbibliotheks-Assets im Wesentlichen neu und ändert sie von Dateilinks, die lokal auf Ihrem WordPress-Server gehostet werden, zu Dateilinks, die auf dem DigitalOcean Spaces-CDN gehostet werden.

Rufen Sie den * Edge * -Endpunkt auf, den Sie unter https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery- using-digitalocean-spaces-cdn#enabling-spaces notiert haben -cdn Schritt [Enabling Spaces CDN]. Wenn Sie eine benutzerdefinierte Unterdomäne mit Spaces CDN verwenden, verwenden Sie diese Unterdomäne anstelle des Edge-Endpunkts.

In diesem Lernprogramm lautet der Name des Space "++" und der CDN-Endpunkt des Space lautet:

Ersetzen Sie nun auf der Seite mit den Einstellungen für das Spaces Sync-Plugin die URL im Feld * Vollständiger URL-Pfad zu Dateien * durch Ihren Spaces CDN-Endpunkt, gefolgt von + / wp-content / uploads +.

In diesem Lernprogramm würde die vollständige URL unter Verwendung des oben genannten Spaces CDN-Endpunkts lauten:

Wenn Sie eine benutzerdefinierte Unterdomäne verwenden, z. B. "+ https: // +", sieht die vollständige URL folgendermaßen aus:

Geben Sie als nächstes im Feld * Lokaler Pfad * den vollständigen Pfad zum Verzeichnis + wp-content / uploads + auf Ihrem WordPress-Server ein. In diesem Tutorial lautet der Pfad zur WordPress-Installation auf dem Server "+ / var / www // ". Der vollständige Pfad zu " uploads " lautet also " / var / www // wp-content / uploads +" .

In das Feld * Speicherpräfix * geben wir "+ / wp-content / uploads " ein, um sicherzustellen, dass die richtige " wp-content +" -Verzeichnishierarchie erstellt wird, damit wir andere WordPress-Verzeichnisse in diese Verzeichnisse auslagern können Platz.

Es ist nicht erforderlich, die Option * Dateien nur in der Cloud speichern und löschen… * zu aktivieren. Aktivieren Sie dieses Kontrollkästchen nur, wenn Sie die Medienbibliotheksassets von Ihrem Server löschen möchten, nachdem sie erfolgreich auf Ihren DigitalOcean Space hochgeladen wurden.

Ihre endgültigen Einstellungen sollten ungefähr so ​​aussehen:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/modified_sync_settings.png [Final Spaces Sync Settings]

Achten Sie darauf, die obigen Werte durch die Werte zu ersetzen, die Ihrer WordPress-Installation und Ihrer Spaces-Konfiguration entsprechen.

Zum Schluss drücken Sie * Save Changes *.

Oben auf dem Bildschirm sollte das Feld * Gespeicherte Einstellungen * angezeigt werden, um zu bestätigen, dass die Einstellungen für das Spaces Sync-Plugin erfolgreich aktualisiert wurden.

In diesem Schritt haben wir das WordPress-Theme oder andere + wp-content + Assets nicht ausgelagert. Um zu erfahren, wie Sie diese Assets auf Spaces übertragen und mithilfe des Spaces-CDN bereitstellen, wechseln Sie zu https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean -spaces-cdn # offloading-additional-assets- (optional) [Zusätzliche Assets entladen].

Um zu überprüfen und zu testen, ob Ihre Medienbibliothek-Uploads vom Spaces CDN geliefert werden, wechseln Sie zu https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean -spaces-cdn # testing-cdn-caching [CDN-Caching testen].

Zu Beginn müssen Sie eine Kopie des Plugins auf der DeliciousBrains-Website (https://deliciousbrains.com/wp-offload-media/pricing/[plugin site) erwerben. Wählen Sie die entsprechende Version aus, abhängig von der Anzahl der Assets in Ihrer Medienbibliothek und den Support- und Featureanforderungen für Ihre Site.

Nachdem Sie die Kaufabwicklung durchlaufen haben, werden Sie mit einem Download-Link für das Plugin und einem Lizenzschlüssel zu einer Website nach dem Kauf weitergeleitet. Der Download-Link und der Lizenzschlüssel werden Ihnen auch an die E-Mail-Adresse gesendet, die Sie beim Kauf des Plugins angegeben haben.

Laden Sie das Plugin herunter und navigieren Sie zur Administrationsoberfläche Ihrer WordPress-Site (+ https: /// wp-admin +). Bei Bedarf einloggen. Bewegen Sie den Mauszeiger über * Plugins * und klicken Sie auf * Add New *.

Klicken Sie auf * Upload Plugin * und oben auf der Seite auf * Choose File * und wählen Sie dann das soeben heruntergeladene Zip-Archiv aus.

Klicken Sie auf "Jetzt installieren" und dann auf "Plugin aktivieren". Sie werden zur Administrationsoberfläche des WordPress-Plugins weitergeleitet.

Navigieren Sie von hier aus zur Einstellungsseite des WP Offload Media-Plugins, indem Sie unter dem Namen des Plugins auf * Einstellungen * klicken.

Sie werden zum folgenden Bildschirm weitergeleitet:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_storage_provider.png [WP Offload Media Configuration]

Klicken Sie auf das Optionsfeld neben * DigitalOcean Spaces *. Sie werden nun aufgefordert, Ihren Spaces-Zugriffsschlüssel entweder in der Datei "+ wp-config.php +" (empfohlen) oder direkt in der Weboberfläche zu konfigurieren (letztere speichert Ihre Spaces-Anmeldeinformationen in der WordPress-Datenbank).

Wir konfigurieren unseren Spaces Access Key in "+ wp-config.php".

Melden Sie sich über die Befehlszeile bei Ihrem WordPress-Server an und navigieren Sie zu Ihrem WordPress-Stammverzeichnis (in diesem Tutorial ist dies "+ / var / www / html "). Öffnen Sie von hier aus ` wp-config.php +` in Ihrem Lieblingseditor:

Scrolle runter zu der Zeile, in der "+ / *" steht. Viel Spaß beim Bloggen. * / + `und bevor die folgenden Zeilen mit Ihrem Spaces-Zugriffsschlüsselpaar eingefügt werden (Informationen zum Generieren eines Zugriffsschlüsselpaars finden Sie unter https://www.digitalocean.com/docs/spaces/how-to/administrative -access / # access-keys [Spaces-Produktdokumentation]):

wp-config.php

Speichern und schließen Sie die Datei, nachdem Sie die Bearbeitung abgeschlossen haben. Die Änderungen werden sofort wirksam.

Wählen Sie in der Administrationsoberfläche des WordPress Offload Media-Plugins das Optionsfeld neben * Definieren Sie die Zugriffsschlüssel in der Datei wp-config.php * und klicken Sie auf * Save Changes * (Änderungen speichern).

Sie sollten zu der folgenden Schnittstelle gebracht werden:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_bucket_selection.png [Auswahl des WP-Offload-Buckets]

Wählen Sie auf dieser Konfigurationsseite mit der Dropdown-Liste * Region * die entsprechende Region für Ihren Space aus und geben Sie Ihren Space-Namen neben * Bucket * ein (in diesem Tutorial heißt unser Space + wordpress-offload +).

Dann drücken Sie * Save Bucket *.

Sie werden zur Hauptkonfigurationsseite von WP Offload Media weitergeleitet. Oben sollte das folgende Warnfeld angezeigt werden:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_license.png [WP Offload License]

Klicken Sie auf * Geben Sie Ihren Lizenzschlüssel ein * und geben Sie auf der folgenden Seite den Lizenzschlüssel ein, der sich in Ihrer E-Mail-Quittung oder auf der Checkout-Seite befindet, und klicken Sie auf * Lizenz aktivieren *.

Wenn Sie Ihren Lizenzschlüssel korrekt eingegeben haben, sollte * Lizenz erfolgreich aktiviert * angezeigt werden.

Navigieren Sie nun zurück zur Konfigurationsseite von WP Offload Media, indem Sie oben im Fenster auf * Media Library * klicken.

Zu diesem Zeitpunkt wurde WP Offload Media erfolgreich für die Verwendung mit Ihrem DigitalOcean Space konfiguriert. Sie können jetzt mit dem Auslagern und Bereitstellen von Assets mithilfe des Spaces-CDN beginnen.

Nachdem Sie WP Offload Media mit Ihrem DigitalOcean Space verknüpft haben, können Sie Assets auslagern und die URL-Umschreibung konfigurieren, um Medien vom Spaces-CDN bereitzustellen.

Auf der Hauptkonfigurationsseite für WP Offload Media sollten die folgenden Konfigurationsoptionen angezeigt werden:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_main_nav.png [WP Offload Main Nav]

Diese Standardeinstellungen sollten in den meisten Anwendungsfällen problemlos funktionieren. Wenn Ihre Medienbibliothek unter einem nicht standardmäßigen Pfad in Ihrem WordPress-Verzeichnis vorhanden ist, geben Sie den Pfad in das Textfeld unter der Option * Pfad * ein.

Wenn Sie Asset-URLs so ändern möchten, dass sie direkt von Spaces und nicht von Ihrem WordPress-Server bereitgestellt werden, stellen Sie sicher, dass der Schalter neben "Medien-URLs umschreiben" auf "Ein" gesetzt ist.

Stellen Sie zum Bereitstellen von Medienbibliotheksressourcen mithilfe des Spaces-CDN sicher, dass Sie das CDN für Ihren Space aktiviert haben (siehe https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-). using-digitalocean-spaces-cdn # enable-spaces-cdn [Enable Spaces CDN], um zu erfahren, wie) und notieren Sie sich die URL für den * Edge * -Endpunkt. Drücken Sie die Umschalttaste neben * Custom Domain (CNAME) * und geben Sie in das angezeigte Textfeld die CDN * Edge * -Endpunkt-URL ohne das Präfix + https: // + ein.

In diesem Handbuch ist der Spaces CDN-Endpunkt:

Also hier geben wir ein:

Wenn Sie eine benutzerdefinierte Unterdomäne mit Spaces CDN verwenden, geben Sie diese Unterdomäne hier ein:

Zur Verbesserung der Sicherheit erzwingen wir HTTPS für Anforderungen an Medienbibliotheks-Assets (die jetzt über das CDN bereitgestellt werden), indem Sie den Schalter auf "Ein" setzen.

Sie können optional Dateien, die auf Spaces ausgelagert wurden, von Ihrem WordPress-Server löschen, um Speicherplatz freizugeben. Drücken Sie dazu * Ein * neben * Dateien vom Server entfernen *.

Wenn Sie mit der Konfiguration von WP Offload Media fertig sind, klicken Sie unten auf der Seite auf "Änderungen speichern", um Ihre Einstellungen zu speichern.

Das Feld * URL Preview * sollte eine URL enthalten, die Ihren Spaces CDN-Endpunkt enthält. Es sollte ungefähr so ​​aussehen:

+ https: //. nyc3.cdn.digitaloceanspaces.com / wp-content / uploads / 2018/09/21211354 / photo.jpg +

Wenn Sie eine benutzerdefinierte Unterdomäne mit Spaces CDN verwenden, sollte die URL-Vorschau diese Unterdomäne enthalten.

Diese URL zeigt an, dass WP Offload Media erfolgreich für die Bereitstellung von Medienbibliotheksassets mithilfe des Spaces-CDN konfiguriert wurde. Wenn der Pfad nicht "+ cdn +" enthält, stellen Sie sicher, dass Sie die * Edge * -Endpunkt-URL und nicht die * Origin * -URL korrekt eingegeben haben (dies gilt nicht bei Verwendung einer benutzerdefinierten Unterdomäne).

Zu diesem Zeitpunkt wurde WP Offload Media so eingerichtet, dass Ihre Medienbibliothek mit Spaces CDN bereitgestellt wird. Alle * zukünftigen * Uploads in Ihre Medienbibliothek werden automatisch in Ihren DigitalOcean Space kopiert und über das CDN bereitgestellt.

Sie können jetzt vorhandene Assets in Ihrer Medienbibliothek mithilfe des integrierten Upload-Tools als Bulk-Offload speichern.

Wir werden das integrierte "Upload-Tool" des Plugins verwenden, um vorhandene Dateien in unserer WordPress-Medienbibliothek zu entladen.

Auf der rechten Seite der Konfigurationsseite von WP Offload Media sollte das folgende Feld angezeigt werden:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_upload_tool.png [WP Offload Upload Tool]

Klicken Sie auf * Jetzt herunterladen *, um Ihre Mediathek-Dateien in Ihren DigitalOcean Space hochzuladen.

Wenn der Upload-Vorgang unterbrochen wird, wird im Feld Folgendes angezeigt:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_upload_tool_2.png [WP Offload Upload Tool 2]

Klicken Sie auf * Verbleibende Dateien abladen *, um die verbleibenden Dateien auf Ihren DigitalOcean Space zu übertragen.

Sobald Sie die verbleibenden Elemente aus Ihrer Medienbibliothek entfernt haben, sollten die folgenden neuen Felder angezeigt werden:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/wp_offload_success.png [WP Offload Success]

Zu diesem Zeitpunkt haben Sie Ihre Medienbibliothek in Ihren Space ausgelagert und stellen die Dateien mithilfe des Spaces-CDN an Benutzer bereit.

Sie können die Dateien jederzeit von Ihrem Space auf Ihren WordPress-Server herunterladen, indem Sie auf * Dateien herunterladen * klicken.

Sie können Ihren DigitalOcean Space auch löschen, indem Sie auf * Dateien entfernen * klicken. Stellen Sie zuvor sicher, dass Sie die Dateien zuerst von Spaces auf Ihren WordPress-Server heruntergeladen haben.

In diesem Schritt haben wir gelernt, wie Sie Ihre WordPress-Medienbibliothek in DigitalOcean Spaces auslagern und mithilfe des WP Offload Media-Plugins Links zu diesen Medienbibliotheken neu schreiben.

Um zusätzliche WordPress-Assets wie Designs und JavaScript-Dateien zu entladen, können Sie das Asset Pull Addon verwenden oder das https: // www .digitalocean.com / community / tutorials / wie man die Zustellung von WordPress-Assets mithilfe von Digitalocean-Spaces beschleunigt-cdn # Zusätzliche Assets auslagern- (optional) Abschnitt [Zusätzliche Assets auslagern] in diesem Handbuch.

Um zu überprüfen und zu testen, ob Ihre Medienbibliothek-Uploads vom Spaces-CDN geliefert werden, wechseln Sie zu https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean -spaces-cdn # testing-cdn-caching [CDN-Caching testen].

Nach dem Kauf des MLFP-Plugins sollten Sie eine E-Mail mit Ihren MaxGalleria-Zugangsdaten sowie einen Plugin-Download-Link erhalten haben. Klicken Sie auf den Link zum Herunterladen des Plugins, um das Zip-Archiv des MLFP-Plugins auf Ihren lokalen Computer herunterzuladen.

Nachdem Sie das Archiv heruntergeladen haben, melden Sie sich bei der Administrationsoberfläche Ihrer WordPress-Site an ("+ https: /// wp-admin +") und navigieren Sie zu "Plugins" und dann zu "Add New" in der linken Seitenleiste.

Klicken Sie auf der Seite * Plugins hinzufügen * auf * Plugin hochladen * und wählen Sie das soeben heruntergeladene ZIP-Archiv aus.

Klicken Sie auf * Jetzt installieren *, um die Plugin-Installation abzuschließen, und klicken Sie im Bildschirm * Plugin installieren * auf * Plugin aktivieren *, um MLFP zu aktivieren.

In der linken Seitenleiste sollte dann ein Menüelement * Media Library Folders Pro * angezeigt werden. Klicken Sie darauf, um zur Oberfläche von Media Library Folders Pro zu gelangen. Die verschiedenen Funktionen des Plugins werden in diesem Handbuch nicht behandelt. Weitere Informationen finden Sie unter the MaxGalleria site und https: // maxgalleria .com / Foren / [Foren].

Wir werden jetzt das Plugin aktivieren. Klicken Sie unter dem Menüpunkt MLFP auf * Einstellungen * und geben Sie Ihren Lizenzschlüssel neben dem Textfeld * Lizenzschlüssel * ein. Sie finden Ihren MLFP-Lizenzschlüssel in der E-Mail, die Sie beim Kauf des Plugins erhalten haben. Klicken Sie auf * Änderungen speichern * und dann auf * Lizenz aktivieren *. Als nächstes drücken Sie * Update Settings *.

Ihr MLFP-Plugin ist jetzt aktiv und Sie können es verwenden, um vorhandene oder neue Medienbibliotheks-Assets für Ihre WordPress-Site zu organisieren.

Wir installieren und konfigurieren jetzt das Spaces-Addon-Plugin, damit Sie diese Assets von DigitalOcean Spaces auslagern und bereitstellen können.

Um das Spaces-Addon zu installieren, melden Sie sich bei Ihrer MaxGalleria account an. Sie finden Ihre Zugangsdaten in einer E-Mail, die Sie beim Kauf des MLFP-Plugins erhalten haben.

Navigieren Sie zur Seite * Addons * in der oberen Menüleiste und scrollen Sie nach unten zu * Media Sources *. Klicken Sie hier auf die Option * Media Library Folders Pro S3 und Spaces *.

Scrollen Sie von dieser Seite nach unten zum Abschnitt * Preise * und wählen Sie die Option aus, die der Größe Ihrer WordPress-Medienbibliothek entspricht (für Medienbibliotheken mit 3000 Bildern oder weniger ist das Addon kostenlos).

Nach Abschluss des Addon-Kaufs können Sie zu Ihrer Kontoseite zurückkehren (durch Klicken auf den Link * Konto * in der oberen Menüleiste), über die das Addon-Plugin jetzt verfügbar ist.

Klicken Sie auf das Image * Media Library Folders Pro S3 * und der Download des Plugins sollte beginnen.

Wenn der Download abgeschlossen ist, navigieren Sie zurück zu Ihrer WordPress-Administrationsoberfläche und installieren Sie das heruntergeladene Plugin auf die gleiche Weise wie oben, indem Sie auf * Plugin hochladen * klicken. Klicken Sie erneut auf * Plugin aktivieren *, um das Plugin zu aktivieren.

Wahrscheinlich erhalten Sie eine Warnung zum Konfigurieren von Zugriffsschlüsseln in Ihrer "+ wp-config.php" -Datei. Diese werden jetzt konfiguriert.

Melden Sie sich über die Konsole oder SSH bei Ihrem WordPress-Server an und navigieren Sie zu Ihrem WordPress-Stammverzeichnis (in diesem Tutorial ist dies "+ / var / www / html "). Öffnen Sie von hier aus ` wp-config.php +` in Ihrem Lieblingseditor:

Scrollen Sie nach unten zu der Zeile mit der Aufschrift "+ / *". Beenden Sie die Bearbeitung! Viel Spaß beim Bloggen. * / + `und bevor Sie die folgenden Zeilen einfügen, die Ihr Spaces-Zugriffsschlüsselpaar und eine Plugin-Konfigurationsoption enthalten (Informationen zum Generieren eines Zugriffsschlüsselpaars finden Sie unter https://www.digitalocean.com/docs/spaces/ how-to / administrative-access / # access-keys [Spaces-Produktdokumentation]):

wp-config.php

Speichern und schließen Sie die Datei, nachdem Sie die Bearbeitung abgeschlossen haben.

Navigieren Sie nun über die https://cloud.digitalocean.com/[Cloud-Systemsteuerung zu Ihrem DigitalOcean Space und erstellen Sie einen Ordner mit dem Namen "+ wp-content +", indem Sie auf "Neuer Ordner" klicken.

Navigieren Sie von hier zurück zur WordPress-Administrationsoberfläche und klicken Sie in der Seitenleiste auf * Media Library Folders Pro * und dann auf * S3 & Spaces Settings *.

Das Warnbanner zum Konfigurieren der Zugriffstasten sollte jetzt verschwunden sein. Wenn es immer noch vorhanden ist, sollten Sie Ihre "+ wp-config.php +" - Datei auf Tippfehler oder Syntaxfehler überprüfen.

Geben Sie in das Textfeld * License Key * den Lizenzschlüssel ein, den Sie nach dem Kauf des Spaces-Addons per E-Mail erhalten haben. Beachten Sie, dass sich dieser Lizenzschlüssel vom MLFP-Lizenzschlüssel unterscheidet. Klicken Sie auf * Änderungen speichern * und dann auf * Lizenz aktivieren *.

Nach der Aktivierung sollte der folgende Konfigurationsbereich angezeigt werden:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/spaces_addon_config.png [MLFP-Spaces-Addon-Konfiguration]

Klicken Sie hier auf * Image Bucket & Region auswählen *, um Ihren DigitalOcean Space auszuwählen. Wählen Sie dann die richtige Region für Ihren Space und drücken Sie * Save Bucket Selection *.

Sie haben das Spaces-Offload-Plugin erfolgreich mit Ihrem DigitalOcean Space verbunden. Sie können mit dem Auslagern Ihrer WordPress-Medienbibliothek beginnen.

Über das Kontrollkästchen * Dateien auf dem Cloud-Server verwenden * können Sie angeben, von wo aus Medienbibliotheksressourcen bereitgestellt werden. Wenn Sie das Kontrollkästchen aktivieren, werden Assets von DigitalOcean Spaces bereitgestellt und URLs zu Bildern und anderen Medienbibliotheksobjekten werden entsprechend umgeschrieben. Wenn Sie vorhaben, das Spaces-CDN für die Bereitstellung Ihrer Medienbibliotheksressourcen zu verwenden, * deaktivieren * Sie dieses Kontrollkästchen, da das Plug-in den Spaces-Endpunkt * Origin * und nicht den CDN-Endpunkt * Edge * verwendet. Wir werden das Umschreiben von CDN-Links in einem zukünftigen Schritt konfigurieren.

Klicken Sie auf das Kontrollkästchen * Dateien vom lokalen Server entfernen *, um lokale Medienbibliotheks-Assets zu löschen, nachdem sie erfolgreich in DigitalOcean Spaces hochgeladen wurden.

Das Kontrollkästchen * Einzelne heruntergeladene Dateien vom Cloud-Server entfernen * sollte beim Massen-Download von Dateien von Spaces auf Ihren WordPress-Server verwendet werden. Wenn diese Option aktiviert ist, werden diese Dateien nach dem erfolgreichen Download auf Ihren WordPress-Server aus Spaces gelöscht. Diese Option können wir vorerst ignorieren.

Da wir das Plugin für die Verwendung mit dem Spaces-CDN konfigurieren, lassen Sie das Kontrollkästchen "Dateien auf dem Cloud-Server verwenden" deaktiviert und klicken Sie auf "Medienbibliothek auf den Cloud-Server kopieren", um die WordPress-Medienbibliothek Ihrer Site mit Ihrem DigitalOcean Space zu synchronisieren.

Es sollte ein Fortschrittsfenster angezeigt werden, und anschließend * Upload abgeschlossen. *, Um anzuzeigen, dass die Synchronisierung der Medienbibliothek erfolgreich abgeschlossen wurde.

Navigieren Sie zu Ihrem DigitalOcean Space, um zu bestätigen, dass Ihre Mediathek-Dateien in Ihren Space kopiert wurden. Sie sollten im Unterverzeichnis "+ upload" des Verzeichnisses "+ wp-content" verfügbar sein, das Sie zuvor in diesem Schritt erstellt haben.

Sobald Ihre Dateien in Ihrem Space verfügbar sind, können Sie mit der Konfiguration des Spaces-CDN fortfahren.

Um das Spaces-CDN für die Bereitstellung Ihrer jetzt gelöschten Dateien zu verwenden, müssen Sie zunächst https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#enabling -spaces-cdn [stellen Sie sicher, dass Sie das CDN aktiviert haben] für Ihren Space.

Sobald das CDN für Ihren Space aktiviert wurde, können Sie das Plugin CDN Enabler WordPress installieren und konfigurieren, um Links zu Ihren Medienbibliotheks-Assets neu zu schreiben. Das Plugin schreibt die Links zu diesen Assets neu, sodass sie vom Spaces CDN-Endpunkt bereitgestellt werden.

Um CDN Enabler zu installieren, können Sie entweder das Menü * Plugins * auf der WordPress-Administrationsoberfläche verwenden oder das Plugin direkt über die Befehlszeile installieren. Wir werden das letztere Verfahren hier demonstrieren.

Melden Sie sich zunächst bei Ihrem WordPress-Server an. Navigiere dann zu deinem Plugin-Verzeichnis:

Achten Sie darauf, den obigen Pfad durch den Pfad zu Ihrer WordPress-Installation zu ersetzen.

Verwenden Sie von der Kommandozeile aus die + wp-cli + Schnittstelle, um das Plugin zu installieren:

Aktivieren Sie nun das Plugin:

Sie können das CDN-Enabler-Plugin auch mit dem built-in plugin installer installieren und aktivieren.

Zurück im WordPress Admin-Bereich sollten Sie unter * Einstellungen * einen neuen Link zu den * CDN Enabler * -Einstellungen sehen. Klicken Sie in * CDN Enabler *.

Sie sollten den folgenden Einstellungsbildschirm sehen:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/cdn_enabler_settings.png [CDN Enabler Settings]

Ändern Sie die angezeigten Felder wie folgt:

Drücken Sie dann * Save Changes * (Änderungen speichern), um diese Einstellungen zu speichern und für Ihre WordPress-Site zu aktivieren.

Zu diesem Zeitpunkt haben Sie die Medienbibliothek Ihrer WordPress-Site erfolgreich in DigitalOcean Spaces ausgelagert und stellen sie Endbenutzern mit dem CDN zur Verfügung.

In diesem Schritt haben wir das WordPress-Theme oder andere + wp-content + Assets nicht ausgelagert. Um zu erfahren, wie Sie diese Assets auf Spaces übertragen und mithilfe des Spaces-CDN bereitstellen können, gehen Sie zu https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean -spaces-cdn # Zusätzliche Assets auslagern- (optional) [Zusätzliche Assets auslagern].

Um zu überprüfen und zu testen, ob Ihre Medienbibliothek-Uploads vom Spaces-CDN geliefert werden, wechseln Sie zu https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean -spaces-cdn # testing-cdn-caching [CDN-Caching testen].

Melden Sie sich bei Ihrem WordPress-Server an, um CDN Enabler zu installieren. Navigiere dann zu deinem Plugin-Verzeichnis:

Achten Sie darauf, den obigen Pfad durch den Pfad zu Ihrer WordPress-Installation zu ersetzen.

Verwenden Sie von der Kommandozeile aus die + wp-cli + Schnittstelle, um das Plugin zu installieren:

Aktivieren Sie nun das Plugin:

Sie können das CDN-Enabler-Plugin auch mit dem built-in plugin installer installieren und aktivieren.

Zurück im WordPress Admin-Bereich sollten Sie unter * Einstellungen * einen neuen Link zu den * CDN Enabler * -Einstellungen sehen. Klicken Sie in * CDN Enabler *.

Sie sollten den folgenden Einstellungsbildschirm sehen:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/cdn_enabler_settings.png [CDN Enabler Settings]

Zu diesem Zeitpunkt haben Sie CDN Enabler erfolgreich installiert. Nun laden Sie Ihre WordPress-Themes zu Spaces hoch.

In diesem Tutorial wird zur Veranschaulichung einer grundlegenden Plug-in-Konfiguration nur "+ wp-content / themes " bereitgestellt, das WordPress-Verzeichnis, das die PHP-, JavaScript-, HTML- und Bilddateien der WordPress-Themes enthält. Sie können diesen Prozess optional auf andere WordPress-Verzeichnisse ausweiten, wie z. B. " wp-includes " und sogar das gesamte " wp-content +" -Verzeichnis.

Das Thema, das von der WordPress-Installation in diesem Tutorial verwendet wird, ist "+ 27 +", das Standardthema für eine neue WordPress-Installation zum Zeitpunkt des Schreibens. Sie können diese Schritte für alle anderen Themen oder WordPress-Inhalte wiederholen.

Zuerst laden wir Ihr Thema mit "+ s3cmd" in unseren DigitalOcean Space hoch. Wenn Sie "+ s3cmd +" noch nicht konfiguriert haben, lesen Sie die DigitalOcean-Produktdokumentation unter https://www.digitalocean.com/docs/spaces/resources/s3cmd/[Spaces.

Navigieren Sie zu Ihrem WordPress-Installationsverzeichnis "+ wp-content":

Laden Sie von hier aus das Verzeichnis "+ themes " mit " s3cmd " in Ihren DigitalOcean Space hoch. Beachten Sie, dass Sie zu diesem Zeitpunkt nur ein einziges Thema hochladen können. Zur Vereinfachung und um so viel Inhalt wie möglich von unserem Server herunterzuladen, laden wir alle Themen im Verzeichnis " themes +" in unseren Space hoch.

Wir verwenden "+ find ", um eine Liste von Nicht-PHP-Dateien (daher zwischengespeichert) zu erstellen, die wir dann an " s3cmd " weiterleiten, um sie in Spaces hochzuladen. CSS-Stylesheets werden in diesem ersten Befehl ebenfalls ausgeschlossen, da wir beim Hochladen den MIME-Typ " text / css +" festlegen müssen.

Stellen Sie sicher, dass im obigen Befehl "++" durch Ihren Space-Namen ersetzt wird.

Hier weisen wir "+ find" an, nach Dateien im Verzeichnis "+ themes / " zu suchen und " .php" - und "+ .css" -Dateien zu ignorieren. Wir verwenden dann "+ xargs -I {} ", um diese Liste zu durchlaufen, führen " s3cmd put " für jede Datei aus und setzen die Dateiberechtigungen in "Spaces" mit " - acl-public " auf " public +".

Als Nächstes machen wir dasselbe für CSS-Stylesheets und fügen das Flag "+ - mime-type =" text / css "" hinzu, um den MIME-Typ " text / css " für die Stylesheets in Spaces festzulegen. Dadurch wird sichergestellt, dass Spaces die CSS-Dateien Ihres Themas mit dem korrekten ` Content-Type: text / css +` HTTP-Header bereitstellt:

Achten Sie auch hier darauf, im obigen Befehl "++" durch Ihren Space-Namen zu ersetzen.

Nachdem wir unser Thema hochgeladen haben, überprüfen wir, ob es im richtigen Pfad in unserem Space gefunden wird. Navigieren Sie mit dem DigitalOcean Cloud Control Panel zu Ihrem Space.

Geben Sie das Verzeichnis "+ wp-content" ein, gefolgt vom Verzeichnis "+ themes". Sie sollten das Verzeichnis Ihres Themas hier sehen. Wenn Sie dies nicht tun, überprüfen Sie Ihre "+ s3cmd +" - Konfiguration und laden Sie Ihr Design erneut in Ihren Space hoch.

Nachdem sich unser Thema in unserem Space befindet und wir die richtigen Metadaten festgelegt haben, können wir seine Dateien mit CDN Enabler und DigitalOcean Spaces CDN bereitstellen.

Navigiere zurück zum WordPress Admin Bereich und klicke auf * Einstellungen * und dann auf * CDN Enabler *.

Ändern Sie hier die angezeigten Felder wie folgt:

Ihre endgültigen Einstellungen sollten ungefähr so ​​aussehen:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/cdn_enabler_final.png [CDN Enabler Final Settings]

Klicken Sie auf "Änderungen speichern", um diese Einstellungen zu speichern und für Ihre WordPress-Site zu aktivieren.

Zu diesem Zeitpunkt haben Sie die Themenressourcen Ihrer WordPress-Site erfolgreich in DigitalOcean Spaces ausgelagert und stellen sie Endbenutzern mit dem CDN zur Verfügung. Wir können dies mit den DevTools von Chrome bestätigen, indem wir dem unter https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#test- beschriebenen Verfahren folgen. cdn-caching [unten].

Mit dem CDN-Enabler-Plugin können Sie diesen Vorgang für andere WordPress-Verzeichnisse wie "+ wp-includes " und sogar für das gesamte " wp-content +" -Verzeichnis wiederholen.

Zunächst laden wir ein Beispielbild in unsere Medienbibliothek hoch und überprüfen, ob es von den CDN-Servern von DigitalOcean Spaces bereitgestellt wird. Sie können ein Bild über die WordPress Admin-Weboberfläche oder mit dem Befehlszeilentool + wp-cli + hochladen. In diesem Handbuch verwenden wir "+ wp-cli +", um das Beispielbild hochzuladen.

Melden Sie sich über die Befehlszeile bei Ihrem WordPress-Server an und navigieren Sie zum Ausgangsverzeichnis des von Ihnen konfigurierten Nicht-Root-Benutzers. In diesem Tutorial verwenden wir den Benutzer **.

Verwenden Sie von hier aus "+ locken +", um das DigitalOcean-Logo in Ihr Droplet herunterzuladen. (Wenn Sie bereits ein Bild haben, mit dem Sie testen möchten, überspringen Sie diesen Schritt.)

Verwenden Sie nun "+ wp-cli +", um das Bild in Ihre Medienbibliothek zu importieren:

Achten Sie darauf, "++" durch den richtigen Pfad zu dem Verzeichnis zu ersetzen, das Ihre WordPress-Dateien enthält.

Möglicherweise werden einige Warnungen angezeigt, die Ausgabe sollte jedoch wie folgt enden:

Dies zeigt an, dass unser Testbild erfolgreich in die WordPress-Medienbibliothek kopiert und mit Ihrem bevorzugten Offload-Plugin auch in unseren DigitalOcean Space hochgeladen wurde.

Navigieren Sie zu Ihrem DigitalOcean Space, um Folgendes zu bestätigen:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/spaces_upload_confirm.png [Spaces-Upload erfolgreich]

Dies zeigt an, dass Ihr Offload-Plugin wie erwartet funktioniert und WordPress-Uploads automatisch auf Ihren DigitalOcean Space synchronisiert. Beachten Sie, dass der genaue Pfad zu Ihren Medienbibliothek-Uploads im Space von dem Plugin abhängt, das Sie zum Auslagern Ihrer WordPress-Dateien verwenden.

Als nächstes überprüfen wir, ob diese Datei über das Spaces-CDN und nicht über den Server mit WordPress bereitgestellt wird.

Navigieren Sie im WordPress-Administrationsbereich (+ https: /// wp-admin +) im linken Navigationsmenü zu * Pages *.

Wir erstellen eine Beispielseite mit unserem hochgeladenen Bild, um festzustellen, woher es geliefert wird. Sie können diesen Test auch ausführen, indem Sie das Bild einer vorhandenen Seite auf Ihrer WordPress-Site hinzufügen.

Klicken Sie im Bildschirm * Seiten * auf * Beispielseite * oder auf eine vorhandene Seite. Sie können alternativ eine neue Seite erstellen.

Klicken Sie im Seiteneditor auf * Medien hinzufügen * und wählen Sie das DigitalOcean-Logo (oder ein anderes Bild, mit dem Sie diesen Vorgang getestet haben).

Auf der rechten Seite Ihres Bildschirms sollte ein Bereich * Details zu Anhängen * angezeigt werden. Fügen Sie in diesem Bereich das Bild der Seite hinzu, indem Sie auf * In Seite einfügen * klicken.

Klicken Sie jetzt im Seiteneditor im Feld "Veröffentlichen" auf der rechten Seite entweder auf "Veröffentlichen" (wenn Sie eine neue Beispielseite erstellt haben) oder auf "Aktualisieren" (wenn Sie das Bild zu einer vorhandenen Seite hinzugefügt haben) von Ihrem Bildschirm.

Nachdem die Seite erfolgreich aktualisiert wurde, um das Bild zu enthalten, navigieren Sie zu ihr, indem Sie auf den * Permalink * unter dem Seitentitel klicken. Sie werden in Ihrem Webbrowser auf diese Seite weitergeleitet.

In diesem Lernprogramm wird in den folgenden Schritten davon ausgegangen, dass Sie Google Chrome verwenden. Sie können jedoch die meisten modernen Webbrowser verwenden, um einen ähnlichen Test durchzuführen.

Klicken Sie in der gerenderten Seitenvorschau in Ihrem Browser mit der rechten Maustaste auf das Bild und klicken Sie auf "Überprüfen":

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/inspect.png [Inspect Menu]

Ein DevTools-Fenster sollte sich öffnen und das Asset "+ img +" im HTML-Code der Seite hervorheben:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/devtools_output.png [DevTools-Ausgabe]

In dieser URL sollte der CDN-Endpunkt für Ihren DigitalOcean Space angezeigt werden (in diesem Lernprogramm lautet der CDN-Endpunkt für Spaces "+ https: //. Cdn.digitaloceanspaces.com +"). Dies weist darauf hin, dass das Image-Asset über die DigitalOcean Spaces bereitgestellt wird CDN-Edge-Cache. Wenn Sie eine benutzerdefinierte Unterdomäne mit Spaces CDN verwenden, sollte die Asset-URL diese benutzerdefinierte Unterdomäne verwenden.

Hiermit wird bestätigt, dass Ihre Medienbibliothek-Uploads mit Ihrem DigitalOcean Space synchronisiert und über das Spaces-CDN bereitgestellt werden.

Im DevTools-Fenster führen wir einen letzten Test durch. Klicken Sie in der Symbolleiste oben im Fenster auf * Netzwerk *.

Befolgen Sie im leeren Fenster * Netzwerk * ​​die angezeigten Anweisungen, um die Seite neu zu laden.

Die Seitenelemente sollten sich im Fenster befinden. Suchen Sie Ihr Testbild in der Liste der Seitenelemente:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/devtools_asset_list.png [Chrome DevTools Asset List]

Wenn Sie Ihr Testbild gefunden haben, klicken Sie darauf, um einen zusätzlichen Informationsbereich zu öffnen. Klicken Sie in diesem Bereich auf * Header *, um die Antwortheader für dieses Asset anzuzeigen:

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/response_headers.png [Antwort-Header]

Sie sollten den HTTP-Header "+ Cache-Control +" sehen, der ein CDN-Antwortheader ist. Dies bestätigt, dass dieses Image vom Spaces CDN geliefert wurde.

Wenn Sie Ihr + wp-themes + (oder ein anderes) Verzeichnis wie in https://www.digitalocean.com/community/tutorials/how-to-speed-up-wordpress-asset-delivery-using-digitalocean- beschrieben ausgelagert haben Spaces-cdn # Zusätzliche Assets auslagern [Zusätzliche Assets auslagern], sollten Sie die folgende kurze Überprüfung durchführen, um sicherzustellen, dass die Assets Ihres Themes vom Spaces-CDN geliefert werden.

Navigieren Sie in Google Chrome zu Ihrer WordPress-Site und klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite. Klicken Sie im daraufhin angezeigten Menü auf * Inspizieren *.

Sie werden erneut zur Chrome DevTools-Benutzeroberfläche geleitet.

image: https://assets.digitalocean.com/articles/wordpress_cdn_offload/chrome_devtools_theme_confirm.png [Chrome DevTools-Oberfläche]

Klicken Sie von hier aus auf * Quellen *.

Im linken Bereich sollte eine Liste der Ressourcen Ihrer WordPress-Site angezeigt werden. Scrollen Sie zum CDN-Endpunkt (oder zur benutzerdefinierten Unterdomäne) und erweitern Sie die Liste, indem Sie auf den kleinen Pfeil neben dem Endpunktnamen klicken:

image: https: //assets.digitalocean.com/articles/wordpress_cdn_offload/devtools_sources_assets.png [DevTools Site Asset List]

Beachten Sie, dass das Header-Bild, JavaScript und CSS-Stylesheet Ihres WordPress-Themas jetzt vom Spaces-CDN bereitgestellt werden.