WooCommerce Shop SSL verschlüsseln

Wenn du eine Webseite oder einen Shop betreibst, muss muss die Seite per SSL verschlüsselt sein.

Auch sollten Kontaktformulare bzw. jegliche Form der Datenübertragung des Kunden verschlüsselt ablaufen. Also sicher deine Seite mit einem SSL Zertifikat ab – es ist einfach und kostet nichts (mehr).

Den Shop per SSL zu verschlüsseln ist eine Notwendigkeit und gehört zu den Hygienefaktoren, also Dinge, die man als Kunde einfach erwartet (so wie ein sauberes Glas im Restaurant zu bekommen).

Die Kunden werden immer sensibler für Themen wie Datenschutz und das ist gut so. Sofern die paar Idioten in der Politik es dann nicht wieder verschlimmbessern oder auf Umwegen gleich wieder aushebeln.

Da es inzwischen kostenlose Dienste wie Let’s Encrypt gibt, die moderne und sichere SSL Zertifikate kostenlos bereitstellen, gibt es also fast keine Ausrede mehr, SSL nicht anzubieten.

Egal, ob du gleich zu Beginn deiner Webseite SSL einsetzt oder erst später umsteigst:

diese Anleitung führt dich durch alle notwendigen Schritte und hilft dir, häufige Probleme zu lösen.

Im ersten Teil zeige ich, wie man am Beispiel von All-Inkl* ein Zertifikat von Let’s Encrypt installiert.

Im zweiten Teil geht es dann um die Umstellung von WordPress und

im dritten Teil um die Fehlerbeseitigung (sofern bei dir Fehler auftreten).

Voraussetzungen

Es wäre gut, wenn du ein paar Dinge bereits (installiert) hättest und ein wenig damit umgehen kannst:

• FTP-Client (FlashFXP oder FileZilla)
• Text-Editor (Notepad++)
• Hosting wirst du ja haben, WordPress wird wohl auch installiert sein und das SSL Zertifikat bekommst du in Teil 1 weiter unten

FlashFXP ist kostenpflichtig, aber jeden Pfennig wert. Einfach zu bedienen, umfangreiche Verwaltung von verschiedenen FTP Konten, erlaubt die direkte Übertragung von Dateien von Server zu Server und einiges mehr. Einziges Manko: wurde schon ewig nicht mehr aktualisiert. Läuft immer noch zuverlässig, aber wohler wäre mir schon, wenn da mal ein Update kommt.

Notepad++ ist gut geeignet, um WordPress Dateien zu bearbeiten. Das wirst du in diesem Tutorial auch kurz tun müssen. Benutze um Himmels Willen kein Word dafür, wenn du deine Webseite nochmal benutzen möchtest. Word & Co. hauen dir Formatierungen und sonstigen Kram mit in den kopierten Text, den du nicht willst.

1. Teil: SSL Zertifikat aktivieren

Wenn dein Webhost kein kostenloses Let’s Encrypt anbietet, dann überleg dir den Wechsel.

Wenn du bei 1&1 oder Strato bist, dann tu dir selbst und allen, die du je wegen deiner Webseite um Rat fragen wirst, einen Gefallen und wechsel zu All-Inkl*. Ab dem Tarif Privat+ kannst du Let’s Encrypt nutzen. Wenn du bei mir Kunde wärst und 1&1 oder Strato nutzt und weiter nutzen willst, zahlst du 50% mehr Stundensatz. Weil die Arbeit für mich mit denen auch unnötig ärgerlich ist und das muss dann halt kompensiert werden. Ist deine Wahl. Oder du wechselst zu einem vernünftigen Hostinganbieter.

Ich werde am Beispiel von All-Inkl zeigen, wie schnell SSL für deinen Shop aktiviert ist.

Wie du siehst, ist die Einrichtung in wenigen Schritten und Minuten erledigt.

1. Ins KAS einloggen.
2. Domain im Menü links auswählen.
3. Neben der Domain auf das Symbol zum bearbeiten klicken.
4. Bei SSL-Schutz auf das Symbol neben bearbeiten klicken.
5. Auf Let’s Encrypt klicken.
6. Haftungsausschluss akzeptieren.
7. Bestätigen.
8. Fertig!

