So fügen Sie HTML-Code in eine HTML-Seite ein

Auf der Seite sieht das so aus:

Um Code in eine WordPress-Seite mit festgelegten Einzügen einzufügen, wenn Sie von einem visuellen Inhaltseditor zu einem Texteditor wechseln, können Sie das HTML-Tag verwenden

Bewahren Sie alle zusätzlichen Leerzeichen, die zum Bilden von Einzügen verwendet werden.  Elementinhalt 
Und Standardmäßig wird es von Browsern in monospaced Schriftarten angezeigt.

Ein Beispiel für das Einfügen von HTML-Code in eine Seite ohne Plugins mithilfe eines Tags in WordPress 

 

 

 
Name 1
 
Name 2
 
 

 
Wert 1
 
Wert 2
 

Zu markieren 
Universelle Attribute sind anwendbar, insbesondere das Attribut Stil Die verwendet, um das Element mit CSS zu definieren.  Das folgende Beispiel zeigt, wie Attributwerte Stil Legen Sie die Farbe des angezeigten Textes, die Hintergrundfarbe des Blocks, die Dicke, Farbe und den Radius des Blockrands fest:


Die Möglichkeiten, Blöcke, die auf der Seite angezeigt werden, mithilfe von Attributen zu formatieren, sind ziemlich breit, aber nicht unbegrenzt.  Die Verwendung der betrachteten Tags ist dann gerechtfertigt, wenn einzelne Zeilen oder kleine Codefragmente beispielhaft in die Seite eingefügt werden.  In diesem Fall muss nicht über schönes Design gesprochen werden, das Ergebnis des Einfügens wird äußerst minimalistisch sein, aber für viele reicht dies aus.
Komplexe Formatierungen, mit denen Sie Syntax-Highlighting implementieren können, sind das Ergebnis der Plugins, die weiter unten besprochen werden.
Code-Einfügungs-Plugins für WordPress
Wir bieten eine Auswahl an mehreren Plugins aus dem offiziellen WordPress-Repository, mit denen Sie jeden Code (php, java, html, css) schön darstellen können: Zeile für Zeile und mit entsprechender Hervorhebung von Elementen.
SyntaxHighlighter weiterentwickelt

Ein weit verbreitetes Plugin zum Einfügen von Code in WordPress, fortschrittlich und leistungsstark, auf dessen Einstellungsseite Sie eines der sieben verfügbaren Designthemen anwenden und bei Bedarf auswählen können, ob Zeilennummerierung und Symbolleisten angezeigt, URLs anklickbar gemacht und das Codefeld reduziert werden sollen , stellen Sie das automatische Umbrechen langer Zeilen ein usw.  Es gibt auch eine visuelle Vorschau der Ausgabe, es gibt eine Dekodierung der verwendeten Attribute.
Im Plugin SyntaxHighlighter weiterentwickelt Alles, was Sie jemals brauchen könnten, ist vorhanden.  Es ist sehr einfach, damit Code in einen WordPress-Artikel einzufügen, dazu müssen Sie dem Plugin erlauben, das Tag in den Einstellungen zu verarbeiten 
Oder verwenden Sie die entsprechenden Shortcodes:
Beispiel Beispiel Beispiel Beispiel
wp-syntax

Ein weiteres Plugin, das von Webmastern seit langem zu Recht anerkannt wird.  Derzeit zeigen die Statistiken des offiziellen Repositorys mehr als 10.000 aktive Installationen.  Leider wurde das Plugin seit einem Jahr nicht mehr aktualisiert, erfüllt aber weiterhin seine deklarierten Funktionen.
wp-syntax hat keine eigene Einstellungsseite.  Dieses WordPress-Plugin zum Bearbeiten von Code, genauer gesagt zum Einfügen und Ändern des Aussehens der Syntaxhervorhebung, verwendet das Tag 
Mit Sprachauswahlattribut:

 
Beispiel
Beispiel
Beispiel
Die Liste der unterstützten Sprachen finden Sie auf der Plugin-Seite.
Attribut Linie im Tag wird verwendet, um die Zeilennummerierung anzuzeigen, sein Wert entspricht der Zeilennummer, ab der der Countdown beginnt.  Wenn der Code HTML-Objekte enthält, wird empfohlen, das Attribut zu verwenden entkam mit Bedeutung Stimmt als eine Option:
Beispiel

