Mittlerweile sollten die meisten Blogger, die WordPress verwenden, ein Upgrade auf die neueste Version von WordPress durchgeführt haben, die offiziell erhältlich ist Version 3.0.1.
Zusammen mit Aktualisierungen des Kern-Frameworks fügte das WordPress-Team bei der Veröffentlichung von Version 3.0 auch ein neues Standard-Theme hinzu, das das inzwischen veraltete ersetzte Kubrick. Das neue Thema heißt, wie die meisten von Ihnen wahrscheinlich wissen, „ Zwanzig Zehn.
Ich möchte hier nicht zu kitschig klingen, aber vom ersten Moment an, als ich Twenty Ten sah, habe ich mich darin verliebt. Aber ich spreche nicht über das visuelle Design des Themas (das ziemlich eintönig ist); Ich spreche vom Front-End-Code, den ich gesehen habe eine Reihe von Verbesserungen gegenüber dem vorherigen Standardthema.
In diesem Artikel werde ich einige dieser Verbesserungen besprechen, die meiner Meinung nach einer Prüfung und Nachahmung wert sind.
Und bedenken Sie, dass es sich hierbei nicht um eine Diskussion der Merkmale des Themas selbst handelt; Dies ist eine Diskussion darüber Struktur und Organisation von HTML und CSS und wie es ein hervorragendes Modell für Front-End-Entwickler darstellt.
Es ist HTML5-fähig
Das erste, was Ihnen auffällt, wenn Sie sich die Quelle des Twenty Ten-Themas ansehen, ist der vereinfachte Doctype, was bedeutet, dass es technisch HTML5 verwenden kann. Auch wenn das Theme keine der üblichen HTML5-Elemente enthält (wie und ), ist der HTML5-Doctype ein Schritt in die richtige Richtung.
Sie werden in der Quelle feststellen, dass es noch einige andere Markup-Vereinfachungen gibt: Die Deklaration der Zeichenkodierung ist vereinfacht und das HTML-Element verfügt nicht über das Attribut „xlmns“. Beide Verbesserungen basieren auf der HTML5-Spezifikation.
Auch wenn Sie auf Ihren Seiten keines der gängigen HTML5-Elemente verwenden, können Sie dies dennoch tun Machen Sie Ihre Seiten HTML5-fähig, indem Sie den neuen vereinfachten Doctype einbindenund einige der anderen bald veralteten Elemente entfernt und damit dem Beispiel der Entwickler von Twenty Ten gefolgt.
Richtige Verwendung des h1-Tags
Dies ist eine Verbesserung, die leichter zu erkennen ist, wenn man sich die tatsächlichen PHP-Dateien ansieht, die das Markup erstellen, und die eine deutliche Verbesserung gegenüber Kubrick in Bezug auf Best Practices darstellt SEO, Semantik und Barrierefreiheit.
In Kubrick ist auf jeder Seite die Überschrift der obersten Ebene (
) der Titel der Website. Dies ist für die Startseite in Ordnung, nicht jedoch für Sekundärseiten. Daher ist auf einer einzelnen Artikelseite in Kubrick der Titel des Artikels mit dem Element
markiert. Laut Roger Johansson von 456 Berea Street Dies ist keine bewährte Vorgehensweise.
Schauen Sie sich den Screenshot unten an, der zeigt, wie das neue Twenty Ten-Theme dieses Problem behebt:
Der PHP-Code in header.php ändert das Markup je nachdem, welche Seite angezeigt wird. Wenn die Homepage angezeigt wird, wird das Element, das den Seitentitel umgibt, zum
-Element. Auf jeder anderen Seite wird der Titel in ein
eingeschlossen. Im letzteren Fall ermöglicht dies, dass das
-Element auf sekundären Seiten aussagekräftiger ist, was zur Suchmaschinenoptimierung und allgemeinen Zugänglichkeit beiträgt.
Eric Meyers CSS-Reset enthalten
Die Entwickler des Twenty-Ten-Themes haben den Nutzen eines CSS-Resets erkannt und auch eine Variation davon hinzugefügt Eric Meyers CSS-Reset oben in der CSS-Datei des Themes, in dem Meyer in einem Kommentar erwähnt wird:
Ein Reset kann viel bewirken Erzielung browserübergreifend kompatibler CSS-Layouts. Daher ist die Einbeziehung des Resets hier keine Überraschung und eine weitere Technik der Twenty Ten-Entwickler, die es wert ist, nachgeahmt zu werden.
Abschließende Tags werden kommentiert, um IDs und Klassen anzugeben
Bei einem meiner vorherigen Jobs habe ich an viel geerbtem Code gearbeitet, und einige der vorherigen Entwickler hatten darunter zu leiden divitisDies macht es schwierig, Elemente im Markup neu anzuordnen oder als Ziel festzulegen. Deshalb habe ich in neuen Projekten damit begonnen, Kommentare am Ende von
-Elementen hinzuzufügen, um sicherzustellen, dass bei zukünftigen Wartungsarbeiten jeder leicht erkennen kann, welches Element wo endete. Dies war besonders wichtig für tief verschachtelte Sätze von
-Tags.
Die Entwickler von Twenty Ten haben erkannte den Wert von Kommentaren Um die Namen von
-Elementen zu identifizieren, haben sie etwas Ähnliches getan, nur dass sie noch einen Schritt weiter gegangen sind:
Ihre Kommentare enthalten nicht nur die ID oder den Klassennamen des von ihnen identifizierten Elements, sondern geben auch an, ob es sich bei dem Namen um eine Klasse oder ID handelt oder nicht. Der erste Kommentar im Screenshot oben bezieht sich auf ein Element mit der ID „primary“ (gekennzeichnet durch „#primary“) und dem Klassennamen „widget-area“ (gekennzeichnet durch „.widget-area“).
Während meine eigene Konvention darin besteht, das Element einfach unabhängig von Klasse oder ID zu benennen, haben sie ein einzelnes Zeichen (den Hash oder Punkt) eingefügt, um das Attribut zu identifizieren, auf dem der Name basiert. Dies ist eine gute Praxis, die einfach zu befolgen ist um die Klarheit und Wartbarkeit Ihres Markups zu verbessern.
CSS wird klarer kommentiert
Um schließlich beim Thema Kommentieren zu bleiben, bemerkte ich im Vergleich zu Kubrick eine deutliche Verbesserung in der Art und Weise, wie CSS in Twenty Ten kommentiert und organisiert wird. Dies ist zweifellos etwas, was viele Front-End-Entwickler seit einigen Jahren versuchen, und es ist gut zu sehen, dass die Twenty Ten-Entwickler diesem Beispiel folgen. Unten sehen Sie einen Screenshot, der das zeigt eindeutige Kommentare in der CSS-Datei von Twenty Ten, sodass sie beim Durchsuchen der Stile sehr leicht zu finden sind:
Im Gegensatz dazu waren die Kommentare bei Kubrick beim Scannen der Datei nicht so leicht zu erkennen:
Abschluss
Es versteht sich, dass einer der besten Wege, ein besserer Programmierer zu werden, darin besteht Studieren Sie die Arbeit anderer. Und dieser Rat gilt sicherlich für Frontend-Code, der auf nahezu jeder Website leicht zugänglich ist.
Die fünf Dinge, die ich in diesem Artikel besprochen habe, sind nicht unbedingt etwas Neues in der Frontend-Entwicklung, aber ich denke, dass es einzigartig ist, diese Praktiken in einem einzelnen Projekt implementiert zu sehen, und das gilt auch für die Entwickler von Twenty Ten (die es offensichtlich sind). Matt Thomas und Unternehmen) haben in dieser Hinsicht großartige Arbeit geleistet und einige hervorragende Techniken und Beispiele bereitgestellt, die es wert sind, nachgeahmt zu werden.
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, verfasst. Louis rennt Beeindruckende Webs wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Du kannst Folgen Sie Louis auf Twitter oder nehmen Sie über seine Website Kontakt mit ihm auf.
Ist Ihnen sonst noch etwas am Code des neuen Standard-WordPress-Themes aufgefallen, das eine Diskussion wert ist? Bitte teilen Sie Ihre Kommentare unten mit.
Eric Meyers CSS-Reset enthalten
Die Entwickler des Twenty-Ten-Themes haben den Nutzen eines CSS-Resets erkannt und auch eine Variation davon hinzugefügt Eric Meyers CSS-Reset oben in der CSS-Datei des Themes, in dem Meyer in einem Kommentar erwähnt wird:
Ein Reset kann viel bewirken Erzielung browserübergreifend kompatibler CSS-Layouts. Daher ist die Einbeziehung des Resets hier keine Überraschung und eine weitere Technik der Twenty Ten-Entwickler, die es wert ist, nachgeahmt zu werden.
Abschließende Tags werden kommentiert, um IDs und Klassen anzugeben
Bei einem meiner vorherigen Jobs habe ich an viel geerbtem Code gearbeitet, und einige der vorherigen Entwickler hatten darunter zu leiden divitisDies macht es schwierig, Elemente im Markup neu anzuordnen oder als Ziel festzulegen. Deshalb habe ich in neuen Projekten damit begonnen, Kommentare am Ende von
Die Entwickler von Twenty Ten haben erkannte den Wert von Kommentaren Um die Namen von
Ihre Kommentare enthalten nicht nur die ID oder den Klassennamen des von ihnen identifizierten Elements, sondern geben auch an, ob es sich bei dem Namen um eine Klasse oder ID handelt oder nicht. Der erste Kommentar im Screenshot oben bezieht sich auf ein Element mit der ID „primary“ (gekennzeichnet durch „#primary“) und dem Klassennamen „widget-area“ (gekennzeichnet durch „.widget-area“).
Während meine eigene Konvention darin besteht, das Element einfach unabhängig von Klasse oder ID zu benennen, haben sie ein einzelnes Zeichen (den Hash oder Punkt) eingefügt, um das Attribut zu identifizieren, auf dem der Name basiert. Dies ist eine gute Praxis, die einfach zu befolgen ist um die Klarheit und Wartbarkeit Ihres Markups zu verbessern.
CSS wird klarer kommentiert
Um schließlich beim Thema Kommentieren zu bleiben, bemerkte ich im Vergleich zu Kubrick eine deutliche Verbesserung in der Art und Weise, wie CSS in Twenty Ten kommentiert und organisiert wird. Dies ist zweifellos etwas, was viele Front-End-Entwickler seit einigen Jahren versuchen, und es ist gut zu sehen, dass die Twenty Ten-Entwickler diesem Beispiel folgen. Unten sehen Sie einen Screenshot, der das zeigt eindeutige Kommentare in der CSS-Datei von Twenty Ten, sodass sie beim Durchsuchen der Stile sehr leicht zu finden sind:
Im Gegensatz dazu waren die Kommentare bei Kubrick beim Scannen der Datei nicht so leicht zu erkennen:
Abschluss
Es versteht sich, dass einer der besten Wege, ein besserer Programmierer zu werden, darin besteht Studieren Sie die Arbeit anderer. Und dieser Rat gilt sicherlich für Frontend-Code, der auf nahezu jeder Website leicht zugänglich ist.
Die fünf Dinge, die ich in diesem Artikel besprochen habe, sind nicht unbedingt etwas Neues in der Frontend-Entwicklung, aber ich denke, dass es einzigartig ist, diese Praktiken in einem einzelnen Projekt implementiert zu sehen, und das gilt auch für die Entwickler von Twenty Ten (die es offensichtlich sind). Matt Thomas und Unternehmen) haben in dieser Hinsicht großartige Arbeit geleistet und einige hervorragende Techniken und Beispiele bereitgestellt, die es wert sind, nachgeahmt zu werden.
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, verfasst. Louis rennt Beeindruckende Webs wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Du kannst Folgen Sie Louis auf Twitter oder nehmen Sie über seine Website Kontakt mit ihm auf.
Ist Ihnen sonst noch etwas am Code des neuen Standard-WordPress-Themes aufgefallen, das eine Diskussion wert ist? Bitte teilen Sie Ihre Kommentare unten mit.
