Springe zum Hauptinhalt

Wie Code-Schnipsel auf Wordpress teilen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie Software oder Programmiertipps anbieten, möchten Sie auf jeden Fall Codefragmente freigeben. Diese Art der Freigabe von Codefragmenten kann ihnen helfen, schnell eine Praxis einzurichten. Das Freigeben von Code mit allen erforderlichen Formatierungen ist jedoch standardmäßig nicht möglich. Was ich unter Formatierung verstehe, ist das Hervorheben der Syntax. Trotzdem ist es ziemlich einfach.

Wenn Sie divi verwenden, sollten Sie glücklicherweise wissen, dass es eine integrierte Methode gibt, um dies manuell zu tun, um diesen Snippets benutzerdefinierte Stile hinzuzufügen. Darüber hinaus gibt es Plugins und Ressourcen von Drittanbietern, die das Erstellen gut aussehender und funktionaler Snippets in Divi erheblich vereinfachen können.

In diesem Tutorial zeige ich Ihnen, wie Sie Codefragmente in Divi (manuell) freigeben. Außerdem zeige ich Ihnen, wie Sie mit Divi Builder Snippet-Blöcke entwerfen, die Sie auf die nächste Ebene bringen.

Übersicht

Hier ist eine Übersicht über die in diesem Tutorial möglichen Snippet-Designs.

Die Code-Snippet-Boxen mit Code-Snippets haben den manuellen Modus hinzugefügt.

Codevorschau mit divi möglichVoraussetzungen für das Tutorial

Für dieses Tutorial benötigen Sie lediglich das installierte und aktive Divi-Thema. Wir werden die Code-Snippet-Beispiele mit Divi Builder auf einer neuen Seite von Grund auf neu erstellen.

Erstellen Sie zunächst eine neue Seite und stellen Sie Divi Builder auf der öffentlichen Schnittstelle bereit. Wählen Sie dann die Option „Von Grund auf neu erstellen“.

Jetzt können Sie loslegen!

Entwurf einer personalisierten Box für Code-Schnipsel auf Divi

Da sich unser Code-Snippet in einem Textmodul befindet, können wir den Divi Builder verwenden, um dem Textmodul (und seiner Umgebung) Designelemente hinzuzufügen. Für dieses Design verwenden wir ein Zusammenfassungsmodul, das als Beschriftung für das Snippet dient. Als nächstes formatieren und positionieren wir den Cursor links vom Textmodul. Als nächstes werden wir das Textmodul unseres Snippets formatieren.

Erstellen des Abschnitts, der Zeile und der Spalte

Wir müssen zuerst einen neuen Abschnitt mit einer Zeile einer Spalte erstellen.

Spalte hat eine Zeilenteilung

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Aktualisieren Sie dann die Leitungsparameter wie folgt:

Dachrinnenbreite: 1
Benutzerdefinierte Polsterung: 0px oben und 0px unten

Ändern Sie den Divi-Line-ParameterFügen Sie den Textbaustein hinzu

Fügen Sie dann der Zeile einen Textbaustein hinzu.

Divi-Textmodul 1Sie können den Standardinhalt beibehalten. Wir werden später unsere WordPress-Schnipsel hinzufügen. Lassen Sie uns zunächst das Textmodul modellieren, indem Sie die folgenden Textparameter aktualisieren:

Hintergrundfarbe: # eff0f1 Textfarbe: # 000000 Benutzerdefinierter Rand: 60px links Benutzerdefinierte Polsterung: 3% oben, 3% unten, 3% links, 3% rechts

Parametereinstellungen des Divi-Textmoduls

Breite des oberen Randes: 10px Farbe des oberen Randes: # 7cda24

RahmentexteinstellungenErstellen des Snippet-Labels

Zum Erstellen des Snippet-Labels verwenden wir ein Klappentextmodul. Auf diese Weise können Sie neben der angezeigten Codesprache ein Klappentext-Symbol (oder ein benutzerdefiniertes Bildsymbol) hinzufügen.

