So erstellen Sie ein Widget in Ihrem Child-Theme

Wenn du deine WordPress-Seite über die grundlegenden Änderungen hinaus anpassen möchtest, musst du lernen, wie du ein Widget in deinem Child-Theme erstellst . WordPress-Widgets sind kleine Inhaltsblöcke, die Sie den Seitenleisten Ihrer Website oder anderen Widget-bereiten Bereichen hinzufügen können. Diese Bereiche befinden sich normalerweise in der Fuß- oder Kopfzeile Ihrer Website. Widgets können alles enthalten, von Text und Bildern bis hin zu Video- und Audioplayern. Sie können sogar Plugins finden, die Ihre Seitenleisten in Social-Media-Feeds verwandeln. In diesem Artikel zeigen wir dir, wie du ein Widget in deinem Child-Theme erstellst und erläutern die Vorteile der Verwendung eines Widgets.

Ich habe ein untergeordnetes Thema erstellt und möchte einen gesponserten Logobereich über der Fußzeile hinzufügen. Ich nehme an, der Weg wäre, ein Widget zu verwenden? Wie erstelle ich ein neues Widget oder verwende eines der vorhandenen Fußzeilen-Widgets, damit es dort angezeigt wird, wo ich möchte? Indem Sie zu Aussehen gehen. Schritt 1 ist erforderlich, wenn Sie die volle Kontrolle über die Seitenleiste haben oder ihre Einstellungen ändern möchten. Es ist technisch möglich, Ihre Anforderungen zu erfüllen, aber eine kundenspezifische Entwicklung ist erforderlich. Weitere Informationen finden Sie unter https://theme.co/x/member/custom-development.

Wie erstelle ich ein benutzerdefiniertes Widget in WordPress?

Sie können Widgets im Menü „Darstellung“ suchen und auswählen. Sie sollten das Hostinger-Beispiel-Widget in der Liste der verfügbaren Widgets sehen. Durch Ziehen des Widgets können Sie es in die Seitenleiste auf der rechten Seite der Seite hochladen. Sie können Ihre Website besuchen, nachdem Sie Änderungen vorgenommen haben.

Ein WordPress-Widget ist eine kleine Sammlung von Inhalten, die bestimmten Widget-Bereichen hinzugefügt werden. Es gibt verschiedene Arten von Widgets, mit denen Sie verschiedene Arten von Informationen auf jeder Seite anzeigen können, je nachdem, wo Sie sie platzieren. Einige Widgets sind als Standardfunktion verfügbar, während andere als Plugins oder als Thema verfügbar sind. Alle vier oben aufgeführten Methoden müssen in Ihrer Klasse enthalten sein, wenn Sie ein einfaches Widget erstellen möchten. Um das Widget im Dashboard zu verwenden, müssen Sie es auch mit der Funktion register_widget() registrieren. Bevor wir das für diesen Artikel bereitgestellte Beispiel studieren, gehen wir den Zweck jedes Abschnitts des Codes durch und erklären, warum jeder Abschnitt wichtig ist. Jede der vier Methoden von Custom_Widget ist einzigartig.

Das Widget wurde als Ergebnis der Methode __construct() unter Verwendung des Parameters custom_widget erstellt. Durch die Verwendung von register_widget() am Ende kann dasselbe Widget registriert werden. Da jeder der Teile mit der if*…*-Anweisung zu den Widget-Optionen hinzugefügt werden muss, haben wir dafür gesorgt, dass er nur angezeigt wird, wenn er enthalten ist. Die Methode widget() bietet eine Möglichkeit, Texte mit mehreren Absätzen anzuzeigen, und wir haben dazu die Funktion nl2br() verwendet. Die Funktion sanitize_text_field() entfernt alle unnötigen Leerzeichen, Tabulatoren oder Zeilenumbrüche. Der letzte hat auch einen Standardwert, der im Auswahlfeld als Standard festgelegt ist, was bedeutet, dass das Linkziel standardmäßig auf -leer gesetzt ist. Sie können Titel, Text, Link auswählen und ob der Link in einem neuen Tab vorhanden sein soll oder nicht.

Nachdem Sie die Optionen ausgefüllt haben, klicken Sie auf die Schaltfläche Speichern. Wenn Sie ein anderes Thema für Ihr Widget auswählen, wird es anders ausgegeben. In unserem Fall hat Lekker WordPress ein Widget, das dem unten gezeigten ähnelt.

So erstellen Sie ein Child-Theme

Um ein Child-Theme zu erstellen, müssen Sie einen neuen Ordner für das Child-Theme erstellen und ein Stylesheet hinzufügen. Das untergeordnete Design erbt den Stil und die Funktionalität des übergeordneten Designs , aber Sie können dem Stylesheet des untergeordneten Designs benutzerdefinierte CSS-Regeln hinzufügen, um die Stile des übergeordneten Designs zu überschreiben. Sie können der Datei functions.php des untergeordneten Designs auch benutzerdefinierte Funktionen hinzufügen, um die Funktionen des übergeordneten Designs zu überschreiben.

Sie können dem Child-Theme neue Funktionen hinzufügen, solange es nicht die Funktionalität des Parent-Themes erbt. Es gibt keine Verbindung zwischen Child-Themes und Parent-Themes ; Child-Themes sind von Parent-Themes getrennt. Mit einem Child-Theme können Sie Ihre Website aktuell halten und einfach pflegen. Es hilft Ihnen auch dabei, die Wahrscheinlichkeit zu verringern, dass Ihre Website überschrieben wird und das Erscheinungsbild verloren geht. Es ist wichtig zu beachten, dass das Child-Theme dieselben Elemente wie das Parent-Theme enthält. Wir schließen alle Vorlagendateien, Funktionen und Assets in diese Kategorie ein, z. B. JavaScript und Bilder. Die style.css-Datei des untergeordneten Designs kann geändert werden, um die Bedürfnisse des Kindes zu erfüllen.

Eine der einfachsten Möglichkeiten, ein WordPress-Theme für Ihr Kind zu erstellen, ist die Verwendung eines Plugins. Wenn Ihr übergeordnetes Design eine Fehlermeldung anzeigt, wählen Sie es aus dem Dropdown-Menü aus und doppelklicken Sie auf „Analysieren“. Als nächstes wirst du aufgefordert, das Verzeichnis für dein Child Theme einzugeben. Ein Ordnername erscheint in den Dateien, aus denen Ihre Website besteht. Wenn der Begriff für Ihre Website einzigartig ist, können Sie ihn beliebig benennen. Wenn Sie beabsichtigen, Ihr übergeordnetes Thema als Grundlage für ein neues Thema zu verwenden, möchten Sie möglicherweise eine kurze Beschreibung und einen eindeutigen Namen hinzufügen. Wenn Sie Änderungen an Ihrer Website vornehmen möchten, vergewissern Sie sich, dass sie betriebsbereit ist, bevor Sie dies tun.

Sie können alle gewünschten Änderungen zu einem bestimmten Zeitpunkt vornehmen, indem Sie manuell ein untergeordnetes WordPress-Theme erstellen. Schritt 1 besteht darin, einen Ordner für das Thema Ihres Kindes zu erstellen. Stylesheets aus den Parent- und Child-Themes. Es ist an der Zeit, die style.css-Datei umzubenennen. Der vierte Schritt besteht darin, die style.css-Datei in das Verzeichnis des untergeordneten Designs aufzunehmen. Sie können Ihr untergeordnetes Thema manuell konfigurieren, wenn Sie zu Darstellung gehen. Die Verwendung eines Child-Themes stellt sicher, dass Sie ein Parent-Theme nicht direkt bearbeiten müssen.

Mit einem Child-Theme können Sie problemlos größere Änderungen an Ihrer Website vornehmen, da es einfach anzupassen ist. Sie müssen auch einen zuverlässigen Hosting-Anbieter finden. Mit einem Shared-Hosting-Paket von DreamHost können Sie die Leistung Ihrer Website zu einem erschwinglichen Preis verbessern.

3 Dinge, die Sie beim Erstellen eines Child-Themes beachten sollten

Wenn Sie ein untergeordnetes Design erstellen, müssen Sie einen Ordner erstellen, in dem das Design gespeichert wird. Richten Sie ein Stylesheet und eine Funktion in diesem Ordner ein. Kopieren Sie dann in den Ordner des untergeordneten Designs die Dateien des übergeordneten Designs. Lass uns schlafen gehen.
Ein untergeordnetes Thema sollte auf verschiedene Arten betrachtet werden. Bitte denken Sie daran, im ersten Schritt den Dateinamen des übergeordneten Designs anzugeben. Wenn Ihr übergeordnetes Design beispielsweise WPBakery Page Builder ist, sollte Ihr untergeordnetes Design WPBakery Page BuilderChild heißen. Als Zweites müssen Sie zusätzlich zu den Stylesheet- und functions.php-Dateien die Dateien des übergeordneten Designs speichern. Stellen Sie sicher, dass die Dateien des Designs auf dem neuesten Stand sind und sich am richtigen Speicherort befinden.
Wenn du ein Child-Theme für ein Plugin erstellst, solltest du die Dateien des Plugins im Child-Theme-Ordner behalten. Ein untergeordnetes Design des WPBakery Page Builder-Plugins sollte den Ordner des WPBakery Page Builder-Plugins sowie den Ordner des untergeordneten Designs des WPBakery Page Builder-Plugins enthalten.

WordPress-Child-Theme

Ein WordPress-Child-Theme ist ein Theme, das die Funktionalität eines anderen Themes erbt, das als Parent-Theme bezeichnet wird. Untergeordnete Themen sind die empfohlene Methode zum Ändern eines vorhandenen Themas. Wenn ein untergeordnetes Design aktiviert wird, überschreibt es das Stylesheet, die Vorlagendateien und die Funktionen des übergeordneten Designs.

Mit der WordPress-Plattform können Sie eine Website vollständig ohne Kenntnisse von HTML, CSS oder PHP anpassen. Der Nachteil ist, dass alle Änderungen, die am Design vorgenommen wurden, nachdem es vom Entwickler aktualisiert wurde, gelöscht werden. Anstatt ein untergeordnetes Thema zu verwenden, können Sie eines verwenden, mit dem Sie Änderungen an einer Website vornehmen können, ohne die Originaldateien retuschieren zu müssen. Die Dateien eines bestehenden Themes können modifiziert oder als Child-Theme hinzugefügt werden. Dieses Thema ändert nur die Teile, die Sie ändern möchten, und verwendet dieselben Teile aus dem übergeordneten Thema. Die drei wichtigsten Teile eines Child-Themes sind ein Ordner, ein Stylesheet und eine Datei functions.html. Ein Child-Theme muss aus drei Komponenten bestehen: einem eigenen Ordner, einem Stylesheet und seiner Datei functions.php.

Child-Themes befinden sich, wie alle Themes, in den WP-Inhalten/Themes der WordPress-Installation. Sie müssen lediglich den Namen und die Vorlage des Themas eingeben. Es ist wichtig, sich daran zu erinnern, dass dies nur der Fall ist, wenn Sie beabsichtigen, Ihr Thema zu verwenden, nicht ich. Die Datei functions.php ist die Codebasis, mit der Sie Funktionen und Features einer WordPress-Website ändern und hinzufügen können. Das Erstellen der Datei ist genauso einfach wie das Erstellen eines Stylesheets. Wenn Sie nicht beabsichtigen, PHP in Zukunft zu verwenden, um Ihr Design zu ändern, können Sie darauf verzichten. Wenn Sie ein übergeordnetes Thema verwenden, wissen Sie wahrscheinlich bereits, wie Ihre Website aussehen sollte.

Um diesen Status zu erhalten, müssen Sie die Stylesheets Ihrer übergeordneten Themen kopieren und einfügen. Sie können dies tun, indem Sie CSS oder die @import-Regel verwenden. Das Thema Ihres Kindes sollte genau wie sein Elternteil sein, wenn alles andere nach Plan läuft. Wir können jetzt damit beginnen, unser Thema anzupassen und Dinge zu ändern, um das gewünschte Ergebnis zu erzielen. Anpassungen können auf verschiedene Weise vorgenommen werden, und wir werden viele davon durchgehen. Benutzerdefinierte Stile können einem untergeordneten Design, aber nicht einem übergeordneten Design hinzugefügt werden. Indem Sie die folgenden Schritte ausführen, können Sie beliebig viele Änderungen an Ihrer Website vornehmen.

Stellen Sie sicher, dass das Child-Theme der gleichen Ordnerstruktur wie das Parent-Theme folgt. Wenn Sie eine Datei in einem Ordner mit dem Namen Seitenvorlagen in Ihrem übergeordneten Design ändern möchten, erstellen Sie im Verzeichnis Ihres untergeordneten Designs einen Ordner mit dem Namen Seitenvorlagen. Wir benennen einfach custom-full-width.php aus dem übergeordneten Design um, um unsere benutzerdefinierte Seitenvorlage zu erstellen. Als Beispiel erstellen wir in footer-custom.php eine Klasse mit voller Breite im Fußzeilenelement. Das einzige, was übrig bleibt, ist, etwas Code in unser Stylesheet einzugeben. Als Ergebnis können Sie unsere Seite in voller Breite sehen. Uns geht es gut, bis wir es polieren müssen.

Themen-Hooks ermöglichen es Ihnen, ein untergeordnetes Thema anzupassen, ohne die Kerndateien ändern zu müssen. Design-Hooks sind kleine Symbole, die in den Dateien eines Designs erscheinen und es Ihnen ermöglichen, Inhalte, Funktionen und andere Elemente hinzuzufügen. Haken gibt es in zwei Varianten: Aktionshaken und Filterhaken. Ein Filter-Hook modifiziert Funktionen, die am Ort des Hooks gefunden werden, wohingegen Aktions-Hooks benutzerdefinierte Funktionen zu bestehenden Funktionen hinzufügen. Es ist einfach, ein Child-Theme in WordPress zu erstellen: Alles, was Sie brauchen, ist eine einzige Codezeile. Aus diesem Grund beabsichtigen wir, eine Funktion anzuvisieren, die die Fußzeilen-Credits im Twenty Fifteen-Theme verarbeitet. Die modifizierte Datei footer.php in der Datei functions.html in Ihrem Child-Theme sollte entfernt werden.

Hooks in Child-Themes können auf vielfältige Weise verwendet werden. Wenn wir ein untergeordnetes Thema verwenden, können wir eine Website vollständig anpassen, ohne die zugrunde liegenden Dateien ändern zu müssen. Wenn Sie ein Design oder Framework hinzufügen möchten, können Sie dies tun, ohne es von Grund auf neu zu schreiben, und Ihre Änderungen sind vor Updates geschützt. Wenn etwas schief geht, wird das Thema immer da sein.

3 Gelegenheiten, in denen ein Child-Theme von Vorteil ist

Es gibt einige Situationen, in denen ein untergeordnetes Thema von Vorteil wäre. Ein übergeordnetes Thema enthält nicht alle erforderlichen Funktionen. Es wurden Änderungen am Parent-Theme vorgenommen, diese erscheinen jedoch nicht im Child-Theme. Es ist nicht mit den neuesten WordPress-Updates kompatibel.

So erstellen Sie Schritt für Schritt ein untergeordnetes Thema in WordPress

Ein Child-Theme ist ein WordPress-Theme, das seine Funktionalität von einem anderen WordPress-Theme erbt, das als Parent-Theme bezeichnet wird. Untergeordnete Themen werden häufig verwendet, wenn Sie den Stil eines vorhandenen WordPress-Themes anpassen oder ändern möchten, ohne die Möglichkeit zu verlieren, dieses Thema zu aktualisieren. Um ein Child-Theme zu erstellen, musst du ein grundlegendes Verständnis dafür haben, wie man in PHP programmiert. Nachdem Sie das Child-Theme erstellt haben, können Sie Ihre eigenen Anpassungen im Verzeichnis des Child-Themes hinzufügen.
1. Erstellen Sie ein neues Verzeichnis für Ihr Child-Theme.
2. Erstellen Sie ein Stylesheet für Ihr Child-Theme.
3. Binden Sie das Stylesheet in Ihr Child-Theme ein.
4. Aktivieren Sie das Child-Theme.

So erstellen Sie ein Child-Theme in WordPress

