Anleitung für Anfänger zum Einfügen von Snippets aus dem Web in WordPress

Möchten Sie lernen, wie man Snippets aus dem Internet in WordPress einfügt? Während das Kopieren und Einfügen von Code in WordPress Themes-Dateien für erfahrene Benutzer einfach erscheinen mag, kann es für Anfänger einschüchternd sein.

Bei WPBeginner veröffentlichen wir viele WordPress-Tutorials, in denen Benutzer aufgefordert werden, Code-Snippets in WordPress einzufügen. Daher erhalten wir viele Fragen von Anfängern, die verständlicherweise besorgt sind, etwas zu vermasseln.

Deshalb haben wir diesen Leitfaden zusammengestellt. In diesem Artikel zeigen wir Ihnen, wie Sie Codeschnipsel aus dem Internet in WordPress kopieren und einfügen können, ohne Ihre Website zu zerstören.

Warum sollten Sie Code Snippets zu Ihrer WordPress-Website hinzufügen?

WordPress ist der beste Website-Builder der Welt, weil er so flexibel ist. Es ist super einfach, neue Features und Funktionen zu Ihrer Website hinzuzufügen und kann bei der Erstellung fast aller Arten von Websites helfen.

Wir teilen alle Arten von Tipps und Tricks, die Sie verwenden können, um Ihre Website zu verbessern. Bei einigen dieser Tipps müssen Sie Code zu WordPress hinzufügen.

Das Hinzufügen von benutzerdefinierten Codeschnipseln zu Ihrer Website ist zwar optional, und Sie können oft Plugins finden, die dieselbe Aufgabe erfüllen, aber manchmal ist ein einfaches Snippet effizienter.

Durch das Hinzufügen von Code-Snippets lassen sich viele häufige WordPress-Fehler beheben, die Sicherheit von WordPress verbessern und neue Funktionen zu Ihrer Website hinzufügen.

Werfen wir also einen Blick darauf, wie Sie Code-Snippets sicher zu Ihrer WordPress-Website hinzufügen können.

Was sind die besten Wege, um Code Snippets in WordPress hinzuzufügen?

Es ist wichtig zu erwähnen, dass Sie, bevor Sie Code-Snippets zu Ihrer WordPress-Website hinzufügen, ein WordPress-Backup-Plugin installieren und verwenden sollten.

So ist Ihre WordPress-Website sicher, und Sie können sie jederzeit von einem Backup wiederherstellen, falls etwas schief geht.

Beim Hinzufügen von Snippets zu WordPress finden Sie möglicherweise Anweisungen zum Hinzufügen zu WordPress-Theme-Vorlagendateien, wie index.php, single.php und anderen.

Diese Snippets sind nur für diese spezifischen Themedateien nützlich, daher müssen Sie sie direkt hinzufügen oder ein WordPress Child-Theme erstellen.

Die meisten Codeschnipsel werden jedoch in der Datei functions.php Ihres WordPress-Themes hinzugefügt. In einigen Tutorials wird empfohlen, sie direkt in die Datei einzufügen, aber es gibt viel bessere Alternativen, mit denen Sie Ihre Änderungen zukunftssicher machen können.

Auf diese Weise werden Ihre benutzerdefinierten Funktionen nicht entfernt, wenn Sie ein anderes Theme verwenden.

Es gibt verschiedene Möglichkeiten, WordPress-Dateien zu bearbeiten, je nachdem, welche Methode Sie wählen, um Ihrem WordPress-Blog oder Ihrer Website benutzerdefinierte Code-Snippets hinzuzufügen.

Werfen wir also einen Blick auf einige der anfängerfreundlichsten Möglichkeiten, benutzerdefinierte Code-Snippets in WordPress hinzuzufügen.

Methode 1: Hinzufügen von benutzerdefiniertem Code mit dem WPCode-Plugin (einfach)

Die Verwendung eines Code-Snippets-Plugins ist der sicherste und anfängerfreundlichste Weg, Code in WordPress einzufügen.

Mit dem WPCode-Plugin können Sie ganz einfach benutzerdefinierte Codeschnipsel auf Ihrer Website hinzufügen und verwalten, ohne Ihre Themedateien bearbeiten zu müssen.

