Standardmäßig kannst du Seiten erstellen und Inhalte in WordPress erstellen, ohne jemals eigene HTML-Dateien hochladen zu müssen. Das liegt daran, dass der WordPress-Core mit integrierten Inhaltsarten ausgestattet ist. Darüber hinaus wird das von dir verwendete WordPress-Theme wahrscheinlich einen eigenen Satz von vorgefertigten Seitenvorlagen haben, die du nutzen kannst, um eine einzigartige Website zu erstellen, die deinen Bedürfnissen entspricht.

Darüber hinaus gibt es viele WordPress Landing Page Plugins, mit denen du benutzerdefinierte Seitenvorlagen für Website-Besucher erstellen kannst, die aus Suchergebnissen, E-Mail-Kampagnen und sogar Social Media landen.

Also wirklich, es gibt sehr wenig Bedarf, HTML-Dateien in WordPress hochzuladen, da normalerweise alles, was du brauchst, um deine Website zu formatieren, bereits vorhanden ist. Es gibt jedoch einige Gründe, warum du wissen solltest, wie man eine HTML-Datei in WordPress hochlädt, von denen einige über das Hochladen einer Vorlage für Designzwecke hinausgehen.

Deshalb zeige ich dir in diesem Beitrag, wie man HTML-Dateien in WordPress hochlädt. Ich werde auch im Detail besprechen, warum du diese Fähigkeit haben willst, also bist du auf jeden Fall vorbereitet.

Was ist eine HTML-Datei?

HTML steht für Hypertext Markup Language und wurde 1990 von Tim Berners-Lee entwickelt. Kurz gesagt, HTML ist der Code, mit dem elektronische Dokumente im Internet erstellt werden, die besser bekannt sind als Webseiten. Tatsächlich wurde jede Webseite, die du im Internet siehst, mit HTML-Code geschrieben.

Der HTML-Code auf den Webseiten deiner Website ist dafür verantwortlich, dass die Texte und Bilder deiner Inhalte richtig formatiert sind.

Ohne HTML würden Webbrowser nicht verstehen, wie du die Struktur deiner Website für die Benutzer visuell darstellen willst. Mit dem richtigen HTML-Code, der die Grundlage für deine Webseiten bildet, und einem kleinen CSS-Code zum Hinzufügen einiger Designelemente, erscheint deine Webseite jedoch perfekt für die Besucher der Webseite.

Was ist ein HTML-Template?

Du weißt also, dass HTML der Code ist, der für die Erstellung der Struktur einzelner Webseiten im Internet verantwortlich ist.

Aber was ist ein HTML-Template?

Ein HTML-Template ist ein vorgefertigter Satz von HTML-Dateien, die Dinge wie Text, Bilder und Unterstützungsdateien für Schriftstile und Javascript enthalten. Mit anderen Worten, eine HTML-Vorlage ist ein vorgefertigtes Paket aus HTML-Code, den du einfach auf deine Website hochladen und verwenden kannst.

Wenn du eine HTML-Vorlage auf deiner WordPress-Website verwendest, lädst du die Datei hoch und steckst den Text und die Bilder ein, die die Vorlage am Frontend deiner Website anzeigen soll.

Es ist wichtig, sich daran zu erinnern, dass HTML-Templates sich von WordPress-Themes unterscheiden:

  • WordPress Themes: Obwohl du Text und Bilder in WordPress Themes einbindest, sind sie für das Look and Feel deiner gesamten Website verantwortlich. Viele Elementänderungen innerhalb des Themes deiner Website sind global, d.h. sie gelten für deine gesamte Website.
  • HTML-Templates: Dies sind eigenständige Zip-Dateien, die du individuell auf deine Website hochlädst. Sie wirken sich nur auf das Erscheinungsbild einer einzelnen Webseite auf deiner Webseite aus. Mit anderen Worten, Änderungen, die du an einer hochgeladenen HTML-Vorlage vorgibst, wirken sich nur auf diese Webseite aus.

Leider verstehen viele Menschen die Unterschiede zwischen Themes und HTML-Templates nicht und verwenden die Begriffe ‚theme‘ und ‚template‘ austauschbar.

