So verwenden Sie den WordPress-Codeblock

Das Anzeigen von Code in WordPress-Seiten und -Beiträgen kann schwierig sein. Das bloße Posten des Codes innerhalb des Inhalts kann interessante Ergebnisse haben, insbesondere wenn WordPress ihn falsch anzeigt oder Ihre Sicherheit Sie für böswillige Aktivitäten aussperrt. Glücklicherweise macht es der WordPress Code Block einfach, Code-Snippets anzuzeigen. Wenn Sie wissen, wie Sie diesen Block verwenden, können Sie Code in Ihren Inhalten sowohl für Ihre Website als auch für Ihre Leser optimal anzeigen.

In diesem Artikel werden wir uns den WordPress-Codeblock ansehen und sehen, was er tut. Wir werden sehen, wie Sie es zu Ihren Beiträgen und Seiten hinzufügen und sich die Einstellungen und Optionen ansehen. Bleiben Sie bis zum Ende dran, um Tipps und Best Practices zur Verwendung zu erhalten und die häufig gestellten Fragen zu lesen.

Abonnieren Sie unseren Youtube-Kanal

So fügen Sie den Codeblock zu Ihrem Beitrag oder Ihrer Seite hinzu

Um den Codeblock zu Ihren Seiten und Beiträgen hinzuzufügen, wählen Sie das Blockeinfügewerkzeug neben dem Inhaltsbereich, in dem Sie den Block platzieren möchten, oder wählen Sie das Einfügewerkzeug in der oberen linken Ecke der Seite aus. Geben Sie den Namen des Blocks ein und wählen Sie ihn aus, wenn er angezeigt wird, oder scrollen Sie durch die Blöcke, um zu sehen, was dort steht.

Wenn Sie möchten, können Sie /code in den Bereich eingeben, in dem der Block erscheinen soll. Drücken Sie dann einfach die Eingabetaste oder wählen Sie den Block aus den angezeigten Optionen aus.

Sie haben jetzt einen Codeblock in Ihrem Inhalt, in dem Sie jede Art von Code hinzufügen können, die Sie anzeigen möchten. Der Code wird automatisch mit Code-Tags gekennzeichnet, sodass er korrekt als Code angezeigt wird. Dies hilft bei der Bereitstellung von Beispielen für die Leser, von denen sie lernen oder sie in ihren eigenen Projekten verwenden können. In diesem Beispiel verwende ich den Pseudocode von der WordPress-Supportseite (weil) lazy.level = advanced.

Codeblock-Einstellungen und -Optionen

Der Codeblock hat zwei Stellen, an denen Sie Einstellungen und Optionen finden. Die erste ist die Code-Symbolleiste über dem Block. Die zweite sind die Optionen in der rechten Seitenleiste. Wir werden uns beide ansehen.

Codeblock-Symbolleiste

Klicken Sie auf eine beliebige Stelle im Block, um seine Symbolleiste anzuzeigen. Wenn Sie nicht alle Werkzeuge sehen, platzieren Sie Ihre Maus unter dem Block an einer neuen Blockposition und klicken Sie dann auf den Block. Alle Einstellungen werden angezeigt.

Codeblocktyp oder -stil ändern

Die erste Einstellung verwendet linke und rechte Pfeile. Dadurch wird der Block in einen benutzerdefinierten HTML-Block, einen vorformatierten Block geändert, die Spalten geändert und Sie können eine Gruppe erstellen, damit Sie die Hintergrundfarbe anpassen, Rahmen auswählen und andere Optionen anpassen können. Wenn Sie mit der Maus darüber fahren, erhalten Sie eine Vorschau, wie die einzelnen Elemente aussehen würden. Ich fahre mit der Maus über die Option Benutzerdefiniertes HTML.

Ziehen

Das Ziehwerkzeug enthält sechs Punkte. Ergreifen Sie diese Punkte, um den Block an eine beliebige Stelle zu ziehen. Wenn Sie mit der Maus über die verschiedenen Bereiche fahren, wird eine blaue Linie angezeigt, an der sie an jeder möglichen Stelle platziert wird.