Das schöne hierbei ist, dass das Zertifikat kostenlos ist und vor Ablauf automatisch verlängert wird. Du musst dich also nicht mehr um das Zertifikat kümmern, solange du die Webseite am Laufen hast.

Zwei Hinweise aber:

1. All-Inkl leistet keinen besonderen Support für das kostenlose Zertifikat, was nachvollziehbar ist. Es ist aber derart wartungsfrei, dass es hier keine Probleme geben wird.
2. Let’s Encrypt ist nur für die ganz normale Verschlüsselung gedacht. Ein erweitertes Zertifikat, wie bei Banken (grüne Adresszeile mit Information zur / Name der Firma) geht nicht.

2. Teil: WordPress auf SSL umstellen

SSL ist jetzt also für deine Domain verfügbar/eingerichtet, aber noch wird WordPress nicht über die verschlüsselte Verbindung aufgerufen. Dafür sind die nächsten Schritte.

WordPress muss jetzt noch wissen, dass es nur noch auf sicheren Wegen genutzt werden darf. Und das geht so:

1. WordPress Einstellungen ändern

Geh in dein WordPress im Menü unter EINSTELLUNGEN – ALLGEMEIN.

Dort findest du deine WordPress-Adresse (wo es installiert ist) und die Seiten-Adresse (die Domain).

Ändere das http in https und speichere.

Nicht wundern – du wirst aus WordPress abgemeldet. Das ist ganz normal.

Du kannst die Einstellungen übrigens jederzeit wieder ändern – auch, wenn du dich nicht mehr anmelden können solltest. (wie steht im nächsten Tipp)

Mit etwas Glück ist deine Seite jetzt schon fehlerfrei komplett mit SSL unterwegs. Aber nicht immer. Und dafür sind die folgenden Einstellungen.

2. Anpassen der wp-config.php

Falls du unter 1. nicht die Änderungen hast durchführen können, weil die WordPress-Adresse und die Seiten-Adresse ausgegraut war und du nicht hineinklicken konntest, liegt das daran, dass diese Einstellungen in der wp-config.php stehen.

Und dort können wir sie auch ändern.

Du kannst auch Schritt 1 überspringen und nur die wp-config.php nutzen. Das mache ich persönlich am liebsten.

Mit einem FTP-Programm wie FlashFXP (nutze ich) oder FileZilla (gratis) kannst du mit deinen FTP Zugangsdaten auf deinen Server verbinden. Die Daten findest du in der Willkommensmail von All-Inkl.

Hier findest du direkt im Hauptverzeichnis deiner Domain die wp-config.php. Als erstes machst du einen Rechtsklick auf die Datei, rufst CHMOD aus dem Menü auf und notierst dir, was da steht. Bei All-Inkl steht da normal 644, das sind die Berechtigungen. Ändere es kurz in 755, speichere und dann klickst du doppelt auf die wp-config.php, um sie zu öffnen und zu bearbeiten.

Wenn du gefragt wirst, mit welchem Programm du die Datei bearbeiten willst, nutze am besten Notepad++ (gratis). Alternativ auch den Editor oder das normale Notepad. Beide sind auf deinem PC installiert, aber nicht wirklich empfehlenswert für diese Art Arbeiten.

Ist die wp-config.php einmal offen, schau mal nach, ob du diese Informationen oder Teile davon schon irgendwo findest.

Wenn du unter 1. die WordPress Einstellungen nicht hast ändern können, sind die Zeilen 3 und 4 auf jeden Fall in deiner wp-config.php enthalten.

/** Umstellung auf SSL */
define('WP_CONTENT_URL', 'https://stollenfuehrung.de/wp-content');
define('WP_SITEURL', 'https://stollenfuehrung.de');
define('WP_HOME', 'https://stollenfuehrung.de');

Wahrscheinlich findest du aber keine der Angaben in deiner Datei.

In dem Fall ändern wir das jetzt und kopieren diese Codezeilen einfach ganz oben an den Beginn deiner wp-config.php. Mach ein paar Leerzeilen und kopiere das Beispiel oben hinein.

