codefragmente

So fügen Sie Ihrer WordPress-Site benutzerdefinierte Codefragmente hinzu

So fügen Sie Ihrer WordPress-Site benutzerdefinierte Codefragmente hinzu

Wenn Sie Ihre WordPress-Site mit benutzerdefinierten Funktionen erweitern möchten, müssen Sie Ihrer Codebasis häufig benutzerdefinierte Codefragmente hinzufügen. Tatsächlich ist das Web voll von Support-Foren und Artikeln, die Ihnen benutzerdefinierte Codefragmente bereitstellen, die Sie Ihrer WordPress-Site hinzufügen müssen. Wenn Sie ein Anfänger sind, kann dies ziemlich einschüchternd sein und Sie sogar dazu bringen, das Unterfangen aufzugeben. Sie sollten dies jedoch nicht tun, da es wirklich nicht so schwer ist und es auch großartige Plugins gibt, auf die Sie sich verlassen können.

1. Beginnen Sie mit einem Backup

Sichern Sie Ihre Site immer, bevor Sie Ihre Codebasis berühren, damit Sie schnell zu einer früheren Version zurückkehren können, wenn etwas schief geht. Die meisten Hosting-Anbieter haben die Möglichkeit, eine vollständige Website-Sicherung über das cPanel zu erstellen. Darüber hinaus gibt es auch viele großartige Backup-Plugins, mit denen Sie vom WordPress-Administrator aus ein Site-Backup erstellen können.

Wenn Sie 100% sicher sein möchten, kann es auch eine gute Idee sein , eine lokale Kopie Ihrer Site zu erstellen . Auf diese Weise können Sie testen, ob das benutzerdefinierte Code-Snippet wirklich nichts auf der Site beschädigt, bevor Sie es in der Produktion verwenden.

2. Überprüfen Sie den Typ des benutzerdefinierten Codes

Benutzerdefinierte WordPress-Code-Snippets, die Sie im Web finden, lassen sich normalerweise in zwei Kategorien einteilen. Sie sind entweder CSS- oder PHP-Snippets. CSS ist für Layout- und Designelemente vorgesehen, während PHP für Backend-Funktionen vorgesehen ist. Auch wenn Sie nichts über diese Sprachen wissen, können Sie sie leicht an ihrer Syntax erkennen.

Die CSS-Syntax ist leicht zu identifizieren, da sie immer der folgenden Struktur folgt:

1
2
3
4
5
.classname {
  color: #111111;
  background: #efefef;
  display: block;
}

Es ist immer eine Reihe von Eigenschafts-Wert-Paaren in geschweiften Klammern, eine in jeder Zeile.

Die PHP-Syntax ist etwas komplizierter. Der einfachste Weg, dies zu erkennen, besteht darin, nach speziellen Hinweisen zu suchen, die WordPress-Entwickler häufig in ihrem PHP-Code verwenden. Die Hinweise, die Sie in (fast) jedem benutzerdefinierten PHP-Snippet finden können, sind die folgenden:

  • das function()Schlüsselwort
  • add_action()
  • add_filter()

Wenn Sie in dem Text, in dem die Autoren das Code-Snippet erläutern, die Option “Hinzufügen zur Datei functions.php Ihres Themas” finden, können Sie sicher sein, dass es sich auch um ein PHP-Snippet handelt. Falls Sie den Typ des Code-Snippets nicht bestimmen können, können Sie ihn auch bei den Autoren erfragen.

3. Fügen Sie über den Customizer benutzerdefiniertes codefragmente hinzu

Mit neueren Versionen von WordPress können Sie Ihrer Site mithilfe des Theme Customizers benutzerdefiniertes CSS hinzufügen. Sie können auf den Customizer zugreifen, indem Sie auf das Appearance > CustomizeMenü in Ihrem Administrationsbereich klicken .

customizer-menu-wp-admin

customizer-menu-wp-admin – Web desing bern

Der Customizer öffnet das Front-End Ihrer Site und fügt links ein vertikales Admin-Panel hinzu. Über dieses Bedienfeld können Sie auf die Anpassungsoptionen zugreifen. Die Optionen können von Thema zu Thema variieren. Seit WordPress 4.7 enthalten jedoch alle Themen die Option „Zusätzliches CSS“, mit der Sie Ihren benutzerdefinierten CSS-Code hinzufügen können.

