WordPress ist ein robustes Content-Management-System, das über die Hälfte aller Websites im Internet betreibt. Das integrierte CRM macht es einem leicht, eine Website zu erstellen, selbst wenn man noch nie zuvor ein Computerprogramm geschrieben hat. Während es so einfach ist, einen normalen Textblock auf einer WordPress-Website anzuzeigen, kann dies nicht für Computercode gesagt werden. Ein Stück Code muss angemessen angezeigt werden, damit Betrachter es analysieren und verstehen können. 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, Code-Snippets 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 verheerend sein. Vielen Benutzern wird es schwer fallen, sie zu visualisieren und zu verstehen. Glücklicherweise verfügen viele WordPress-Editoren über eine Codeblock-Funktion, 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 einen Codeblock auf einer Website-Seite hinzuzufügen:
- Öffnen Sie die Webseite, der Sie einen Codeblock hinzufügen möchten, indem Sie auf die Schaltfläche „Neu“ klicken.
- Geben Sie „/code“ ein und drücken Sie „Enter“.
- Geben oder fügen Sie den Code ein, der angezeigt werden soll, und drücken Sie die Eingabetaste.
- Sie können außerdem die Codeblock-Symbolleiste verwenden, um das Erscheinungsbild des gerade geschriebenen Codes anzupassen. Beispielsweise können Sie die Schaltfläche „B“ verwenden, um eine Zeile fett zu machen, oder die Schaltfläche „i“, um sie kursiv zu machen.
- Wenn Sie mit dem Erstellen Ihrer Webseite fertig sind, klicken Sie auf die Schaltfläche „Vorschau“, um zu sehen, wie der Codeblock in einer Live-Version aussehen wird.
- Wenn Sie mit den Endergebnissen zufrieden sind, klicken Sie auf die Schaltfläche „Aktualisieren“, damit andere den Codeblock ebenfalls sehen können.
So ändern Sie die Typografie Ihres Codeblocks
Typografie spricht Bände und kann die Ästhetik nicht nur Ihres Codeblocks, sondern der gesamten Webseite verändern oder zerstören. Gehen Sie folgendermaßen vor, um die Typografie Ihres Codeblocks zu ändern:
- Markieren Sie den Codeblock, dessen Typografie Sie ändern möchten.
- Klicken Sie auf das Symbol „Einstellungen“ in der oberen rechten Ecke des Bildschirms.
- Geben Sie im Abschnitt „Typografie“ Ihre bevorzugte Typografie an.
- Klicken Sie auf die Schaltfläche „Aktualisieren“, um die Änderungen zu speichern.
Sie können die Ästhetik des Blocks weiter anpassen, indem Sie die Farbe, den Hintergrund, den Buchstabenabstand und den Zeilenabstand ändern.
Wenn Sie beispielsweise eine dunkle Website haben, möchten Sie möglicherweise auch, dass Ihr Codeblock einen anderen Hintergrund hat.
So löschen Sie einen Codeblock in WordPress
Codeblöcke sind nicht dauerhaft und können wie alle anderen Elemente einer WordPress-Webseite gelöscht werden. So gehen Sie vor:
So fügen Sie Untertitel zu Disney Plus hinzu
- Öffnen Sie die Webseite oder den Beitrag mit dem Codeblock, den Sie löschen möchten.
- Klicken Sie auf den Codeblock, den Sie löschen möchten, um ihn zu markieren.
- Klicken Sie im Widget, das ganz oben im Codeblock angezeigt wird, auf die drei Punkte.
- Wählen Sie aus den Optionen „Code entfernen“.
Die obige Aktion sollte den gesamten Codeblock von der Webseite löschen. Alternativ können Sie auch einfach den Block auswählen und die Taste „Löschen“ drücken. Sie können auch gleichzeitig die Tasten „Strg“ + „Umschalt“ + „Z“ drücken, was zu denselben Ergebnissen führen sollte.
So bearbeiten Sie einen bereits veröffentlichten Codeblock
Hin und wieder werden Sie Fehler machen. Möglicherweise stoßen Sie auch auf eine bessere Möglichkeit, die Idee durch Code auszuführen. Mit WordPress können Sie bereits vorhandene Codeblöcke bearbeiten, indem Sie die folgenden Anweisungen befolgen:
- Öffnen Sie die Seite mit dem Codeblock, den Sie bearbeiten möchten.
- Klicken Sie auf „Bearbeiten“.
- Klicken Sie auf den Codeblock, um die Codebearbeitung zu aktivieren.
- Wenn Sie mit den Änderungen fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“.
So fügen Sie Ihrer WordPress-Website mit einem Plugin einen Code-Block hinzu
Wenn Sie Ihrer Website häufig Code-Snippets hinzufügen, ist es möglicherweise am besten, sich ein robusteres Plugin zu besorgen, das Ihnen hilft. Ein beliebter leistungsstarker und ausgezeichneter Codeblock ist der SyntaxHighlighter weiterentwickelt Plugin.
Dieses Plugin hat einen Vorteil gegenüber dem nativen WordPress-Editor, weil:
- Es hebt die Anzahl der Zeilen in einem Code-Snippet hervor
- Es unterstützt mehrere Programmiersprachen
- Es ermöglicht Ihren Zuschauern, den angezeigten Code zu kopieren und einzufügen
So verwenden Sie das Plugin, um Code-Snippets auf Ihrer Website besser zu verwalten:
- Installieren und aktivieren Sie die SyntaxHighlighter weiterentwickelt Plugin.
- Öffnen Sie die Seite oder den Beitrag, wenn Sie einen Codeblock hinzufügen möchten.
- Aktivieren Sie die Bearbeitung und klicken Sie auf die Plus-Schaltfläche.
- Suchen Sie nach „SyntaxHighLighter Evolved“ und öffnen Sie das erste Ergebnis, das angezeigt wird.
- Fügen Sie den Code in den verfügbaren Codeblock ein oder schreiben Sie ihn.
- Klicken Sie auf das Einstellungssymbol in der oberen rechten Ecke des Bildschirms und navigieren Sie zur Registerkarte „Blockieren“.
- Geben Sie an, wie Ihre Nummerierung aussehen soll und welche Codezeilen hervorgehoben werden sollen.
- Sie können auch „URLs anklickbar machen“ aktivieren, wenn Sie Ihren Code anklickbar machen möchten.
Gehen Sie folgendermaßen vor, um die Farbe und das Formatierungsschema Ihres Codeblocks zu ändern:
- Gehen Sie zu „Einstellungen“ und navigieren Sie zum Abschnitt „SyntaxHighlighter“.
- Ändern Sie das Thema Ihres Blocks.
- Klicken Sie in der „Vorschau“ auf „Speichern“, um eine Vorschau anzuzeigen, wie die Änderungen im Live-Modus aussehen werden.
Weitere häufig gestellte Fragen
Wie macht man aus einem Codeblock einen anklickbaren Link?
Um einen Code-Block mit dem WordPress-Editor zu einem Link zu machen, folge diesen Schritten:
1. Wählen Sie die Codezeile aus, die Sie als Link verwenden möchten.
Wie man Gemälde in Minecraft macht
2. Wählen Sie im Popup-Widget das Verknüpfungssymbol aus. Alternativ können Sie auch die Tasten „Strg“ + „K“ auf Ihrer Tastatur drücken.
3. Geben Sie die URL ein, auf die der Code verlinken soll, und drücken Sie die „Enter“-Taste.
Kann ich Code mit dem Codeblock-Editor hervorheben, den der WordPress-Editor bereitstellt?
Nein, der vom nativen WordPress-Editor bereitgestellte Codeblock erlaubt Benutzern nicht, den Code zu kopieren und einzufügen. Dazu benötigen Sie die Hilfe eines erweiterten Plugins zum Bearbeiten von Codeblöcken wie dem Plugin „SyntaxHighligher Evolved“.
Hat Elementor eine Codeblock-Funktion?
Elementor ist ein beliebtes Drag-and-Drop-Plugin, das zum Erstellen von WordPress-Websites verwendet wird. Wenn Sie das Plugin zum Erstellen von Websites verwenden, werden Sie leider keinen Block finden, mit dem Sie Computerprogramme auf Ihrer Website formatieren können. Daher müssen Sie zum Abschluss der Aufgabe zum herkömmlichen WordPress-Editor wechseln.
Bringen Sie Ihre Website zum Laufen
Egal, ob Sie einen Programmierblog betreiben oder einfach nur Codeschnipsel auf Ihrer Website teilen möchten, es ist äußerst wichtig zu wissen, wie man Codeblöcke in WordPress verwendet. Code-Blöcke erleichtern Ihren Lesern die Arbeit und verbessern insgesamt die Benutzererfahrung Ihrer Website. Und wie Sie sehen können, 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.