Die intelligente Code-Snippet-Validierung hilft Ihnen, häufige Codefehler zu vermeiden. Dies schützt Sie davor, Ihre Website zu beschädigen, wenn Sie Code-Snippets hinzufügen.

WPCode hat auch eine integrierte Code-Bibliothek, die es einfach macht, die beliebtesten WordPress-Code-Snippets zu finden. Sie können diese von Experten geschriebenen Code-Snippets mit nur wenigen Klicks hinzufügen.

Das Beste daran ist, dass Sie alle Codeschnipsel von einem zentralen Bildschirm aus verwalten und sie sogar mit Hilfe von Tags organisieren können.

Hinweis: Die WPCode-Methode eignet sich für Snippets, die in die Datei functions.php eingefügt werden müssen. Wenn Sie aufgefordert werden, einen Codeschnipsel in anderen Themendateien hinzuzufügen, funktioniert diese Methode nicht.

Bearbeiten und Hinzufügen von Code zu WordPress mit WPCode

Wenn Sie das WPCode-Plugin verwenden, um Code zu WordPress hinzuzufügen, fügen Sie den Code direkt in Ihrem WordPress-Administrations-Dashboard hinzu.

Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie einfach auf Code Snippets “ + Snippet hinzufügen in Ihrem WordPress-Admin-Dashboard. Klicken Sie dann auf den Button „Neu hinzufügen“.

Daraufhin wird ein Bildschirm angezeigt, auf dem Sie ein Snippet aus der vorgefertigten Bibliothek auswählen oder Ihren eigenen Code hinzufügen können.

Um individuellen Code hinzuzufügen, klicken Sie auf den Button „Snippet verwenden“ unter der Option „Fügen Sie Ihren individuellen Code hinzu (neues Snippet)“.

Geben Sie auf dem nächsten Bildschirm zunächst einen Namen für Ihr Snippet ein, damit Sie es sich besser merken können. Fügen Sie dann Ihren Code in das Feld ein. Achten Sie darauf, dass Sie den richtigen Codetyp aus dem Dropdown-Menü auf der rechten Seite auswählen.

Blättern Sie dann nach unten zum Abschnitt „Einfügen“. Hier können Sie den Codeschnipsel als Shortcode verwenden, den Sie manuell kopieren und an beliebiger Stelle auf Ihrer Website einfügen können.

Sie können auch die Methode „Automatisches Einfügen“ wählen, um eine Stelle (WordPress-Funktion) auszuwählen, an der das Codeschnipsel automatisch eingefügt werden soll.

Sie können zwischen folgenden Optionen wählen: Überall ausführen, Nur Frontend, Nur Admin, Seitenweite Kopfzeile, Nach dem Beitrag, Zwischen den Beiträgen, Vor dem Absatz und mehr.

Das Beste an WPCode ist, dass es neben den verschiedenen Optionen für das automatische Einfügen auch einsteigerfreundliche Optionen für die bedingte Logik bietet. Damit können Sie auswählen, wann Ihr Code geladen werden soll.

Sobald Sie den Code hinzugefügt haben, schalten Sie den Schalter in der oberen rechten Ecke von „Inaktiv“ auf „Aktiv“ um.

Klicken Sie dann auf den Button „Snippet speichern“.

Sobald das Snippet aktiv ist, wird es automatisch hinzugefügt oder als Shortcode angezeigt, je nachdem, welche Einfügemethode Sie gewählt haben.

Detaillierte Anweisungen finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefinierten Code-Snippets in WordPress.

Hinzufügen von Code zur WordPress-Kopf- und Fußzeile

Manchmal müssen Sie vielleicht nur Code in die Dateien header.php oder footer.php Ihres Themes einfügen. Das WPCode-Plugin kann Ihnen auch dabei helfen, dies einfach zu tun.

Dies ist praktisch, wenn Sie Ihrer Website einen Tracking-Code für Google Analytics, Google AdSense, Facebook Pixel, TikTok Pixel und andere hinzufügen möchten.

