Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development

Entwickeln Sie Ihr erstes WordPress-Thema: Tag 1 von 3

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Developing Your First WordPress Theme.
Developing Your First WordPress Theme: Day 2 of 3

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Themen sind ein großer Teil dessen, was WordPress so beliebt macht wie es ist, und in dieser dreiteiligen Serie werden wir Sie durch einen schrittweisen Prozess führen, der zu einem vollständigen, funktionierenden WordPress-Thema führt. Keine Vorkenntnisse erforderlich, dies ist der perfekte Ausgangspunkt, wenn Sie WordPress noch nicht kennen!


WordPress-Themes

Willkommen zum ersten Teil dieser dreiteiligen Serie, in dem Sie erfahren, wie Sie mit dem Erstellen von Themen für WordPress beginnen. Themen sind eines der besten Dinge an WordPress und die einfache Suche, Installation und Änderung ist einer der Faktoren, die dazu beigetragen haben, dass WordPress zu dem Giganten wird, der es heute ist - allein auf WordPress.com werden über 20 Millionen Blogs gehostet.

Von den Millionen von Menschen, die WordPress verwenden, weiß wahrscheinlich eine große Mehrheit dieser Benutzer nicht, wie man eine Website-Vorlage erstellt, geschweige denn ein WordPress-Thema erstellt. Es ist auch sehr wahrscheinlich, dass viele WordPress-Benutzer mit Begriffen wie 'FTP' oder 'Uploading' nicht vertraut sind. Dank der integrierten Themensuchmaschine und des Theme-Installationsprogramms müssen Benutzer weder die technischen Details noch Aspekte der Funktionsweise von Themes kennen oder wissen, wie sie auf ihr Hosting-Konto hochgeladen werden können.

Es ist dieser benutzerfreundliche Aspekt von Themen, der WordPress zu einer robusten Blogging-Plattform macht, die nicht nur persönliche Blogs und Tagebücher, sondern auch einige der größten Technologie- und Nachrichtenblogs im Internet von heute unterstützt. Es gibt sogar ganze Marktplätze, die auf WordPress-Themen basieren, wie beispielsweise ThemeForest, dessen Autoren jedes Jahr Millionen von Dollar verdienen.

Wir haben also festgestellt, dass Themen wichtig sind, aber das alles wissen Sie wahrscheinlich schon. Wenn Sie lesen, ist es offensichtlich, dass Sie an Bord springen und eigene Themen für Ihren persönlichen Gebrauch erstellen, mit anderen teilen oder auf einem Marktplatz oder ähnlichem verkaufen möchten. Damit Ihr Thema Wirkung zeigt oder populär wird, ist es wichtig, die Zusammensetzung eines guten Themas zu verstehen.


Was macht ein gutes Thema aus?

Ein WordPress-Theme lässt sich leicht zusammenfügen, aber ein gutes Theme erfordert Planung, Vorbereitung und viel Aufwand. Viele Menschen verdienen ihren Lebensunterhalt mit dem Verkauf von WordPress-Themen, weil sie wissen, was ein gutes Thema ausmacht und wie sie dieses Wissen in die Praxis umsetzen können - ein Talent, das Sie sich erhoffen.

Diese Serie konzentriert sich darauf, ein vorhandenes, codiertes HTML/CSS-Design in ein lebendiges, atmendes WordPress-Thema umzuwandeln. Dies bedeutet natürlich, dass Sie ein Design benötigen, das Sie konvertieren können. Machen Sie sich jedoch keine Sorgen, wenn Sie keines haben, da wir in Teil 2 ein einfaches Design zum Üben bereitstellen.

Da Sie Ihre Themen ohne unsere Hilfe entwerfen, schauen wir uns einige der Dinge an, die die meistverkauften Themen von dem Standard-Werbegeschenk-Thema unterscheiden, das nicht viel Sendezeit hat.

Gesamtkonzept

Dieser Punkt ist etwas schwer zu beschreiben, aber ein Thema muss nach modernen Designstandards gut gestaltet sein. Damit meine ich, dass es wichtig ist, die Trends und Erwartungen eines modernen Webdesigns zu kennen. Heute sind das Ersetzen von Schriftarten, CSS3-Verläufe, transparente Kästchen und 'verrauschte Hintergründe' die Online-Mode, aber vor 10 Jahren war es noch üblich, Cursorspuren, animierte Gifs und flammenden Text zu haben...

