Der neue Migrationsdienst von Duplicator: Verschieben Sie Ihre Website ohne einen Finger zu rühren
Der neue Migrationsdienst von Duplicator: Verschieben Sie Ihre Website ohne einen Finger zu rühren
Haben Sie sich jemals gefragt, wie Websites eigentlich funktionieren?
Es mag wie Magie erscheinen, aber hinter jeder Webseite, die Sie sehen, steckt eine Sprache. Diese Sprache heißt HTML.
Betrachten Sie HTML als die Grundbausteine des Internets.
Selbst ein kleines bisschen HTML-Kenntnisse können Ihr WordPress-Spiel wirklich aufwerten. Ich habe aus erster Hand gesehen, wie es Menschen hilft, ihre WordPress-Websites noch besser zu machen.
In diesem Beitrag erkläre ich, was HTML ist, warum es wichtig ist und wie Sie Ihrer WordPress-Website benutzerdefinierten HTML-Code hinzufügen können.
Sie werden überrascht sein, wie einfach und hilfreich es für ein effektives Webdesign sein kann!
HTML steht für HyperText Markup Language. Im Grunde ist HTML die Sprache, die Webinhalte strukturiert. Man kann sie sich als das Skelett einer Webseite vorstellen.
HTML verwendet so genannte "Tags". Tags teilen dem Webbrowser mit, was die einzelnen Teile Ihres Inhalts sind.
Tags können dem Browser beispielsweise mitteilen, dass etwas eine Überschrift, ein Absatz oder ein Bild ist. Browser lesen diese Tags, um Webseiten so anzuzeigen, wie sie aussehen sollen.
HTML ist keine Programmiersprache. Es ist eher eine Art, Informationen so zu organisieren, dass Browser sie verstehen können.
WordPress ist super einfach zu bedienen. Sie können eine ganze Website erstellen, ohne irgendeinen Code zu kennen. Warum sich also mit HTML herumschlagen?
Nun, mit HTML haben Sie mehr Kontrolle über Ihre Inhalte. Manchmal ist der normale WordPress-Editor einfach nicht genug.
Angenommen, Sie möchten einem Bild ein bestimmtes Attribut hinzufügen. Oder vielleicht wollen Sie eine wirklich einzigartige Listenform erstellen. Mit HTML können Sie solche Dinge tun.
HTML ist auch ein Lebensretter bei der Fehlersuche.
Hatten Sie schon einmal ein seltsames Formatierungsproblem in WordPress? Mit einem Blick auf den HTML-Code können Sie das Problem schnell finden und beheben. Das ist viel schneller, als mit dem visuellen Editor zu raten.
Außerdem bietet HTML Ihnen Flexibilität. Möchten Sie einige fortgeschrittene Anpassungen hinzufügen? Wie z. B. benutzerdefinierte Klassen für das Styling oder komplexere Layouts? HTML eröffnet Ihnen diese Möglichkeiten.
Und hier ist ein wichtiger Punkt: Zukunftssicherheit.
WordPress ändert sich ständig. Aber HTML? Das ist eine grundlegende Web-Fähigkeit, die immer nützlich sein wird.
Ich habe es immer wieder erlebt: Wenn man HTML versteht, ist man in der Webwelt viel anpassungsfähiger.
Lassen Sie uns über die Bausteine von HTML sprechen. Sie werden Tags genannt.
Tags sind Anweisungen, die dem Browser mitteilen, was er mit Ihrem Inhalt tun soll. Die meisten Tags gibt es in Paaren: ein öffnendes und ein schließendes Tag.
Wenn Sie zum Beispiel einen Absatz erstellen möchten, verwenden Sie die <p>
Tag, um es zu starten und </p>
um es zu beenden.
Sehen Sie den Schrägstrich im abschließenden Tag? Daran erkennen Sie, dass es das Ende ist.
Sehen wir uns einige gängige HTML-Tags an, die Sie häufig verwenden werden:
Überschriften sind für Titel und Zwischenüberschriften gedacht. Sie haben <h1>
, <h2>
, <h3>
, <h4>
, <h5>
, Und <h6>
.
<h1>
ist die wichtigste Überschrift (in der Regel der Haupttitel), und <h6>
ist am wenigsten wichtig.
Links sind das, was das Web, nun ja, zu einem Web macht! Die <a>
Tag erzeugt Links. <a>
steht für Anker.
Möchten Sie Bilder zeigen? Die <img>
Tag ist Ihr Freund. <img>
ist die Abkürzung für Image.
Sie müssen eine Liste von Dingen erstellen? Mit HTML sind Sie bestens bedient. Es gibt zwei Haupttypen:
<ul>
für unsortierte Listen (Aufzählungspunkte). "ul" steht für "ungeordnete Liste".<ol>
für geordnete Listen (nummerierte Listen). "ol" steht für "geordnete Liste".Und in beiden <ul>
Und <ol>
verwenden Sie <li>
Tags für jeden Eintrag in der Liste. "li" steht für "Listenelement".
Tags können auch Attribute haben. Attribute geben zusätzliche Informationen über ein Tag.
Zum Beispiel, die <a>
Tag benötigt ein href
Attribut, um ihm mitzuteilen, wohin er verlinken soll. Etwa so: <a href="https://example.com">Link text</a>
. Die href
Attribut enthält die Adresse der Website.
Und die <img>
Tag braucht eine src
Attribut, um dem Programm mitzuteilen, wo es die Bilddatei finden soll. Es sollte auch ein alt-Attribut für "alternativen Text" haben, was wichtig ist, wenn das Bild nicht geladen werden kann oder für die Barrierefreiheit.
Zum Beispiel so: <img src="image.jpg" alt="Descriptive text">
.
Hier ist ein sehr einfaches Beispiel für HTML in Aktion:
<h1>Welcome to My Blog</h1>
<p>This is my first paragraph of content. It's going to be awesome!</p>
<a href="https://duplicator.com">Check out Duplicator!</a>
Dieser Code würde eine Hauptüberschrift, einen Absatz und einen Link auf einer Webseite erstellen.
Als ich anfing, HTML zu lernen, waren diese grundlegenden Tags mein Ausgangspunkt. Und ganz ehrlich? Sie sind immer noch die Grundlage für fast alles, was ich online mache. Diese einfachen Tags sind mächtig!
Wie können Sie also HTML in WordPress verwenden? Schauen wir uns einige Beispiele an.
Sie möchten einen Text fett oder kursiv machen? Mit HTML ist das möglich.
Verwenden <strong>
Und </strong>
Tags, um Text fett zu machen. Oder verwenden Sie <b>
Und </b>
Tags machen auch Text fett.
Zum Beispiel so: <strong>This text is bold</strong>
.
Für Kursivschrift verwenden Sie <em>
oder <i>
. Etwa so: <em>This text is italic</em>
.
Mit diesen Tags können Sie Wörter und Ausdrücke in Ihrem Inhalt hervorheben.
Wir sprachen über die <a>
Tag. Sie können es verwenden, um Links zu anderen Seiten auf Ihrer Website oder zu anderen Websites zu erstellen.
Sie können Text, Bilder oder sogar Schaltflächen verlinken. Es geht nur darum, das zu nutzen <a>
Tag mit dem richtigen href
Attribut.
Möchten Sie ein YouTube- oder Vimeo-Video auf Ihrer WordPress-Website einbinden? Die meisten Videoplattformen stellen Ihnen Einbettungscodes zur Verfügung. Diese Codes sind in der Regel HTML, oft mit <iframe>
Tags.
Kopieren Sie einfach den Einbettungscode von YouTube (oder wo auch immer Ihr Video gehostet wird) und fügen Sie ihn in WordPress ein. WordPress weiß, was damit zu tun ist.
Benötigen Sie eine Aufzählungsliste? Verwenden Sie <ul>
Tags. Für eine nummerierte Liste, verwenden Sie <ol>
Und <li>
Tags.
Möchten Sie eine Zeile hinzufügen, um Abschnitte Ihres Inhalts zu trennen? Die <hr>
Tag erzeugt eine horizontale Linie. Dies ist eine einfache Möglichkeit, Ihren Text visuell aufzulockern.
Dies sind nur ein paar Beispiele, aber Sie sehen, wie nützlich HTML in WordPress sein kann. Es geht nur darum, dem Inhalt Ihrer Website ein wenig Struktur und zusätzliche Funktionalität zu verleihen.
Sie denken also: "Okay, HTML klingt nützlich, aber wie lerne ich es?" Gute Frage! Zum Glück gibt es jede Menge großartiger Ressourcen da draußen.
Hier sind ein paar Orte, an denen Sie sofort mit dem Erlernen von HTML beginnen können.
MDN Web Docs ist so etwas wie die Enzyklopädie der Webentwicklung. Sie wird von Mozilla (den Leuten hinter Firefox) erstellt und ist sehr umfassend und zuverlässig.
Wenn Sie interaktives Lernen mögen, ist Codecademy großartig. Sie bieten Kurse an, in denen Sie tatsächlich Code direkt in Ihrem Browser schreiben.
W3schools ist eine beliebte Website für Webentwicklungs-Tutorials. Sie haben tonnenweise HTML-Beispiele und Referenzen.
Möchten Sie wissen, wie HTML speziell in WordPress verwendet wird? Sehen Sie sich die offizielle WordPress-Entwicklerdokumentation an. Sie ist etwas technischer, aber sie ist eine großartige Ressource, mit der Sie sich vertraut machen können.
Ganz gleich, für welches Mittel Sie sich entscheiden, das Wichtigste ist die Praxis. Ganz im Ernst. Sie werden HTML nicht lernen, indem Sie nur darüber lesen. Sie müssen Code schreiben und sehen, was passiert.
Experimentieren Sie! Habt keine Angst, Dinge kaputt zu machen. So lernt man.
Es gibt eine ganze Reihe von Möglichkeiten, HTML in WordPress zu verwenden. Gehen wir sie der Reihe nach durch.
Wenn Sie den Block-Editor (Gutenberg) in WordPress verwenden, können Sie einen speziellen Block nur für HTML verwenden. Er heißt "Benutzerdefinierter HTML-Block".
Fügen Sie dazu einfach einen neuen Block zu Ihrer WordPress-Seite oder Ihrem Beitrag hinzu. Suchen Sie in der Block-Suchleiste nach "HTML". Daraufhin wird der benutzerdefinierte HTML-Block angezeigt.
Klicken Sie darauf, um ihn zu Ihrem Inhalt hinzuzufügen. Es ist genau wie das Hinzufügen eines anderen Blocks. Sie können ihn sogar per Drag & Drop dorthin ziehen, wo Sie ihn haben möchten.
Sobald Sie den Block hinzugefügt haben, wird ein Feld angezeigt, in das Sie Ihren WordPress-HTML-Code eingeben oder einfügen können. Geben Sie Ihren HTML-Code einfach dort ein.
Klicken Sie auf Vorschau, um zu sehen, wie Ihr HTML-Code auf der Seite aussieht, ohne ihn tatsächlich zu veröffentlichen.
Dies ist sehr praktisch, um Ihren Code zu überprüfen.
Wussten Sie, dass Sie jeden WordPress-Block als HTML bearbeiten können? Ja, sogar diese normalen Absatzblöcke.
Dies ist nützlich, wenn Sie kleine HTML-Anpassungen an einem bereits vorhandenen Block vornehmen möchten.
Klicken Sie zunächst auf den Block, den Sie bearbeiten möchten. Dann suchen Sie die drei Punkte in der Symbolleiste des Blocks. Klicken Sie darauf.
Es öffnet sich ein Menü. Klicken Sie in diesem Menü auf die Schaltfläche Als HTML bearbeiten.
Plötzlich verwandelt sich der Block! Anstelle des üblichen visuellen Editors sehen Sie nun den benutzerdefinierten HTML-Code für diesen Block. Jetzt können Sie den HTML-Code direkt bearbeiten.
Dies ist ideal für kleine Anpassungen. Vielleicht möchten Sie einem Absatz eine bestimmte Klasse hinzufügen, um ihn später zu stylen. Oder vielleicht müssen Sie ein kleines Formatierungsproblem beheben, das in HTML einfacher zu handhaben ist.
Wenn Sie mit der Bearbeitung von HTML fertig sind, können Sie in der Symbolleiste des Blocks auf Visuell bearbeiten klicken, um zur normalen Ansicht des visuellen Editors zurückzukehren.
Für diejenigen, die sich mit Code auskennen, bietet der WordPress-Block-Editor eine vollständige Code-Editor-Ansicht. Diese zeigt Ihnen den HTML-Code für Ihren gesamten Beitrag oder Ihre Seite an.
Um zum Code-Editor zu wechseln, schauen Sie oben rechts auf dem Bildschirm Ihres Gutenberg-Editors. Dort sehen Sie auch drei Punkte - das Hauptoptionsmenü für den gesamten Editor. Klicken Sie auf diese Punkte.
In diesem Menü finden Sie eine Option namens Code-Editor. Klicken Sie darauf.
Sie sehen die Tags und die Struktur Ihrer gesamten Seite in Codeform.
Dieser WordPress-HTML-Editor ist wirklich für fortgeschrittene Benutzer gedacht, die lieber direkt im Code arbeiten. Wenn Sie gerne programmieren und die HTML-Struktur Ihrer Seite im Großen und Ganzen sehen möchten, ist der Code-Editor genau das Richtige für Sie.
Aber seien Sie vorsichtig! Wenn Sie Fehler im HTML-Code machen, können Sie das Layout Ihrer Seite durcheinander bringen. Es ist wichtig, dass Sie HTML verstehen, wenn Sie den Code-Editor ausgiebig nutzen wollen.
Wenn Sie zum regulären visuellen Editor zurückkehren möchten, gehen Sie einfach wieder in das Menü oben rechts und klicken Sie auf Visueller Editor.
Der klassische WordPress-Editor hat zwei Registerkarten: Visuell und Text. Auf der Registerkarte Text können Sie in den Code einsteigen.
Wenn Sie auf Text klicken, sehen Sie den gesamten HTML-Code für Ihren Beitrag. Hier können Sie direkt HTML-Code schreiben oder einfügen.
Nachdem Sie Ihren HTML-Code hinzugefügt oder bearbeitet haben, können Sie auf die Registerkarte "Visuell" zurückkehren, um zu sehen, wie er aussieht. Dort sehen Sie die gerenderte Version Ihres HTML.
Manchmal möchten Sie Ihrer WordPress-Website kleine HTML-, CSS- oder JavaScript-Elemente hinzufügen. Vielleicht möchten Sie einen benutzerdefinierten Tracking-Code oder einen speziellen Stil für einen bestimmten Teil Ihrer Website hinzufügen.
Sie könnten die Dateien Ihres Themes bearbeiten, um dies zu tun, aber das kann riskant sein. Und wenn Ihr Theme aktualisiert wird, werden Ihre Änderungen möglicherweise überschrieben.
Hier kommen die Code-Snippets-Plugins ins Spiel. Mit diesen Plugins können Sie Code-Snippets direkt über Ihr WordPress-Dashboard hinzufügen.
Sie sorgen dafür, dass Ihr Code organisiert und von den Themendateien getrennt bleibt. Das ist viel sicherer und einfacher zu verwalten, vor allem wenn Sie kein Code-Experte sind.
Mein Lieblings-Plugin für Codeschnipsel ist WPCode (früher "Insert Headers and Footers"). Mit diesem Tool können Sie HTML, CSS und JavaScript zu Ihrer Website hinzufügen.
Außerdem gibt es eine Menge vorgefertigter Snippets, die Sie verwenden können, wenn Sie keine Erfahrung mit der Programmierung haben.
Die Verwendung eines Code-Snippets-Plugins ist viel sicherer als die direkte Bearbeitung von Theme-Dateien. Es ist auch einfacher, den Überblick über Ihren benutzerdefinierten Code zu behalten.
WordPress verfügt über ein integriertes Widget für benutzerdefiniertes HTML. Um es zu finden, gehen Sie in Ihr WordPress-Dashboard und klicken Sie auf " Erscheinungsbild" und dann auf "Widgets".
Sie werden verschiedene Widget-Bereiche sehen, wie Sidebar oder Footer. Diese hängen von Ihrem WordPress-Theme ab.
Fügen Sie das benutzerdefinierte HTML-Widget in den Widget-Bereich ein, in den Sie Ihr HTML einfügen möchten.
Geben Sie Ihren HTML-Code direkt in dieses Feld ein.
Sie können alle möglichen Dinge mit HTML in Widgets einfügen. Benutzerdefinierter Text, Bilder, Links, sogar Einbettungscodes - alles ist möglich!
Nachdem Sie Ihr HTML hinzugefügt haben, klicken Sie in den Widget-Einstellungen auf die Schaltfläche Aktualisieren.
Das war's! Ihr HTML-Code wird nun in diesem Widget-Bereich auf Ihrer Website angezeigt.
Sie können direkt in Ihre WordPress-Theme-Dateien gehen und dort den HTML-Code bearbeiten. Das gibt Ihnen eine Menge Kontrolle über die Struktur Ihrer Website, birgt aber auch große Risiken.
Die direkte Bearbeitung von Themadateien kann Ihre Website beschädigen, wenn Sie nicht vorsichtig sind. Ein kleiner Fehler im Code kann große Probleme verursachen.
Okay, Warnungen beiseite, hier ist, wie Sie Theme-Dateien bearbeiten können. Gehen Sie in Ihrem WordPress-Dashboard auf Darstellung und dann auf Editor für Themendateien (manchmal auch einfach Theme-Editor genannt).
Auf der rechten Seite sehen Sie eine Liste der Dateien Ihres Themas. Diese Dateien steuern die Struktur und das Layout Ihrer Website.
Einige gängige Dateien, die HTML enthalten, sind:
Sie können den HTML-Code direkt im Editor für Themendateien bearbeiten. Klicken Sie einfach auf eine Datei, um sie zu öffnen, suchen Sie den HTML-Code, den Sie ändern möchten, und nehmen Sie Ihre Änderungen vor. Klicken Sie dann auf Datei aktualisieren, um Ihre Änderungen zu speichern.
Denken Sie daran: Bearbeiten Sie Theme-Dateien nur, wenn Sie wirklich wissen, was Sie tun, und verwenden Sie immer ein Child-Theme und haben Sie ein Backup.
Meiner Erfahrung nach bearbeite ich Themendateien nur für sehr spezielle Anpassungen, die nicht auf andere Weise vorgenommen werden können. Und selbst dann bin ich sehr vorsichtig. Child-Themes und Duplicator-Backups sind immer Teil meines Arbeitsablaufs, wenn ich Theme-Dateien bearbeite.
FTP steht für File Transfer Protocol. Es bietet Ihnen den direktesten Zugang zur Bearbeitung Ihrer WordPress-Theme-Dateien (und auch anderer Dateien).
Um FTP zu nutzen, benötigen Sie einige Dinge:
Sobald Sie diese haben, öffnen Sie Ihren FTP-Client und geben Sie Ihre FTP-Zugangsdaten ein, um sich mit Ihrem Server zu verbinden.
Nachdem Sie eine Verbindung hergestellt haben, sehen Sie eine Ansicht mit zwei Seiten. Auf der einen Seite werden die Dateien auf Ihrem Computer angezeigt, auf der anderen Seite die Dateien auf Ihrem Webserver.
Navigieren Sie zu Ihren WordPress-Theme-Dateien auf der Serverseite. Der Pfad lautet in der Regel etwa /wp-content/themes/ihr-theme-name/.
Sobald Sie ein Backup erstellt haben und sich per FTP in Ihrem Theme-Ordner befinden, können Sie die HTML-Dateien des Themes auf Ihren Computer herunterladen oder sie direkt bearbeiten.
Klicken Sie einfach mit der rechten Maustaste auf die Datei in Ihrem FTP-Client und wählen Sie Herunterladen oder Anzeigen/Bearbeiten.
Bearbeiten Sie nun die heruntergeladene Datei auf Ihrem Computer mit einem Code-Editor. Gute Code-Editoren für diesen Zweck sind VS Code, Sublime Text, Atom oder Notepad++.
Öffnen Sie die Datei in Ihrem Code-Editor und nehmen Sie Ihre HTML-Änderungen vor.
Wenn Sie mit dem Hinzufügen von HTML fertig sind, speichern Sie die Datei. Klicken Sie mit der rechten Maustaste auf die Datei in Ihrem FTP-Client und wählen Sie Hochladen. Dadurch wird die Originaldatei auf Ihrem Server mit Ihrer bearbeiteten Version überschrieben.
FTP ist ein leistungsfähiges Instrument, das jedoch einige technische Kenntnisse erfordert. Und es ist wichtig, dass Sie es verantwortungsbewusst nutzen. Überprüfen Sie Ihre Änderungen immer doppelt, bevor Sie sie hochladen, und halten Sie immer ein Backup bereit.
Fügen Sie HTML-Code in Elementor mithilfe des HTML-Widgets hinzu. Ziehen Sie das Widget in Ihr Layout und fügen Sie dann Ihren HTML-Code in das Inhaltsfeld ein. Mit dieser Methode können Sie überall auf Ihrer Seite benutzerdefinierten HTML-Code einfügen, ohne die Themendateien zu bearbeiten.
Add HTML code in WordPress headers by inserting it into the <head> section using a plugin like WPCode. Install the plugin and find the Header & Footer tab. Add HTML code into the header code box and save your changes. This avoids editing theme files directly.
Das beste WordPress-Code-Editor-Plugin ist WPCode (früher Insert Headers and Footers). Mit WPCode können Sie auf sichere Weise benutzerdefinierten Code zu Ihrer Website hinzufügen, ohne Theme-Dateien zu bearbeiten. Es unterstützt das Hinzufügen von CSS, HTML, JavaScript und PHP. Außerdem bietet es Fehlerschutz und bedingte Logik für die gezielte Platzierung von Code.
WordPress basiert hauptsächlich auf PHP, das auf dem Server läuft, um dynamische Inhalte zu erzeugen. Außerdem verwendet es HTML, CSS und JavaScript, um Webseiten im Browser zu rendern und zu gestalten. PHP kümmert sich um die Backend-Logik, während HTML den Inhalt strukturiert, der den Benutzern angezeigt wird.
Finden Sie WordPress-HTML-Vorlagen auf Marktplätzen wie ThemeForest oder TemplateMonster. Diese Plattformen bieten professionell gestaltete HTML-Vorlagen, die für die WordPress-Entwicklung angepasst werden können. Laden Sie sie herunter, passen Sie sie an und konvertieren Sie sie mit einem Page Builder oder Theme Framework.
Wenn Sie auch nur ein bisschen HTML lernen, können Sie mit WordPress wirklich eine neue Welt der Möglichkeiten erschließen. Es gibt Ihnen mehr Kontrolle, mehr Flexibilität und ein tieferes Verständnis dafür, wie Websites tatsächlich funktionieren.
Scheuen Sie sich nicht, weiter zu lernen und zu experimentieren. Je mehr Sie mit dem Code spielen, desto sicherer werden Sie sich fühlen.
Erforschen Sie die erwähnten Ressourcen, probieren Sie die verschiedenen Möglichkeiten aus, HTML in WordPress einzufügen, und sehen Sie einfach, was Sie schaffen können!
Und denken Sie daran: Sichern Sie Ihre Website immer, bevor Sie große Änderungen vornehmen! Tools wie Duplicator machen Backups zum Kinderspiel und können Ihnen im Nachhinein eine Menge Kopfschmerzen ersparen.
Wenn Sie schon einmal hier sind, werden Ihnen bestimmt auch diese anderen WordPress-Anleitungen gefallen:
Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, erhalten wir möglicherweise eine Provision. Wir empfehlen nur Produkte, von denen wir glauben, dass sie für unsere Leser einen Mehrwert darstellen.