Außerdem können Sie damit alle Kopf- und Fußzeilencodes an einem Ort verwalten, manuelle Fehler vermeiden und Ihr Design problemlos aktualisieren oder ändern.

Hinweis: Diese Methode eignet sich am besten für Tracking-Skripte, benutzerdefinierten CSS- und JavaScript-Code.

Gehen Sie zu Code Snippets “ Header & Footer und geben Sie Ihren Code Snippet in den Header-, Body- oder Footer-Bereich Ihrer Website ein.

Klicken Sie auf die Schaltfläche „Änderungen speichern“, und Ihre Codeschnipsel werden auf Ihrer Website live geschaltet.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen von Kopf- und Fußzeilencode in WordPress.

Methode 2: Hinzufügen von benutzerdefiniertem Code in einem Site-spezifischen WordPress-Plugin

Eine weitere flexible Option ist die Verwendung eines standortspezifischen WordPress-Plugins. Dabei handelt es sich um ein benutzerdefiniertes Plugin, das Sie für Ihre eigene Website erstellen und zum Speichern Ihres gesamten benutzerdefinierten Codes verwenden können.

Der Vorteil dieser Methode ist, dass Ihr Code nicht von Ihrem Theme abhängig ist und auch dann aktiv bleibt, wenn Sie das Theme wechseln. Er ist auch nicht von WordPress-Updates auf Ihrer Website betroffen.

Hinweis: Diese Methode ist nur für Codeschnipsel anwendbar, die in die Datei functions.php eingefügt werden müssen.

Wenn Sie ein Site-spezifisches Plugin verwenden, können Sie den integrierten WordPress-Plugin-Editor verwenden, um Ihren eigenen Code hinzuzufügen.

Gehen Sie zunächst zu Plugins “ Plugin Editor und wählen Sie dann Ihr Plugin aus dem Dropdown-Menü mit der Bezeichnung „Plugin zum Bearbeiten auswählen:“.

Der Editor lädt Ihr standortspezifisches Plugin. Dann können Sie einfach Code auf der Seite hinzufügen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Datei aktualisieren“, um Ihre Änderungen zu speichern.

Wenn etwas in Ihrem Code fehlt oder Ihre Website beschädigen kann, macht der Plugin-Editor Ihre Änderungen automatisch rückgängig.

Eine weitere Möglichkeit, benutzerdefinierten Code zu einem Site-spezifischen Plugin hinzuzufügen, ist die Verwendung von FTP. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zum Hochladen von Dateien in WordPress per FTP.

Öffnen Sie einfach Ihre Website mit Ihrem bevorzugten FTP-Client und klicken Sie dann mit der rechten Maustaste auf die Plugin-Datei und wählen Sie die Option „Anzeigen/Bearbeiten“.

Dadurch wird die Datei geöffnet, so dass Sie Ihre Codeschnipsel hinzufügen können. Wenn Sie die Datei speichern und erneut hochladen, werden die Änderungen automatisch angezeigt.

Weitere Einzelheiten finden Sie in unserer Anleitung zur Erstellung eines standortspezifischen Plugins für Ihre Website.

Methode 3: Hinzufügen von benutzerdefiniertem Code zu Functions.php oder anderen Theme-Vorlagen

Schließlich ist es auch möglich, Codeschnipsel direkt in die Datei functions.php Ihres Themes einzufügen. Wir empfehlen jedoch, die anderen oben genannten Optionen zu verwenden, da dies einige Nachteile mit sich bringt.

Erstens: Wenn Sie Ihr WordPress-Theme aktualisieren, werden alle Ihre Änderungen gelöscht.

Der von Ihnen hinzugefügte Code funktioniert nur, wenn Sie dieses bestimmte Thema verwenden.

Sehen wir uns also einmal an, wie man Codeschnipsel richtig kopiert und einfügt, damit die Website nicht beschädigt wird.

Wenn Sie Codeschnipsel direkt in die Datei functions.php Ihres Themes oder in eine andere Seitenvorlage einfügen, können Sie den Code hinzufügen, indem Sie in Ihrem WordPress-Admin-Panel zu Erscheinungsbild “ Theme-Editor navigieren.