Wie viele von euch schauderten nur? Natürlich gehen all diese Tricks und Trends über den Rahmen dieser Serie hinaus und es liegt an Ihnen, über die Attraktivität eines Designs zu entscheiden. Es ist immer eine gute Idee, Community-Feedback von Websites wie Dribbble oder Forrst zu erhalten, da dort viele seriöse Themendesigner und -entwickler ansässig sind.

Widget-Unterstützung

Allen gängigen Themen gemeinsam ist die Unterstützung von Widgets. Für diejenigen, die all die Jahre unter einem Felsen gelebt haben; Widgets sind kleine, anpassbare Add-Ons, die häufig in der Seitenleiste oder Fußzeile eines Themas angezeigt werden. Widgets sind eine weitere großartige Erweiterungsoption für WordPress, die dazu beiträgt, dass es so beliebt wird.

Viele Themen werden mit benutzerdefinierten Widgets geliefert, die speziell für dieses Thema erstellt wurden. WordPress enthält auch eine Reihe integrierter Standard-Widgets wie einen Kalender, ein Suchfeld oder Archive. Über das Dashboard können Sie anpassen, in welcher Reihenfolge Widgets angezeigt werden und sogar in welchem Bereich (Seitenleiste, Fußzeile oder anderswo) sie angezeigt werden.

Widgets sind großartig, weil sie Benutzern eine großartige Möglichkeit bieten, einem Thema Funktionen hinzuzufügen, ohne eine Codezeile berühren zu müssen. Widgets verwenden (meistens) standardisierte CSS-Klassen, was bedeutet, dass Sie sich nicht auf jedes einzelne erstellte Widget vorbereiten müssen, sondern nur einige einfache Regeln bereitstellen müssen, denen alle folgen müssen.

Kommentare und Zurückverfolgen-Unterstützung

Einer der häufigsten Fehler, den viele neue Entwickler des WordPress-Themas machen, ist, Zurückverfolgen zu vergessen und das Kommentarsystem nicht richtig zu unterstützen. Obwohl nicht jedes Blog Zurückverfolgen verwendet, ist es wichtig zu wissen, dass dies für viele Blogs, die Zurückverfolgen anzeigen, ein Deal Breaker sein kann.

Für diejenigen, die nicht wissen oder nicht genau wissen, was Zurückverfolgen sind; Sie sind eine großartige Möglichkeit, eingehende Links aufzubauen und sich mit anderen Bloggern zu vernetzen. Aber sie unterscheiden sich von Kommentaren.

Eine neue Entwickleridee für die Unterstützung des Zurückverfolgens könnte darin bestehen, einfach mit Kommentaren gemischte Zurückverfolgen anzuzeigen - etwas, das vermieden werden sollte, um Unordnung bei Kommentaren zu vermeiden. Ein Benutzer, der die Kommentare zu einem Beitrag liest, muss durch eine Mischung aus Pings, Trackbacks und Kommentaren scrollen, um herauszufinden, wonach er sucht, wenn es einfach ist, diese Art von Verhalten zu verhindern.

Seit WordPress 2.7 sind verschachtelte Kommentare eine Kernfunktion. Mit verschachtelten Kommentaren können Benutzer nicht nur auf den Beitrag oder die Seite antworten, sondern auch auf einen Kommentar, ähnlich wie auf den Tuts+-Seiten (wie oben gezeigt). Verschachtelte Kommentare sind etwas schwieriger zu implementieren als die meisten anderen Funktionen, aber bei korrekter Ausführung eine fantastische Funktion und können den Wert eines Themas erheblich verbessern, da verschachtelte Kommentare die Kommentaraktivität fördern - etwas, das von Bloggern sehr bevorzugt wird.

Gravatare

Weltweit anerkannte Avatare sind eine großartige Funktion, die Sie zu jedem Thema hinzufügen können. Ich bin sicher, dass Sie wahrscheinlich alle mit ihnen vertraut sind, aber für diejenigen, die mit dem Begriff nicht vertraut sind. Ein Gravatar ist ein Avatar, der mit Ihrer E-Mail verknüpft ist. Wenn Sie also einen Blog kommentieren, wird ein von Ihnen festgelegter Avatar angezeigt.