Sie können Ihr Design an einen Ordner namens Kind anhängen, indem Sie einen neuen Ordner erstellen. Sie haben dann ein untergeordnetes Stylesheet im selben Ordner. Erstellen Sie eine Funktion, um die Aufgabe abzuschließen. Sie sollten die Datei child.php in denselben Ordner wie die Datei parent.php einfügen. Bevor Sie mit der Verwendung Ihres neuen untergeordneten Designs beginnen können, müssen Sie die WordPress-Kerndateien kopieren. Untergeordnete Themen erben die Dateien und Einstellungen ihrer Eltern, da sie dafür verantwortlich sind. Wenn Sie also Funktionen oder Einstellungen Ihres Parent-Themes verwenden möchten, müssen Sie diese in Ihr Child-Theme kopieren.

Benutzerdefiniertes WordPress-Widget

Ein benutzerdefiniertes WordPress-Widget ist eine Art WordPress-Plugin, mit dem Sie Ihrer WordPress-Site ein benutzerdefiniertes Widget hinzufügen können. Benutzerdefinierte WordPress-Widgets werden normalerweise von Drittentwicklern erstellt und sind im Plugin-Repository von WordPress.org zu finden.

Was kann WordPress außer einem Widget für Text noch tun? Dieses Tutorial führt Sie durch die Schritte zum Erstellen eines benutzerdefinierten WordPress-Widgets. Wenn Sie neu in der Programmierung sind, ist dieses Tutorial möglicherweise nichts für Sie. Wir empfehlen dir, einen Blick auf unsere Reihe „WordPress-Entwicklung für Anfänger“ zu werfen, um mehr zu erfahren. Eine Konstruktorfunktion muss verwendet werden, um eine ID, einen Titel, einen Klassennamen und eine Beschreibung für ein Widget anzugeben. Mit der Methode widget() können Sie den eigentlichen Inhalt Ihres Widgets generieren. In unserem Beispiel verwenden wir get_bloginfo(), um den Titel des Widgets anzuzeigen.

Andernfalls würden Sie einfach das WordPress-Text-Widget verwenden, um die Seite zu erstellen. Die gesamte Methode widget() muss in der Instanz jpen_Example_Widget verschachtelt sein. Die Methode form() wird verwendet, um Einstellungsfelder zu einem Widget hinzuzufügen, das im WordPress-Adminbereich angezeigt wird. Hier bekommen viele Widgets mit vielen Optionen ihren Namen. Bei unserem Beispiel-Widget möchten wir es den Benutzern nur ermöglichen, einen benutzerdefinierten Titel hinzuzufügen. Ich habe ein Tutorial erstellt, um Ihnen zu zeigen, wie Sie eine beliebige HTML5-Vorlage in ein WordPress-Theme konvertieren. Um eine Liste aller Kategorien zu erstellen, sortieren Sie sie in alphabetischer Reihenfolge und ordnen Sie sie dann in zwei Listen an.

Ein zweites Widget aus der Blog-Post-HTML5-Vorlage wird das Seitenleisten-Widget der Kategorieliste sein. Es ist wichtig, die Klasse WP_Widget zu verwenden, um ein benutzerdefiniertes Seitenleisten-Widget zu entwickeln. Sie müssen Ihr Wissen verfeinern, um die leistungsstärksten benutzerdefinierten Widgets zu erstellen. Wenn Sie Ihre Aufmerksamkeit auf alle fünf Funktionen richten, können Sie WordPress-Widgets basierend auf jeder Idee erstellen.

Wie füge ich benutzerdefinierte Stile zu WordPress-Widgets hinzu?

Den Abschnitt Aussehen finden Sie hier. Wählen Sie das Widget aus, dem Sie benutzerdefinierte Stile hinzufügen möchten, indem Sie auf der Widget-Seite darauf klicken. Danach müssen Sie unter Block Panel zur Registerkarte Advanced scrollen. Eine benutzerdefinierte CSS-Klasse kann durch Anklicken hinzugefügt werden. Durch Klicken auf die Schaltfläche Aktualisieren können Sie Ihre Änderungen speichern.

Wie ändere ich das Aussehen eines WordPress-Widgets?

Gehen Sie in den WordPress-Verwaltungsbildschirmen zu Aussehen > Anpassen. Sie können auf den Widget-Anpassungsbildschirm zugreifen, indem Sie im Design-Anpasser auf das Widget-Menü klicken. Um das bereits registrierte Widget zu finden, klicken Sie im Widgetbereich auf den Pfeil nach unten.