Dann können Sie die Datei in der rechten Spalte auswählen, und sie wird im Editor geöffnet.

Die Anleitung, der Sie folgen, wird Ihnen sagen, wo Sie den Codeschnipsel einfügen können. Wenn nicht, müssen Sie den Code am Ende der Datei unter dem vorhandenen Code einfügen.

Eine weitere Alternative ist die Verwendung von FTP des Dateimanagers Ihres WordPress-Hostings, um benutzerdefinierten Code zu Ihren Theme-Dateien hinzuzufügen.

Verbinden Sie sich einfach mit Ihrem FTP-Client mit Ihrer Website und gehen Sie dann zum Ordner wp-content “ themes “ your-theme-folder und klicken Sie mit der rechten Maustaste auf die Datei, die bearbeitet werden muss.

Klicken Sie dann auf die Option „Anzeigen/Bearbeiten“, um die Datei im Texteditor zu öffnen und Ihr Codeschnipsel hinzuzufügen.

Fehlerbehebung bei PHP-Fehlern beim Hinzufügen von benutzerdefiniertem Code

Es gibt einige häufige Fehler, die Anfänger machen, wenn sie benutzerdefinierte Code-Snippets zu ihren WordPress-Websites hinzufügen. Glücklicherweise können die meisten dieser Fehler vermieden und leicht behoben werden.

Werfen wir einen Blick auf diese Fehler und die besten Möglichkeiten, sie zu beheben.

1. Falsche Verwendung von PHP-Begin- und End-Tags

WordPress ist hauptsächlich in der Programmiersprache PHP geschrieben, die eine spezielle Syntax hat, die Ihrem Server mitteilt, dass der folgende Code von PHP verarbeitet werden muss. So sieht ein typisches PHP-Codefragment aus:

// PHP Begin Tag
<?php
  
// Rest of the code goes here
  
// PHP End Tag
?>

Ihr gesamter PHP-Code muss innerhalb der Tags <?php und ?> stehen.

Der PHP-End-Tag ist sehr wichtig für Dateien, die zwischen PHP und HTML hin und her wechseln. Dazu gehören die meisten WordPress-Theme-Dateien, die neben HTML auch PHP-Tags verwenden.

Wenn Sie Ihren Code an einer Stelle einfügen, an der der PHP-Start-Tag nicht geschlossen ist, müssen Sie darauf achten, dass Sie Ihren Code ohne den PHP-Start-Tag einfügen.

<?php
// Some pre-existing code
 
// your custom code
 
?>

Wenn Sie Ihren eigenen Code außerhalb oder nach dem PHP-End-Tag einfügen, müssen Sie auch den PHP-Beginn-Tag hinzufügen.

<?php
// Some pre-existing code
?> 
 
// Your custom code snippet
<?php 
 
?>

Fast 90 % aller Fehler werden durch die falsche Platzierung von PHP-Start- oder End-Tags verursacht. Ein Blick auf Ihren Code hilft Ihnen zu verstehen, ob Sie die PHP-Start- oder End-Tags in Ihrem benutzerdefinierten Codeschnipsel hinzufügen müssen oder nicht.

Viele WordPress-Theme-Dateien wie functions.php haben jedoch gar keinen PHP-End-Tag. Das bedeutet, dass Sie Ihren Code am Ende der Datei ohne Start- oder End-Tag einfügen können.

Hier ist ein Beispiel dafür, wie das aussehen kann.

<?php
// Lots of code in your theme's functions.php file
//
//
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Denken Sie daran, dass einige Tutorials davon ausgehen, dass Sie bereits wissen, wie man PHP Start- und End-Tags verwendet. Daher zeigen sie Ihnen möglicherweise einfach einen Codeschnipsel ohne diese Tags.

function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
add_action('login_head', 'custom_loginlogo');

Manchmal werden Codeschnipsel an mehreren Stellen eingefügt, so dass die PHP-End- und Start-Tags nicht enthalten sind.

Wenn Sie einen solchen Codeschnipsel in Ihre Themedateien einfügen, müssen Sie sicherstellen, dass er sich innerhalb der PHP-Tags befindet.

2. Fehler bei der Verschachtelung

