So erstellen Sie ein WordPress-Widget-Plugin

Wenn Sie ein Fan von WordPress sind, sind Sie wahrscheinlich mit Widgets vertraut. Widgets sind diese kleinen Kästchen, die Sie Ihrer Seitenleiste oder anderen Widget-bereiten Bereichen Ihres Themas hinzufügen können. Sie enthalten normalerweise Informationen wie die letzten Posts Ihres Blogs, Ihren Twitter-Feed oder einen Kalender. Aber wussten Sie, dass Sie Ihre eigenen Widgets erstellen können? Es ist eigentlich ganz einfach zu tun. In diesem Artikel zeigen wir Ihnen, wie Sie ein WordPress-Widget-Plugin erstellen. Wir beginnen mit der Erstellung einer grundlegenden Plugin-Datei und fügen dann eine Widget-Klasse hinzu. Anschließend registrieren wir unser Widget, damit es im WordPress-Admin angezeigt wird. Schließlich fügen wir etwas Code hinzu, um unser Widget auf dem Front-End unserer Website anzuzeigen. Lass uns anfangen!

Ich habe kürzlich ein Plugin namens Freelancer Widgets Bundle entwickelt. Als ich gefragt wurde, was ich für ein Plugin schreiben soll, dachte ich, es sei an der Zeit, diesen Beitrag zu schreiben, weil die Leute danach gefragt hatten. Wenn Sie ein WordPress-Plugin installieren, müssen Sie ihm einen zusätzlichen Code hinzufügen. Sie benötigen einen Editor wie Coda (Mac) oder Dreamweaver (PC), um Ihr Plugin zu entwickeln. Der Konstruktor ist die Funktion, die den Namen und die Hauptargumente des Widgets definiert; Dies ist ein Beispiel dafür, wie es aussehen könnte. Achten Sie bei Änderungen an den Formularfeldern darauf, esc_attr() zu verwenden, da dies aus Sicherheitsgründen geschieht. Der Parameter 'customize_selective_refresh' ermöglicht es, das Widget sowohl unter Aussehen als auch beim Bearbeiten zu aktualisieren.

Mit anderen Worten, Änderungen am Widget müssen nicht aktualisiert werden, damit es in der Liste angezeigt wird. Alle Tags, außer einfachem Text, werden mit WP_strip_all_tags entfernt. WP_kses_post_string() ist die gleiche Funktion wie der Post-Content-String. Diese Funktion generiert mithilfe der Funktion widget() Inhalte für eine Website. Diese Funktion kann angepasst werden, um ein bestimmtes Tag oder eine bestimmte Klasse einzuschließen. GitHub ist der ideale Ort, um den gesamten Code anzuzeigen.

Wenn Sie das Widget zu einer Website hinzufügen möchten, gehen Sie zu der Seite, auf der Sie dies tun möchten, und fügen Sie den Code ein, bevor das HTML-Tag „/body“ geschlossen wird. Der Code muss in jede Webseite eingefügt werden, auf der das Widget angezeigt werden soll. Überprüfen Sie Ihre Firewall, um festzustellen, ob das Web Widget (Classic) aktiviert ist.

Sie sind beide visuelle Kreaturen, aber die beiden haben unterschiedliche Eigenschaften wie Sichtbarkeit und Interaktion. Wenn Ihre Seite im Hintergrund reibungslos und ordnungsgemäß läuft, handelt es sich um ein Plugin. Damit ein Benutzer damit auf der Seite interagieren kann, muss es für den Benutzer sichtbar sein.

Wie erstelle ich ein benutzerdefiniertes Widget-Plugin für WordPress?