Warum du eine HTML-Datei zu WordPress hochladen musst

Es gibt einige spezifische Gründe, warum du eine HTML-Datei in WordPress hochladen willst:

  1. Du hast deine Favoriten: Wenn du eine großartige HTML-Vorlage auf einer alten Website benutzt hast und sie auf deiner neuen Website verwenden möchtest, solltest du die Vorlage vielleicht auf deine neue Website hochladen, anstatt die ganze Sache neu zu machen. Dies spart dir Zeit und stellt sicher, dass es genau gleich aussieht.
  2. Du möchtest ein benutzerdefiniertes Seitenlayout: Wenn dein aktuelles WordPress-Theme ein bestimmtes Seitenlayout nicht unterstützt, kannst du eine HTML-Datei mit dem gewünschten Design hochladen und bei Bedarf anpassen.

Schließlich musst du möglicherweise deine WordPress-Website mit der Google Search Console verifizieren und die empfohlene Methode zum Hochladen einer Google HTML-Verifizierungsdatei verwenden, um dies zu tun.

Die Art und Weise, wie deine Website in Suchmaschinen erscheint, insbesondere in einer großen wie Google, spielt eine Rolle für deinen Erfolg als Webseitenbesitzer.

Deshalb gibt es Tools wie die Google Search Console. Mit der Google Search Console garantierst du, dass Google deine Website in den relevanten Suchergebnissen indiziert und bewertet, in der Hoffnung, es bis zur ersten Seite zu schaffen.

Google Search Console bietet dir auch Informationen über deine aktuellen SERPs (Suchmaschinen-Ergebnisseiten), so dass du deine SEO-Aktivitäten verbessern und mehr Klicks auf deine Website erhalten kannst.

Die Sache ist, um die Google Search Console zu verwenden, musst du deine WordPress Website überprüfen. Und es ist einfach so, dass eine der besten Möglichkeiten, dies zu tun, darin besteht, eine Google HTML-Verifizierungsdatei hochzuladen.

Nun, lasst uns einen Blick auf die verschiedenen Möglichkeiten werfen, eine HTML-Datei zu WordPress hochzuladen.

1. Methode: Wie man eine HTML-Datei zu WordPress hochlädt im WordPress Dashboard

Die erste Methode zum Hochladen einer HTML-Datei in WordPress, die wir uns ansehen werden, ist das WordPress Dashboard.

Du brauchst nichts weiter als das Backend deiner Website und eine HTML-Vorlage, um diesen Prozess abzuschließen, da du die HTML-Datei direkt über einen Beitrag, eine Seite oder die Medienbibliothek hochladen wirst.

Um eine HTML-Datei über einen Beitrag oder eine Seite hochzuladen, füge einen Block ‚Datei‘ in den Gutenberg Editor ein. Klicke dann auf Hochladen, um die HTML-Datei hochzuladen.

Eine HTML Datei in Gutenberg hochladen
Eine HTML Datei in Gutenberg hochladen

So sieht es aus, wenn du Gutenberg deaktiviert hast und den Classic Editor verwendest. Klicke einfach auf Medien hinzufügen und dann auf Hochladen, um deine HTML-Datei hochzuladen.

Wähle die HTML-Datei, die du hochladen möchtest, und klicke dann auf In Beitrag einfügen. Auf diese Weise wird der Link der Datei in den Beitrag oder die Seite eingefügt und automatisch in deiner Medienbibliothek gespeichert.

HTML Datei im Classic Editor hochladen
HTML Datei im Classic Editor hochladen

Du kannst das Hochladen der HTML-Datei zu einem Beitrag oder einer Seite in WordPress überspringen und direkt in deine Medienbibliothek hochladen. Klicke im WordPress-Dashboard auf Medienbibliothek, dann auf Neu hinzufügen und wähle die HTML-Datei an dem Ort, an dem du sie gespeichert hast (z.B. dein Computer, deine Festplatte oder dein externer Speicher).

Beachte, dass beim Hochladen deiner HTML-Datei während der Verwendung von Gutenberg ein Fehler auftreten kann. So wird es aussehen:

Datei Typ nicht erlaubt
Datei Typ nicht erlaubt

Detaillierte Anweisungen zur Behebung des Fehlers „Sorry, This File Type Is Not Permitted for Security Reasons“ in WordPress findest du hier.

2. Methode: Wie man HTML-Dateien mit einem FTP-Client in WordPress hochlädt

Das Hochladen von HTML-Dateien über das WordPress Dashboard ist die einfachste Methode. Bei großen Vorlagen, die aus mehreren Dateien bestehen, ist es jedoch am besten, einen FTP-Client wie FileZilla zu verwenden.

Die Verwendung eines FTP-Clients ist auch für Zeiten hilfreich, in denen du lokal auf einem Testsite arbeiten möchtest, bevor du Änderungen an deinem Live-Site durchführst. Dadurch werden unnötige Ausfallzeiten vermieden, wenn etwas schief geht.

Um zu beginnen, erstelle immer zuerst ein Backup deiner Website, denn du weißt nie, was die HTML-Datei tun könnte, wenn du sie auf deine Website hochlädst.

Als nächstes öffne deinen FTP-Client.

Jetzt musst du dich mit deinem Webhost-Konto verbinden, indem du deine FTP-Anmeldeinformationen eingibst. Diese Informationen findest du normalerweise in deinem Webhosting-Account. Wenn du Schwierigkeiten hast, es zu finden, wende dich an deinen Host und lass dir von ihm helfen.

Wenn du Kinsta Hosting benutzt, logge dich zuerst in dein MyKinsta-Konto ein und klicke auf Sites im Dashboard und dann auf Info, um die benötigten Zugangsdaten zu erhalten.

Bekomme deine SFTP Details in MyKinsta
Bekomme deine SFTP Details in MyKinsta

Wenn du dies tust, solltest du deine Anmeldeinformationen unter SFTP/SSH sehen. Du benötigst deinen Benutzernamen, dein Passwort und deinen Port.

SFTP Details
SFTP Details

Hier sind die Informationen, die du benötigst, um in FileZilla einzugeben:

  • Host: Der Domainname deiner Website mit vorangestelltem „sftp://“. Zum Beispiel musst du sftp://www.mysite.com eingeben.
  • Benutzername: aus deinem MyKinsta Dashboard
  • Passwort: über dein MyKinsta Dashboard
  • Port: über dein MyKinsta Dashboard

So wird es oben auf dem FileZilla-Bildschirm aussehen:

Einloging in FileZilla
Einloging in FileZilla

Nachdem du deine Zugangsdaten eingegeben hast, klicke auf Schnellverbindung.

Jetzt ist es an der Zeit, die HTML-Datei von deinem Computer nach WordPress hochzuladen. Navigiere zunächst zum Stammordner deiner Website (der den Ordner wp-content, die Datei wp-config.php usw. enthält) auf der rechten Seite.

Gehe dann auf die linke Seite und suche die HTML-Datei, die du gespeichert hast. Wenn du es gefunden hast, klicke mit der rechten Maustaste darauf und wähle Hochladen, um es zu deiner Website hinzuzufügen. Um alle versteckten Dateien in Filezilla zu sehen, folgst Du diesem kurzen Tutorial.

HTML file uploaded
HTML file uploaded

Du wirst sehen, dass die Datei erfolgreich in WordPress hochgeladen wurde. Um sicherzustellen, dass es auf deiner Website sichtbar ist, gibst du die URL deiner Website in deinen Browser ein und füge den Namen der HTML-Datei am Ende hinzu. Zum Beispiel könnte es wie www.mywebsite.com/html-file aussehen.

Wenn du dies tust, wirst du auf die neue Webseite weitergeleitet, die du mit der HTML-Datei erstellt hast.

3. Methode: Wie man HTML-Dateien mit cPanel in WordPress hochlädt

Die letzte Methode, die wir mit dir teilen werden, ist die Verwendung von cPanel und dem Datei-Manager, um eine HTML-Datei in WordPress hochzuladen.

Melde dich zunächst im cPanel deines Hosting-Accounts an und greife auf den Datei-Manager zu.