Wenn Sie es ablegen, wird der Block an seiner neuen Position platziert.

Bewegung

Die Aufwärts- und Abwärtspfeile verschieben den Block jedes Mal, wenn Sie darauf klicken, innerhalb der Inhaltsblöcke um einen Block nach oben oder unten.

Fett und kursiv

Die Einstellungen für Fettdruck und Kursivschrift gelten für den markierten Code. Sie können sie zusammen oder einzeln verwenden. Ich verwende in diesem Beispiel beides zusammen und unabhängig voneinander. Das ist eine gute Möglichkeit, auf bestimmte Zeilen oder Befehle im Code aufmerksam zu machen.

Verknüpfung

Mit dem Link können Sie jeden Code zu einem anklickbaren Link machen. Sie können nach der URL für den markierten Teil des Codes suchen oder die URL eingeben. Dies ist gut, wenn Sie zu Tutorials für jeden der Befehle, anderen Beispielen, woher der Code stammt usw. verlinken möchten. Sie können den Link in derselben Registerkarte oder in einer neuen Registerkarte öffnen.

Mehr Einstellungen

Die Weitere Einstellungen des Codeblocks öffnen ein Dropdown-Feld mit mehreren Optionen. Ich habe jede der Optionen in diesem Beispiel angewendet.

Inline-Code – zeigt den als Code formatierten Text an. Es platziert den Text in einer eigenen Zeile. Da alles als Code formatiert ist, sieht die Schriftart gleich aus.

Inline-Bild – platziert ein Bild im Text, wo Sie die Maus platziert haben. Es öffnet die Medienbibliothek, in der Sie ein Bild auswählen können. Wenn Sie auf das Bild klicken, wird ein Dropdown-Feld angezeigt, in dem Sie die Breite ändern können.

Tastatureingabe – fügt dem ausgewählten Code Tastatur-Tags hinzu. Der Code wird in der Standard-Monospace-Schriftart des Browsers angezeigt.

Durchgestrichen – Fügt eine Linie durch den markierten Code ein.

Tiefgestellt – formatiert den Code als tiefgestellt.

Hochgestellt – formatiert den Code als hochgestellt. Sie können tiefgestellt und hochgestellt zusammen verwendet werden. Dadurch wird die Schriftgröße reduziert und der Code horizontal zentriert.

Textfarbe – ändert die Farbe des markierten Codes. Wählen Sie aus vorgefertigten Farben aus, wählen Sie eine Farbe im Farbauswahlwerkzeug oder geben Sie den Wert als HEX, RBG oder HSL ein.

Optionen

Die Codeblock-Optionen werden innerhalb der drei Punkte ganz rechts in der Symbolleiste platziert. Die Optionen umfassen:

Weitere Einstellungen ausblenden – blendet die rechte Seitenleiste aus, um Ihnen einen sauberen und breiten Arbeitsbereich zu bieten.

Kopieren – kopiert den Block, sodass Sie ihn an einer beliebigen Stelle im Inhaltsbereich einfügen können.

Duplizieren – Duplikat des Blocks und platziert ihn unter dem Original.

Vorher einfügen – fügt einen Inhaltsbereich über dem Codeblock hinzu.

Einfügen nach – fügt einen Inhaltsbereich unter dem Codeblock hinzu.

Verschieben nach – lässt Sie den Block verschieben, indem Sie eine blaue Linie platzieren, die Sie mit den Pfeiltasten nach oben oder unten verschieben können. Wenn Sie die Leitung zum gewünschten Ort haben, drücken Sie einfach die Eingabetaste.

Als HTML bearbeiten – ändert den Code-Editor für den Block, in dem Sie den Code als HTML bearbeiten können. Wählen Sie Visuell bearbeiten, um den Block wieder in den visuellen Modus zu versetzen.

Zu wiederverwendbaren Blöcken hinzufügen – Fügt den Block zu Ihren wiederverwendbaren Blöcken hinzu, sodass Sie ihn auf jeder Seite oder in jedem Beitrag wiederverwenden können.

Gruppe – Fügt den Block zu einer Gruppe hinzu, damit Sie ihn als einzelne Einheit ändern können.