Dann änderst du natürlich bitte die Domain stollenfuehrung.de zu deiner Domain.

Achte darauf, ob du bisher www. verwendest oder nicht! Wenn nicht, dann lasse das auch hier heraus.

Gut, fertig. Datei schließen und hochladen. Und dann wieder auf die Datei mit Rechtsklick das Menü, wo CHMOD steht, aufrufen und den Wert von 755 zurück auf 664 ändern! Wichtig für die Sicherheit.

Hinweise:

Mit der zweiten Zeile „wp_content_url“ weiß WordPress zukünftig, dass alle Inhalte (Bilder, Audios, PDFs etc.) ebenfalls nur noch über die sichere https Variante geladen werden.

Die Zeilen 3 und 4 brauchst du übrigens auch nicht zwingend! Wenn du die mit in die wp-config.php schreibst, dann kannst du in den WordPress Einstellungen im WordPress Backend die WordPress-Adresse und Seiten-Adresse nicht mehr ändern, sondern nur über die wp-config.php.

Zumindest, solange du die Einstellung in der wp-config.php festlegst, wird die Möglichkeit zum Ändern in WordPress selbst blockiert. Dann sind die beiden Felder ausgegraut (siehe 1.).

Natürlich kannst du alle Einstellungen in der wp-config.php auch jederzeit rückgängig machen und die Zeilen 3 und 4 entsprechend löschen, so dass du in WordPress selbst wieder diese beiden Änderungen durchführen kannst. Aber das kommt im Regelfall sehr selten vor.

Ich mache die Änderung immer über die wp-config.php

Ein paar Tipps und Fehler zu diesem Schritt findest du weiter unten bei der Fehlerbehebung.

Wenn du aber der Anleitung einfach folgst, passieren keine Fehler. Die Hinweise sind eher dafür gedacht, wenn du mit einer anderen Anleitung keinen Erfolg hattest und nach möglichen Lösungen suchst.

3. Datenbankupdate

Jetzt kommt der unheimlichste Part, der aber ganz einfach ist. (falls du eine Alternative willst, ist am Ende dieses Abschnitts ein Plugin genannt)

Es ist wirklich nicht schlimm und jede Änderung kann auch immer rückgängig gemacht werden.

Zunächst musst du dich in phpMyAdmin anmelden, um auf deine Datenbank zugreifen zu können.

All-Inkl hat den Zugang zu phpMyAdmin hier versteckt: http://meinedomain.tld/mysqladmin/kaslogin.php (meinedomain.tld ist natürlich mit der eigenen Webadresse auszutauschen).

Mit den Zugangsdaten, die du auch für das KAS verwendest (Details in der Willkommensmail von All-Inkl), kommst du hinein.

phpMyAdmin sieht ungewohnt aus, ist aber im Grunde ganz einfach.

Wir brauchen auch gar nicht viel und müssen nur links in der Baumansicht die Datenbank auswählen, die zu WordPress gehört.

Im Regelfall findest du hier nur eine Datenbank, die mit wp_ beginnt.

Falls deine Datenbank ein anderes Präfix hat, ist das okay. Es ist eine zusätzliche Sicherheitsmaßnahme.

In jedem Fall wählst du die Datenbank aus, bei der das Wort „Information“ nicht mit im Namen steht.

Wenn du hier sehr viele Datenbanken vorfinden solltest, musst du noch einmal in deine wp-config.php schauen, da ist der Datenbankname auch hinterlegt. Dann weißt du ganz sicher, wie sie heißt.

Wenn du die Datenbank dann ausgewählt hast (anklicken), klickst du als nächstes auf den Tab SQL.

Hier kopierst du dann nur noch diese Befehle rein und drückst dann rechts auf OK.

Bevor du OK drückst aber bitte zwingend die Webseitenadresse zu deiner Domain ändern. Also sebastianschertel.de raus und deine Information rein. Und wenn du www. verwendest, dann auch hier berücksichtigen. Wenn nicht, dann nicht.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.sebastianschertel.de', 'https://www.sebastianschertel.de') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.sebastianschertel.de','https://www.sebastianschertel.de');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.sebastianschertel.de', 'https://www.sebastianschertel.de');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.sebastianschertel.de','https://www.sebastianschertel.de');