Ein Beispiel für die Ausgabe und Hervorhebung von CSS-Code mit dem Plugin:
 1
2
3
4
5
6
7
8
.block (Rahmen: 2px #8E0505; Farbe: #2D0000; /*Textfarbe*/ Polsterung: 2px; /*Vertiefung*/ Textausrichtung : links ; /*Textausrichtung*/ Schriftfamilie: arial;  Schriftgröße : 14px ;  )
Block (Umrandung: 2px #8E0505; Farbe: #2D0000; /*Textfarbe*/ Auffüllung: 2px; /*Auffüllung*/ Textausrichtung: links; /*Textausrichtung*/ Schriftfamilie: Arial; Schriftgröße : 14px; )
Beim Umschalten vom HTML-Editor in den visuellen Modus interpretiert das WordPress-Tag das Tag 
Und der Code wird nicht richtig angezeigt.  Daher müssen Sie beim Bearbeiten von Artikeln mit Codeblock-Einfügungen den Inhaltseditor im HTML-Modus verwenden.

Code verschönern

Ein leichtgewichtiges Plugin ohne Konfiguration, mit dem Sie Code auf einer WordPress-Site mit automatischer Hervorhebung einfügen können, ohne die Sprache angeben zu müssen.  Implementiert Hervorhebung für Tags 
Und Auf der Seite.  Eine einfache modulbasierte Lösung Google Code Pretty-Bibliothek für diejenigen, die sich nicht mit den Besonderheiten der Formatierung der Syntax von auf der Website angezeigten Blöcken mit Programmcode befassen möchten.

Fazit
Die in diesem Artikel besprochenen Plugin-basierten Lösungen sind nur ein kleiner Teil dessen, was das WordPress-Plugin-Repository bietet.  Durch Klicken auf die Links im Konsolenmenü "Plugins - Neu hinzufügen" zur Suchseite, nach Schlüsselwörtern Markieren und Syntax Sie können mehrere Dutzend ähnlicher Plugins finden, mit denen Sie den Programmcode schön gestalten können.  Es ist wichtig zu verstehen, wie angemessen und notwendig ein solches Plugin auf der Website ist.  Vielleicht ist es in Ihrem Fall einfacher, den Code manuell in einem Texteditor mithilfe von Tags in eine WordPress-Seite einzufügen 
Und .

Manchmal müssen Sie einige Informationen in einen Artikel einfügen, z. B. ein Banner oder ein Formular.  Diese Dinge sind HTML-Code.  Zu HTML-Code einfügen in einen Artikel oder eine Seite, sind keine besonderen Kenntnisse erforderlich.  Das geht ganz einfach.  Sie wissen bereits, dass HTML-Code nur Text ist.  Wählen Sie beim Erstellen eines Artikels oder einer Seite den Modus Text.  Fügen Sie dann den benötigten Code ein.  Wir sparen.  Und alles ist bereit!
Es gibt noch eine andere Möglichkeit, mit der Sie beliebigen HTML-Code auf jeder Webseite einfügen können.
Dies ist ein Etikett  .  Das Prinzip steht an erster Stelle , dann Ihren Code, dann.  Ich gebe ein Beispiel Ihr HTML-CodeWo
style ist verantwortlich für den Stil, die Größe und die Farbe des Textes innerhalb des Tags,
Rand: 10px  Einzugsgröße,
Breite: 300px  breite größe,
Höhe: 120px;  Höhe Größe.

P.S.  Ein bisschen Gehirntraining
Am Ufer des Teiches saßen drei Frösche.  Einer von ihnen beschloss, in den Teich zu springen.  Wie viele Frösche sind noch am Ufer?
Vielleicht interessiert Sie:

So verbinden Sie den Newsletter mit der Website
2014-03-09T04:38:56+00:00 Hoffnung WordPress HTML-Code, HTML-Code einfügen
Manchmal müssen Sie einige Informationen in einen Artikel einfügen, z. B. ein Banner oder ein Formular.  Diese Dinge sind HTML-Code.  Um HTML-Code in einen Artikel oder eine Seite einzufügen, sind keine besonderen Kenntnisse erforderlich.  Das geht ganz einfach.  Sie wissen bereits, dass HTML-Code nur Text ist.  Während der Erstellung...
Nadezhda Trofimova [E-Mail geschützt] Administrator-Blog-Website
Das könnte Sie auch interessieren:
So entfernen Sie /category/ von der WordPress-URL
Wie entferne ich eine Kategorie aus der WordPress-URL und warum wird sie benötigt?  Wie behindert dieses Präfix die Werbung für die Website?
 
So deaktivieren und aktivieren Sie den Dateieditor in der WordPress-Konsole
Das Bearbeiten der WP-config.php hat mich irgendwie ein wenig interessiert, ist aber schon länger zu sehen.  Trotzdem musste ich.  Ich betrete die Konsole meiner Site, aber dort gibt es keinen Dateieditor.  Du weisst...
 
So passen Sie das Islemag-WordPress-Theme an
Islemag ist eines der besten kostenlosen Themes da draußen.
 
So führen Sie ein Rollback von WordPress auf eine ältere Version durch
Hallo Leser meines Blogs.  Nun ist es soweit und ich bin beim Update einer neuen Version von WordPress auf ein Problem gestoßen, nämlich von WordPress 5 auf WordPress 4.7.
 
So beschleunigen Sie eine WordPress-Website, indem Sie die HeartBeat-API deaktivieren
Hallo alle.  Wir setzen das Thema der Beschleunigung einer Website auf WordPress fort.  Im Artikel So beschleunigen Sie WordPress, indem Sie CSS, HTML und Javascript minimieren, haben wir den Überschuss aus den Dateien entfernt, aber ...

Natürlich braucht nicht jeder diese Informationen, sondern nur diejenigen, die auf ihren Seiten mit den Lesern ihre Best Practices bei der Auswahl des Codes (lesen Sie die Eingeweide der Website) und einige ihrer Upgrades durch ... na ja, Sie verstehen durch Eingriff in die "Genetik"!  Was haben Sie gedacht?
Mit Blick auf die Zukunft, bis ich mit der Hauptgeschichte begonnen habe, kann ich Ihnen sagen, dass ich weiter basteln werde, worüber ich schreiben werde und was Ihnen sehr wahrscheinlich nützlich sein kann, wenn Sie auch Ihre eigene Ressource für Tastaturkreativität im Web haben .  Und deshalb empfehle ich Ihnen, die Veröffentlichung neuer Artikel zu verfolgen, um die Veröffentlichung eines Neulings nicht zu verpassen.  Vor allem, wenn Sie es noch nicht getan haben, frage ich mich, warum?
Und jetzt, meine lieben Schönen, beginnt sie – die Geschichte.
Eine berechtigte Frage mag auftauchen, aber muss sich der Kreditgeber generell um das Einfügen des Codes kümmern?  Warum müssen Sie eine Art Code-Hervorhebung vornehmen und warum können Sie ihn nicht einfach einfügen, wie zum Beispiel Text?
Und alles ist einfach - wenn Sie versuchen, den Code einfach so einzufügen, wird er manchmal ausgeführt, anstatt ihn anzuzeigen, und alle Funktionen ausführen, für die er bestimmt war, und zwar genau dort, wo Sie ihn einfügen.  Von all diesen "Reizen" kann die Site "schweben", sie kann "verdrehen" und der Artikel selbst wird zu etwas Unverständlichem und etwas in der Mitte - hässlich!  Ja, und der Code selbst in seiner „nackten“ Form kein sehr lesenswertes „Spektakel“, das für einen unvorbereiteten Blick eine unverdauliche Substanz darstellen kann, aus der beim Betrachter vielleicht sogar ein Widerwille entwickelt wird, etwas zu verstehen und sich in das Wesentliche zu vertiefen von dem, was passiert.  Kurz gesagt, es ist nicht!  Ja, das können Sie selbst sehen, wenn Sie sich zum Beispiel das Bild im Code ansehen:

Um es „es“ zu machen, gibt es mehrere Möglichkeiten, und zwar 3. Ich werde versuchen, alles zu beschreiben, wie ich es eingangs versprochen habe, und Sie selbst entscheiden, welche für Sie bequemer und angenehmer zu implementieren und wahrzunehmen ist.
Wie man HTML-Code schön und korrekt in den Hauptteil eines Artikels einfügt.
Option #1 – Code-Hervorhebung durch das WP-Syntax-Plugin.
Genauer gesagt wird diese Option durch eine Reihe von zwei Plugins implementiert - für eine einfache Verwendung.  Der erste Teil des Bundles heißt: WP-Syntax und führt die Hauptfunktion aus.  Und der zweite Teil ist ein Dienst und heißt WP-Syntax Button, der die Arbeit durch Drücken einer Schaltfläche implementiert, die Ihnen genau diese Schaltfläche auf dem Dashboard des WordPress-Editors hinzufügt.  Laden Sie beide Teile dieses Pakets entweder über eine Suche im Admin-Bereich des Blogs nach Namen oder von den Seiten des Engine-Repositorys herunter.  Die Repository-Seite für WP-Syntax ist hier.  Und die Seite für WP-Syntax Button .  Wir sind nicht im Bus, richtig?
Die Installation ist Standard - gefunden, heruntergeladen, aktiviert.  Bitte beachten Sie, dass das Button-Plugin seit über zwei Jahren nicht mehr aktualisiert wurde und es keine Daten zu seiner Kompatibilität mit Ihrer neuen Version von WordPress gibt, was Sie möglicherweise warnen könnte.  Wenn Sie dieser Umstand beunruhigt, dann können Sie den Button nicht herunterladen und kommen nur mit dem ersten Teil des Bundles aus – das wird auch funktionieren, nur weniger komfortabel.  Von mir selbst kann ich sagen, dass ich das komplette Set nutze und alles funktioniert.
Wenn Sie alles installieren, haben Sie im Editorbereich eine neue Schaltfläche "Code".

Um Code über dieses Plugin einzufügen, müssen Sie ihn zuerst im visuellen Modus (normal, wo Sie tippen) einfügen, ihn mit der Maus auswählen und dann auf die Schaltfläche "Code" klicken und die Sprache, die Ihrem Code entspricht, aus der Dropdown-Liste auswählen aufführen.  Gleichzeitig können Sie die Nummerierung der Zeilen festlegen, indem Sie die Nummer der ersten in Zeilennummer angeben.  Drücken Sie nach der Auswahl Einfügen.

Gleichzeitig sehen Sie nach dem Speichern / Aktualisieren des Beitrags / der Seite so etwas wie dieses Bild mit Ihrem schön eingefügten Bildcode, zum Beispiel:
Wenn Sie den WP-Syntax Button-Teil nicht installiert haben, müssen Sie diese Codekombination verwenden, um den Code einzufügen:
Geben Sie hier Ihren Code ein

Dabei ist Sprache die Sprache Ihres Codes.  Diese Kombination müssen Sie in den HTML-Editor einfügen und Ihren Code darin eingeben.  Die Liste der unterstützten Sprachen befindet sich auf dieser Plugin-Seite.  Die Möglichkeit, Code wie diesen einzufügen, ist nicht sehr praktisch, aber jemand kann es brauchen.  Das Ergebnis wird in etwa so aussehen:
 1
Geben Sie hier Ihren Code ein
Option #2 – Syntaxhervorhebung über das SyntaxHighlighter Evolved Plugin, dessen Name genau das ist, was übersetzt wird.  Sie können es herunterladen, indem Sie im Blog-Adminbereich oder auf dieser Plugin-Seite nach dem Namen suchen.  Die Installation ist Standard.  Dieses Plugin funktioniert wie das vorherige, aber auf weniger bequeme Weise.
Nach der Installation haben Sie den Menüpunkt Einstellungen> SyntaxHighlighter, wo sich alle Einstellungen befinden.  Ja, ich habe vergessen zu sagen, dass das Plugin auf Englisch und nicht Russisch ist - ein Nachteil.  Wenn etwas nicht klar ist, verwenden Sie die Übersetzung der Seite.
Plugin-Einstellungen können auf Standard belassen werden - sie sind funktionsfähig.  Oder Sie können die Werte wie im Bild mit einem Beispiel meiner Einstellungen festlegen:

Wenn Sie verwirrt sind, gibt es in den Einstellungen eine Schaltfläche "Auf Standardwerte zurücksetzen", mit der Sie die Einstellungen auf die ursprünglichen zurücksetzen können.  Und auch ganz unten auf der Seite, unter den Schaltflächen, gibt es eine Vorschau der Code-Anzeige - Sie können getrost herumspielen und Ihre eigene Version der Einstellungen und Ausgabe des Codes wählen.  Es gibt eine Liste der unterstützten Sprachen und eine detailliertere Beschreibung der Einstellungen - alles ist auf Russisch, Sie werden es herausfinden.
Um mit diesem Plugin HTML- oder PHP-Code in einen Seitenbeitrag einzufügen, müssen Sie eine der Konstruktionen aus dem Beispiel auf der Seite mit den Plugin-Einstellungen (ganz unten) anwenden:

Wechseln Sie beim Schreiben eines Beitrags zum HTML-Editor, wählen Sie die gewünschte Sprachoption aus dem Beispiel aus, fügen Sie sie ein und fügen Sie Ihren Code ein.  Es wird in etwa so aussehen:
Hier geben Sie Ihre Langwahlnummer ein
Option Nummer 3 - HTML- oder PHP-Code ohne Plugin einfügen.
Um auf das Plugin zu verzichten und den HTML-Code in den Body des Blogs einzufügen, müssen Sie ihn in den folgenden Code einschließen:
FÜGEN SIE HIER IHREN CODE EIN
Dabei sind Höhe und Breite jeweils die Höhe und Breite des Ausgabefeldes mit dem Code in Pixeln, Farbe ist die Farbe.  Sie können die Farbe mit der Pipette auswählen, über die ich bereits geschrieben habe.  Breite und Höhe können entsprechend den Parametern Ihrer Website angepasst werden.  Die Ausgabe wird in etwa so aussehen:
In Optik und Funktionalität ist das natürlich weniger hübsch, belastet den Blog aber nicht mit unnötigen Plugins, obwohl ich selbst diese Methode nicht nutze.  Habe ihn zur Abwechslung mitgebracht.
Ich denke, jetzt entscheide, wie man HTML-Code schön in ein Blog einfügt.
An dieser Stelle werde ich meinen Vortrag beenden.  Ich hoffe, ich habe dir heute etwas Gutes getan. Danke fürs Lesen.
Ein bisschen positiv:

Das Klicken auf soziale Schaltflächen und Kommentare sind willkommen!
Folgen Sie den Buttons, erzählen Sie Ihren Freunden von dem Artikel - hier geht es ums Geld!

Möchten Sie wissen, wie Sie den Code am einfachsten in eine WordPress-Site einfügen können, damit Sie ihn direkt aus dem Artikel kopieren können?
Damit wollte ich umgehen.
Wenn Sie Ihre Website auf dem CMS (Engine) WordPress betreiben, müssen Sie sie ständig verbessern und neue und nützliche Funktionen hinzufügen, die in anderen ähnlichen Blogs zu finden sind.
Du darfst nicht zurückfallen!
Dazu müssen Sie dort manchmal zusätzlichen Code einfügen.  Ich habe eigens einen ausführlichen Artikel auf meiner Website veröffentlicht, in dem ich über alle Änderungen spreche, die ich an meinem WordPress-Theme (Template) vorgenommen habe, damit sie nicht verloren gehen.  Im Falle einer Änderung der Vorlage müssen diese Anpassungen jedoch erneut durchgeführt werden.
Außerdem habe ich einen speziellen Blog, der auf meinem Blog installiert ist.  Übrigens finden Sie dort Links zu Artikeln, die beschreiben, wofür diese Plugins sind und wie man sie am besten installiert und konfiguriert.
Ich freue mich, nützliche Informationen zu teilen, die ich herausfinden konnte.  Und ich versuche alles in einer einfachen und verständlichen Sprache zu erklären, damit es auch Anfängern verständlich ist.
Aber manchmal muss ich Illustrationen hinzufügen, die zeigen, wie ich den Code auf meiner Website geändert habe.
Bisher habe ich dazu nur eine Möglichkeit verwendet: Ich habe - ein Foto des Bildschirms meines Computers eingefügt.
Aber auf dem Bild sieht man den Code gut, aber man kann ihn nicht kopieren.  In diesem Fall muss es manuell eingegeben werden.  Und deshalb sind Fehler und Missverständnisse möglich.
Um es meinen Lesern einfacher zu machen, habe ich mich daher entschieden, herauszufinden, wie man den Code in eine WordPress-Site einfügt, damit jeder ihn einfach kopieren kann.

Viele beziehen sich auf Plugins: 
WP-Syntax in Verbindung mit WP-Syntax-Button ; 
SyntaxHighlighter Entwickelt ; 
Auto-Syntax-Highlighter .
Ich habe eine Beschreibung gefunden, wie man den Code ohne Plugin einfügt.  Früher haben wir dazu das xmp-Tag (Öffnen und Schließen) verwendet.  Aber jetzt ist es veraltet, und stattdessen wird in HTML empfohlen, das pre-Tag (Öffnen und Schließen) zu verwenden.
Aber es ist mir nicht gelungen, den Programmcode nur mit den speziellen pre- oder xmp-Tags in den Artikel einzufügen.  Ich habe auch versucht, sie in einen Div-Container zu legen.  Und ich habe den vollständigen Satz von den Websites kopiert, die ihn empfohlen haben.
Das Experiment ist fehlgeschlagen.  Der Code wurde beim Bearbeiten im HTML-Modus nicht gespeichert.  Beim Wechseln der Registerkarten (Visuell/Text) verschwand es einfach aus dem Text des Artikels.  Aus irgendeinem Grund funktioniert das nicht.  Wer weiß, schreiben.
Ich bin auf Informationen gestoßen, dass dies nur nach der Installation des WP-Syntax-Plugins möglich ist.  Diese.  immer noch nicht ohne Plugin.  Ich hatte die neueste Version von WordPress installiert (damals - 4.3.1).
Aber das kannst du auch.  Wir haben den eingefügten Code auf einer Seite gesehen, mit der rechten Maustaste darauf geklickt, um „Elementcode anzeigen“ aus dem Kontextmenü auszuwählen, und uns den Code angesehen.  So können Sie herausfinden, wie es eingefügt wird.
So habe ich festgestellt, dass auf einer der mir bekannten Seiten der Code mit dem Crayon Syntax Highlighter Plugin eingefügt wurde.
Ich habe dieses Plugin gefunden, indem ich im Admin-Bereich gesucht und es im Schulungsblog installiert habe.
Es stellte sich als sehr einfach zu bedienen heraus.  Ich habe keine Einstellungen geändert, obwohl es ziemlich viele davon gibt.  Ich habe alles standardmäßig belassen (wie vom Autor selbst konfiguriert).
Nach der Installation und Aktivierung des Plugins erscheint im Artikelbearbeitungsmodus im Menü eine spezielle Schaltfläche, mit der Sie den Code auf der WordPress-Site einfügen können.


Es erscheint ein Fenster zum Einfügen des Codes.

Und dann kann jeder dieses Codefragment für sich auswählen und kopieren, um die Funktionen des eigenen Blogs zu verbessern.
Der Code ist sehr bunt.  Seine Elemente sind in verschiedenen Farben hervorgehoben.  Es ist möglich, all dies für sich selbst anzupassen.
Alles stellte sich als so einfach heraus, dass ich beschloss, nicht nach dem Besten zu suchen.
Und jetzt, liebe Leser, können Sie den Code ganz einfach von meiner Seite kopieren.
Zum Beispiel diese.
Funktionscode zum Ausblenden der Anmeldung des Administrators der WordPress-Site in Kommentaren
 
add_filter("comment_class", "udalit_class_avtora_commentariya");  function udalit_class_avtora_kommentariya($klassi)( foreach($klassi as $kluch=>$klass) : if (strstr($klass, "comment-author-")) : unset($klassi[$kluch]); endif; endforeach; gib $klasse zurück; )
 


 
add_filter("comment_class" , "udalit_class_avtora_commentariya")
;
Funktion delete_class_avtora_commentary($ edel) (
foreach ($klassi as $kluch => $klasse ) :