Möchten Sie Code mit einer Lösung oder Anleitung auf Ihrer Website veröffentlichen, haben aber Probleme damit? Erfahren Sie, wie Sie alles richtig machen und den Code so anzeigen, wie er im Code-Editor erscheint.
Das Einfügen des Codes scheint keine schwierige Aufgabe zu sein, es können jedoch Schwierigkeiten auftreten, wenn Sie einige der besprochenen Regeln nicht kennen.
Code als Code einfügen
Um Code in eine Website einzufügen, wird dieser in Tags verpackt
UND . Daraus ergibt sich folgende Konstruktion:
Hier ist der Code
Um es kurz und auf den Punkt zu bringen: In diesem Design teilt das Code-Tag dem Browser mit, was darin enthalten ist Programmcode, und das pre-Tag behält Zeilenumbrüche, Zeilentabulatoren (Einrückungen) und Leerzeichen bei.
Es scheint, dass alles klar ist und es nichts Kompliziertes gibt, aber das Problem besteht darin, dass Sie HTML-Code oder Code mit Zeichen einfügen möchten< , >, & , " , ` , dann können Probleme auftreten - der Browser verarbeitet Ihren Code als HTML. Wenn Sie beispielsweise den Code eines Formulars mit einer Schaltfläche, Eingabefeldern usw. im Code anzeigen möchten, wird der Browser dies tun Zeigt das Formular und nicht seinen Code an.
Escape-Code
Um dies zu verhindern, führen sie sogenanntes Code-Escapen durch – dabei werden die oben genannten Zeichen durch ihre UTF-Codes ersetzt.
Schema zum Ersetzen von Zeichen durch UTF-Codes
Nachfolgend finden Sie die Symbole und Codes, die sie ersetzen:
Natürlich ersetzt niemand Symbole manuell – dies erfolgt programmgesteuert. Das am besten zugängliche Tool hierfür ist das Online-Code-Escape-Programm, bei dem im Handumdrehen alle Zeichen ersetzt werden, der Code alle Leerzeichen und Bindestriche beibehält und vollständig zum Einfügen in die Tag-Konstruktion bereit ist
Daher können Sie nach dem Escapezeichen einen beliebigen Codeabschnitt einfügen. Sie können ein Beispiel für eine solche Einfügung sehen, nachdem Sie den Code unten maskiert haben:
Überschrift
Zusammenhängende Posts
Darüber hinaus möchte ich gleich klarstellen, dass wir den Code in den Artikel selbst einfügen werden, damit unsere Leser ihn kopieren können, ohne Zeit mit der Eingabe des Textes selbst zu verschwenden. Dadurch erhöhen wir den Komfort () unserer Ressource – dieses Mal. Und die Artikel werden professioneller und vollständiger aussehen – das ist zwei.
Ich möchte auch darauf hinweisen, dass die Informationen in diesem Artikel für Personen nützlich sein werden, die entweder, wie wir Ihnen sagen, verschiedene Arten von Ergänzungen zur Website vornehmen können, oder für Benutzer, die einfach gerne etwas teilen möchten nützliche Informationen. Und es spielt keine Rolle, dass es sich bei diesen Informationen um Code handelt :) Übrigens verrate ich Ihnen ein kleines Geheimnis: In diesem Projekt zeigen wir es mit dem Wp-Syntex-Plugin an.
Sie fragen sich vielleicht: „Warum verwenden wir es?“ Die Antwort ist einfach: Es gibt keine Genossen nach Geschmack und Farbe. Witz. Tatsächlich haben wir uns für dieses Plugin entschieden, weil es einfach zu verwenden ist, es verschiedenen Arten von Programmiersprachen (CSS, HTML, Java, Javascript, Perl, SQL usw.) einen visuellen Stil verleiht und unseren Server nicht überlastet .
Nun, da ich über Wp-Syntex vernachlässigt habe, wollen wir anhand seines Beispiels zeigen, wie man Code in Artikel auf WordPress einfügt.
Zuerst müssen Sie dieses Plugin installieren. Wie das geht, haben wir im Artikel darüber besprochen .
Daher werde ich diese Aktion hier nicht beschreiben.
Als Ergebnis sehen Sie Folgendes:
Der Code, der ausgegeben werden soll
Anstelle von PHP können Sie in diesen Code auch eine andere Programmiersprache einfügen, beispielsweise CSS oder Java. Gleichzeitig wird sich der Stil des Erscheinungsbildes ändern.
Zusätzliche Funktionen von Wp-Syntex
Wenn Sie das Attribut zum öffnenden „pre“-Tag hinzufügen Linie, das heißt, der Code, den Sie einfügen müssen, beginnt wie folgt:
Der Code, der ausgegeben werden soll
Ich hoffe, Sie bemerken den Unterschied?
Es gibt noch ein weiteres kleines Attribut, das Sie möglicherweise benötigen – dieses entkam. Es ermöglicht Ihnen, HTML-Zeichencodes direkt in die Zeichen selbst umzuwandeln. Beispielsweise wird „>“ in „>“ umgewandelt. Um Geld zu verdienen diese Funktion, fügen Sie im öffnenden „pre“-Tag das folgende Attribut ein:
escaped="true"
Dementsprechend beginnt das Tag wie folgt:
<
pre lang=
"php"
line=
"1"
escaped=
"true"
>
Ich habe im Internet auch Informationen gefunden, dass man ein weiteres Plugin installieren kann (WP-Syntax Button), das in Verbindung mit unserem Plugin funktioniert und dem WP-Editor eine Schaltfläche zum Einfügen von Code hinzufügt. Ich war nicht zu faul und beschloss, es zu testen.
Gleich bei der Installation war ich beunruhigt darüber, dass es schon seit längerem nicht mehr aktualisiert wurde und nicht mit unserer WordPress-Version getestet wurde. Nun, was soll ich sagen, meine Befürchtungen waren berechtigt.
Nachdem ich den WP-Syntax-Button aktiviert hatte, beschloss ich, zu versuchen, ein Java-Skript in einen unserer Artikel einzufügen. Ich habe alles so gemacht, wie es im Berg an Anleitungen und Empfehlungen steht. Ich habe das Skript in den Artikel eingefügt, es ausgewählt und auf die Schaltfläche „Code“ geklickt.
Anschließend gab er die Programmiersprache und die Zeilennummer an, ab der die Skriptausgabe beginnen soll.
Sie fragen sich vielleicht, warum ich in diesem Artikel über dieses Experiment geschrieben habe? Damit möchte ich sagen, dass Sie bei der Suche nach Informationen im Internet auf das Veröffentlichungsdatum achten sollten. Schließlich besteht eine sehr hohe Wahrscheinlichkeit, dass die Informationen im alten Artikel vor einigen Jahren relevant waren und dieser Moment Es funktioniert einfach nicht und seine Verwendung oder Implementierung kann Ihr Projekt angreifbar machen.
Auf unserem Blog versuche ich, das gesamte Material aktuell zu halten. aktuellen Zustand Ich überwache ständig Aktualisierungen und nehme bei Bedarf Anpassungen an bereits geschriebenen Artikeln vor.
Wenn Sie aktuelle Informationen zu Ihrem erhalten möchten Email, dann empfehle ich es.
Video „So fügen Sie HTML-Code in einen Artikel ein“
Freunde, wenn jemand lieber sehen möchte, wie das geht, dann habe ich ein Video für euch aufgenommen. Und ich erinnere Sie daran, dass wir auch einen YouTube-Kanal haben, den Sie auch abonnieren können.
In Verbindung stehende Artikel:
Nun, ich hoffe, der Artikel war nicht kompliziert und ich konnte Ihnen ausführlich erklären, wie Sie HTML-Code ohne unnötigen Aufwand in eine Website einfügen können.
Vernachlässigen Sie nicht die Ästhetik Ihres Blogs. Schließlich begegnet Ihnen unser Leser wie im Leben an seiner Kleidung und verabschiedet Sie an seinem Geist.
Das ist alles für mich!
Tschüss!
Mit freundlichen Grüßen Kalmykov Anton
Die Methode zum Einfügen des HTML-Codes variiert geringfügig, je nachdem, wo genau Sie ihn einfügen müssen. Dementsprechend werden wir verschiedene Optionen in Betracht ziehen.
Um HTML-Code in die Site und insbesondere in den Text eines Artikels auf einer der Site-Seiten einzufügen, gehen Sie zum Verwaltungsbereich, wählen Sie den gewünschten Artikel aus und öffnen Sie ihn zur Bearbeitung. Als nächstes muss der visuelle Editormodus in den Bearbeitungsmodus geändert werden. Wenn Sie mit einem CMS-System arbeiten, klicken Sie einfach, um den Modus zu ändern. Kopieren Sie dann den HTML-Code und fügen Sie ihn an der geplanten Stelle ein.
Oft möchten Sie den Code nach dem Einfügen ein wenig formatieren, beispielsweise den Text so einstellen, dass er den Code auf der anderen Seite umschließt. Es gibt eine einfache Möglichkeit, dies mithilfe von CSS-Eigenschaften zu tun.
Tag verwenden
… , packen Sie Ihren Code in einen Container. Dies kann auch mithilfe von Tabellenformular-Tags erfolgen. Und innerhalb dieses Containers verwenden Sie die Eigenschaft „style“, um alle gewünschten Attribute festzulegen.
Um sicherzustellen, dass der visuelle Editor beim Speichern eines Artikels keine Änderungen ausschneidet, die seiner Meinung nach kein HTML-Code sind, ist es besser, ihn beim Einfügen des Codes zu deaktivieren. Das Schneiden von Änderungen durch den Editor soll die Bedrohung durch möglichen Schadcode verhindern.
Wie deaktiviere ich den visuellen Editor?
Klicken Sie im Verwaltungsbereich auf „Site“ – „Allgemeine Einstellungen“ – „Site“ und wählen Sie in der Zeile „Visueller Editor“ die Option „Kein Editor“. Jetzt ist es möglich, HTML-Code im HTML-Code-Modus zu bearbeiten und einzufügen. Nachdem Sie den Code eingefügt und Ihre Änderungen gespeichert haben, kann der visuelle Editor wieder aktiviert werden.
Wenn Sie den Artikel erneut bearbeiten möchten, muss auch der HTML-Code erneut eingefügt werden. Manchmal ist es erforderlich, dass der HTML-Code auf jeder Seite der Site angezeigt wird. Einfügen von HTML-Code, damit er auf jeder Seite der Website angezeigt wird.
Um dieses Problem zu lösen, verwenden Sie Notepad oder einen anderen Editor, um die Hauptdatei der Website einzugeben (standardmäßig ist dies index.php oder index.html). IN Datei öffnen Wählen Sie Ihren bevorzugten Ort aus, um den Code einzufügen. Der Einfachheit halber können Sie in der Suche an der Stelle, an der Sie den Code einfügen müssen, eine Phrase festlegen, damit Sie ihn schneller finden. Kopieren Sie dann den Code und fügen Sie ihn an der gewünschten Stelle ein. Bei Bedarf kann der Code auf die gleiche Weise formatiert werden, wie für die Formatierung des Codes im Artikel beschrieben wurde.
Verkaufsgenerator
Lesezeit: 14 Minuten
Wir senden Ihnen das Material zu:
Aus diesem Artikel erfahren Sie:
- So fügen Sie HTML-Code in Website-Seiten ein
- So fügen Sie benutzerdefinierten HTML-Code in WordPress hinzu
- Wie kann ich HTML-Code in Joomla einfügen?
- So fügen Sie ein beliebiges HTML-Fragment zu einer Website von Wix hinzu
- So erstellen Sie schöne HTML-E-Mails in Yandex
- Ist es möglich, den HTML-Code der VKontakte-Seite zu ändern?
Unerfahrene Benutzer sind oft verwirrt einfache Aufgabe– wie man HTML-Code beispielsweise in einen Blog, eine Seite oder einen Brief einfügt. Es gibt mehrere Möglichkeiten, den Vorgang durchzuführen. Alles hängt von den spezifischen Aufgaben ab, vor denen der Benutzer steht. HTML-Code ist ein umfassendes Konzept, mit dem Sie viel auf einer Seite platzieren können nützliche Elemente, fügen Sie ein Bild und ein Video, einen Ticker, einen Zähler oder ein Banner hinzu. Mithilfe einer Programmiersprache können Sie selbst ein einzigartiges Produkt erstellen. Sie müssen lediglich verstehen, welchen HTML-Code Sie einfügen und welche Aktionen Sie ausführen müssen.
Was wird benötigt, um HTML-Code in eine Seite einzufügen: eine Voraussetzung
Es ist unwahrscheinlich, dass Besucher einer Website oder eines Blogs durch einfachen Text auf einer weißen Fläche angezogen werden, selbst wenn dieser mindestens dreimal nützlich ist. Jedes Detail – Schriftfarbe, visuelle Wirkung, Anordnung der Elemente – wird auf eine bestimmte Weise beschrieben. Nur ein Administrator (Eigentümer) mit Bearbeitungsrechten kann die Struktur einer Website oder Blogseite erstellen. Daher kann eine Person, die keinen Zugriff auf das Admin-Panel hat, den HTML-Code nicht einfügen.
Zu den Aufgaben des Administrators gehört die vollständige Kontrolle über den Betrieb der Ressource. Er erstellt Themes, fügt neue Plugins in die Struktur ein, fügt Seiten hinzu usw.
Um die Site zur Verwaltung und Bearbeitung aufzurufen, gibt es eine Administratorseite, eine Art Kontrollfeld, in dem der Administrator alle Prozesse koordiniert, Elemente hinzufügt, löscht und neue erstellt.
Nehmen wir an, Sie entscheiden, dass Sie aus irgendeinem Grund Ihr eigenes Portal erstellen müssen. Eine Website entsteht nicht aus dem Nichts; Sie müssen sie auf einer Plattform oder Engine platzieren.
Die beliebtesten Motoren sind:
- Joomla,
- Bitrix.
Neben kostenpflichtigen Plattformen gibt es auch kostenlose, wie zum Beispiel Wix.
Unabhängig von der Wahl des Verwaltungssystems verfügt jedes über einen Administratorbereich zum Füllen der Site mit Inhalten.
Nehmen wir an, Sie sind Administrator eines Portals, das auf WordPress läuft. Sie können sich beim Verwaltungsdienst anmelden, indem Sie den Link http://Ressourcenname/wp-login.php in die Adressleiste Ihres Browsers einfügen.
In das sich öffnende Feld müssen Sie einen eindeutigen Benutzernamen und ein Passwort eingeben, auf die Eingabetaste klicken und die Administrationsseite wird geöffnet. Wenn Sie falsche Daten eingeben, sperrt das System den Zugang, zeigt einen Hinweis auf einen Identifikationsfehler an und fordert Sie auf, Ihre Daten erneut einzugeben.
Ebenso einfach ist der Einstieg in das Content-Management-System auf der Joomla-Plattform. Im Prinzip ist die Anmeldung im Verwaltungsbereich identisch mit dem, was gerade für die WordPress-Engine beschrieben wurde. Der Link für die Adressleiste lautet http://Ressourcenname/Administrator. Drücken Sie dann die Eingabetaste und füllen Sie ähnliche Fenster mit Ihren Registrierungsdaten aus. Der einzige Unterschied besteht darin, dass Joomla-Administratoren ein Passwort haben – admin. Der Benutzer erhält Identifikationsdaten von Systemadministrator Anbieter, der das Hosting der Ressource verwaltet. Bei einer falschen Eingabe wird das Passwort zurückgesetzt und eine erneute Identifizierung ist erforderlich.
Unabhängig davon, auf welcher Plattform Ihre Internetseite basiert, kann ein Benutzer ohne Administratorrechte keinen HTML-Code einfügen.
So fügen Sie HTML-Code in eine WordPress-Site ein
1. Installation von Zählern und Dienstleistungen
Die Struktur einer Website erfordert das Hinzufügen oder Entfernen von Plugins, HTML-Codes beliebter Dienste wie Besucherzählern oder Diensten zur Analyse von Internetressourcen oder anderen Anwendungen für die Webanalyse ( Google Analytics oder zum Beispiel „Yandex.Metrica“), ein Meta-Tag, das die Rechte an der Yandex.Webmaster-Site bestätigt, oder ein abgeleiteter Code.
Es gibt mehrere Möglichkeiten, HTML-Code in eine Seite in WordPress einzufügen:
- manuell;
- Fügen Sie ein fertiges Plugin hinzu.
Manchmal muss man HTML-Code manuell in die Theme-Datei eingeben – eine problematische Methode, aber in bestimmten Fällen gibt es keine Alternative. Wenn Sie die Seite aktualisieren, müssen Sie damit rechnen, dass der Vorgang erneut durchgeführt werden muss. Halten Sie daher Kopien der Dateien bereit, die Sie ändern mussten.
Benutzer verwenden häufiger praktische und praktische Plugins.
Viele Plugins werden tatsächlich über die Systemsteuerungseinstellungen hinzugefügt. Manche platzieren es im Header, das heißt, sie platzieren den HTML-Code im Container
…, andere müssen vor dem Tag in den sogenannten Footer, den Content-Bereich, eingefügt werden