Um ein benutzerdefiniertes Widget-Plugin für WordPress zu erstellen, müssen Sie eine PHP-Datei mit dem folgenden Code erstellen: /* Plugin-Name: [Name des Plugins] Beschreibung: [Beschreibung des Plugins] */ // Registrieren und laden Sie das Widget function [name_of_plugin]_load_widget() { register_widget( '[name_of_plugin]' ); } add_action( 'widgets_init', '[name_of_plugin]_load_widget' ); // Erstellen der Widget-Klasse [Name_des_Plugins] erweitert WP_Widget { function __construct() { parent::__construct( // Basis-ID Ihres Widgets '[Name_des_Plugins]', // Widget-Name erscheint in der Benutzeroberfläche __('[Name des Plugins ]', '[Name_des_Plugins]'), // Widget-Beschreibungs-Array( 'Beschreibung' => __( '[Beschreibung des Plugins]', '[Name_des_Plugins]' ), ) ); } // Widget-Frontend erstellen // Hier findet die Aktion statt public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // Vorher- und Nachher-Widget-Argumente werden durch Themen definiert echo $args['before_widget']; if ( ! empty( $title ) ) echo $args['before_title'] . $Titel . $args['after_title']; // Hier führen Sie den Code aus und zeigen die Ausgabe an echo __( '[Name des Plugins]', '[Name_des_Plugins]' ); echo $args['after_widget']; } // Öffentliche Funktion des Widget-Backends form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '[Name des Plugins]', '[Name_des_Plugins]' ); } // Widget-Verwaltungsformular ? > Wenn WordPress-Benutzer einen Widget-Bereich erstellen, fügen sie diesem Bereich kleine Inhalte hinzu. Abhängig vom Widget-Bereich, in dem es installiert ist, kann ein Widget verschiedene Arten von Informationen auf allen Seiten anzeigen, oder es kann nur bestimmte Informationen anzeigen. Es gibt einige Widgets, die standardmäßig verfügbar gemacht werden, während andere durch die Verwendung eines Plugins oder Designs verfügbar gemacht werden. Die vier oben genannten Methoden müssen Ihrer Klasse hinzugefügt werden, um ein einfaches benutzerdefiniertes Widget zu erstellen. Sie müssen die Funktion register_widget() verwenden, um das Widget zu registrieren, um es innerhalb des Dashboards verwenden zu können. Bevor wir uns mit dem in diesem Artikel vorgestellten Beispiel befassen, gehen wir kurz auf den Zweck jedes Abschnitts des Codes ein. Eine der Methoden, die in der Klasse Custom_Widget verwendet wird, ist eine Methode zur Zuweisung von Zeichen. Wir haben das Widget mit dem custom_widget als ID mit der Konstruktormethode unter Verwendung der Methode __construct() erstellt. Mit der Methode register_widget() wird ein neues Widget erstellt, nachdem das vorhandene registriert wurde. Wir haben jeden der Teile mit if…*-Anweisungen umschlossen, um sicherzustellen, dass nur diese Teile angezeigt werden, wenn sie in den Widget-Optionen enthalten sind. Die Methode widget() enthielt die Funktion nl2br(), um sicherzustellen, dass alle Texte mit mehreren Absätzen richtig angezeigt werden. sanitize_text_field() eliminiert unnötige Leerzeichen, Tabulatoren und Zeilenumbrüche aus dem Argument. Darüber hinaus wird der Ja-Wert als Standard innerhalb des Auswahlfelds gesetzt, was anzeigt, dass das Verknüpfungsziel in den vorherigen zwei Fällen auf _blank gesetzt ist. Anzugeben sind Titel, Text, Link unterhalb des Titels und ob der Link in einem neuen Tab geöffnet werden soll. Bitte speichern Sie die gewählten Optionen gleich mit einem Klick auf die Schaltfläche Speichern. Wenn Sie ein Standardthema auswählen, erzeugt das Widget eine andere Ausgabe. In diesem Fall könnte Ihr Widget dem unten gezeigten sehr ähnlich aussehen, wenn Sie das Lekker WordPress-Theme verwenden. Wie erstelle ich ein benutzerdefiniertes Bild-Widget in WordPress? Um ein Bild zu einer WordPress-Seitenleiste hinzuzufügen, wählen Sie das Widget „Bild“ aus. Sie können Änderungen an Ihrem Aussehen vornehmen, indem Sie zu Aussehen gehen. Fügen Sie das „Bild“-Widget zur Seitenleiste hinzu, wenn Sie eine Seite haben, die ein Widget enthält. Benutzerdefiniertes Widget-Plug-inBildnachweis: octobercms.comEin benutzerdefiniertes Widget-Plug-in ist ein Plug-in, mit dem Sie Ihr eigenes benutzerdefiniertes Widget erstellen können. Dieses Plugin ist ideal für diejenigen, die ein benutzerdefiniertes Widget für ihre Website oder ihren Blog erstellen möchten. Mit diesem Plug-in können Sie ganz einfach ein benutzerdefiniertes Widget erstellen, ohne es selbst programmieren zu müssen. Um ein benutzerdefiniertes Widget bereitzustellen, das mit Qt Designer verwendet werden kann, müssen wir eine eigenständige Implementierung sowie eine Plug-in-Schnittstelle bereitstellen. Das benutzerdefinierte Widget dieses Beispiels hat wie sein Gegenstück zur analogen Uhr keine benutzerdefinierten Signale oder Slots. Das Makro Q_PLUGIN_METADATA() muss verwendet werden, um sicherzustellen, dass das Widget ordnungsgemäß als Plug-in identifiziert wird, indem Daten daraus exportiert werden. Die AnalogClock-Klasse kann als benutzerdefiniertes Widget innerhalb der Widget-Box verwendet werden und ist ein Beispiel für eine eigenständige Klasse. Eine Plugin-Klasse für die AnalogClock-Klasse ist in Qt Designer enthalten. Der Konstruktor für die Klasse QObject ruft einfach den Konstruktor der QObject-Basisklasse auf, der die initialisierte Variable auf false setzt. Die Funktion isInitialized() prüft, ob das Plugin einsatzbereit ist, indem sie Qt Designer erlaubt, es zu identifizieren. Die Funktion createWidget() kann Instanzen eines benutzerdefinierten Widgets generieren. Das Widget-Plug-in wird im Gruppennamen im Widget-Plug-in-Abschnitt von Qt Designer angezeigt. Ein Tooltip und Was ist das? Im Widget-Feld können Sie Hilfe für das benutzerdefinierte Widget bereitstellen. Die Funktion isContainer() prüft, ob ein Widget als Container für andere Widget-Bilder verwendet werden soll. Dies hindert den Benutzer daran, darin Widgets zu erstellen.Benutzerdefinierter Widget-WordPress-CodeGutschrift: www.hostpapa.inEin benutzerdefiniertes Widget ist eine großartige Möglichkeit, Ihrer WordPress-Site Funktionen hinzuzufügen. Beim Hinzufügen von benutzerdefiniertem Widget-Code zu Ihrer Website sind einige Dinge zu beachten. Zuerst müssen Sie eine Datei namens „widget.php“ im Verzeichnis Ihres Designs erstellen. Als Nächstes müssen Sie Ihrer widget.php-Datei den folgenden Code hinzufügen: class Custom_Widget erweitert WP_Widget { function __construct() { parent::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'description' => __( 'Ein benutzerdefiniertes Widget für Ihre WordPress-Site.', 'text_domain' ), ) ); } public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; if ( ! empty( $title ) ) echo $args['before_title'] . $Titel . $args['after_title']; echo __( 'Hallo, Welt!', 'text_domain' ); echo $args['after_widget']; } öffentliche Funktion form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'Neuer Titel', 'text_domain' ); } ? > } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title']Wordpress Widget zu Vorlage hinzufügenDas Hinzufügen eines Widgets zu einer WordPress-Vorlage ist ein einfacher Vorgang. Sie müssen über Ihr Hosting-Konto auf Ihre WordPress-Dateien zugreifen und die entsprechende Datei. In den meisten Fällen ist dies die Datei header.php. Suchen Sie nach dem Code, der den Bereich steuert, in dem Sie das Widget hinzufügen möchten. Kopieren Sie dann den Code für das Widget, das Sie hinzufügen möchten, und fügen Sie ihn in die entsprechende Datei ein Stelle in der Datei. Speichern Sie die Datei und laden Sie sie auf Ihren Server hoch. Das war's! Das Widget erscheint jetzt auf Ihrer WordPress-Site. In WordPress gibt es ein Template-Tag namens the_widget(), mit dem Sie ein Widget direkt zu Ihrer hinzufügen können Vorlagendateien. Ein Widget kann in einer Datei platziert werden, die den Klassennamen des Widgets enthält, das Sie verwenden möchten, und wo es angezeigt werden soll. Mit anderen Worten, wenn Sie die letzten Kommentare auflisten möchten, können Sie einfach Folgendes schreiben: $instance für jedes Widget. Mithilfe integrierter Funktionen können Sie viele Ihrer defa ult WordPress-Widgets zu Ihren Vorlagendateien hinzufügen, anstatt sie zu verwenden. Benutzerdefinierte Widgets können mit der Methode the_widget() in Ihre Vorlage eingefügt werden. Benutzerdefinierte Widgets, die auf einer anderen Plattform als Ihrer Seitenleiste verwendet werden können, sind in vielen Plug-ins verfügbar. Wie füge ich ein Widget zu meinem WordPress-Theme hinzu? Wählen Sie ein Widget aus, indem Sie es auf eine bestimmte Seitenleiste ziehen oder auf den Link Widget hinzufügen klicken (wenn Ihr Design mehr als eine Seitenleiste hat, wählen Sie die Ziel-Seitenleiste). und fügen Sie die Datei dort ein, wo Ihr Widget erscheinen soll. Im zweiten Schritt legen Sie fest, welches Widget Sie verwenden möchten. In diesem Abschnitt gehen wir die Klassennamen des standardmäßigen WordPress-Widgets durch: WP_Widget_Archives. So erstellen Sie ein benutzerdefiniertes Bild-Widget in WordPress Um ein benutzerdefiniertes Bild-Widget in WordPress zu erstellen, müssen Sie zuerst ein benutzerdefiniertes Plugin oder ein untergeordnetes Thema erstellen. Sobald Sie dies getan haben, können Sie eine neue Datei mit dem Namen „image-widget.php“ in Ihrem Plugin oder untergeordneten Thema erstellen. In diese Datei müssen Sie den folgenden Code einfügen: class WP_Widget_Custom_Image erweitert WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __( 'Ein Widget, mit dem Sie um ein benutzerdefiniertes Bild hochzuladen.', ' text_domain' ), ); parent::__construct( 'custom_image', __( 'Custom Image', 'text_domain' ), $widget_ops ); } function widget( $args, $instance ) {echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title']; } if ( ! empty( $instance['image'] ) ) {echo ”; } echo $args['after_widget']; } function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = sanitize_text_field( $new_instance['title'] ); $instance['image'] = esc_url_raw( $new_instance['image'] ); $Instanz zurückgeben; } Funktionsform( $Instanz ) { $Titel = ! leer( $instance['title'] ) ? $instance['title'] : __( 'Benutzerdefiniertes Bild', 'text_domain' ); $bild = ! leer( $instance['image'] ) ? $instance['image'] : ”; ?Das Bild-Widget-Plugin ist ein einfaches Plugin, das verwendet werden kann, um Bild-Widgets mithilfe des WordPress-Medienmanagers zu Ihrer Website hinzuzufügen. Es ist üblich, dass Widget-Ausgabevorlagen eine Standardvorlage enthalten, diese kann jedoch durch Dateien in Ihrer Vorlage geändert werden. In 3.2 wurde auch der Filter sh_template_image_widget_php hinzugefügt, mit dem Sie das Standardverhalten der Vorlage überschreiben können. Um mehr über die spezifische Widget-Instanz zu erfahren, müssen Sie auch zwei Argumente $args und $instance hinzufügen. Sie könnten dies in einem responsiven Design verwenden, wenn Sie dies überschreiben. Wie kann ich einen Schieberegler für zufällige Bilder hinzufügen? Ja, Sie haben die Möglichkeit, dies zu tun. Normalerweise wird dies direkt über die Seitenleistenanzeige des Bild-Widget-Plugins gehandhabt; die Seitenleistenanzeige muss auf eine bestimmte Seite eingestellt werden. Bitte teilen Sie uns mit, wenn Sie Fragen oder Kommentare zu dieser Seite haben. Das Image Widget ist ein Open-Source-Softwareprojekt. Dieses Plugin wurde der Öffentlichkeit von einer Vielzahl von Mitwirkenden zur Verfügung gestellt. Wenn Sie ein Bild einfügen möchten, können Sie ein Feld hinzufügen, und wenn Sie einen Link einfügen möchten, können Sie eine Klasse hinzufügen. Sie werden ungefähr 15 Minuten damit verbringen, es ist also eine lohnende Investition. Wie erstelle ich ein neues Widget in WordPress? Ziehen Sie das Widget entweder in den entsprechenden Widget-Bereich oder ziehen Sie es von der linken Seite der Seite nach links . Sobald Sie auf das Widget klicken, das Sie hinzufügen möchten, sehen Sie eine Liste mit Möglichkeiten, dies zu tun. Um einem bestehenden Bereich neue Widgets hinzuzufügen, klicken Sie auf die Schaltfläche Widget hinzufügen.