Achte unbedingt auf korrekte Schreibweise deiner Domain. Schreibfehler führen dazu, dass der Befehl dir einiges kaputt macht. Das kann nervig sein.

Wenn alles passt und du OK geklickt hast, werden die Datenbankbefehle in Windesweile ausgeführt und du bekommst einen Hinweis.

Wir sind hier fertig und können links oben auf das kleine grüne EXIT Symbol klicken.

Die Datenbankänderungen gehen übrigens auch mit BetterSearchReplace und der empfehlenswerten PRO-Version direkt in WordPress. Und man kann sich dort bequem eine Sicherungskopie anlegen und auch erstmal nur einen Testlauf starten.

4. .htaccess Einstellung ändern

Kopiere folgende Befehle in deine .htaccess – diese findest du (wie alle anderen Dateien hier auch) in deinem Stammverzeichnis (root) deiner WordPress Installation, wenn du über ein FTP Programm darauf zugreifst. Die FTP-Zugangsdaten sind nach wie vor in der Willkommensmail von All-Inkl.

Kopiere diesen Text einfach an den Anfang deiner .htaccess Datei. Nicht ans Ende!

Wenn du die .htaccess in deinem Verzeichnis nicht siehst, musst du wahrscheinlich in deinem FTP Programm die Einstellung setzen, dass auch versteckte Dateien angezeigt werden sollen. Wie das geht, findest du auf der Webseite deines FTP Programms.

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]

Kopieren (hier musst du diesmal nichts ändern), einfügen, speichern.

Spätestens jetzt läuft deine Seite über SSL und du hast die Internetwelt ein Stück sicherer für deine Kunden gemacht.

Wenn aber irgendwo etwas nicht ganz läuft, du Fehler hast oder Mixed Content oder zu viele Umleitungen, dann schau mal hier in die Fehlerbehebung.

3. Teil: Fehlerbehebung

Fehler in der wp-config.php

• Achte darauf, dass keine unnötigen Leerzeichen in der wp-config.php stehen. D.h. vor und zwischen dem define sollten keine Leerzeichen sein und auch nach dem <php am Anfang der Datei keine Leerzeichen!
• Die Einträge oben kommen in eine neue Zeile, z. B. sofort nach dem <php am Anfang der Datei. <php ist in Zeile 1, deine Ergänzungen von oben stehen in Zeile 2-5 (wenn du alles übernimmst)
• Achte darauf, dass am Ende jeder Zeile ein ; steht.
• Achte darauf, dass die Hochkommas einzelne, gerade Striche sind, so ‚ und nicht z. B. ` oder ´. Schau oben ins Beispiel.
• Wenn dein CSS zerschossen ist, deine Seite also praktisch völlig unformatiert ist, dann schau mal, ob du die WP_CONTENT_URL richtig angepasst hast. Vorne steht ein https://, dann dein Domainname, dann /wp-content und kein abschließender / Schrägstrich.
• Kopiere die Einstellungen nicht ganz an das Ende der wp-config.php
• Falls deine Seite ein vorangestelltes www. hat, trage das oben auch so ein.
• Du verwendest zum Bearbeiten keinen Texteditor wie Notepad++ (das solltest du aber).

Fehler beim Datenbankupdate

• In jeder Zeile steht wp_options, wp_posts etc. Das wp_ bezieht sich dabei auf das Tabellen-Präfix deiner Datenbank. Wenn du bei der Installation von WordPress das Präfix nicht geändert hast oder WordPress über eine 1-Klick-Installation hast installieren lassen, passt das im Regelfall. Du kannst in deiner wp-config.php oder auch in deiner Datenbank sehen (im Screenshot schwarz), wie dein Tabellenpräfix lautet. In jedem Fall werden die obigen Befehle nur ausgeführt werden können, wenn du das richtige Präfix verwendest. Ansonsten ändert sich nichts.
• Vorne steht die Version mit http:// und hinten die Variante mit https:// – wenn du den umgekehrten Weg gehen willst, also von https:// auf http:// wechseln wolltest, tauschst du das aus.
• Du solltest darauf achten, ob deine WordPress Seite ein vorangestelltes www. hat oder nicht und es entsprechend oben ergänzen.
• Achte auf den ; am Ende jeder Zeile. Wenn du es hier einfach kopierst, wirst du kein Problem haben.
• Achte darauf, dass die Hochkommas einzelne, gerade Striche sind, so ‚ und nicht z. B. ` oder ´.
• Du verwendest zum Bearbeiten keinen Texteditor wie Notepad++
• Du hast einen Schreibfehler beim Datenbankupdate gemacht. In dem Fall in dem Codebeispiel oben die fehlerhafte Version vorne stehen haben (wo die alte nicht-SSL Variante war) und hintendran nach wie vor die korrekte Version. Updaten, diesmal sollte alles passen.