Auf dem Bild unten sehen Sie, dass ich ein Beispiel für einen CSS-Code-Ausschnitt hinzugefügt habe. Sie müssen Ihren eigenen benutzerdefinierten Code auf die gleiche Weise hinzufügen.

Es ist auch eine gute Nachricht, dass WP Customizer über einen integrierten CSS-Linter verfügt, der nach Fehlern im CSS sucht. Wenn der Linter Fehler in Ihrem benutzerdefinierten Code findet, werden Sie mit einer Fehlermeldung benachrichtigt.

wp-customizer-user-inferface

wp-customizer-user-inferface – Mango Design

4. Fügen Sie benutzerdefiniertes CSS oder PHP mit einem untergeordneten Thema hinzu – codefragmente

Wenn Sie Ihrer WordPress-Site nur ein paar Zeilen CSS hinzufügen möchten, lohnt es sich nicht, ein untergeordnetes Thema zu erstellen, da die Verwendung des Customizers so viel einfacher ist. Wenn Sie jedoch sowohl benutzerdefiniertes CSS als auch PHP hinzufügen möchten, ist dies die beste Lösung. Ein untergeordnetes Thema bezieht sich auf sein übergeordnetes Thema genauso wie Kinder auf ihre Eltern. Es erbt alle seine Stile und Funktionen, aber Sie können ihm auch benutzerdefinierte Stile und Funktionen hinzufügen.

Sie können den wichtigsten WordPress-Themen, die Sie aus dem offiziellen WordPress-Themen-Repository herunterladen oder von einer kommerziellen Website wie ThemeForest kaufen können, ein untergeordnetes Thema hinzufügen. Es ist zwar möglich , ein untergeordnetes Thema manuell zu erstellen und auf den Server hochzuladen, es ist jedoch einfacher, sicherer und schneller, es mit einem Plugin zur Erstellung eines untergeordneten Themas zu erstellen.

Obwohl es eine Reihe von Plugins zum Erstellen von untergeordneten Themen gibt, ist Child Themify das einfachste . Es hat keine ausgefallenen Optionen, erledigt die Arbeit nur schnell mit einem einzigen Klick. Sie können das Plugin über das Plugins > Add NewMenü in Ihrem WordPress-Administrator installieren und aktivieren .

install-child-themify

install-child-themify – Mango Design

Das Plugin fügt Create Child Themedem AppearanceMenü in Ihrem Admin-Bereich ein neues Untermenü hinzu . Klicken Sie auf das Menü und wählen Sie das übergeordnete Thema aus, für das Sie das untergeordnete Thema erstellen möchten. Dann benennen Sie einfach Ihr untergeordnetes Thema.

Aus Gründen der Übersichtlichkeit empfiehlt WordPress untergeordneten Themen eine bestimmte Namenskonvention . Sie können Ihrem untergeordneten Thema jedoch einen anderen Namen geben, wenn Sie möchten. Wenn Sie den WordPress-Konventionen folgen möchten, fügen Sie einfach das Wort “Child” nach dem Namen des übergeordneten Themas hinzu. Das untergeordnete Thema für „Twenty Seventeen“ lautet beispielsweise „Twenty Seventeen Child“.

child themify create child theme - So fügen Sie Ihrer WordPress-Site benutzerdefinierte Codefragmente hinzu

Wenn Ihr untergeordnetes Thema erstellt wurde, finden Sie es Appearance > Themesneben all Ihren anderen Themen im Menü Ihres WordPress-Administrators.

child-theme-wp-admin

child-theme-wp-admin

Jetzt können Sie dem untergeordneten Thema mithilfe des Themen-Editors, den Sie finden, wenn Sie auf das Appearance > EditorMenü klicken, Ihren benutzerdefinierten CSS- und PHP-Code hinzufügen .

Im Themeneditor müssen Sie das Thema auswählen, das Sie bearbeiten möchten. Auf der rechten Seite finden Sie ein Dropdown-Menü “Zu bearbeitendes Thema auswählen”. Wählen Sie hier Ihr untergeordnetes Thema aus und klicken Sie auf die Schaltfläche “Auswählen” neben der Dropdown-Liste.

theme editor select child theme - So fügen Sie Ihrer WordPress-Site benutzerdefinierte Codefragmente hinzu

