Das erste WordPress-Theme entwickeln Tag 1 von 3

Themes sind ein großer Teil dessen, was WordPress so beliebt macht, wie es ist. In dieser dreiteiligen Serie werden wir Sie Schritt für Schritt durch den Prozess führen, der zu einem vollständig funktionierenden WordPress-Theme führt. Es sind keine Vorkenntnisse erforderlich. Dies ist der perfekte Ort, wenn Sie mit WordPress noch nicht vertraut sind!

Ausschau halten nach kostenloses WordPress-Theme um schnell loszulegen Wir haben einige tolle für Sie zur Auswahl!


WordPress-Themes

Willkommen zum ersten Teil dieser dreiteiligen Serie, wie Sie mit der Erstellung von Themes für WordPress beginnen können. Themes sind eines der besten Dinge in WordPress und die einfache Suche, Installation und Modifizierung ist einer der Faktoren, die dazu beigetragen haben, dass WordPress der Riese geworden ist, der es heute ist - über 20 Millionen Blogs werden auf WordPress.com gehostet allein.

Unter den Millionen von Menschen, die WordPress verwenden, ist es wahrscheinlich, dass eine große Mehrheit dieser Benutzer nicht weiß, wie sie eine Website-Vorlage erstellen, geschweige denn ein WordPress-Theme erstellen. Es ist auch sehr wahrscheinlich, dass viele WordPress-Benutzer mit Begriffen wie "FTP" oder "Hochladen" nicht vertraut sind. Dank der integrierten Themensuchmaschine und des Themeninstallationsprogramms müssen die Benutzer nicht die technischen Details oder Aspekte der Funktionsweise von Themen kennen oder wissen, wie sie in ihren Hosting-Account hochgeladen werden.

Dieser benutzerfreundliche Aspekt von Themes macht WordPress zur robusten Blogging-Plattform, die es nicht nur für persönliche Blogs und Tagebücher gibt, sondern auch für einige der größten Technologie- und Nachrichtenblogs im Internet. Es gibt sogar ganze Marktplätze, die sich auf WordPress-Themes verlassen, wie zum Beispiel ThemeForest, dessen Autoren jedes Jahr Millionen von Dollar verdienen.

Wir haben also festgestellt, dass Themen wichtig sind, aber das wissen Sie wahrscheinlich schon. Wenn Sie lesen, ist es offensichtlich, dass Sie an Bord gehen und Ihre eigenen 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 zusammenstellen, ein gutes Theme erfordert jedoch Planung, Vorbereitung und viel Aufwand. Viele Menschen leben gut vom Verkauf von WordPress-Themes, weil sie wissen, was ein gutes Thema ausmacht, und sie wissen, wie sie dieses Wissen in die Praxis umsetzen können - ein Talent, das Sie erhoffen möchten.

Diese Serie konzentriert sich darauf, ein vorhandenes, kodiertes HTML / CSS-Design in ein lebendiges, atmungsaktives WordPress-Design umzuwandeln. Natürlich bedeutet dies, dass Sie ein Design benötigen, das Sie konvertieren können. Machen Sie sich jedoch keine Sorgen, wenn Sie kein Design haben, da wir in Teil zwei ein einfaches zum Üben bereitstellen.

Da Sie Ihre Themen ohne unsere helfende Hand entwerfen, betrachten wir einige der Dinge, die die meistverkauften Themen von den Standard-Freebie-Themen unterscheiden, die nicht viel Sendezeit haben.

Gesamtkonzept

Dieser Punkt ist etwas schwierig zu beschreiben, aber ein Thema muss nach modernen Designstandards gut gestaltet sein. Ich meine damit, dass es wichtig ist, die Trends und Erwartungen eines modernen Webdesigns zu kennen. Heutzutage ist das Ersetzen von Schriftarten, CSS3-Farbverläufen, transparenten Boxen und "lauten Hintergründen" die Online-Mode, aber vor 10 Jahren war es noch üblich, Cursor-Spuren, animierte GIFs und flammenden Text zu haben?

Wie viele von euch haben gerade geschüttelt? Natürlich liegen all diese Tricks und Trends außerhalb des Rahmens dieser Serie, 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 einzuholen, da hier viele renommierte Designdesigner und Entwickler ansässig sind.

Widget-Unterstützung

Allen populärsten Themen ist gemeinsam, dass sie Widgets unterstützen. Für diejenigen, die all diese Jahre unter einem Felsen gelebt haben; Widgets sind kleine, anpassbare Add-Ons, die häufig in der Seitenleiste oder Fußzeile eines Designs angezeigt werden. Widgets sind eine weitere großartige Erweiterbarkeitsoption für WordPress, mit der das Programm so beliebt ist.

Viele Themes enthalten benutzerdefinierte Widgets, die speziell für dieses Thema erstellt wurden. WordPress enthält auch eine Reihe von Standard-Widgets wie Kalender, Suchfelder oder Archive. Über das Dashboard können Sie festlegen, in welcher Reihenfolge Widgets angezeigt werden und sogar in welchem ​​Bereich (Seitenleiste, Fußzeile oder sonstwo) sie angezeigt werden.

Widgets sind großartig, da sie Benutzern eine großartige Möglichkeit bieten, Funktionalität zu einem Thema hinzuzufügen, ohne eine Zeile Code berühren zu müssen. Widgets (meistens) verwenden standardisierte CSS-Klassen. Das bedeutet, dass Sie sich nicht auf jedes einzelne Widget vorbereiten müssen. Geben Sie einfach einige Regeln an, die alle befolgen müssen.

Kommentare und Trackback-Unterstützung

Einer der häufigsten Fehler, den ich bei vielen neuen WordPress-Theme-Entwicklern feststelle, ist, Trackbacks zu vergessen und das Kommentarsystem nicht richtig zu unterstützen. Obwohl nicht in jedem Blog Trackbacks verwendet werden, ist es wichtig zu wissen, dass es für viele Blogs ein Dealbreaker sein könnte tun Trackbacks anzeigen.

Für diejenigen, die nicht wissen, was Trackbacks sind; Sie sind eine großartige Möglichkeit, eingehende Links aufzubauen und Netzwerke mit anderen Bloggern zu knüpfen. Aber sie unterscheiden sich von Kommentaren.

Die Idee eines neuen Entwicklers zur Trackback-Unterstützung besteht möglicherweise darin, dass nur Trackbacks mit Kommentaren angezeigt werden. Dies sollte vermieden werden, um das Durcheinander der Kommentare zu vermeiden. Ein Benutzer, der die Kommentare in einem Beitrag liest, muss durch eine Mischung aus Pings, Trackbacks und Kommentaren blättern, um herauszufinden, was er erwartet, wenn dieses Verhalten leicht zu verhindern ist.

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 umständlicher als die meisten anderen Features, sind jedoch eine fantastische Funktion, wenn sie richtig gemacht werden. Sie können den Wert eines Themas erheblich verbessern, da verschachtelte Kommentare die Kommentartätigkeit fördern - etwas, das von Bloggern sehr geschätzt wird.

Gravatare

Weltweit anerkannte Avatare sind eine großartige Funktion, die zu jedem Thema hinzugefügt werden kann. Ich bin mir sicher, dass Sie alle mit ihnen vertraut sind. Ein Gravatar ist ein Avatar, der Ihrer E-Mail zugeordnet ist. Wenn Sie also einen Blog kommentieren, wird ein von Ihnen eingestellter Avatar angezeigt.

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

Beiträge und Avatare

Wenn Sie sich auf einem beliebten Marktplatz wie ThemeForest aufhalten und die beliebtesten Themen der Woche durchgehen, werden Sie feststellen, dass fast alle eine Art Post-Avatar aufweisen. Werfen wir einen Blick auf eines der beliebtesten Themen von 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, den Text aufzuteilen und der Seite einen guten Fluss zu verleihen. Natürlich müssen Avatare nicht so sein, hier werden Post-Avatare, die auf unserer Schwesterseite Nettuts + verwendet werden, anders dargestellt:

Eine weitere gute Möglichkeit, Beiträge anzuzeigen, ist die Verwendung eines vorgestellten Beitragsabschnitts. Im Allgemeinen sind diese Themen häufiger in Stilen von Magazinen (wir verwenden keine Themen in unserem persönlichen Thema), geben dem Thema aber eine zusätzliche Funktionalität. Hier ist ein Beispiel aus einem beliebten Thema:

Wie Sie sehen, 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 er führt, eingeblendet wird. 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 Blogbeitrag. Blogger möchten möglicherweise auch nur bestimmte Medien, z. B. Vimeo, YouTube-Video oder Audio, freigeben. Ein fantastisches Beispiel für diese Art der Integration findet sich in einem aktuellen Thema mit dem Namen Gridlocked:

Gridlocked verwendet einen benutzerdefinierten Post-Typ (in diesem Fall ist der Post-Typ ein Vimeo-Post), wodurch ein Vimeo schön in das Thema eingebettet wird. Einige der anderen Optionen, die das Thema unterstützt, sind YouTube-Videos, ein Audioplayer und Post-Avatare. Alle (mit ihrem jeweiligen benutzerdefinierten Post-Typ) sehen in voller Breite ohne Rand oder Polsterung am oberen Rand des Layouts gut aus.

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


Die Komponenten eines Themas

Ich bin mir sicher, dass Sie wahrscheinlich wissen, dass Designs aus vielen verschiedenen Dateien bestehen, von denen jede ihre jeweilige Rolle in der Anzeige oder Funktionalität eines Themas spielt. Schauen wir uns einige der häufigsten Dateien an, die WordPress standardmäßig erkennt, mit denen wir uns befassen werden. Die meisten Dateien sind allein durch ihren Namen selbsterklärend:

header.php

Normalerweise enthält diese Datei unser Thema bis , Es spielt auch die wp_head () - Funktion, die zu den wichtigsten Hooks in WordPress gehört.

sidebar.php

Eine optionale Datei, die von get_sidebar () aufgerufen wird. Sie können diese Datei für eine Seitenleiste, Navigation oder ähnliches verwenden. An dieser Stelle fügen Sie normalerweise auch den Code ein, um die Ausführung von Widgets zu ermöglichen, sofern Ihr Thema dies zulässt.

footer.php

Dies lässt sich leicht erraten. Hier wird das Thema zusammengefasst und Sie können einen zweiten Bereich für die Anzeige von Widgets registrieren. Natürlich können Sie Widgets an jeder beliebigen Stelle 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 Blogposts verwendet wird, aber Page.php im Code sehr ähnlich ist.

index.php

Wie Sie sich vermutlich vorstellen können, erledigt index die Arbeit eines Blogs. Anzeigen von Beiträgen, Suchergebnissen, Bereitstellen von Fehlernachrichten usw..

Functions.php

Die Funktionsdatei ist möglicherweise neu für Sie. Hier werden themenspezifische Funktionen gespeichert - meistens die Funktionen zum Registrieren von bereiten Bereichen.

comments.php

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

Ein Thema kann beliebig viele oder wenige Motivdateien verwenden. Dies sind jedoch die Dateien, die in fast jedem Thema am häufigsten vorkommen. Die Dateistruktur des Themas ist im Wesentlichen die Entscheidung des Theme-Entwicklers - es könnte zum Beispiel vimeo.php, youtube.php und audio.php sein, die ihre jeweiligen Post-Typen anzeigen, anstatt den gesamten Code in einer page.php- oder single-Seite zu haben .php.


Benutzerdefiniertes Design mit einer Optionsseite

Eine Dashboard-Optionsseite, die eine einfache Anpassung eines Themas ermöglicht, kann ein Dealer sein. Eine große Mehrheit der beliebten Designs verfügt über ein Optionsfeld, das es dem Blogger überflüssig macht, Code oder Grafikdateien zu ändern. Dies ist ein großes Verkaufsargument, da nicht jeder Blogger, der Ihr neues Design verwendet, weiß, dass # 000000 Schwarz bedeutet.

Optionsseiten können ein einfaches einseitiges Layout mit einigen Ankreuzfeldern, Textbereichen und Schiebereglern sein, oder sie können ein gesamtes Admin-Panel innerhalb des Dashboards mit mehreren Seiten sein, um viele verschiedene Elemente eines Designs 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 nicht möglich, alle Optionen aufzulisten, da jedes Thema sich vom letzten unterscheidet und verschiedene optionale Extras erfordert. Während für ein kleines persönliches Thema keine vollständige Optionsseite erforderlich ist, ist es wichtig zu wissen, dass die Mehrheit der Blogger nicht technisch versiert ist.


Nächste Woche

Nächste Woche springen wir direkt zu unseren Code-Editoren und beginnen mit der Arbeit an einem einfachen, persönlichen WordPress-Theme. Sie sind mehr als willkommen - ermutigt -, Ihr eigenes Layout zu verwenden, das Sie in ein WordPress-Theme konvertieren möchten. Machen Sie sich jedoch keine Sorgen, wenn Sie nicht eines haben, da ein einfaches Layout bereitgestellt wird.

Die Voraussetzungen für die kommende Woche sind grundlegendes HTML-Wissen, ein paar grundlegende PHP-Kenntnisse und idealerweise ein Verständnis von CSS. Sie müssen nichts über WordPress-Themes wissen, da wir von vorne anfangen!