Gravatare sind sehr einfach zu implementieren, solange sie richtig in Ihrem Design platziert sind (nicht als Nachdenken). Obwohl einige Themen ohne besser funktionieren, bieten Gravatare den Benutzern im Allgemeinen eine engere Verbindung zu einem Blog, da sie den Kommentaren ein wenig Persönlichkeit verleihen.

Ausgewählte Beiträge und Avatare

Wenn Sie zu einem beliebten Marktplatz wie ThemeForest gehen und die beliebtesten Themen der Woche lesen, werden Sie feststellen, dass fast alle über eine Art Post-Avatar verfügen. Werfen wir einen Blick auf eines der beliebtesten Themen auf ThemeForest - Striking:

Jeder Beitrag hat ein Bild mit einer festgelegten Breite und Höhe, das als Avatar fungiert. Durch das Einfügen eines Post-Avatars helfen die Bilder dabei, den Text aufzubrechen und der Seite einen guten Fluss zu verleihen. Natürlich müssen Avatare nicht so sein. Hier ist eine andere Art, Post-Avatare anzuzeigen, die auf unserer Schwesterseite Nettuts+ verwendet werden:

Eine weitere großartige Möglichkeit, Beiträge anzuzeigen, ist die Verwendung eines Abschnitts mit vorgestellten Beiträgen. Im Allgemeinen sind diese in Themen im Magazinstil häufiger (wir werden keine in unserem persönlichen Thema verwenden), geben dem Thema jedoch ein zusätzliches Maß an Funktionalität. Hier ist ein Beispiel aus einem beliebten Thema:

Wie Sie sehen können, haben wir oben im Thema ein großes Bild, das von einem Titel und einem Auszug oder einer Beschreibung des Beitrags/der Seite, zu der/der es führt, überlagert ist. Ausgewählte Beiträge können die beliebtesten Beiträge des Monats oder nur die neuesten Beiträge sein. Sie sind für persönliche Blogs oft etwas überwältigend, daher ist es großartig, sie als Option und nicht als obligatorischen Bestandteil des Designs anzubieten. Je anpassbarer ein Thema ist, desto höher ist die Wahrscheinlichkeit, dass es populär wird.

Benutzerdefinierte Beitragstypen

Natürlich ist nicht alles, was in einem Blog veröffentlicht wird, nur ein Blog-Beitrag. Blogger möchten möglicherweise auch nur Medien wie Vimeo, YouTube-Video oder Audio freigeben. Ein fantastisches Beispiel für diese Art der Integration ist ein aktuelles Thema namens Gridlocked:

Gridlocked verwendet einen benutzerdefinierten Beitragstyp (in diesem Fall ist der Beitragstyp ein Vimeo-Beitrag), der einen Vimeo wunderschön in das Thema einbettet. Einige der anderen Optionen, die das Thema unterstützt, sind YouTube-Videos, ein Audio-Player und Post-Avatare. Alle diese Elemente (unter Verwendung ihres jeweiligen benutzerdefinierten Beitragstyps) sehen bei voller Breite ohne Rand oder Polsterung am oberen Rand des Layouts großartig aus.

Benutzerdefinierte Beitragstypen sind sowohl effektiv als auch einfach zu implementieren. Der Blogger gibt lediglich eine Metainformation an. Das Thema verwendet diese Informationen und entscheidet, welcher Code angezeigt werden soll.


Die Komponenten eines Themas

Wie Sie wahrscheinlich wissen, bestehen Themen aus vielen verschiedenen Dateien, von denen jede ihre jeweilige Rolle bei der Anzeige oder Funktionalität eines Themas spielt. Werfen wir einen Blick auf einige der häufigsten Dateien, die WordPress standardmäßig erkennt und mit denen wir uns befassen werden. Die meisten Dateien sind nur durch ihren Namen selbsterklärend:

header.php

Normalerweise enthält diese Datei unser Thema bis </head> und enthält auch die Funktion wp_head(), die einer der wichtigsten Hooks in WordPress ist.

sidebar.php

