So verwenden Sie Codeblöcke in WordPress

WordPress ist ein robustes Content-Management-System, das mehr als die Hälfte aller Websites im Internet betreibt. Das integrierte CRM erleichtert die Erstellung einer Website, auch wenn Sie noch nie zuvor ein Computerprogramm geschrieben haben. Während es sehr einfach ist, einen normalen Textblock auf einer WordPress-Website anzuzeigen, gilt das nicht für Computercode. Ein Codeteil muss ordnungsgemäß angezeigt werden, damit der Betrachter ihn analysieren und verstehen kann. Und hier kommen WordPress-Codeblöcke ins Spiel.

Wenn Sie wissen möchten, wie Sie Codeblöcke in WordPress verwenden, sind Sie hier genau richtig. In diesem Artikel führen wir Sie durch den gesamten Prozess, damit Sie beginnen können, Codeausschnitte mit Ihren Lesern zu teilen. Lesen Sie weiter, um mehr zu erfahren.

So verwenden Sie Codeblöcke in WordPress

Die Anzeige eines Computerprogramms als normaler Webseitentext kann katastrophal sein. Vielen Benutzern fällt es schwer, sich etwas vorzustellen und zu verstehen. Glücklicherweise verfügen viele WordPress-Editoren über eine Codeblockfunktion, mit der Sie ein Computerprogramm in einem Codeformat anzeigen können.

Glücklicherweise ist die Verwendung von Codeblöcken zur Anzeige von Computercode relativ einfach. Um zu beginnen, müssen Sie zum nativen WordPress-Editor wechseln, da einige Text-Plugins möglicherweise nicht über diese Funktion verfügen. Führen Sie anschließend die folgenden Schritte aus, um einer Website-Seite einen Codeblock hinzuzufügen:

1. Öffnen Sie die Webseite, zu der Sie einen Codeblock hinzufügen möchten, indem Sie auf die Schaltfläche „Neu“ klicken.
2. Geben Sie „/code“ ein und drücken Sie „Enter“.
3. Geben oder fügen Sie den Code ein, den Sie anzeigen möchten, und drücken Sie die „Enter“-Taste.
4. Darüber hinaus können Sie die Codeblock-Symbolleiste verwenden, um das Erscheinungsbild des gerade geschriebenen Codes anzupassen. Sie können beispielsweise die Schaltfläche „B“ verwenden, um eine Zeile fett zu formatieren, oder die Schaltfläche „i“, um sie kursiv zu formatieren.
5. Wenn Sie mit der Erstellung Ihrer Webseite fertig sind, klicken Sie auf die Schaltfläche „Vorschau“, um zu sehen, wie der Codeblock in einer Live-Version aussehen wird.
6. Wenn Sie mit dem Endergebnis zufrieden sind, klicken Sie auf die Schaltfläche „Aktualisieren“, damit auch andere den Codeblock sehen können.

So ändern Sie die Schriftart Ihres Codeblocks

Typografie sagt viel aus und kann nicht nur die Ästhetik Ihres Codeblocks, sondern der gesamten Webseite beeinflussen oder zerstören. Gehen Sie folgendermaßen vor, um die Schriftart Ihres Codeblocks zu ändern:

1. Markieren Sie den Codeblock, dessen Typografie Sie ändern möchten.
2. Klicken Sie auf das Symbol „Einstellungen“ in der oberen rechten Ecke des Bildschirms.
3. Geben Sie im Abschnitt „Typografie“ Ihre bevorzugte Schriftart an.
4. Klicken Sie auf die Schaltfläche „Aktualisieren“, um die Änderungen zu speichern.

Sie können die Ästhetik des Blocks weiter anpassen, indem Sie Farbe, Hintergrund, Buchstabenabstand und Zeilenabstand ändern.

Wenn Sie beispielsweise eine Website mit einem dunklen Thema haben, möchten Sie möglicherweise, dass Ihr Codeblock einen anderen Hintergrund hat.

So löschen Sie einen Codeblock in WordPress

Codeblöcke sind nicht dauerhaft und können wie jedes andere Element einer WordPress-Webseite gelöscht werden. So läuft der Prozess ab:

1. Öffnen Sie die Webseite oder den Beitrag mit dem Codeblock, den Sie löschen möchten.
2. Klicken Sie auf den Codeblock, den Sie löschen möchten, um ihn hervorzuheben.
3. Klicken Sie im Widget, das ganz oben im Codeblock angezeigt wird, auf die drei Punkte.
4. Wählen Sie aus den Optionen „Code löschen“.

Die obige Aktion sollte den gesamten Codeblock von der Webseite entfernen. Alternativ können Sie auch einfach den Block auswählen und die „Entf“-Taste drücken. Sie können auch gleichzeitig die Tasten „Strg“ + „Umschalt“ + „Z“ drücken und sollten damit die gleichen Ergebnisse erzielen.

So bearbeiten Sie einen bereits veröffentlichten Codeblock

Von Zeit zu Zeit werden Sie zwangsläufig Fehler machen. Möglicherweise finden Sie auch eine bessere Möglichkeit, die Idee mithilfe von Code umzusetzen. Mit WordPress können Sie bereits vorhandene Codeblöcke bearbeiten, indem Sie die folgenden Anweisungen befolgen:

1. Öffnen Sie die Seite mit dem Codeblock, den Sie bearbeiten möchten.
2. Klicken Sie auf „Bearbeiten“.
3. Klicken Sie auf den Codeblock, um die Codebearbeitung zu aktivieren.
4. Wenn Sie mit den Änderungen fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“.

So fügen Sie mithilfe eines Plugins einen Codeblock zu Ihrer WordPress-Website hinzu

Wenn Sie Ihrer Website häufig Codeausschnitte hinzufügen, ist es möglicherweise am besten, sich ein robusteres Plugin zu besorgen, das Ihnen dabei hilft. Ein beliebter leistungsstarker und hervorragender Codeblock ist der Weiterentwickelter Syntax-Highlighter Stecker.

Dieses Plugin hat gegenüber dem nativen WordPress-Editor einen Vorteil, weil:

• Hebt die Anzahl der Zeilen in einem Codeausschnitt hervor.
• Unterstützt mehrere Programmiersprachen.
• Ermöglicht Ihren Zuschauern das Kopieren und Einfügen des angezeigten Codes.

So nutzen Sie das Plugin, um Code-Snippets auf Ihrer Website besser zu verwalten:

1. Installieren und aktivieren Sie das Weiterentwickelter Syntax-Highlighter Stecker.
2. Öffnen Sie die Seite oder den Beitrag, wenn Sie einen Codeblock hinzufügen möchten.
3. Aktivieren Sie die Bearbeitung und klicken Sie auf die Plus-Schaltfläche.
4. Suchen Sie nach „SyntaxHighLighter Evolved“ und öffnen Sie das erste angezeigte Ergebnis.
5. Fügen Sie den Code in den verfügbaren Codeblock ein oder schreiben Sie ihn.
6. Klicken Sie auf das Einstellungssymbol in der oberen rechten Ecke des Bildschirms und navigieren Sie zur Registerkarte „Blockieren“.
7. Geben Sie an, wie Ihre Nummerierung aussehen soll und welche Codezeilen Sie hervorheben möchten.
8. Sie können auch „URLs anklickbar machen“ aktivieren, wenn Ihr Code anklickbar sein soll.

Gehen Sie folgendermaßen vor, um das Farbschema und die Formatierung Ihres Codeblocks zu ändern:

1. Gehen Sie zu „Einstellungen“ und navigieren Sie zum Abschnitt „SyntaxHighlighter“.
2. Ändern Sie das Thema Ihres Blocks.
3. Klicken Sie unter „Vorschau“ auf „Speichern“, um eine Vorschau der Änderungen im Live-Modus anzuzeigen.

Zusätzliche FAQs

Wie macht man aus einem Codeblock einen anklickbaren Link?

Um mit dem WordPress-Editor aus einem Code einen Link zu blockieren, gehen Sie folgendermaßen vor:

1. Wählen Sie die Codezeile aus, die als Link dienen soll.

2. Wählen Sie im Popup-Widget das Linksymbol aus. Alternativ können Sie auch die Tasten „Strg“ + „K“ auf Ihrer Tastatur drücken.

3. Geben Sie die URL ein, mit der Sie den Code verknüpfen möchten, und drücken Sie die „Enter“-Taste.

Kann ich Code mit dem Codeblock-Editor hervorheben, der vom WordPress-Editor bereitgestellt wird?

Nein, der vom nativen WordPress-Editor bereitgestellte Codeblock erlaubt es Benutzern nicht, den Code zu kopieren und einzufügen. Dazu benötigen Sie die Hilfe eines erweiterten Codeblock-Bearbeitungs-Plugins wie dem „SyntaxHighligher Evolved“-Plugin.

Verfügt Elementor über eine Codeblockfunktion?

Elementor ist ein beliebtes Drag-and-Drop-Plugin zum Erstellen von WordPress-Websites. Wenn Sie das Plugin zum Erstellen von Websites verwenden, finden Sie leider keinen Block, mit dem Sie Computerprogramme auf Ihrer Website formatieren können. Daher müssen Sie zum Abschluss der Aufgabe auf den herkömmlichen WordPress-Editor umsteigen.

Bringen Sie Ihre Website zum Laufen

Unabhängig davon, ob Sie einen Programmierblog betreiben oder einfach nur Codeschnipsel auf Ihrer Website teilen möchten, ist es sehr wichtig zu wissen, wie man Codeblöcke in WordPress verwendet. Codeblöcke erleichtern Ihren Lesern das Lesen und verbessern insgesamt das Benutzererlebnis Ihrer Website. Und wie Sie sehen, ist das Einfügen von Codeblöcken ein relativ einfacher Vorgang, insbesondere mit dem nativen WordPress-Editor.

Haben Sie versucht, die von WordPress bereitgestellten Codeblöcke zu verwenden? Was ist mit dem SyntaxHighlighter Evolved-Plugin? Bitte teilen Sie uns Ihre Erfahrungen im Kommentarbereich unten mit.