In einem untergeordneten Standarddesign finden Sie zwei Dateien: style.cssfür das benutzerdefinierte CSS und functions.phpfür das benutzerdefinierte PHP.

Fügen Sie Ihrem untergeordneten Thema benutzerdefiniertes CSS hinzu

Um Ihrem untergeordneten Thema benutzerdefinierten CSS-Code hinzuzufügen, wählen Sie die style.cssDatei auf der rechten Seite des Bildschirms aus. Sie müssen den benutzerdefinierten Code am Ende der Datei unterhalb der @ import-Regel hinzufügen.

Genau wie der Customizer verfügt auch der Theme Editor über einen integrierten Linter für CSS. Daher müssen Sie sich keine Sorgen um Fehler machen, der Linter benachrichtigt Sie. Wenn Sie fertig sind, klicken Sie unten auf der Seite auf die Schaltfläche „Datei aktualisieren“.

 

add-custom-css-theme-editor

add-custom-css-theme-editor

Fügen Sie Ihrem untergeordneten Thema benutzerdefiniertes PHP hinzu

Sie müssen der functions.phpDatei Ihren benutzerdefinierten PHP-Code hinzufügen . Sie finden diese Datei unten style.cssrechts auf dem Bildschirm. Die functions.phpDatei enthält die benutzerdefinierten Designfunktionen Ihres untergeordneten Themas.

Ihr benutzerdefinierter PHP-Code wird am Ende der Datei angezeigt. Wenn eine Datei leer ist, müssen Sie sie direkt nach dem <?phpStart-Tag hinzufügen , wie Sie auf dem folgenden Screenshot sehen können (der kurze Beispielcode, den Sie sehen, entfernt die Admin-Leiste für Nicht-Admin-Benutzer). Beachten Sie, dass WordPress nicht nach Fehlern im PHP-Code sucht. Wenn Sie mit den Änderungen fertig sind, klicken Sie unten auf dem Bildschirm auf “Datei aktualisieren”.

add-custom-css-theme-editor (1)

add-custom-css-theme-editor

add-custom-php-theme-editor

add-custom-php-theme-editor

5. Fügen Sie ortsspezifischen PHP-Code hinzu

Das Problem beim Hinzufügen von PHP-Code zu Ihrem untergeordneten Thema besteht darin, dass Sie die benutzerdefinierte Funktionalität verlieren, wenn Sie ein neues Thema verwenden. Dies ist kein Problem mit CSS, da CSS die Stile eines bestimmten Themas bearbeitet. Wenn Sie also ein neues Thema aktivieren, müssen Sie auch neues CSS verwenden.

Glücklicherweise ist es möglich, WordPress ortsspezifisches PHP hinzuzufügen. Dieser Code ist unabhängig vom Thema, daher verlieren Sie ihn nicht, wenn Sie zwischen Themen wechseln.

Obwohl es möglich ist , ein ortsspezifisches Plugin manuell zu erstellen , zu dem Sie Ihren benutzerdefinierten Code hinzufügen können, erfordert dies einige Arbeit und Sicherheitsrisiken. Sie können jedoch auch das kostenlose Code Snippets- Plugin verwenden, das genau das Gleiche tut.

code-snippets-plugin-wordpress

code-snippets-plugin-wordpress

Installieren und aktivieren Sie das Plugin über das Plugins-Menü in Ihrem WordPress-Bereich. Das Code Snippets-Plugin fügt Ihrem Backend ein neues “Snippets” -Menü hinzu. Hier können Sie Ihre benutzerdefinierten PHP-Snippets genauso hinzufügen, wie Sie reguläre Blog-Beiträge zu WordPress hinzufügen. Dies ist eine brillante Lösung, da Sie Ihren benutzerdefinierten Code aufgeräumt halten und ihn einfach separat bearbeiten und löschen können.

Kopieren Sie einfach Ihren benutzerdefinierten Code in den Editor “Neues Snippet hinzufügen” und wählen Sie aus, wo Sie das Snippet ausführen möchten. In den meisten Fällen ist die Option “Snippet überall ausführen” geeignet. Fügen Sie dann Ihrem benutzerdefinierten PHP einen Titel, eine Beschreibung und einige Tags (falls gewünscht) hinzu und klicken Sie auf die Schaltfläche “Änderungen speichern und aktivieren”.

add-new-snippets-screen

add-new-snippets-screen