Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Tipps, Tricks & Tutorials » So einfach erstellst du ein eigenes WordPress-Widget

So einfach erstellst du ein eigenes WordPress-Widget

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 5 Minuten
  • von Dr. Web Redaktion
  • 20. Februar 2016
Bookmarke mich
Share on pocket

Niels Neumann Online Marketing

Online Solutions Group

Trend Maker Marketing - Webdesign Agentur Regensburg

TYPO3 & Shopware Agentur - 3m5.

PRIMA LINE

HELD Werbeagentur

Das eigene WordPress-Widget ist neben Plugins eine weitere tolle Möglichkeit, dein WordPress um nützliche Funktionen zu erweitern. Während Plugins zumeist spezifische Funktionen für die Website bereitstellen, wie etwa die Anzeige von ähnlichen Beiträgen, erweitern Widgets die möglichen Funktionen für die Widget-Bereiche deines Themes. Viele interessante Funktionen sind hier denkbar, zum Beispiel die Anzeige einer „Über mich“-Box oder aber deiner letzten Tweets. In diesem Beitrag zeigen wir dir anhand zweier Beispiele, wie einfach du ein eigenes WordPress-Widget erstellen kannst.

So einfach erstellst du ein eigenes WordPress-Widget

Was ist ein WordPress-Widget und warum solltest du das wissen wollen?

Widgets fügen Inhalte und zusätzliche Funktionen zu deinen Widget-Bereichen (Sidebars) hinzu. Die Möglichkeiten sind vielfältig, denn die Platzierung innerhalb eines Themes kann in den unterschiedlichsten Bereichen erfolgen, etwa klassisch in der Sidebar, im Footer oder in speziellen Widget-Bereichen innerhalb einer speziellen Startseite deines Themes. Genauso vielfältig wie die möglichen Platzierungen sind die Funktionen, die sie bereitstellen können.

Wer Themes entwickelt, sollte auch Widgets bereitstellen

Viele Menschen, die sich eingehender mit WordPress beschäftigen, möchten irgendwann eigene Themes erstellen. Die logische Weiterentwicklung dessen ist das Bereitstellen von Funktionen durch Widgets. Grundsätzlich ist es bedeutend besser, zusätzliche Funktionen über Plugins und Widgets bereitzustellen, denn dann sind diese Features auch nach einem Theme-Wechsel weiterhin nutzbar. Das ist ganz im Sinne der Benutzerfreundlichkeit, der User des Themes wird es honorieren.

Widgets entwickeln – ein Einstieg

Wer ein eigenes Widget entwickeln möchte, sollte sich schon etwas mit PHP auskennen. Hier ist es wie bei der Theme- und Plugin-Entwicklung. Eingehendere Kenntnisse in PHP schaffen immer gute Ergebnisse, wenn man sich an die WordPress-Coding-Standards hält. Die beiden Widgets, die ich hier vorstelle, sind relativ einfacher Natur, auch Einsteiger sollten sich nach einer kurzen Einarbeitung damit zurechtfinden.

Wichtige Links zum Thema:

  • WordPress PHP Coding Standards
  • WordPress Widgets
  • WordPress Widgets API
  • How To Build WordPress Widgets Like A Pro
  • Creating Your Own Widgets Using Various WordPress APIs: Introduction

Widgets entwickeln – die Grundschritte

Seit WordPress 2.8 werden Widgets erstellt, indem die WordPress-eigene Widget-Klasse WP_Widget erweitert wird. Dabei teilt sich ein Widget in fünf verschiedene Grundbereiche auf:

1 – Die Initialisierung – function __construct(). Hier legt man die ID des Widgets, den Namen und die Beschreibung fest. Zudem können wir in diesem Bereich noch die Standard-Optionen festlegen. Wenn JavaScript oder Stylesheets referenziert werden müssen, dann kommt die nötige Funktion ebenfalls in diesen Bereich.

2 – Das Frontend-Design – function widget(). Dies ist der Bereich, in dem die Funktionen für die Ausgabe des Codes auf der Website hineinkommt. Es ist also der eigentliche Funktionsbereich des Widgets.

3 – Das Backend-Design – function form(). In diesen Bereich kommen die nötigen Funktionen mit dem HTML für den Kontrollbereich des Widgets im WordPress-Adminbereich.

4 – Das Update der Einstellungen – function update(). Wie der Name schon sagt, wird in diesem Bereich die Funktion für die Validation und das Update der Widget-Einstellungen untergebracht.

5 – Die Registrierung – function init(). Das Widget wird registriert in WordPress und kann damit wie ein Plugin aktiviert werden.

Diese fünf Bereiche stellen den Grundaufbau eines Widgets dar, wie der folgende Screenshot verdeutlicht.

Ein Klick öffnet das Gist bei GitHub
Die vier Grundbereiche eines Widgets

Der wichtigste Schritt – der Plugin-Header

