Es gibt viele Gründe, warum Sie zusätzlichen Code in Ihre WordPress-Beiträge schreiben oder einfügen möchten. Möglicherweise müssen Sie Werbung schalten, bestimmten Abschnitten Ihrer Website ein einzigartiges Design verleihen oder einfach Text oder Inhalt markieren, um Aufmerksamkeit zu erregen. Sie können jedoch Code hinzufügen, um verschiedene visuelle Effekte zu erzielen, um eine bessere Benutzererfahrung zu bieten.
All dies und andere sind triftige Gründe, aber egal, was Sie mit benutzerdefiniertem Code erreichen möchten, der Prozess des Schreibens von Code kann nervenaufreibend oder sogar eine echte Herausforderung sein! In diesem Tutorial werden wir die folgenden Bereiche behandeln:
- Hinzufügen von Code, der wie Code aussieht, sich aber nicht wie Code verhält (falls Sie Codezeilen präsentieren oder das Erscheinungsbild Ihrer Website verbessern möchten)
- Hinzufügen von Code, der sich wie Code verhalten soll, z. B. skriptgesteuerte Anzeigen wie Google Adsense-Anzeigen
In diesen beiden Kategorien werden wir uns ein wenig mit Programmiercode wie HTML, CSS, Javascript befassen und auf Anzeigen und die Schönheit des
Hinzufügen von Code, der wie Code aussieht, sich aber nicht wie Code verhält
Wenn Sie Code präsentieren möchten (vielleicht sind Sie ein Webdesigner oder -entwickler), den Ihre Benutzer kopieren und einfügen können, ist es wichtig, dies richtig zu machen, da selbst ein einzelner Zeilenumbruch den Code durcheinander bringen kann, also Ihre gesamte Arbeit. Die Art und Weise, wie Ihr Code von WordPress interpretiert wird, hängt davon ab, ob Sie den HTML- oder den Visual Post-Editor verwenden. Die direkte Eingabe Ihres Codes in den visuellen Editor hat nicht den gewünschten Effekt, da der visuelle Editor den Code als normalen Text betrachtet, was bedeutet, dass Webbrowser Ihren Code nicht als „Code“, sondern als normalen Text interpretieren.
Andererseits erkennt der HTML-Post-Editor jedes von Ihnen verwendete HTML- oder CSS-Markup, was bedeutet, dass sie vom Webbrowser interpretiert werden, was zu unübersichtlichen Layouts und unkonventionell aussehenden Inhalten führen kann. Zum Beispiel wird
Eine HTML-Übung
Es ist wirklich eine sinnlose Übung, aber Sie können es versuchen, um ein klareres Bild davon zu erhalten, was ich meine. Öffne einfach dein HTML-Editor, geben Sie
Im Allgemeinen können Sie Code auf zwei Arten verwenden. Erstens können Sie Code innerhalb einer Zeile (oder eines Absatzes) verwenden, um einen Punkt in Ihrem Code zu verdeutlichen. Zweitens können Sie Ihren Code schreiben, hervorheben und in einen Block wie diesen einfügen:
<html>
<head>
<title>Writing Code in WordPress Posts Tutorial</title>
<link rel="stylesheet" type="text/css" href="somefile.css"/>
</head>
<body>...</body>
</html>
Um den oben genannten Effekt zu erzielen, verwenden wir das Code-Tag, das wie folgt geschrieben ist …unser Code geht hier rein . Ersetzen Sie die Pfeile (< >) durch eckige Klammern ( [ ] ) abhängig von Ihrer WordPress-Site und dem von Ihnen verwendeten Post-Editor (visuell oder HTML). Der Code, den Sie anzeigen möchten, muss zwischen dem öffnenden Tag
und dem schließenden Tag
stehen. Zum Beispiel, um Code innerhalb eines Absatzes zu verwenden:
Das Code-Tag lässt Nicht-HTML-Text wie Code aussehen, weist den Webbrowser jedoch nicht an, HTML-Markup zu interpretieren oder aus dem Beitrag zu entfernen. Dies bedeutet, dass ein Browser Ihr HTML-Markup immer noch codieren kann, was die Präsentation erschwert. HTML-Tags in deinem Code. Sie können dieses Problem jedoch umgehen, indem Sie erweiterte Zeichen oder Zeichenentitäten verwenden, um die < >-Zeichen darzustellen, was jeden Browser täuschen wird. Zum Beispiel…
…erzeugt einen neuen Container (dank
), die Ihre Webseite durcheinander bringen. Wenn Sie jedoch Zeichenentitäten verwenden, um die < >-Pfeile zu ersetzen, vermeiden Sie dieses Verhalten und geben Ihren Code wie gewünscht aus. Der obige Code sieht daher wie folgt aus:
Erstellen Sie einen hervorgehobenen Codeblock
Wenn ich einen Codeblock (oder sogar Text) hervorheben möchte, um so etwas zu erhalten;
Ich beginne, indem ich den Code (oder Text) in einen Container wie folgt einfüge:
Dann füge ich den Stil mit CSS entweder direkt (wie im Bild oben) oder über die hinzu style.css Datei im Hauptordner deines Themes gefunden.
Gestalten Sie Ihre Code-Tags
Das Code-Tag verwendet die Schriftgröße von
und setzt den Text standardmäßig in eine Schriftart mit Monospace. Sie können all dies jedoch ändern, damit Ihr Code genau so aussieht, wie Sie es möchten. Sie müssen nur hinzufügen…code{font-size:1.2em; color:#000; font-weight:normal;}
…oder so ähnlich wie du style.css. Es gibt unbegrenzte Styles und alles hängt von Ihren persönlichen Vorlieben ab, also halten Sie sich nicht zurück – stylen Sie weg.
Hinzufügen von Code, der sich wie Code verhält
Dieser Abschnitt ist besonders nützlich, wenn Sie Anzeigen oder andere Skripte, zB Javascript-Schnipsel, in Ihren Beiträgen anzeigen möchten. Es gibt zwar Plugins, wie z Schnelles AdSense, das Ihnen bei der Verwaltung von Anzeigen in Ihren Beiträgen hilft, könnten Sie daran interessiert sein, eigenständige Skripte zu installieren, über die Sie die vollständige Kontrolle haben.
Wenn Ihre Anzeige ein einfaches Bild und ein Link ist, können Sie die Anzeige über das Upload-Dienstprogramm zu Ihrem Beitrag hinzufügen. Laden Sie einfach das Bild hoch und geben Sie Ihren Link (und vielleicht eine Bildunterschrift) ein und Ihre Arbeit ist erledigt. Diese Methode ist jedoch eingeschränkt, da Sie Ihre Anzeige nur links, rechts oder mittig ausrichten können – genau wie ein typisches Bild. Alternativ können Sie mit dem HTML-Editor einen Container in Ihrem Beitrag erstellen.
Beispiel:
<div id="ad1">
<a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/>
</a>
</div>
Erstellen Sie diesen Container genau dort, wo Sie Ihre Anzeige haben möchten. Das heißt, Sie müssen den Beitrag fertig haben, bevor Sie die Anzeige hinzufügen. Sobald der Container fertig ist, können Sie ihn nach Belieben stylen. Sie können es mit Ihrer style.css verschieben, indem Sie die Position Eigentum. Wenn du laufen möchtest Google Adsense-Anzeige in Ihren Beiträgen können Sie weiterhin verwenden Schnelles AdSense – das Plugin – oder erstellen Sie einen Container und platzieren Sie Ihren Anzeigencode wie folgt:
<div id="ad1">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
Anmerkung 1: Google-Anzeigen basieren auf Javascript und können von allen gängigen Webbrowsern interpretiert werden, sofern der Benutzer Javascript auf seinen Computern aktiviert hat.
Anmerkung 2: Sie müssen die richtigen Anzeigendimensionen für Ihre Website auswählen, um zu vermeiden, dass Ihre Beiträge und Ihre Website durcheinander geraten.
Wenn Sie eine dauerhafte Anzeige hinzufügen möchten, die in allen Ihren Beiträgen (aktuelle und zukünftige Beiträge) ohne zusätzlichen Aufwand angezeigt wird, müssen Sie die Vorlage für einen einzelnen Beitrag (single.php). Ich habe eine 468 x 60 Pixel große Anzeige oben in all meinen Beiträgen platziert, indem ich den folgenden Code zu dem hinzugefügt habe single.php gleich nach < – – END post-entry-meta – ->.
<div id="ad1"> <script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
Du musst natürlich deine eigenen Google Ads verwenden 🙂 So erscheint die Google Adsense Anzeige auf meinem Blog:
Finden single.php, gehen Sie zu Ihrem Administrationsbereich –>> Darstellung –>> Editor –>> single.php. Sobald single.php geöffnet ist, verwenden Sie die Suchleiste (Strg + F) lokalisieren < – – END post-entry-meta – ->.
Sie können den Container unverändert lassen oder mit style.css nach Belieben formatieren. Und denken Sie daran, alle Änderungen zu speichern. Der
Der Werkzeugkasten
Wenn Sie mehr über das Schreiben von benutzerdefiniertem Code in Ihren WordPress-Beiträgen erfahren möchten, können Sie sich die folgenden Ressourcen ansehen:
- Schreiben von Code in Ihre Beiträge
- Lustige Charakter-Entitäten
- Verwendung von Javascript in Beiträgen
- Verwenden von HTML in WordPress-Beiträgen
- Sicheren WordPress-Code schreiben (Slideshare)
Nun, das war’s. Wir haben es geschafft, die eingangs skizzierten Bereiche abzudecken. Wenn Sie jedoch ein Konzept in diesem Beitrag nicht verstehen oder Ihre Vorschläge oder Ansichten hinzufügen möchten, teilen Sie Ihre Gedanken bitte im Kommentarbereich unten mit!