Als optionale Datei, die mit get_sidebar() aufgerufen wird, können Sie diese Datei für eine Seitenleiste, eine Navigation oder ähnliches verwenden. Hier fügen Sie normalerweise auch den Code ein, damit Widgets ausgeführt werden können, sofern Ihr Thema dies zulässt.

footer.php

Ein einfacher Teil zu erraten, hier wird das Thema abgeschlossen und Sie können einen zweiten Bereich für die Anzeige von Widgets registrieren. Natürlich können Sie Widgets überall anzeigen, aber Seitenleiste und Fußzeile sind am häufigsten.

page.php

Wird verwendet, um eine einzelne Seite anzuzeigen - nicht zu verwechseln mit einem Beitrag.

single.php

Die Post-Datei, die zum Anzeigen eines einzelnen Blog-Posts verwendt wird, jedoch der Datei page.php im Code sehr ähnlich ist.

index.php

Wie Sie wahrscheinlich erraten können, erledigt index den Teil der Arbeit für ein Blog. Anzeigen von Posts, Suchergebnissen, Bereitstellen von Fehlermeldungen usw.

functions.php

Die Funktionsdatei ist möglicherweise neu für Sie. Hier werden themenspezifische Funktionen gespeichert - am häufigsten die Funktionen zum Registrieren von Widget-fähigen Bereichen.

Kommentare.php

Zeigt eine Schleife ähnlich der index.php an, die durch Kommentare iteriert. Hier werden auch Zurückverfolgen, verschachtelte Kommentare und andere verwandte Funktionen ausgeführt.

Ein Thema kann beliebig viele oder so wenige Themendateien verwenden, dies sind jedoch die Dateien, die für fast jedes Thema am häufigsten verwendet werden. Die Struktur der Themendatei ist im Wesentlichen die Entscheidung des Theme-Entwicklers. Beispielsweise kann es vimeo.php, youtube.php und audio.php geben, die ihre jeweiligen Beitragstypen anzeigen, anstatt den gesamten Code in einer page.php oder einzeln zu bündeln .php.


Anpassen Ihres Themas mit einer Optionsseite

Eine Dashboard-Optionsseite, die eine einfache Anpassung eines Themas ermöglicht, kann ein Deal Maker sein. Die überwiegende Mehrheit der gängigen Themen verfügt über ein Optionsfeld, mit dem der Blogger keine Code- oder Grafikdateien mehr ändern muss. Das ist ein großartiges Verkaufsargument, da nicht jeder Blogger, der Ihr neues Thema verwendet, weiß, dass #000000 Schwarz bedeutet.

Optionsseiten können ein einfaches einseitiges Layout mit einigen Kontrollkästchen, Textbereichen und Schiebereglern sein, oder sie können ein ganzes Admin-Panel im Dashboard sein, das mehrere Seiten enthält, um viele verschiedene Elemente eines Themas zu steuern. In der Regel ermöglichen Optionsseiten die Anpassung von Elementen wie:

  • Farbschema
  • Logo (Klartext oder Bild)
  • Favicon
  • Details für Social-Media-Streams (z. B. Twitter-Benutzername)
  • Verschiedene Stiloptionen
  • Viel mehr

Es ist unmöglich, alle Optionen aufzulisten, da sich jedes Thema vom letzten unterscheidet und unterschiedliche optionale Extras erfordert. Während für ein kleines persönliches Thema möglicherweise keine vollständige Optionsseite erforderlich ist, ist es wichtig zu bedenken, dass die Mehrheit der Blogger nicht technisch versiert ist.


Nächste Woche

Nächste Woche werden wir direkt zu unseren Code-Editoren springen und mit der Arbeit an einem grundlegenden, persönlichen WordPress-Thema beginnen. Sie sind herzlich eingeladen, Ihr eigenes Layout zu verwenden, das Sie in ein WordPress-Design konvertieren möchten. Machen Sie sich jedoch keine Sorgen, wenn Sie keines haben, da ein einfaches Layout bereitgestellt wird.

Die Voraussetzungen für die nächste Woche sind ein Verständnis von grundlegendem HTML, einige grundlegende PHP-Kenntnisse und - im Idealfall - ein Verständnis von CSS. Sie müssen nichts über WordPress-Themes wissen, da wir von vorne anfangen werden!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.