Springe zum Hauptinhalt

Wie ein benutzerdefiniertes Widget auf Wordpress erstellen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie Ihre eigenen benutzerdefinierten Widgets in WordPress erstellen?

Mit Widgets können Sie Elemente per Drag & Drop in eine beliebige Seitenleiste oder einen Widget-Bereich auf Ihrer Website ziehen. In diesem Artikel zeigen wir Ihnen daher, wie Sie auf einfache Weise ein benutzerdefiniertes WordPress-Widget erstellen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Erstellen Sie ein benutzerdefiniertes Widget in WordPress

Was ist ein WordPress-Widget?

WordPress-Widgets enthalten Codeteile, die Sie zu den Seitenleisten oder Widget-freundlichen Bereichen Ihrer Website hinzufügen können. Stellen Sie sich das als Module vor, mit denen Sie mithilfe einer einfachen "Drag and Drop" -Schnittstelle verschiedene Elemente hinzufügen können.

Standardmäßig enthält WordPress einen Standardsatz von Widgets, die Sie mit jedem WordPress-Thema verwenden können. 

entdecken Sie auch unsere besten Premium-WordPress-Themes.

Wordpress-Dashboard-Widget

Mit WordPress können Entwickler auch ihre eigenen Widgets erstellen. Viele Themes und WordPress-Plugins verfügen über eigene Widgets, die Sie zu Ihren Seitenleisten hinzufügen können.

Zum Beispiel können Sie hinzufügen eine Kontaktform, ein Anmeldeformular Brauch oder eine Fotogalerie in einer Seitenleiste ohne Code zu schreiben.

Vor diesem Hintergrund wollen wir uns ansehen, wie Sie auf einfache Weise Ihre eigenen Widgets in WordPress erstellen können.

Wie ein benutzerdefiniertes Widget auf Wordpress erstellen

Dieses Tutorial richtet sich an Personen mit Kenntnissen in der Webentwicklung.

Bevor Sie beginnen, sollten Sie ein bestimmtes Plugin auf der Website erstellen, in das Sie den Widget-Code für dieses Lernprogramm einfügen.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Sie können den Code auch in die Datei "functions.php" Ihres WordPress-Themas einfügen. Es ist jedoch nur verfügbar, wenn dieses bestimmte WordPress-Thema aktiv ist.

In diesem Tutorial erstellen wir ein einfaches Widget, mit dem Besucher einfach begrüßt werden. Schauen Sie sich diesen Code an und fügen Sie ihn in Ihr spezifisches Plugin ein, um ihn in Aktion zu sehen.

// Registriere und lade die Widget-Funktion wpb_load_widget () {register_widget ('wpb_widget'); } add_action ('widgets_init', 'wpb_load_widget'); // Das Erstellen der Widget-Klasse wpb_widget erweitert WP_Widget {function __construct () {parent :: __ construct (// Basis-ID Ihres Widgets 'wpb_widget', // Widget-Name wird in der Benutzeroberfläche angezeigt __ ('BPC Widget', 'wpb_widget_domain') , // Widget-Beschreibungsarray ('description' => __ ('Simple WordPress Widget', 'wpb_widget_domain'),)); } // Öffentliches Front-End-Widget-Funktions-Widget erstellen ($ args, $ instance) {$ title = apply_filters ('widget_title', $ instance ['title']); // vor und nach Widget-Argumenten werden durch Themen definiert echo $ args ['before_widget']; if (! empty ($ title)) echo $ args ['before_title']. $ title. $ args ['after_title']; // Hier führen Sie den Code aus und zeigen das Ausgabeecho an __ ('Simple Widget', 'wpb_widget_domain'); echo $ args ['after_widget']; } // Öffentliches Funktionsformular für das Widget-Backend ($ instance) {if (isset ($ instance ['title'])) {$ title = $ instance ['title']; } else {$ title = __ ('Neuer Titel', 'wpb_widget_domain'); } // Admin-Formular-Widget?> get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />

Nach dem Hinzufügen des Codes müssen Sie zu " Aussehen> Widgets “. Sie werden das neue Widget bemerken " PCB Widget In der Liste der verfügbaren Widgets. Sie müssen dieses Widget in eine Seitenleiste ziehen und dort ablegen.

Benutzerdefiniertes Wordpress-Widget

Wenn Sie jetzt Ihr Blog besuchen, sehen Sie ein Widget in der Seitenleiste, in der Sie das betreffende Widget hinzugefügt haben.

Schauen wir uns nun diesen Code an.

Zuerst haben wir aufgenommen “ wpb_widget Und unser benutzerdefiniertes Widget geladen. Als Nächstes haben wir definiert, was dieses Widget tut und wie es im Dashboard angezeigt wird.

Schließlich haben wir festgelegt, wie mit den am Widget vorgenommenen Änderungen umgegangen werden soll.

Nun gibt es ein paar Dinge, die Sie vielleicht wissen möchten. Was ist zum Beispiel das Ziel " wpb_text_domain »?

WordPress verwendet "gettext", um die Übersetzung und Lokalisierung zu verwalten. Also " wpb_text_domain „und __e teilt gettext mit, wie eine eventuell vorhandene Übersetzungszeichenfolge abgerufen werden soll.

Wenn Sie ein benutzerdefiniertes Widget für Ihr WordPress-Thema erstellen, können Sie "wpb_text_domain" durch den Text der Domäne Ihres Themas ersetzen.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Galaxy Funder

Galaxy Funder ist ein Crowdfunding-System mit zahlreichen Funktionen, das für jede WooCommerce-Website entwickelt wurde. Mit dem Premium-Plugin für Galaxy Funder WordPress können Sie Ihre eigene Crowdfunding-Website verwalten oder Spendenaktionen in der Kopfzeile Ihres WooCommerce-Onlineshops hinzufügen.

Galaxy Funder Woocommerce Crowdfunding System Plugin WordPress

Sie können auch beliebige verwenden von WooCommerce unterstütztes Zahlungsgateway. Bitte beachten Sie, dass „Galaxy Funder“ direkt auf der Online-Shop-Seite funktioniert, was den Benutzerbeitragsprozess erleichtert.

Download | DemoWeb-Hosting

2. Klicken Sie auf WhatsApp Chat

Mit dem Premium-WordPress-Plugin Click to WhatsApp Chat können WordPress-Kunden über ihr WhatsApp-Konto auf einfache Weise eine Verbindung zum Website-Eigentümer oder zum Kundensupport herstellen. 

Klicken Sie auf WhatsApp-Chat für WordPress-Plugin

Klicken Sie einfach auf das WhatsApp-Konto und es wird mit einer Standardnachricht direkt an das mobile WhatsApp-Konto weitergeleitet. Wenn sich der Client auf einem Desktop oder Laptop befindet, wird er zu WhatsApp Web umgeleitet.

Für dieses Plugin sind die WhatsApp-Nummer sowie die Uhrzeit und der Tag erforderlich, über die der Websitebesitzer oder das Support-Team diskutieren wird. Die Chat-Schaltfläche kann zur WooCommerce-Produktdetailseite hinzugefügt werden, die in direktem Zusammenhang mit diesem Produkt steht.

Download | Demo | Web-Hosting

3. Laden Sie das Bildwasserzeichen herunter

Mit diesem Premium-WordPress-Plugin können Sie Ihren Bildern ganz einfach Wasserzeichen hinzufügen Easy Digital Downloads.easy-digital-Datei-Download-Bild Wasserzeichen

Diese Wasserzeichen kann ein Copyright-Symbol sein, a Firmenlogooder Teil des Brandings als transparentes PNG-Bild.

Download | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Fazit

Voila! Das ist alles für dieses Tutorial. Ich hoffe, Sie können damit benutzerdefinierte Widgets in Ihrem WordPress-Blog erstellen. Wenn du hast commentaires oder Vorschläge, zögern Sie nicht, uns im reservierten Bereich zu informieren.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken

...  

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
10 Aktien
Aktie8
tweet1
Registrieren1