Block entfernen – löscht den Codeblock.

Codeblock-Einstellungen

Die Codeblock-Einstellungen befinden sich in der rechten Seitenleiste. Dazu gehören Typografie und erweiterte Einstellungen. Wenn Sie den Block auswählen, werden die Einstellungen angezeigt. Wenn die Seitenleiste nicht angezeigt wird, klicken Sie oben rechts auf das Zahnradsymbol.

Typografie

Mit Typografie können Sie die Schriftgröße für den gesamten Block auswählen. Wählen Sie die Schriftgröße aus einem Dropdown-Feld mit 7 Größen oder geben Sie eine benutzerdefinierte Größe in das Feld ein. Klicken Sie auf Zurücksetzen, um die Standardschriftgröße zurückzusetzen.

Fortschrittlich

Die erweiterten Einstellungen umfassen einen HTML-Anker und ein Feld für zusätzliche CSS-Klassen. Der Anker ist eine URL nur für diesen Block, sodass Sie direkt darauf verlinken können. Im Feld Zusätzliche CSS-Klassen können Sie eine benutzerdefinierte CSS-Klasse hinzufügen, um den Block zu stylen.

Tipps und Best Practices für die effektive Verwendung des Codeblocks

Verwenden Sie diesen Block immer dann, wenn Sie Code in Ihren Inhalten anzeigen möchten. Der Code selbst hat keine Auswirkung auf den Block.

Formatieren Sie den Code mit Leerzeichen wie beim Erstellen von Code mit einem Texteditor. Verwenden Sie die Einstellungen fett und kursiv, um auf bestimmte Snippets in Ihrem Code aufmerksam zu machen.

Wie bei jedem Code sollten Sie ihn gut beschriften, damit er leicht zu verstehen ist. Sie können den Code kommentieren oder Notizen innerhalb des Blocks hinzufügen, aber stellen Sie sicher, dass sie sich nicht in den Codeelementen befinden, falls jemand den Code kopieren möchte.

Häufig gestellte Fragen zum Codeblock

Was ist der Zweck des WordPress-Codeblocks?

Um Code anzuzeigen, damit andere ihn sehen und verwenden können. Es zeigt den Code in einem sauberen Layout an, das Ihre Abstände einhält.

Führt der Codeblock den Code aus?

Nein. Es zeigt den formatierten Code an, damit Ihre Leser ihn sehen und verwenden können. Der Code wird automatisch mit den HTML-Code-Tags umschlossen.

Welche Arten von Code kann es anzeigen?

Es zeigt jeden Code aus jeder Programmier- oder Skriptsprache an. Die Sprache macht keinen Unterschied.

Formatiert es den Code?

Nein. Es funktioniert nicht als Code-Editor, also ändert es nicht die Abstände, Farben, fügt Zahlen usw. hinzu. Es zeigt den Code nur so an, wie Sie ihn eingeben.

Wie unterscheidet sich der Code-Block vom HTML-Block?

Mit dem HTML-Block können Sie HTML erstellen, ohne in die Code-Editor-Ansicht Ihrer Seite wechseln zu müssen. Es führt den HTML-Code auf dem Frontend aus. Sie können die Ergebnisse im Backend in der Vorschau anzeigen. Sie können den Codeblock verwenden, um HTML anzuzeigen, wenn es nicht ausgeführt werden soll.

Wie unterscheidet es sich vom vorformatierten Block?

Der vorformatierte Block zeigt Text mit Ihren Leerzeichen in einer Monospace-Schriftart an. Es fügt Schriftart- und Hintergrundfarben für die Seitenleistenoptionen hinzu.

Abschluss

Das ist unser Blick auf den WordPress Code Block. Der Block ist einfach und leicht zu bedienen. Da der Code nicht ausgeführt wird, spielt die Sprache selbst keine Rolle. Dieser Block bietet eine gute Möglichkeit, jede Art von Code anzuzeigen, damit Ihre Leser kopieren oder daraus lernen können.

Wir wollen von dir hören. Haben Sie den WordPress-Code-Block verwendet? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über Danielala / shutterstock.com