Erstellen Sie ein Präsentationsmodul und ziehen Sie es über das Textmodul. Aktualisieren Sie anschließend die folgenden Präsentationseinstellungen:

Titel: css Inhalt: [fiktiven Inhalt entfernen] Symbol verwenden: JA Symbol: siehe Screenshot

Modifiziertes Divi-TextmodulAktualisieren Sie dann die Entwurfsparameter wie folgt:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Hintergrundfarbe: # 1b2426 Symbolfarbe: # 7cda24 Bild- / Symbolposition: links Schriftgröße: 20px Texttitel Farbe: #ffffff Textgröße Titel: 16px

Klappentext-Divi-Moduleinstellungen

Titelzeilenhöhe: 1.3em Breite: 100px Benutzerdefinierter Rand: -44px unten, -50px links Benutzerdefinierte Polsterung: 10px oben, 2px unten, 15px links, 15px rechts

Einstellung des CSS-Klappentextmoduls

Duplizieren Sie den Abschnitt, um weitere Snippet-Box-Designs zu erstellen

Dies unterstützt unser erstes Code-Box-Design. Jetzt müssen wir nur noch den Abschnitt mit dem Codeblockdesign duplizieren und die Beschriftung und die Farben aktualisieren, um einen neuen Codeblock für eine andere Codierungssprache zu erstellen. Dies ist natürlich optional, aber wenn Sie einer Seite verschiedene Snippets hinzufügen möchten, ist es hilfreich, für jede Seite ein anderes Farbschema zu haben.

Duplizieren Sie beispielsweise den Abschnitt und öffnen Sie die Einstellungen des Blurb-Moduls.

Aktualisieren Sie den Titel auf "js" für Javascript.

Klicken Sie dann mit der rechten Maustaste auf Bild- / Symbolfarbe und wählen Sie Suchen und Ersetzen.

Dupliziere einen Divi-AbschnittAktualisierte Such- und Ersetzungsoptionen:

In: diesem Abschnitt Ersetzen durch: [neue Farbe] Alle ersetzen: Aktivieren Sie alle gefundenen Werte ersetzen

Sie haben jetzt einen neuen Snippets-Block für JS-Snippets.

Hier ist ein Beispiel für Snippet-Boxen für beliebte Codetypen für WordPress.

Fügen Sie Divi-Code-Snippets hinzuVerwenden des Prettify Code-Plugins, um manuelle Codeausschnitte mit Syntaxhervorhebungen zu versehen

Nun, es ist wahr, dass Sie mit der manuellen Methode sofort Text einfügen und übergeben können. die Prettify Code Plugin fügt sofort hervorgehobenen Code zu allen "Pre" -Tags hinzu. Das Schöne an diesem Plugin ist, dass absolut keine Anpassung erforderlich ist. Sie müssen lediglich das Plugin herunterladen und aktivieren.

Hier ist ein Beispiel, wie der Code mit Active Prettify Code aussehen wird.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Hübscher Code in AktionCode Prettify kommt Google und wird auch verwendet, um all diese wunderbaren Schnipsel zu stilisieren stackoverflow.com.

Um zu beenden

Das Anzeigen von Codefragmenten auf Divi muss nicht schwierig sein. Das manuelle Hinzufügen der Snippets mithilfe der von WordPress bereitgestellten Pre- und Word-Code-Tags erledigt die Aufgabe für die meisten Nicht-HTML-Snippets. Sie müssen das Snippet jedoch zuerst über einen Encoder ausführen. HTML, um sicher zu sein. Darüber hinaus können Sie den Snippet-Textstil mithilfe der Einstellungen des Textmoduls weiter anpassen. Und vergessen Sie nicht, Code Prettify zu verwenden, um Ihren manuellen Snippets eine Hervorhebung hinzuzufügen.

Für diejenigen unter Ihnen, die regelmäßig Snippets teilen, ist die Verwendung des SyntaxHighlighter-Plugins wahrscheinlich die beste Wahl. In beiden Fällen haben Sie immer die Möglichkeit, Ihren Snippets mit Divi Builder kreativere Designs hinzuzufügen.

Bonne Chance.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren