Das perfekte WordPress-Theme erstellen Wie man gut codiert

Im vorherigen Teil dieser Serie; Wir haben verschiedene WordPress-APIs durchgearbeitet, über die wir etwas lernen sollten, sprachen darüber, wie wichtig es ist, ein Thema übersetzbar zu machen (oder noch besser, wenn es bereits in andere Sprachen übersetzt wird), und verstanden das Konzept der Lizenzthemen und der Verwendung lizenzierter Produkte mit den Themen.

In diesem Artikel konzentrieren wir uns auf den Code: Wir werden sehen, wie Sie mit WordPress-Codierstandards codieren, unseren Code richtig kommentieren und das Thema validieren und testen.

WordPress-Codierungsstandards

Ja, ich weiß, Sie haben Ihren eigenen bevorzugten Codierstil: Sie möchten eine große Funktion mit einer einzelnen Codezeile komprimieren, Sie mögen keinen Whitespace - Ah, ich war einmal einfach so.

Aber wenn Sie sich für andere Menschen entwickeln und buchstäblich Verkaufen Sie Ihren Code, Sie müssen Ihren Code verständlich machen. Und obwohl Sie denken, dass Ihr Code "klar genug" ist, gibt es universelle Standards für das Codieren, um jedem Code mit dem gleichen Stil und allen ernsthaften Themenmarktplätzen und Downloadcentern (von WordPress.org bis ThemeForest) zu helfen. benötigen Sie müssen mit Standards kodieren.

Für die Entwicklung von WordPress-Themes sind vier Hauptprogrammiersprachen und Markup-Sprachen erforderlich: HTML, CSS, JavaScript und natürlich PHP. Lassen Sie uns einen Blick darauf werfen:

HTML-Standards

Es gibt relativ einfache Regeln zum Schreiben von standardkonformem HTML-Code:

Bestätigen Sie Ihren Code mit W3C. Immer. Wir kommen später dazu.
Seien Sie vorsichtig mit selbstschließenden Elementen: Sie müssen das Element mit einem Leerzeichen, einem Schrägstrich und dem Zeichen "Größer als" abschließen.
Wenn Sie Attributwerte eingeben, geben Sie sie alle in Kleinbuchstaben ein - es sei denn, dies ist für Menschen gedacht.
Wickeln Sie Ihre Attributwerte immer in Anführungszeichen ein. Sowohl einfache als auch doppelte Anführungszeichen sind zulässig.
Die Einrückung muss logisch und lesbar sein. In HTML gemischter PHP-Code sollte keine Ausnahme sein.

Weitere Informationen finden Sie auf der Seite WordPress HTML-Standards unter Make WordPress.

CSS-Standards

Die Liste ist etwas länger, aber es gibt auch einfache Regeln für die korrekte CSS-Codierung:

Eigenschaften sollten mit Registerkarten eingerückt sein.
Sie können Selektoren gruppieren, aber jeder Selektor muss zur besseren Lesbarkeit eine eigene Zeile haben.
Nennen Sie alle Ihre Klasse und Ich würde Selektoren mit Kleinbuchstaben und vergessen Sie nicht, Wörter mit Bindestrich zu trennen.
Verwenden Sie lesbare Selektoren. .c6 ist kein guter Name - nennen Sie es .sechste spalte!
Kein Überqualifizieren. div.column ist sinnlos, wenn Sie nur verwenden können .Säule.
Eigenschaften und ihre Werte sollten außer in Schriftnamen und herstellerspezifischen Eigenschaften ebenfalls in Kleinbuchstaben angegeben werden.
Die Reihenfolge der Eigenschaften muss "Anzeige, Positionierung, Boxmodell, Farben, Typografie und andere" sein..
Sie sollten auch die Herstellerpräfixe am längsten bestellen (-Webkit-) bis zum kürzesten (kein Präfix).
Behalten Sie Ihre Medienabfragen am unteren Rand Ihres Stylesheets.
Kommentieren Sie Ihren CSS-Code, während Sie in PHP kommentieren. Dazu später mehr.

Weitere Informationen finden Sie auf der Seite WordPress CSS-Standards unter Make WordPress.

JavaScript-Standards

Da heutzutage JavaScript für viele WordPress-Themes von entscheidender Bedeutung ist, benötigen wir auch Standards und Regeln dafür:

Zahnspangen können nicht Öffnen und Schließen in derselben Zeile.
Verwenden Sie einfache Anführungszeichen gegenüber doppelten Anführungszeichen, es sei denn, eine Zeichenfolge enthält einfache Anführungszeichen.
Sie können Whitespace nach Belieben in Ihrem Code verwenden. Verwenden Sie Whitespace jedoch nicht für Leerzeilen. Und vergessen Sie nicht, dass Sie zur besseren Lesbarkeit Whitespace verwenden - nicht zum Spaß.
Benennen Sie Ihre Funktionen und Variablen mit camelCase, not_with_underscores. Konstruktoren sollten in sein TitleCase.
Sie können mehrere Variablen in einer einzigen Zeile deklarieren. Wenn Sie jedoch Werte zuweisen möchten, benötigen Sie separate Zeilen.
Das neues Array () und neues Objekt () Notationen sind "no-no" s. Verwenden Sie Abkürzungsäquivalente ([] und ) stattdessen.
Behandeln Sie Bedingungen und Schleifen sehr sorgfältig - sie sind normalerweise am einfachsten zu misslesen. Die Verwendung von geschweiften Klammern und Leerzeichen ist der Schlüssel dazu.
Wenn Sie jQuery verwenden werden; Definieren Sie eine anonyme Funktion und übergeben Sie jQuery als Argument, bevor Sie etwas anderes tun. Überprüfen Sie das Beispiel, um sich zu vergewissern.

Die Seite WordPress-JavaScript-Standards bei Make WordPress enthält weitere Informationen. Setzen Sie ein Lesezeichen auf diese Seite und verwenden Sie sie.

PHP-Standards:

Dies ist der schwierigere Teil. Es gibt unzählige Regeln, die zu beachten sind:

Regeln der Namensgebung
Einfache und doppelte Anführungszeichen
Whitespace-Nutzung
Reguläre Ausdrücke
"Yoda-Bedingungen"
Spezielle Gast-Stern-SQL- und Formatierungsdatenbankabfragen

Wenn Sie nicht wissen, was sie sind, ist es am besten, wenn Sie sich leicht bewegen.

Es gibt jedoch zwei großartige Ressourcen, um es zu lernen:

WordPress PHP-Standardseite bei WordPress erstellen
Die Wptuts + -Serie heißt "The WordPress Coding Standards" von Tom McFarlin

Kommentiere deinen Code richtig

Damit andere Entwickler verstehen können, wie Sie Ihr Design erstellt haben, müssen Sie Ihren Theme-Code klar und lesbar machen - und dazu müssen Sie Ihren Code kommentieren.

Die beste Vorgehensweise für PHP ist die Verwendung von PHPDoc, dem Dokumentationsstil von phpDocumentor. Es wird häufig von WordPress-Entwicklern verwendet und wird auf der Seite mit den PHP-Dokumentationsstandards von Make WordPress empfohlen. Es bietet einen sauberen Dokumentationsstil für Ihren PHP-Code.

Was CSS anbelangt, empfiehlt die WordPress CSS-Standardseite von Make WordPress, PHPDoc zusammen mit einigen anderen Vorschlägen zu verwenden.

Was Ihren HTML- und JavaScript-Code anbelangt, so scheint es, dass es keinen empfohlenen oder erforderlichen Weg gibt, Ihren Code zu kommentieren. Dies bedeutet jedoch nicht, dass Sie nichts tun müssen: Versuchen Sie, Ihren Code so klar wie möglich zu halten und anzugeben kleine Informationen durch Kommentieren überall, wo Sie es für nötig halten.

Validieren und Testen des Designs

Das Thema funktioniert zwar wie eine hübsche Website in Ihrem Kopf, aber hoffentlich gibt es Hunderte (vielleicht Tausende) von Menschen, die Ihr Thema verwenden und sicher sein können, dass sie versuchen, Websites zu erstellen, an die Sie unmöglich denken können von. Darüber hinaus gibt es Anforderungen an Themenmarktplätze und Themenverzeichnisse, damit Sie Ihr Thema zusammenführen können.

Deshalb müssen Sie Ihr Design testen und Ihren Code validieren. Ich habe drei Ideen dafür:

Validieren Sie Ihr HTML & CSS mit den W3C-Validatoren

Als erstes müssen Sie Ihren Code mit den Validierungsdiensten des W3C validieren. Sowohl der HTML Markup Validator als auch der CSS Validator-Service werden seit Jahren verwendet und entwickelt und sind die besten verfügbaren Validierungsdienste.

Nachdem Sie die beiden folgenden Schritte ausgeführt haben, überprüfen Sie einfach die Demoseiten mit diesen beiden Diensten, um sicherzustellen, dass keine Fehler oder Warnungen angezeigt werden.

Verwenden Sie das "Developer" -Plugin, um Ihr Design zu korrigieren

Entwickler ist ein kostenloses Plugin, das von Automattic entwickelt wurde, WordPress-Entwicklern bei der Entwicklung helfen. Es ist eigentlich nur ein Plugin-Installer: Der Hauptzweck des Plugins besteht darin, die wesentlichen Plugins für Ihre Entwicklungsumgebung bereitzustellen.

Der Entwickler schlägt 16 verschiedene Plugins vor. Während einige von ihnen den Entwicklungsprozess erheblich vereinfachen (z. B. Benutzerwechsel und Designtestlauf), helfen einige von ihnen beim Debuggen Ihres Designs (z. B. abgelehnte Protokolle protokollieren und Designprüfung)..

Diejenigen, die ich am nützlichsten finde, sind Theme Check, Theme Test Drive und Debug Bar, aber alle 16 Plugins bieten großartige Funktionen. Ich schlage vor, dass Sie alle installieren, um das Problem mit Ihrem Thema zu testen.

Testen Sie Ihr Thema mit Testdaten

Sie können das Thema nicht einfach kodieren und sagen, dass es fertig ist - Sie müssen es mit etwas Inhalt testen. Sie können Ihren eigenen Inhalt erstellen, sollten Sie jedoch mit einigen "Testdaten" testen:

Verwenden Sie die Beispieldaten von WordPress. Diese Beispieldaten enthalten einige der am häufigsten verwendeten Inhaltstypen und helfen Ihnen dabei, die Mängel Ihres Themas im Hinblick auf Inhalte zu erkennen, die Sie nicht berücksichtigt haben.
Verwenden Sie mehr erschöpfend Testdaten. WPTest.io ist eine kleine Website mit einem unheimlich Sammlung von WordPress-Beispielinhalten. Ich mache keine Witze: Von Menüpunkten bis zu 10 Ebenen und Einbettungen im Amazon Store sind dies die ausführlichsten Testdaten, die ich je gesehen habe. Ich habe noch nie ein Thema mit diesem Beispielinhalt getestet, aber wenn es Ihnen gelingt, Ihr Thema mit diesen Daten zusammenarbeiten zu lassen, müssen Sie sich wahrscheinlich keine Sorgen darüber machen, dass Ihr Thema in jedem Szenario stumpf aussieht.

Der einzige Nachteil dieser beiden Tests besteht darin, dass Sie Ihre Inhalte nicht mit Shortcodes oder mit der Art des spezifischen Inhalts testen können, den Sie bei der Entwicklung des Themas berücksichtigt haben. Ich schlage vor, dass Sie das Design mindestens mit den Beispieldaten von WordPress testen und dann Ihren eigenen Inhalt erstellen. Schließlich benötigen Sie bei der Erstellung der Demo-Website für Ihr Design soliden Inhalt.

Einpacken

In diesem Artikel; Wir haben den Prozess des korrekten Kodierens und Kommentierens mit einigen Standards durchlaufen und dann gesehen, wie wir unseren Code validieren und unser Thema testen können. Im nächsten Teil der Serie werden wir uns einige ansehen schlechte Praktiken.

Bleiben Sie dran und vergessen Sie nicht, den Artikel zu teilen, wenn es Ihnen gefallen hat!

Code