Adouz.de, 02.06.2019

Ich habe persönlich lange gesucht, wie ich mit Elementor Code-Snippets hinzufüge. Für WordPress gibt es eine Reihe Plugins, die genau das tun. Aber ausgehend vom Elementor habe ich keine einfache Möglichkeit gefunden, dies umzusetzen.

Abhilfe schafft Pastacode, auch wen man dieses Plugin selbst nicht direkt vom Elementor nutzen kann. Durch einen kleinen Umweg klappt das aber.

Zunächst muss Pastacode installiert und aktiviert werden. Danach erscheint unter “Einstellungen” ein neuer Menüpunkt namens “Pastacode”. Dort kann man das Plugin konfigurieren. Z.B. kann man die Zeilennummern anzeigen oder weglassen.

Jetzt erstellen wir eine neue Seite oder wechseln wir zu einer bestehenden, um unseren Code hinzufügen zu können. 

Dann suchen wir das Elementor-Element mit dem Namen “Shortcode” aus, was zumindest aktuell dies als Symbol hat: […]
Und fügen es zu unserer Seite hinzu.
Im Verarbeitungspanel des neuen Elements “Shortcode bearbeiten” geben wir Folgendes ein.

[pastacode lang="java" manual="[pastacode lang=“java“ manual=“Der eigentliche Code“ message=“Code 1: Beispiel“ highlight=“Java“ provider=“manual“/]" message="Code 1: PastaCode-Shortcode" highlight="" provider="manual"/]

Wobei

  • lang die Angabe ist, in welcher Programmier- bzw. Skriptsprache der Code implementiert ist
  • im manual der eigentliche Code platziert wird, den wir am Ende anzeigen möchten.
  • message entspricht der Überschrift des Code-Snippets
  • und highlight: welche Zeile des Codes markiert werden muss.

Um folgenden Code anzuzeigen,

[pastacode lang="java" manual="public abstract class MyClass { private int a = 1; protected String getMessage(){ return “Hallo Welt“; } }" message="Code 2: anzuzeigendes Beispiel" highlight="3" provider="manual"/]

würde der komplette Shortcode so aussehen:

[pastacode lang="java" manual="[pastacode lang=“java“ manual=“public abstract class MyClass { private int a = 1; protected String getMessage(){ return “Hallo Welt“; } }“ message=“Code 1: Beispiel“ highlight=“3“ provider=“manual“/]" message="Code 3: gesamter Shortcode für das obige Beispiel" highlight="Java" provider="manual"/]

Dabei muss man im anzuzeigenden Code bestimmte Zeichen wie die Hochkommas (“) oder Klammern durch HTML-Entities ersetzen. Hochkommas werden beispielsweise zu “

Tipp:
Wenn du den Shortcode nicht selbst so kryptisch schreiben möchtest, dann habe ich für dich einen Tipp. Das Vorgehen könnte so aussehen:

  • Aktivere bitte  Pastacode für die Kommentare, indem du in den Einstellungen von Pastacode folgende Option mit Ja beantwortest: Activate Pastacode for comments.
  • Speichere deine Änderung
  • Wechsel zum Kommentar-Abschnitt irgendeiner Seite, die bereits existiert.
  •  Dort siehst du nun ein “P” mit dem Tooltip “insert a code“
  • Klicke drauf und wähle im angezeigten Menü “Write code” aus
  • Ein Popup wird erscheinen, in dem du deine Eingaben bequem machen kannst.
  • Wenn du deinen Kommentar erfolgreich hinzugefügt hast, wechselt du zu deinem Admin-Bereich und suchst diesen neuen Kommentar.
  • In der Spalte Kommentar findest du genau den Shortcode, den du für das Shortcode-Element von Elementor benötigst.

 

Hast du das hier schon getestet oder geht das deiner Meinung nach viel einfacher oder besser? Dann lasse mir gerne einen Kommentar da, ich freue mich sehr über dein Feedback!

Schreibe einen Kommentar