FileManager in cPanel
FileManager in cPanel

Sobald du dich im Datei-Manager befindest, hast du zwei Möglichkeiten:

  1. Erstelle einen neuen Ordner: Erstelle einen neuen Ordner im Stammordner deiner Website, in den du deine HTML-Datei hochladen kannst.
  2. Direkt in den Stammordner hochladen: Anstatt einen neuen Ordner zu erstellen, lade das HTML direkt in WordPress hoch. Wenn du es so machen willst, entpacke die HTML-Datei, in der du sie gespeichert hast, ändere den Ordner index.html auf etwas Neues und entpacke die Datei dann erneut, um sie weiter in WordPress hochzuladen. Wenn du es nicht tust, überschreibt das HTML-Template die Homepage deiner Website.

Für dieses Beispiel werden wir einen neuen Ordner erstellen, da es dabei einige zusätzliche Schritte gibt.

Erstelle einen neuen Ordner und lade eine HTML-Datei zu WordPress hoch.

Navigiere zunächst zum Stammordner deiner Website (der den Ordner wp-content, die Datei wp-config.php usw. enthält). Klicke dann auf Neuer Ordner.

Benenne deinen neuen Ordner und klicke auf Neuen Ordner erstellen.

Einen neuen Ordner in cPanel erstellen
Einen neuen Ordner in cPanel erstellen

Doppelklicke auf den gerade erstellten Ordner und dann auf Hochladen, um deine HTML-Datei auszuwählen.

Upload button
Upload button

Sobald dies erledigt ist, siehst du deine gezippte HTML-Datei im Ordner.

Zipped HTML file
Zipped HTML file

Nun musst du die HTML-Datei entpacken, indem du mit der rechten Maustaste klickst und Extrahieren auswählst.

Extrahiere die HTML Datei
Extrahiere die HTML Datei

Wenn das modale Fenster erscheint, klicke auf Dateien extrahieren, um den Entpackvorgang abzuschließen. Wenn die HTML-Datei entpackt wurde, siehst du alle verschiedenen Dateien, die in der Vorlage enthalten sind. Denke daran, dass dies bedeutet, dass du Dinge wie CSS, Fontstyle-Dateien, Bilder und JavaScript sehen wirst.

Extrahierte HTML Dateien
Extrahierte HTML Dateien

Jetzt musst du nur noch die URL deiner Website in den Browser eingeben und den Namen des neuen Ordners am Ende hinzufügen, um sicherzustellen, dass die HTML-Vorlage und die Dateien hochgeladen wurden.

Wenn du auf einen 404-Fehler stößt, mach dir keine Sorgen. Dies ist ein häufiger WordPress-Fehler und kann leicht behoben werden.

Wenn dein Server die Umleitung nicht unterstützt und die Datei index.php beim Laden der URL in deinem Browser nicht umgeleitet wird, wird nach dem Hochladen deiner HTML-Dateien ein Fehler 404 angezeigt.

Um dies zu beheben, bleibe im Datei-Manager und greife mit einem Doppelklick auf deine .htaccess-Datei zu. Füge dann den folgenden Code hinzu und speichere deine Änderungen:

RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

Dieser Code leitet deine index.php-Datei um und lädt sie in den Browser.

Zusammenfassung

WordPress ist das meistgenutzte Content Management System, da es den Website-Besitzern die Flexibilität gibt, einzigartige Websites zu erstellen, die sich von der Konkurrenz abheben. Die Möglichkeit, eine HTML-Datei mit einer der oben genannten Methoden in WordPress hochzuladen, ist nur ein weiteres Beispiel dafür, wie WordPress auf die Bedürfnisse der Website-Besitzer eingeht und ihnen die Freiheit gibt, ihre Websites nach Bedarf anzupassen.

Plus, zu wissen, wie man eine HTML-Datei in WordPress hochlädt, ist gerade eine gute Fähigkeit, um zu haben, falls die Notwendigkeit entsteht. Schließlich weiß man nie, wann man auf eine HTML-Vorlage stoßen könnte, die man liebt, oder man benötigt eine bestimmte Art von Seitenlayout, das ein Theme nicht unterstützt.