Bevor du dein fertiges Widget nutzen kannst, braucht es noch einen »Header«, um auch im Plugin-Verzeichnis unter dem Menüpunkt „Plugins“ angezeigt zu werden.

Der Header eines WordPress Plugins

Da das Widget ebenfalls vom Handling her ein Plugin ist, muss es zwingend einen Plugin-Header besitzen. Wenn dieser Schritt vergessen wird, erscheint das Widget nicht im Plugin-Bereich deines WordPress und kann somit nicht aktiviert werden. Mit Header jedoch erscheint es in der Übersicht.

Die Dr. Web Plugins in der Übersicht

Zwei Beispiel-Plugins inklusive Download

Beispiele sind oftmals der beste Weg, um etwas zu lernen. Daher habe ich zwei Widgets als Beispiel herausgesucht und für Dr. Web umgeschrieben. Die Schwierigkeitsstufen sind für Einsteiger geeignet, das »Über mich«-Widget ist recht einfach gehalten, das »Twitter Timeline« Widget ist etwas anspruchsvoller, weil es eine JavaScript-Datei dem Footer hinzufügt, wenn es genutzt wird.  Jedoch ist auch das Twitter-Widget noch im Einsteiger-Bereich anzusiedeln.

Das »Über mich« Widget

Dieses kleine Plugin erstellt ein einfaches »Über mich«-Widget, das neben einem Gravatar von dir einen Text über dich darstellen kann. Die Größe deines Gravatars kann ebenso eingestellt werden, wie die Seite, auf die das Widget verlinken soll.

Ein Klick öffnet die vollständige Datei bei GitHub.
Das "Über mich" Widget

Die Einstellungen des Widgets

About Widget Einstellungen

Das Endergebnis auf der Website

Das Endergebnis des About me Widgets

Das Twitter-Timeline-Widget

Das Twitter-Timeline-Widget zeigt die beliebte Twitter-Timeline in der Sidebar an. Mit diesem Widget ist es dir möglich, deine letzten Tweets recht ansprechend darzustellen. Zudem können deine Besucher direkt aus der Anwendung heraus einen Tweet an dich absetzen. Um das Widget nutzen zu können, benötigst du eine Twitter Widget ID. Dieser Beitrag erklärt anschaulich, wie man sie erhält.

Ein Klick öffnet die vollständige Datei bei GitHub.
Der Code des Twitter Timeline Widgets

Die Einstellungen des Widgets

Twitter Widgets Einstellungen

Das Endergebnis auf der Website

das-twitter-widget

Abschlussarbeiten am Widget

Nachdem die Widgets fertig programmiert und auf einer lokalen Entwicklungsumgebung getestet wurden, können sie installiert werden. Hierzu erstellt man einen Ordner mit dem (kleingeschriebenen) Plugin-Namen, dieser könnte zum Beispiel »drweb-about-widget« lauten. Dort hinein kommt die Plugin-Datei. Im Anschluss kann man den Ordner dann per (S)FTP in das Plugin-Verzeichnis (wp-content/plugins) hochladen und ganz normal als Plugin aktivieren. Danach taucht das Widget unter den zur Verfügung stehenden Widgets auf und kann genutzt werden.

Fazit

Die Grundkenntnisse im Erstellen von Widgets kannst du dir mit diesem Beitrag erarbeiten. Die beste Methode, um zu lernen, wie man Widgets erstellt, ist das Herumexperimentieren mit dem Widget-Code der beiden Beispiel-Dateien. Beide Widgets sind voll funktionstüchtig und getestet, sie werden also auch unter WordPress 4.4.2 funktionieren.

Download der Widgets

  • Das „Über mich“ Widget
  • Das „Twitter Timeline“ Widget

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

Chris Hortsch Webdesign

Berlin

HELD Werbeagentur

Traunstein

Homepage & Design Heroes GmbH

Balingen

Haurand Webdesign

Aachen

WPSteinheisser Photography

Ludwigsburg

Alle Agenturpartner

Jobs

Sprachtalente

Volkach oder Würzburg

Projektmanager/ Projektleiter in München

München

Online Marketing Manager

Innsbruck

Copywriter – Vollzeit

Remote

Assistent/in der Geschäfts­führung

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Elementor für WordPress: Was sind die Vor- und Nachteile?

Elementor ist der führende Pagebuilder für WordPress und kann mehr als 7 Millionen (!) aktive Installationen für sich verbuchen. Ich habe mir den Senkrechtstarter für dich angesehen.

 →   

WordPress Block Editor: das ist der neueste Stand

Mit dem Block Editor in WordPress kannst du eigene Blöcke und „Block Patterns“ erstellen. In diesem Beitrag möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, unabhängig vom verwendeten Theme.

 →   

WordPress Website erstellen 2022: Eine Anleitung, Schritt für Schritt

WordPress ist das mit großem Abstand führende CMS, aus guten Gründen. Eine WordPress Website zu erstellen ist einfach, wie Du in der folgenden Anleitung sehen wirst:

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.