Mixed Content (kein grünes Schloß!)

Du hast deine Webseite nach Anleitung umgestellt, aber erhältst noch kein grünes Schloß?

Das ist natürlich doof, aber häufig leicht zu beseitigen.

Du hast grundsätzlich schon alles richtig, aber da gibt es wohl bei deiner Seite noch ein paar Altlasten, die von den Änderungen nicht mit abgefangen werden.

Diese werden wir jetzt suchen und ändern. Und das geht so:

In Google Chrome drückst du F12 auf der Tastatur und klickst dann auf den Reiter „Console„.

Hier siehst du dann, welche Inhalte von unsicheren (nicht-SSL) Seiten geladen werden.

Das können z. B. Schriftarten sein, die in der style.css deines Themes oder Childthemes hinterlegt sind, z. B. von Google Fonts (böse, böse. Besser fonts.bunny.net nehmen). Dort einfach das http:// zu https:// machen und alles sollte passen.

Häufig sind auch Logos, Hintergründe oder Bilder die Übeltäter und müssen über DESIGN – ANPASSUNGEN im WordPress Backend einfach nochmal neu ausgewählt werden.

Wichtig ist auch, die Widgets deines WordPress anzupassen – wenn du hier auf Bilder verlinkst (z. B. in der Form <img src=“http://www.meinedomain.de/wp-content/uploads/2018/03/meintollesbild.jpg“>) musst du hier natürlich auch das „s“ bei https:// ergänzen. Besser ist es, hier einfach für das Einbinden von Bildern die Form <img scr=“/wp-content/uploads/2018/03/meintollesbild.jpg“> zu nutzen, also ohne die Domain vorne dran. Dann entsteht dieser Fehler gar nicht.

Zu viele Umleitungen

Wenn du iThemes Security im Einsatz hast (wozu? das geht auch besser), kann es sein, dass du die Meldung „zu viele Umleitungen“ erhältst.

In den Einstellungen von iThemes Security sollte bei Front End SSL Mode OFF stehen. Wenn du hier ON hast, gibt es Probleme. Die Einstellung einfach auf OFF stellen und das Problem mit den Umleitungen ist in diesem Fall gelöst.

Kurzversion für Eilige

In der wp-config.php die zu deiner Seite passende URL eintragen (mit oder ohne www. und dein Domainname statt meiner):

/** Umstellung auf SSL */
define('WP_CONTENT_URL', 'https://www.newslettervergleich.de/wp-content');
define('WP_SITEURL', 'https://www.newslettervergleich.de');
define('WP_HOME', 'https://www.newslettervergleich.de');

In phpMyAdmin das Datenbankupdate durchführen (wieder meine URL durch deine ersetzen):

UPDATE wp_options SET option_value = replace(option_value, 'http://www.newslettervergleich.de', 'https://www.newslettervergleich.de') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.newslettervergleich.de','https://www.newslettervergleich.de');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.newslettervergleich.de', 'https://www.newslettervergleich.de');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.newslettervergleich.de','https://www.newslettervergleich.de');

Das hier an den Anfang deiner .htaccess kopieren:

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]

Done!