PHP hat eine besondere Syntax für Funktionen, bedingte Logik und Schleifen. Diese Syntax hängt von geschweiften Klammern ab, die angeben, wann eine Funktion beginnt und wann sie endet.

Hier ist zum Beispiel eine einfache PHP-Funktion:

<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
?>

Wenn Sie nun einen benutzerdefinierten Codeschnipsel hinzufügen möchten, der nichts mit dieser Funktion zu tun hat, müssen Sie ihn wie folgt außerhalb dieser Funktion einfügen:

// Pre-existing code in your theme file
<?php
function wpbeginner_tutorial() {
echo "Hello World!";
}
// Your custom code
function custom_loginlogo() {
echo '<style type="text/css">
h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}
?>

Wenn Sie die geschweiften Klammern am Anfang oder am Ende vergessen, wird der Code beschädigt, und Sie erhalten eine Fehlerseite.

Verstehen von PHP-Fehlern in WordPress

Fehler, die durch das Hinzufügen von benutzerdefiniertem Code zu WordPress verursacht werden, führen oft zu einer detaillierten Fehlermeldung. Die meisten davon sind Syntaxfehler, Parse-Fehler oder fatale Fehler aufgrund unerwarteter Zeichen.

Die gute Nachricht ist, dass diese Fehler Ihnen sagen, welche Zeile in Ihrem Code den Fehler verursacht hat.

Dann können Sie die genaue Zeile ansteuern, um den Code zu überprüfen und herauszufinden, was Sie übersehen haben.

Hierfür empfehlen wir die Verwendung eines geeigneten Texteditors zur Codebearbeitung, da dieser über Zeilennummern und Syntaxhervorhebung verfügt, mit deren Hilfe Sie das Problem leicht beheben können.

Wenn Sie das WPCode-Plugin verwenden, verfügt es über eine präzise Fehlerberichterstattung, die Ihnen genau die Zeile anzeigt, in der ein Fehler aufgetreten ist.

Wenn WPCode einen Fehler findet, der den Zugriff auf den Administrationsbereich Ihrer Website verhindern könnte, werden die Snippets automatisch deaktiviert, damit Sie das Problem sicher beheben können.

Was ist zu tun, wenn Ihre WordPress-Website unzugänglich ist?

Atmen Sie zunächst einmal tief durch und geraten Sie nicht in Panik. Alle Dateien Ihrer Website sind noch da und Sie können darauf zugreifen.

Verbinden Sie sich einfach mit Ihrer Website über einen FTP-Client oder die Dateimanager-App im cPanel Ihres WordPress-Hosting-Kontos.

Weitere Einzelheiten finden Sie in unserer Anleitung für Einsteiger zum Hochladen von Dateien in WordPress per FTP.

Suchen Sie dann die Datei, in die Sie den Code eingefügt haben, der den Fehler verursacht hat, und öffnen Sie sie, um sie zu bearbeiten.

Dann können Sie versuchen, die Probleme mit dem Codeschnipsel zu beheben. Wenn Sie die Probleme nicht beheben können, entfernen Sie einfach das hinzugefügte Code-Snippet und speichern Sie Ihre Änderungen.

Jetzt sollte Ihre Website wieder normal funktionieren. Wenn sie immer noch einen Fehler anzeigt, laden Sie eine neue Kopie Ihres WordPress-Themes herunter und entpacken Sie die Zip-Datei auf Ihrem Computer.

Suchen Sie dann die Datei, in der Sie die Änderungen vorgenommen haben, und laden Sie sie auf Ihren Server hoch, wobei Sie die alte Datei überschreiben.

Weitere Möglichkeiten, diese Probleme zu lösen, finden Sie in unserem Leitfaden zu den häufigsten WordPress-Fehlern und deren Behebung. Wenn das nicht hilft, folgen Sie unserem WordPress-Leitfaden zur Fehlerbehebung, um eine schrittweise Diagnose durchzuführen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Codeschnipsel aus dem Internet in WordPress einfügt. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur einfachen Anzeige von Code auf Ihrer WordPress Website und unsere Auswahl der besten Werkzeuge für die WordPress-Entwicklung.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.